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;