refactor pan/zoom behaviour, implement pan on scroll #359, edit interaction example

example/src/Interaction/index.js

@@ -26,6 +26,7 @@ const InteractionFlow = () => {
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
   const [zoomOnScroll, setZoomOnScroll] = useState(false);
+  const [panOnScroll, setPanOnScroll] = useState(true);
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
   const [paneMoveable, setPaneMoveable] = useState(true);
   const [captureZoomClick, setCaptureZoomClick] = useState(false);
@@ -39,6 +40,7 @@ const InteractionFlow = () => {
       nodesConnectable={isConnectable}
       nodesDraggable={isDraggable}
       zoomOnScroll={zoomOnScroll}
+      panOnScroll={panOnScroll}
       zoomOnDoubleClick={zoomOnDoubleClick}
       onConnect={onConnect}
       onElementClick={captureElementClick ? onElementClick : undefined}
@@ -55,7 +57,7 @@ const InteractionFlow = () => {
       <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
         <div>
           <label htmlFor="draggable">
-            draggable
+            nodesDraggable
             <input
               id="draggable"
               type="checkbox"
@@ -67,7 +69,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="connectable">
-            connectable
+            nodesConnectable
             <input
               id="connectable"
               type="checkbox"
@@ -79,7 +81,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="selectable">
-            selectable
+            elementsSelectable
             <input
               id="selectable"
               type="checkbox"
@@ -91,7 +93,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="zoomonscroll">
-            zoom on scroll
+            zoomOnScroll
             <input
               id="zoomonscroll"
               type="checkbox"
@@ -101,9 +103,21 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="panonscroll">
+            panOnScroll
+            <input
+              id="panonscroll"
+              type="checkbox"
+              checked={panOnScroll}
+              onChange={(event) => setPanOnScroll(event.target.checked)}
+              className="react-flow__panonscroll"
+            />
+          </label>
+        </div>
         <div>
           <label htmlFor="zoomondbl">
-            zoom on double click
+            zoomOnDoubleClick
             <input
               id="zoomondbl"
               type="checkbox"
@@ -115,7 +129,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="panemoveable">
-            pane moveable
+            paneMoveable
             <input
               id="panemoveable"
               type="checkbox"
@@ -127,7 +141,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="capturezoompaneclick">
-            capture zoom pane click
+            capture onPaneClick
             <input
               id="capturezoompaneclick"
               type="checkbox"
@@ -139,7 +153,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="capturezoompanescroll">
-            capture zoom pane scroll
+            capture onPaneScroll
             <input
               id="capturezoompanescroll"
               type="checkbox"
@@ -151,7 +165,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="captureelementclick">
-            capture element click
+            capture onElementClick
             <input
               id="captureelementclick"
               type="checkbox"