diff --git a/README.md b/README.md index b37e7445..4984e237 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ const BasicFlow = () => ( - `snapGrid`: [x, y] array - default: `[16, 16]` - `onlyRenderVisibleNodes`: default: `true` - `isInteractive`: default: `true`. If the graph is not interactive you can't drag any nodes +- `selectNodesOnDrag`: default: `true` ## Styling diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js index 622167d4..87cbf227 100644 --- a/example/src/Horizontal/index.js +++ b/example/src/Horizontal/index.js @@ -28,6 +28,7 @@ const HorizontalFlow = () => { onElementsRemove={onElementsRemove} onConnect={onConnect} onLoad={onLoad} + selectNodesOnDrag={false} /> ); } diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 7d310ff9..bf938cf1 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -15,6 +15,7 @@ interface OnDragStartParams { id: ElementId; type: string; data: any; + selectNodesOnDrag: boolean; setOffset: (pos: XYPosition) => void; transform: Transform; position: XYPosition; @@ -27,6 +28,7 @@ const onStart = ({ id, type, data, + selectNodesOnDrag, setOffset, transform, position, @@ -42,12 +44,15 @@ const onStart = ({ const offsetY = scaledClient.y - position.y - transform[1]; const node = { id, type, position, data }; - store.dispatch.setSelectedElements({ id, type } as Node); setOffset({ x: offsetX, y: offsetY }); if (onNodeDragStart) { onNodeDragStart(node); } + + if (selectNodesOnDrag) { + store.dispatch.setSelectedElements({ id, type } as Node); + } }; interface OnDragParams { @@ -83,19 +88,21 @@ interface OnDragStopParams { type: string; position: XYPosition; data: any; + selectNodesOnDrag: boolean; onNodeDragStop?: (node: Node) => void; onClick?: (node: Node) => void; } const onStop = ({ - onNodeDragStop, - onClick, - isDragging, - setDragging, id, type, position, data, + isDragging, + setDragging, + selectNodesOnDrag, + onNodeDragStop, + onClick, }: OnDragStopParams): void => { const node = { id, @@ -104,8 +111,14 @@ const onStop = ({ data, } as Node; - if (!isDragging && onClick) { - return onClick(node); + if (!isDragging) { + if (!selectNodesOnDrag) { + store.dispatch.setSelectedElements({ id, type } as Node); + } + + if (onClick) { + return onClick(node); + } } setDragging(false); @@ -130,6 +143,7 @@ export default (NodeComponent: ComponentType) => { onNodeDragStop, style, isInteractive, + selectNodesOnDrag, sourcePosition, targetPosition, }: WrapNodeProps) => { @@ -177,10 +191,22 @@ export default (NodeComponent: ComponentType) => { return ( - onStart({ evt: evt as MouseEvent, onNodeDragStart, id, type, data, setOffset, transform, position }) + onStart({ + evt: evt as MouseEvent, + selectNodesOnDrag, + onNodeDragStart, + id, + type, + data, + setOffset, + transform, + position, + }) } onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform })} - onStop={() => onStop({ onNodeDragStop, onClick, isDragging, setDragging, id, type, position, data })} + onStop={() => + onStop({ onNodeDragStop, selectNodesOnDrag, onClick, isDragging, setDragging, id, type, position, data }) + } scale={transform[2]} disabled={!isInteractive} cancel=".nodrag" diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 2b31d85f..54e8450b 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -33,6 +33,7 @@ export interface GraphViewProps { snapGrid: [number, number]; onlyRenderVisibleNodes: boolean; isInteractive: boolean; + selectNodesOnDrag: boolean; } const GraphView = memo( @@ -55,6 +56,7 @@ const GraphView = memo( snapGrid, onlyRenderVisibleNodes, isInteractive, + selectNodesOnDrag, }: GraphViewProps) => { const zoomPane = useRef(null); const rendererNode = useRef(null); @@ -132,6 +134,7 @@ const GraphView = memo( onNodeDragStop={onNodeDragStop} onNodeDragStart={onNodeDragStart} onlyRenderVisibleNodes={onlyRenderVisibleNodes} + selectNodesOnDrag={selectNodesOnDrag} /> void; onNodeDragStart?: (node: Node) => void; onNodeDragStop?: (node: Node) => void; @@ -44,6 +45,7 @@ function renderNode( isInteractive={isInteractive} sourcePosition={node.sourcePosition} targetPosition={node.targetPosition} + selectNodesOnDrag={props.selectNodesOnDrag} /> ); } diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 5d46899a..c3c1d99a 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -44,6 +44,7 @@ export interface ReactFlowProps extends Omit, 'on snapGrid: [number, number]; onlyRenderVisibleNodes: boolean; isInteractive: boolean; + selectNodesOnDrag: boolean; } const ReactFlow = ({ @@ -69,6 +70,7 @@ const ReactFlow = ({ snapGrid, onlyRenderVisibleNodes, isInteractive, + selectNodesOnDrag, }: ReactFlowProps) => { const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []); const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []); @@ -95,6 +97,7 @@ const ReactFlow = ({ snapGrid={snapGrid} onlyRenderVisibleNodes={onlyRenderVisibleNodes} isInteractive={isInteractive} + selectNodesOnDrag={selectNodesOnDrag} /> {onSelectionChange && } {children} @@ -124,6 +127,7 @@ ReactFlow.defaultProps = { snapGrid: [16, 16], onlyRenderVisibleNodes: true, isInteractive: true, + selectNodesOnDrag: true, }; export default ReactFlow; diff --git a/src/types/index.ts b/src/types/index.ts index a368ab77..b3cb1584 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -123,6 +123,7 @@ export interface WrapNodeProps { xPos: number; yPos: number; isInteractive: boolean; + selectNodesOnDrag: boolean; onClick?: (node: Node) => void; onNodeDragStart?: (node: Node) => void; onNodeDragStop?: (node: Node) => void;