search

daybrush / infinite-viewer

Infinite Viewer is Document Viewer Component with infinite scrolling.
https://daybrush.com/infinite-viewer/
MIT License
296 stars 33 forks source link

Get SVG coordinates inside infinite-viewer #65

Closed JDMCreator closed 12 months ago

JDMCreator commented 12 months ago

First, thank you for this very useful library. My problem is the following: Whenever we need to convert screen coordinates to SVG coordinates, we use something like this:

const eleSvg = document.querySelector('svg');
eleSvg.addEventListener('mousemove', ({clientX, clientY}) => {
  let point = eleSvg.createSVGPoint();
  point.x = clientX; // 253
  point.y = clientY; // 260
  point = point.matrixTransform(eleSvg.getScreenCTM().inverse());
  // point = (924, 575)
})

However, it does not seem to work when the SVG element is inside infinite-viewer. Adjusting the mouse coordinates with .getScrollLeft() and .getScrollTop() doesn't help. How can I convert mouse coordinates to coordinates of a SVG element inside infinite-viewer?

JDMCreator commented 12 months ago

It seems this bug only occurs on Firefox and is caused by this unresolved bug. As InfiniteViewer uses transform on a parent element, the values generated by .getScreenCTM() will be incorrect on Firefox. There is no solution for this problem, but I fixed this issue on my side by not using the viewBox attribute of <svg>.