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

src/container/FlowRenderer/index.tsx

@@ -36,7 +36,9 @@ const FlowRenderer = ({
   onMoveStart,
   onMoveEnd,
   selectionKeyCode,
+  elementsSelectable,
   zoomOnScroll,
+  panOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
   defaultPosition,
@@ -61,7 +63,9 @@ const FlowRenderer = ({
     onMoveStart,
     onMoveEnd,
     selectionKeyPressed,
+    elementsSelectable,
     zoomOnScroll,
+    panOnScroll,
     zoomOnDoubleClick,
     paneMoveable,
     defaultPosition,

src/container/GraphView/index.tsx

@@ -70,6 +70,7 @@ export interface GraphViewProps {
   arrowHeadColor: string;
   markerEndId?: string;
   zoomOnScroll?: boolean;
+  panOnScroll?: boolean;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
 }
@@ -118,6 +119,7 @@ const GraphView = ({
   arrowHeadColor,
   markerEndId,
   zoomOnScroll,
+  panOnScroll,
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
@@ -245,11 +247,13 @@ const GraphView = ({
       onElementsRemove={onElementsRemove}
       deleteKeyCode={deleteKeyCode}
       selectionKeyCode={selectionKeyCode}
+      elementsSelectable={elementsSelectable}
       onMove={onMove}
       onMoveStart={onMoveStart}
       onMoveEnd={onMoveEnd}
       zoomOnScroll={zoomOnScroll}
       zoomOnDoubleClick={zoomOnDoubleClick}
+      panOnScroll={panOnScroll}
       paneMoveable={paneMoveable}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}

src/container/ReactFlow/index.tsx

@@ -98,6 +98,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   arrowHeadColor?: string;
   markerEndId?: string;
   zoomOnScroll?: boolean;
+  panOnScroll?: boolean;
   zoomOnDoubleClick?: boolean;
 }
 
@@ -147,6 +148,7 @@ const ReactFlow = ({
   arrowHeadColor = '#b1b1b7',
   markerEndId,
   zoomOnScroll = true,
+  panOnScroll = false,
   zoomOnDoubleClick = true,
   paneMoveable = true,
   onPaneClick,
@@ -203,6 +205,7 @@ const ReactFlow = ({
           markerEndId={markerEndId}
           zoomOnScroll={zoomOnScroll}
           zoomOnDoubleClick={zoomOnDoubleClick}
+          panOnScroll={panOnScroll}
           paneMoveable={paneMoveable}
           onPaneClick={onPaneClick}
           onPaneScroll={onPaneScroll}