feat(graph): more adjustable interaction closes #329, closes #291

src/container/GraphView/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react';
-import classnames from 'classnames';
 import { ResizeObserver } from 'resize-observer';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -46,7 +45,9 @@ export interface GraphViewProps {
   snapToGrid: boolean;
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
-  isInteractive: boolean;
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  elementsSelectable: boolean;
   selectNodesOnDrag: boolean;
   minZoom: number;
   maxZoom: number;
@@ -76,7 +77,9 @@ const GraphView = memo(
     snapToGrid,
     snapGrid,
     onlyRenderVisibleNodes,
-    isInteractive,
+    nodesDraggable,
+    nodesConnectable,
+    elementsSelectable,
     selectNodesOnDrag,
     minZoom,
     maxZoom,
@@ -92,14 +95,15 @@ const GraphView = memo(
     const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
     const setOnConnect = useStoreActions((a) => a.setOnConnect);
     const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
-    const setInteractive = useStoreActions((actions) => actions.setInteractive);
+    const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
+    const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
+    const setElementsSelectable = useStoreActions((actions) => actions.setElementsSelectable);
     const updateTransform = useStoreActions((actions) => actions.updateTransform);
     const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
     const fitView = useStoreActions((actions) => actions.fitView);
     const zoom = useStoreActions((actions) => actions.zoom);
 
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
-    const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
 
     const onZoomPaneClick = () => setNodesSelection({ isActive: false });
 
@@ -169,8 +173,16 @@ const GraphView = memo(
     }, [snapToGrid]);
 
     useEffect(() => {
-      setInteractive(isInteractive);
-    }, [isInteractive]);
+      setNodesDraggable(nodesDraggable);
+    }, [nodesDraggable]);
+
+    useEffect(() => {
+      setNodesConnectable(nodesConnectable);
+    }, [nodesConnectable]);
+
+    useEffect(() => {
+      setElementsSelectable(elementsSelectable);
+    }, [elementsSelectable]);
 
     useEffect(() => {
       setMinMaxZoom({ minZoom, maxZoom });
@@ -180,7 +192,7 @@ const GraphView = memo(
     useElementUpdater(elements);
 
     return (
-      <div className={rendererClasses} ref={rendererNode}>
+      <div className="react-flow__renderer" ref={rendererNode}>
         <NodeRenderer
           nodeTypes={nodeTypes}
           onElementClick={onElementClick}
@@ -201,7 +213,7 @@ const GraphView = memo(
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
         />
-        <UserSelection selectionKeyPressed={selectionKeyPressed} isInteractive={isInteractive} />
+        <UserSelection selectionKeyPressed={selectionKeyPressed} />
         {nodesSelectionActive && <NodesSelection />}
         <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
       </div>