From 2a0274b9a34c7063cd4d93300dd3c069dd47e58f Mon Sep 17 00:00:00 2001 From: Nate Amack Date: Fri, 31 Jul 2020 10:45:40 -0600 Subject: [PATCH 1/2] feat(props): add onZoomPaneClick --- README.md | 1 + example/src/Interaction/index.js | 15 +++++++++++++++ src/container/GraphView/index.tsx | 9 +++++++-- src/container/ReactFlow/index.tsx | 3 +++ 4 files changed, 26 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4d8ae2e9..ee0ee812 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,7 @@ const BasicFlow = () => ; - `onMoveStart()`: called when user starts panning or zooming - `onMoveEnd()`: called when user ends panning or zooming - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements +- `onZoomPaneClick()`: called when user clicks directly on the canvas #### Interaction - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option. diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js index 99027f31..54dd1882 100644 --- a/example/src/Interaction/index.js +++ b/example/src/Interaction/index.js @@ -14,6 +14,7 @@ const initialElements = [ const onNodeDragStart = (node) => console.log('drag start', node); const onNodeDragStop = (node) => console.log('drag stop', node); const onElementClick = (element) => console.log('click', element); +const onZoomPaneClick = () => console.log('onZoomPaneClick'); const InteractionFlow = () => { const [elements, setElements] = useState(initialElements); @@ -25,6 +26,7 @@ const InteractionFlow = () => { const [zoomOnScroll, setZoomOnScroll] = useState(false); const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false); const [paneMoveable, setPaneMoveable] = useState(true); + const [captureZoomClick, setCaptureZoomClick] = useState(false); return ( { onNodeDragStart={onNodeDragStart} onNodeDragStop={onNodeDragStop} paneMoveable={paneMoveable} + onZoomPaneClick={captureZoomClick ? onZoomPaneClick : undefined} > @@ -116,6 +119,18 @@ const InteractionFlow = () => { /> +
+ +
); diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 2b509c31..d252556d 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -39,6 +39,7 @@ export interface GraphViewProps { onMove?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; + onZoomPaneClick?: () => void; selectionKeyCode: number; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; @@ -100,6 +101,7 @@ const GraphView = ({ zoomOnScroll, zoomOnDoubleClick, paneMoveable, + onZoomPaneClick, }: GraphViewProps) => { const zoomPane = useRef(null); const rendererNode = useRef(null); @@ -121,7 +123,10 @@ const GraphView = ({ const selectionKeyPressed = useKeyPress(selectionKeyCode); - const onZoomPaneClick = () => setNodesSelection({ isActive: false }); + const handleZoomPaneClick = () => { + onZoomPaneClick?.(); + setNodesSelection({ isActive: false }); + }; const updateDimensions = () => { if (!rendererNode.current) { @@ -254,7 +259,7 @@ const GraphView = ({ /> {nodesSelectionActive && } -
+
); }; diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 55bdf12d..8ff5384c 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -47,6 +47,7 @@ export interface ReactFlowProps extends Omit, 'on onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; onSelectionChange?: (elements: Elements | null) => void; + onZoomPaneClick?: () => void; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; connectionLineType: ConnectionLineType; @@ -112,6 +113,7 @@ const ReactFlow = ({ zoomOnScroll, zoomOnDoubleClick, paneMoveable, + onZoomPaneClick, }: ReactFlowProps) => { const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []); const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []); @@ -157,6 +159,7 @@ const ReactFlow = ({ zoomOnScroll={zoomOnScroll} zoomOnDoubleClick={zoomOnDoubleClick} paneMoveable={paneMoveable} + onZoomPaneClick={onZoomPaneClick} /> {onSelectionChange && } {children} From a095715e5f27fa59c3606f49c73efd1747381766 Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 1 Aug 2020 12:13:51 +0200 Subject: [PATCH 2/2] refactor(paneClick): rename onZoomPaneClick tp onPaneClick --- README.md | 2 +- example/src/Interaction/index.js | 4 ++-- src/container/GraphView/index.tsx | 10 +++++----- src/container/ReactFlow/index.tsx | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index ee0ee812..e2ca976a 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ const BasicFlow = () => ; - `onMoveStart()`: called when user starts panning or zooming - `onMoveEnd()`: called when user ends panning or zooming - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements -- `onZoomPaneClick()`: called when user clicks directly on the canvas +- `onPaneClick()`: called when user clicks directly on the canvas #### Interaction - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option. diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js index 54dd1882..96d8d734 100644 --- a/example/src/Interaction/index.js +++ b/example/src/Interaction/index.js @@ -14,7 +14,7 @@ const initialElements = [ const onNodeDragStart = (node) => console.log('drag start', node); const onNodeDragStop = (node) => console.log('drag stop', node); const onElementClick = (element) => console.log('click', element); -const onZoomPaneClick = () => console.log('onZoomPaneClick'); +const onPaneClick = () => console.log('onPaneClick'); const InteractionFlow = () => { const [elements, setElements] = useState(initialElements); @@ -41,7 +41,7 @@ const InteractionFlow = () => { onNodeDragStart={onNodeDragStart} onNodeDragStop={onNodeDragStop} paneMoveable={paneMoveable} - onZoomPaneClick={captureZoomClick ? onZoomPaneClick : undefined} + onPaneClick={captureZoomClick ? onPaneClick : undefined} > diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index d252556d..1d598c71 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -39,7 +39,7 @@ export interface GraphViewProps { onMove?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; - onZoomPaneClick?: () => void; + onPaneClick?: () => void; selectionKeyCode: number; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; @@ -101,7 +101,7 @@ const GraphView = ({ zoomOnScroll, zoomOnDoubleClick, paneMoveable, - onZoomPaneClick, + onPaneClick, }: GraphViewProps) => { const zoomPane = useRef(null); const rendererNode = useRef(null); @@ -123,8 +123,8 @@ const GraphView = ({ const selectionKeyPressed = useKeyPress(selectionKeyCode); - const handleZoomPaneClick = () => { - onZoomPaneClick?.(); + const onZoomPaneClick = () => { + onPaneClick?.(); setNodesSelection({ isActive: false }); }; @@ -259,7 +259,7 @@ const GraphView = ({ /> {nodesSelectionActive && } -
+
); }; diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 8ff5384c..44882aa7 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -47,7 +47,7 @@ export interface ReactFlowProps extends Omit, 'on onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; onSelectionChange?: (elements: Elements | null) => void; - onZoomPaneClick?: () => void; + onPaneClick?: () => void; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; connectionLineType: ConnectionLineType; @@ -113,7 +113,7 @@ const ReactFlow = ({ zoomOnScroll, zoomOnDoubleClick, paneMoveable, - onZoomPaneClick, + onPaneClick, }: ReactFlowProps) => { const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []); const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []); @@ -159,7 +159,7 @@ const ReactFlow = ({ zoomOnScroll={zoomOnScroll} zoomOnDoubleClick={zoomOnDoubleClick} paneMoveable={paneMoveable} - onZoomPaneClick={onZoomPaneClick} + onPaneClick={onPaneClick} /> {onSelectionChange && } {children}