From 5049379e3b2100d8a0513b0ce3586293dc7c882f Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 25 May 2020 12:14:47 +0200 Subject: [PATCH] feat(nodes): add onDragStart handler #241 --- README.md | 1 + example/src/Overview/index.js | 2 ++ src/components/Nodes/wrapNode.tsx | 33 +++++++++++++++++----------- src/container/GraphView/index.tsx | 3 +++ src/container/NodeRenderer/index.tsx | 2 ++ src/container/ReactFlow/index.tsx | 4 ++++ src/types/index.ts | 1 + 7 files changed, 33 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6ced9125..c05652eb 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ const BasicFlow = () => ( - `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)* - `onElementClick`: element click handler - `onElementsRemove`: element remove handler +- `onNodeDragStart`: node drag start handler - `onNodeDragStop`: node drag stop handler - `onConnect`: connect handler - `onLoad`: editor load handler diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index 097bd54c..a33817de 100644 --- a/example/src/Overview/index.js +++ b/example/src/Overview/index.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, MiniMap, Controls } from 'react-flow-renderer'; +const onNodeDragStart = node => console.log('drag start', node); const onNodeDragStop = node => console.log('drag stop', node); const onElementClick = element => console.log('click', element); const onLoad = (graph) => { @@ -50,6 +51,7 @@ const OverviewFlow = () => { onElementClick={onElementClick} onElementsRemove={onElementsRemove} onConnect={onConnect} + onNodeDragStart={onNodeDragStart} onNodeDragStop={onNodeDragStop} style={{ width: '100%', height: '100%' }} onLoad={onLoad} diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 3522fa56..0c8b1376 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -12,7 +12,7 @@ const getMouseEvent = (evt: MouseEvent | TouchEvent) => const onStart = ( evt: MouseEvent | TouchEvent, - onClick: (node: Node) => void, + onDragStart: (node: Node) => void, id: ElementId, type: string, data: any, @@ -26,13 +26,14 @@ const onStart = ( x: startEvt.clientX * (1 / transform[2]), y: startEvt.clientY * (1 / transform[2]), }; + const offsetX = scaledClient.x - position.x - transform[0]; 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 }); - onClick(node); + onDragStart(node); }; const onDrag = ( @@ -60,7 +61,8 @@ const onDrag = ( }; const onStop = ( - onNodeDragStop: (node: Node) => void, + onDragStop: (node: Node) => void, + onClick: (node: Node) => void, isDragging: boolean, setDragging: (isDragging: boolean) => void, id: ElementId, @@ -68,15 +70,19 @@ const onStop = ( position: XYPosition, data: any ): void => { - if (isDragging) { - setDragging(false); - onNodeDragStop({ - id, - type, - position, - data, - } as Node); + const node = { + id, + type, + position, + data, + } as Node; + + if (!isDragging) { + return onClick(node); } + + setDragging(false); + onDragStop(node); }; export default (NodeComponent: ComponentType) => { @@ -90,6 +96,7 @@ export default (NodeComponent: ComponentType) => { yPos, selected, onClick, + onNodeDragStart, onNodeDragStop, style, isInteractive, @@ -139,9 +146,9 @@ export default (NodeComponent: ComponentType) => { return ( onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)} + onStart={(evt) => onStart(evt as MouseEvent, onNodeDragStart, id, type, data, setOffset, transform, position)} onDrag={(evt) => onDrag(evt as MouseEvent, setDragging, id, offset, transform)} - onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)} + onStop={() => onStop(onNodeDragStop, 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 2789ccaf..cb22c7f1 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -19,6 +19,7 @@ export interface GraphViewProps { elements: Elements; onElementClick: (element: Node | Edge) => void; onElementsRemove: (elements: Elements) => void; + onNodeDragStart: (node: Node) => void; onNodeDragStop: (node: Node) => void; onConnect: (connection: Connection | Edge) => void; onLoad: OnLoadFunc; @@ -46,6 +47,7 @@ const GraphView = memo( onMove, onLoad, onElementClick, + onNodeDragStart, onNodeDragStop, connectionLineType, connectionLineStyle, @@ -140,6 +142,7 @@ const GraphView = memo( nodeTypes={nodeTypes} onElementClick={onElementClick} onNodeDragStop={onNodeDragStop} + onNodeDragStart={onNodeDragStart} onlyRenderVisibleNodes={onlyRenderVisibleNodes} /> void; + onNodeDragStart: (node: Node) => void; onNodeDragStop: (node: Node) => void; onlyRenderVisibleNodes?: boolean; } @@ -35,6 +36,7 @@ function renderNode( xPos={node.__rg.position.x} yPos={node.__rg.position.y} onClick={props.onElementClick} + onNodeDragStart={props.onNodeDragStart} onNodeDragStop={props.onNodeDragStop} transform={transform} selected={isSelected} diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index f9f70697..ca35e6ac 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -27,6 +27,7 @@ export interface ReactFlowProps extends Omit, 'on elements: Elements; onElementClick: (element: Node | Edge) => void; onElementsRemove: (elements: Elements) => void; + onNodeDragStart: (node: Node) => void; onNodeDragStop: (node: Node) => void; onConnect: (connection: Edge | Connection) => void; onLoad: OnLoadFunc; @@ -59,6 +60,7 @@ const ReactFlow = ({ onMove, onElementsRemove, onConnect, + onNodeDragStart, onNodeDragStop, connectionLineType, connectionLineStyle, @@ -83,6 +85,7 @@ const ReactFlow = ({ onLoad={onLoad} onMove={onMove} onElementClick={onElementClick} + onNodeDragStart={onNodeDragStart} onNodeDragStop={onNodeDragStop} nodeTypes={nodeTypesParsed} edgeTypes={edgeTypesParsed} @@ -113,6 +116,7 @@ ReactFlow.displayName = 'ReactFlow'; ReactFlow.defaultProps = { onElementClick: () => {}, onElementsRemove: () => {}, + onNodeDragStart: () => {}, onNodeDragStop: () => {}, onConnect: () => {}, onLoad: () => {}, diff --git a/src/types/index.ts b/src/types/index.ts index 289121de..4773d6fa 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -123,6 +123,7 @@ export interface WrapNodeProps { yPos: number; isInteractive: boolean; onClick: (node: Node) => void | undefined; + onNodeDragStart: (node: Node) => void; onNodeDragStop: (node: Node) => void; style?: CSSProperties; sourcePosition?: Position;