feat(node): add draggable, connectable and selectable options

README.md

@@ -92,9 +92,9 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `onSelectionChange(elements: Elements)`: called user selects one or multiple elements
 
 #### Interaction
-- `nodesDraggable`: default: `true`
+- `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option.
-- `nodesConnectable`: default: `true`
+- `nodesConnectable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `connectable` node option.
-- `elementsSelectable`: default: `true`
+- `elementsSelectable`: default: `true`. This applies to all elements. You can also change the behavior of a specific node with the `selectable` node option.
 - `zoomOnScroll`: default: `true`
 - `zoomOnDoubleClick`: default: `true`
 - `selectNodesOnDrag`: default: `true`
@@ -170,6 +170,9 @@ Node example: `{ id: '1', type: 'input', data: { label: 'Node 1' }, position: {
 - `targetPosition`: 'left' | 'right' | 'top' | 'bottom' handle position - default: 'top'
 - `sourcePosition`: 'left' | 'right' | 'top' | 'bottom' handle position - default: 'bottom'
 - `isHidden`: if `true`, the node will not be rendered
+- `draggable`: if option is not set, the node is draggable (overwrites generel `nodesDraggable` option)
+- `connectable`: if option is not set, the node is connectable (overwrites generel `nodesConnectable` option)
+- `selectable`: if option is not set, the node is selectable (overwrites generel `elementsSelectable` option)
 
 ## Node Types & Custom Nodes
 

src/container/NodeRenderer/index.tsx

@@ -34,6 +34,10 @@ function renderNode(
 
   const isSelected = selectedElements ? selectedElements.some(({ id }) => id === node.id) : false;
 
+  const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+  const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+  const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+
   return (
     <NodeComponent
       key={node.id}
@@ -53,9 +57,9 @@ function renderNode(
       selected={isSelected}
       style={node.style}
       className={node.className}
-      isDraggable={nodesDraggable}
+      isDraggable={isDraggable}
-      isSelectable={elementsSelectable}
+      isSelectable={isSelectable}
-      isConnectable={nodesConnectable}
+      isConnectable={isConnectable}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       selectNodesOnDrag={props.selectNodesOnDrag}

src/hooks/useElementUpdater.ts

@@ -30,6 +30,11 @@ const useElementUpdater = (elements: Elements): void => {
 
         const className = existingNode.className === propNode.className ? existingNode.className : propNode.className;
         const isHidden = existingNode.isHidden === propNode.isHidden ? existingNode.isHidden : propNode.isHidden;
+        const draggable = existingNode.draggable === propNode.draggable ? existingNode.draggable : propNode.draggable;
+        const selectable =
+          existingNode.selectable === propNode.selectable ? existingNode.selectable : propNode.selectable;
+        const connectable =
+          existingNode.connectable === propNode.connectable ? existingNode.connectable : propNode.connectable;
 
         const positionChanged =
           existingNode.position.x !== propNode.position.x || existingNode.position.y !== propNode.position.y;
@@ -59,6 +64,18 @@ const useElementUpdater = (elements: Elements): void => {
           nodeProps.isHidden = isHidden;
         }
 
+        if (typeof draggable !== 'undefined') {
+          nodeProps.draggable = draggable;
+        }
+
+        if (typeof selectable !== 'undefined') {
+          nodeProps.selectable = selectable;
+        }
+
+        if (typeof connectable !== 'undefined') {
+          nodeProps.connectable = connectable;
+        }
+
         return nodeProps;
       }
 

src/types/index.ts

@@ -41,6 +41,9 @@ export interface Node {
   targetPosition?: Position;
   sourcePosition?: Position;
   isHidden?: boolean;
+  draggable?: boolean;
+  selectable?: boolean;
+  connectable?: boolean;
 }
 
 export enum ArrowHeadType {
@@ -117,8 +120,8 @@ export interface NodeComponentProps {
   id: ElementId;
   type: string;
   data: any;
-  isConnectable: boolean;
   selected?: boolean;
+  isConnectable: boolean;
   transform?: Transform;
   xPos?: number;
   yPos?: number;