agentcooper / react-pdf-highlighter

Set of React components for PDF annotation
https://agentcooper.github.io/react-pdf-highlighter/
MIT License
1.04k stars 407 forks source link

selection coordinate error #250

Closed huangxok closed 2 weeks ago

huangxok commented 1 year ago

selection coordinate error

the position of code:

MouseSelection -> componentDidMount

let containerBoundingRect: DOMRect | null = null;

const containerCoords = (pageX: number, pageY: number) => {
      if (!containerBoundingRect) {
          containerBoundingRect = container.getBoundingClientRect();
      }
      return {
        x: pageX - containerBoundingRect.left + container.scrollLeft,
        y:
          pageY -
          containerBoundingRect.top +
          container.scrollTop -
          window.scrollY,
      };
};

container Is an adjustable height and width of the container(fit with 100%),we can change it in a number of ways。 for instance, window.resize event can change viewport(indirectly) or a Resize component can change the height and width of container.

Once the pdf is loaded successfully for the first time, if the container's width and height are not changed, the mouse press will get the exact mouse coordinates. But if you change the width and height of the container, you get the mouse back as the cached containerBoundingRect. I don't know why caching the DOMRect of the container here; calculating the coordinates shouldn't be getting the current DOMRect.

changed code, delele comments code:

let containerBoundingRect: DOMRect | null = null;

const containerCoords = (pageX: number, pageY: number) => {
      //if (!containerBoundingRect) {
      containerBoundingRect = container.getBoundingClientRect();
      //}
      return {
        x: pageX - containerBoundingRect.left + container.scrollLeft,
        y:
          pageY -
          containerBoundingRect.top +
          container.scrollTop -
          window.scrollY,
      };
};

if fix the bug, could sync it in version(package.json version) 5.6.0 or 5.4.0?

huangxok commented 1 year ago

there is a PR https://github.com/agentcooper/react-pdf-highlighter/pull/225/files

agentcooper commented 2 weeks ago

Fixed with https://github.com/agentcooper/react-pdf-highlighter/commit/e02cc1d371ce53f2e3a2ac49d46c148c39ce74bd.