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

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}
-      isSelectable={elementsSelectable}
-      isConnectable={nodesConnectable}
+      isDraggable={isDraggable}
+      isSelectable={isSelectable}
+      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;