Highlighting by rectangle bounds and not text

[gla5001]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I've tried the recipe for highlighting text here. It works fairly well, but it does not work with multiple lines. Lets say I know the bounds of a rectangle on a specified page (or I know multiple bounds), ie

bottom: 649.4013
left: 261.64355
right: 340.28177
top: 661.1968

Is there a way to highlight by these bounds instead of matching text?

Steps to reproduce

n/a

Expected behavior

n/a

Actual behavior

n/a

Additional information

This isnt a bug, just a question

Environment

• Browser (if applicable):
• React-PDF version:
• React version:
• Webpack version (if applicable):

[wojtekmaj]

You can use canvasRef prop to draw whatever you want on a given canvas. Here's an example with watermark added dynamically, but should be able to figure out how to draw anything else.

https://codesandbox.io/s/react-pdf-watermark-5wylx?file=/src/index.jsx

[gla5001]

@wojtekmaj thanks so much! i'll try it out

[jiangxiaoqiang]

did you highligh success?
@gla5001

[zeitderforschung]

Yes, but with an ugly hack. To force re-rendering I change the scale property of the Page by scale+=1e-15.

[jiangxiaoqiang]

how did you know the scale should be scale+=1e-15? I am using this way to render but the highlight area seem did not the right area. Am it seems hard to make the hightlight disappear, the canvas did not have a undo operation.

[zeitderforschung]

You could use some trigger like this:

  const [scale, setScale] = useState(1);

  useLayoutEffect(() => {
    // Force re-rendering by adding a tiny amount to the scale when highlights change
    setScale(scale => scale += 1e-15);
  }, [highlights]);

  <Page
    canvasRef={canvasRef}
    onRenderSuccess={() => {
      renderHighlights();
    }}
    scale={scale}
  />

[zeitderforschung]

@wojtekmaj Thank you for the example. Is there a way to trigger re-rendering, for example when the bounds have changed?