diff --git a/README.md b/README.md index 9e4b7ffe..7c82ae8f 100644 --- a/README.md +++ b/README.md @@ -92,9 +92,9 @@ const BasicFlow = () => ; - `onSelectionChange(elements: Elements)`: called user selects one or multiple elements #### Interaction -- `nodesDraggable`: default: `true` -- `nodesConnectable`: default: `true` -- `elementsSelectable`: 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`. This applies to all nodes. You can also change the behavior of a specific node with the `connectable` node option. +- `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 diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 34921f93..4f6504aa 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/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 ( { 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; } diff --git a/src/types/index.ts b/src/types/index.ts index 8b9e3e83..ecf91b8c 100644 --- a/src/types/index.ts +++ b/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;