Panning support

[ASchwad]

Hey there,

In the repo code, the Canvas prop pannable is activated by default. But for me this does not work in any of the storybook stories. My definition of pannable: Grab the canvas at some spot, where there is no node or edge and drag the mouse from there to move the Canvas into the drag direction.

Do I have a wrong definition or is there a special key that should be pressed to pan the graph?
(e.g. for Zoom it is CTRL + Mousewheel)

Thanks!
Alex

[amcdnl]

Panning is done via scrollbars. The panning you are referring to is a "infinite" panning experience typically used for things like maps where the "canvas" is huge. This is the same type of pattern used by most editors type ui's today.

[amcdnl]

Thats awesome! You should make a storybook example if possible to show it!

[himanshu-1034]

@ASchwad I am also looking for something like this. could you share some code sandbox for reference?

[himanshu-1034]

@amcdnl

[ASchwad]

@himanshu-1034 I added an example back then to the docs. You can find a description here and a Storybook example here. I hope this helps!

[himanshu-1034]

LATEST UPDATE
I was able to add panning using react-zoom-pan-pinch library
Thanks @ASchwad for the doc link. I was missing some styling to make it work.
Latest codesandbox link if anyone else needs help with panning..
FIXED CODESANDBOX - https://codesandbox.io/s/reaflow-with-external-panning-usdhdk