woutervh-/react-pan-and-zoom-hoc

Doesn't work with SVGs

amcdnl opened this issue · 4 comments

amcdnl commented

I'm trying to use this with SVGs and it doesn't seem to work. Here is a demo:

https://codesandbox.io/s/mq47r2nwop

One culprit I see is this check for HTML element: https://github.com/woutervh-/react-pan-and-zoom-hoc/blob/master/src/panAndZoomHoc.tsx#L73 which would exclude SVG elements.

I'm trying to use it in this project reaviz that I built and replace my custom code with this lib: https://github.com/jask-oss/reaviz/blob/master/src/common/ZoomPan/ChartZoomPan.tsx

woutervh- commented

Hi @amcdnl

I will try to make this work with SVG elements as well. Thanks for the suggestion ;)

Btw your project reaviz seems really cool. I would like to use it as well in some of my projects!

amcdnl commented

Thanks! Let me know if there is anyway I can help!

woutervh- commented

Hi @amcdnl

I've made a few changes to how the event handlers are set up. However, I'm not sure this will help.

A few observations I've made during this:

  • SVG and G elements are actually instances of HTMLElement (you can try it in your browser, in the console type document.createElement('svg') instanceof HTMLElement). So the problem is not with the instanceof HTMLElement part.
  • I thought it might be due to React, and the event handlers were being added via React. I've changed it to use native events now.
  • Doing some more searching, I've found this StackOverflow question: https://stackoverflow.com/questions/39706869/add-onclick-event-to-a-group-element-svg-with-react
    It seems like the G element can't reliably be used for click handlers. I'm not sure how you can best handle that situation. Maybe put the events on the SVG element?

Let me know your thoughts.
Thanks!

amcdnl commented

So after lots of research, I think pan/zooming for SVGs needs to be handled dramatically different than w/ normal dom. Here is what I ended up doing: https://github.com/jask-oss/reaviz/blob/master/src/common/Gestures/Pan.tsx