diff --git a/README.md b/README.md index 873aafbb..2c70c8fb 100644 --- a/README.md +++ b/README.md @@ -245,6 +245,7 @@ All props are detailed below. | `canDeleteSelected` | `func` | `false` | takes the place of `canDeleteNode` and `canDeleteEdge`. It accepts a `SelectionT` type as a parameter. It is called before a node or edge is deleted. The function should return a boolean. | `canCreateEdge` | `func` | `false` | Called before an edge is created.| | `canSwapEdge` | `func` | `false` | Called before an edge 'target' is swapped. +| `canMoveNode` | `func` | `false` | Called before a node is moved (e.g. by being dragged). | | `afterRenderEdge` | `func` | `false` | Called after an edge is rendered. | | `renderNode` | `func` | `false` | Called to render node geometry. | | `renderNodeText` | `func` | `false` | Called to render the node text | diff --git a/src/components/graph-view-props.js b/src/components/graph-view-props.js index 779a92e6..cc266e8f 100644 --- a/src/components/graph-view-props.js +++ b/src/components/graph-view-props.js @@ -71,6 +71,7 @@ export type IGraphViewProps = { hoveredNode: INode | null, swapEdge: IEdge ) => boolean, + canMoveNode?: (node: INode) => boolean, onBackgroundClick?: (x: number, y: number, event: any) => void, onCopySelected?: () => void, onCreateEdge?: (sourceNode: INode, targetNode: INode) => void, diff --git a/src/components/graph-view.js b/src/components/graph-view.js index 40bdbdac..bdb9858f 100644 --- a/src/components/graph-view.js +++ b/src/components/graph-view.js @@ -79,6 +79,7 @@ class GraphView extends React.Component { canCreateEdge: (startNode?: INode, endNode?: INode) => true, canSwapEdge: () => true, canDeleteSelected: () => true, + canMoveNode: (node: INode) => true, allowMultiselect: true, edgeArrowSize: 8, gridSpacing: 36, @@ -862,7 +863,14 @@ class GraphView extends React.Component { } handleNodeMove = (position: IPoint, nodeId: string, shiftKey: boolean) => { - const { canCreateEdge, readOnly, selected, nodeKey, onSelect } = this.props; + const { + canCreateEdge, + canMoveNode, + readOnly, + selected, + nodeKey, + onSelect, + } = this.props; const { draggingEdge, nodesMap } = this.state; const nodeMapNode: INodeMapNode | null = this.getNodeById(nodeId); @@ -872,6 +880,10 @@ class GraphView extends React.Component { const node = nodeMapNode.node; + if (canMoveNode && !canMoveNode(node)) { + return; + } + if (!shiftKey && !draggingEdge) { const originalX = node.x || 0; const originalY = node.y || 0;