refactor(props): rename paneMoveable to panOnDrag

example/package-lock.json

@@ -27,7 +27,7 @@
     },
     "..": {
       "name": "react-flow-renderer",
-      "version": "10.0.0-next.36",
+      "version": "10.0.0-next.37",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.16.7",

example/src/Interaction/index.tsx

@@ -46,7 +46,7 @@ const InteractionFlow = () => {
   const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
   const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
-  const [paneMoveable, setPaneMoveable] = useState<boolean>(true);
+  const [panOnDrag, setPanOnDrag] = useState<boolean>(true);
   const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
   const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
   const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);
@@ -70,7 +70,7 @@ const InteractionFlow = () => {
       onEdgeClick={captureElementClick ? onEdgeClick : undefined}
       onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
-      paneMoveable={paneMoveable}
+      panOnDrag={panOnDrag}
       onPaneClick={captureZoomClick ? onPaneClick : undefined}
       onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
       onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
@@ -180,14 +180,14 @@ const InteractionFlow = () => {
           </label>
         </div>
         <div>
-          <label htmlFor="panemoveable">
+          <label htmlFor="panondrag">
-            paneMoveable
+            panOnDrag
             <input
-              id="panemoveable"
+              id="panondrag"
               type="checkbox"
-              checked={paneMoveable}
+              checked={panOnDrag}
-              onChange={(event) => setPaneMoveable(event.target.checked)}
+              onChange={(event) => setPanOnDrag(event.target.checked)}
-              className="react-flow__panemoveable"
+              className="react-flow__panondrag"
             />
           </label>
         </div>

src/container/FlowRenderer/index.tsx

@@ -50,7 +50,7 @@ const FlowRenderer = ({
   panOnScrollSpeed,
   panOnScrollMode,
   zoomOnDoubleClick,
-  paneMoveable,
+  panOnDrag,
   defaultPosition,
   defaultZoom,
   preventScrolling,
@@ -93,7 +93,7 @@ const FlowRenderer = ({
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       zoomOnDoubleClick={zoomOnDoubleClick}
-      paneMoveable={paneMoveable}
+      panOnDrag={panOnDrag}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}
       zoomActivationKeyCode={zoomActivationKeyCode}

src/container/GraphView/index.tsx

@@ -66,7 +66,7 @@ const GraphView = ({
   panOnScrollSpeed,
   panOnScrollMode,
   zoomOnDoubleClick,
-  paneMoveable,
+  panOnDrag,
   onPaneClick,
   onPaneScroll,
   onPaneContextMenu,
@@ -103,7 +103,7 @@ const GraphView = ({
       panOnScroll={panOnScroll}
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
-      paneMoveable={paneMoveable}
+      panOnDrag={panOnDrag}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}
       onSelectionDragStart={onSelectionDragStart}

src/container/ReactFlow/index.tsx

@@ -96,7 +96,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       panOnScrollSpeed = 0.5,
       panOnScrollMode = PanOnScrollMode.Free,
       zoomOnDoubleClick = true,
-      paneMoveable = true,
+      panOnDrag = true,
       onPaneClick,
       onPaneScroll,
       onPaneContextMenu,
@@ -167,7 +167,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             panOnScroll={panOnScroll}
             panOnScrollSpeed={panOnScrollSpeed}
             panOnScrollMode={panOnScrollMode}
-            paneMoveable={paneMoveable}
+            panOnDrag={panOnDrag}
             onPaneClick={onPaneClick}
             onPaneScroll={onPaneScroll}
             onPaneContextMenu={onPaneContextMenu}

src/container/ZoomPane/index.tsx

@@ -18,7 +18,7 @@ interface ZoomPaneProps {
   panOnScrollSpeed?: number;
   panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
-  paneMoveable?: boolean;
+  panOnDrag?: boolean;
   defaultPosition?: [number, number];
   defaultZoom?: number;
   onMove?: (viewport?: Viewport) => void;
@@ -60,7 +60,7 @@ const ZoomPane = ({
   zoomOnDoubleClick = true,
   selectionKeyPressed,
   elementsSelectable,
-  paneMoveable = true,
+  panOnDrag = true,
   defaultPosition = [0, 0],
   defaultZoom = 1,
   zoomActivationKeyCode,
@@ -216,7 +216,7 @@ const ZoomPane = ({
         const pinchZoom = zoomOnPinch && event.ctrlKey;
 
         // if all interactions are disabled, we prevent all zoom events
-        if (!paneMoveable && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
+        if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
           return false;
         }
 
@@ -250,7 +250,7 @@ const ZoomPane = ({
         }
 
         // if the pane is not movable, we prevent dragging it with mousestart or touchstart
-        if (!paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) {
+        if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) {
           return false;
         }
 
@@ -264,7 +264,7 @@ const ZoomPane = ({
     zoomOnPinch,
     panOnScroll,
     zoomOnDoubleClick,
-    paneMoveable,
+    panOnDrag,
     selectionKeyPressed,
     elementsSelectable,
     zoomActivationKeyPressed,

src/types/component-props.ts

@@ -79,7 +79,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   nodesConnectable?: boolean;
   elementsSelectable?: boolean;
   selectNodesOnDrag?: boolean;
-  paneMoveable?: boolean;
+  panOnDrag?: boolean;
   minZoom?: number;
   maxZoom?: number;
   defaultZoom?: number;