[x] The PR Template has been filled out (see below)
[x] Had a beer/coffee because you are awesome
-- Ground Up Coffee in East LA sells a nice six-pack of cold brews which is great for hotel holiday living.
What?
Enabled panning and pinch zooming as an additive to solely dragging+scrolling. These motions are more common in charting and design engines such as Lucidchart, Figma, and Whimsical.
Why?
On large, expansive diagrams the click+drag experience is quite cumbersome.
When one works across multiple applications, attempting to "two-finger pan" in the default react-diagrams config can cause unwanted and disastrous zooming.
How?
Modifying the existing ZoomCanvasAction to make the non-pinch gesture adjust the offset in the same manner as DragCanvasState.
Removing the scrollDelta % 1 !== 0 conditional from the new CanvasAction to facilitate the user optionally holding ctrl and scrolling to control zoom levels, which is needed for accessibility and consistency with other applications.
Checklist
yarn run pretty
What?
Enabled panning and pinch zooming as an additive to solely dragging+scrolling. These motions are more common in charting and design engines such as Lucidchart, Figma, and Whimsical.
Why?
How?
ZoomCanvasAction
to make the non-pinch gesture adjust the offset in the same manner asDragCanvasState
.scrollDelta % 1 !== 0
conditional from the newCanvasAction
to facilitate the user optionally holdingctrl
and scrolling to control zoom levels, which is needed for accessibility and consistency with other applications.Feel good image: