From ccacd436597af0b5a45a06336dc69e0643f319fc Mon Sep 17 00:00:00 2001 From: moklick Date: Sat, 22 Aug 2020 17:24:50 +0200 Subject: [PATCH 01/12] feat(selection): add drag handlers closes #444 --- README.md | 3 ++ example/src/Overview/index.js | 6 ++++ src/components/NodesSelection/index.tsx | 37 +++++++++++++++++++++++-- src/container/GraphView/index.tsx | 14 +++++++++- src/container/ReactFlow/index.tsx | 9 ++++++ 5 files changed, 65 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 99977a9c..0025d701 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,9 @@ 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 +- `onSelectionDragStart(evt: MouseEvent, nodes: Node[])`: called when user starts to drag a selection +- `onSelectionDrag(evt: MouseEvent, nodes: Node[])`: called when user drags a selection +- `onSelectionDragStop(evt: MouseEvent, nodes: Node[])`: called when user stops to drag a selection - `onPaneClick(event: MouseEvent)`: called when user clicks directly on the canvas - `onPaneContextMenu(event: MouseEvent)`: called when user does a right-click on the canvas diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index b08ede0a..045d5684 100644 --- a/example/src/Overview/index.js +++ b/example/src/Overview/index.js @@ -4,6 +4,9 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNo const onNodeDragStart = (event, node) => console.log('drag start', node); const onNodeDragStop = (event, node) => console.log('drag stop', node); +const onSelectionDrag = (event, nodes) => console.log('selection drag', nodes); +const onSelectionDragStart = (event, nodes) => console.log('selection drag start', nodes); +const onSelectionDragStop = (event, nodes) => console.log('selection drag stop', nodes); const onElementClick = (event, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element); const onSelectionChange = (elements) => console.log('selection change', elements); const onLoad = (reactFlowInstance) => { @@ -120,6 +123,9 @@ const OverviewFlow = () => { onConnect={onConnect} onNodeDragStart={onNodeDragStart} onNodeDragStop={onNodeDragStop} + onSelectionDragStart={onSelectionDragStart} + onSelectionDrag={onSelectionDrag} + onSelectionDragStop={onSelectionDragStop} onSelectionChange={onSelectionChange} onMoveEnd={onMoveEnd} onLoad={onLoad} diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 48db9bf3..1aaa2053 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -3,7 +3,7 @@ * made a selectio with on or several nodes */ -import React, { useState } from 'react'; +import React, { useState, MouseEvent } from 'react'; import ReactDraggable from 'react-draggable'; import { useStoreState, useStoreActions } from '../../store/hooks'; @@ -27,7 +27,13 @@ function getStartPositions(nodes: Node[]): StartPositions { }, startPositions); } -export default () => { +export interface NodesSelectionProps { + onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void; +} + +export default ({ onSelectionDragStart, onSelectionDrag, onSelectionDragStop }: NodesSelectionProps) => { const [offset, setOffset] = useState({ x: 0, y: 0 }); const [startPositions, setStartPositions] = useState({}); @@ -61,6 +67,10 @@ export default () => { const nextStartPositions = getStartPositions(selectedNodes); + if (onSelectionDragStart) { + onSelectionDragStart(event, selectedNodes); + } + if (nextStartPositions) { setOffset({ x: offsetX, y: offsetY }); setStartPositions(nextStartPositions); @@ -74,7 +84,17 @@ export default () => { }; if (selectedElements) { - selectedElements.filter(isNode).forEach((node) => { + const selectedNodes = selectedElements ? selectedElements.filter(isNode) : []; + + if (onSelectionDrag) { + const selectionNodes = selectedNodes.map( + (selectedNode) => nodes.find((node) => node.id === selectedNode.id)! as Node + ); + + onSelectionDrag(event, selectionNodes); + } + + selectedNodes.forEach((node) => { const pos: XYPosition = { x: startPositions[node.id].x + scaledClient.x - selectedNodesBbox.x - offset.x - tX, y: startPositions[node.id].y + scaledClient.y - selectedNodesBbox.y - offset.y - tY, @@ -85,6 +105,16 @@ export default () => { } }; + const onStop = (event: MouseEvent) => { + if (selectedElements && onSelectionDragStop) { + const selectedNodes = selectedElements + ? selectedElements.filter(isNode).map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)!) + : []; + + onSelectionDragStop(event, selectedNodes); + } + }; + return (
{ grid={grid} onStart={(event) => onStart(event as MouseEvent)} onDrag={(event) => onDrag(event as MouseEvent)} + onStop={(event) => onStop(event as MouseEvent)} >
void; onPaneClick?: (event: MouseEvent) => void; onPaneContextMenu?: (event: MouseEvent) => void; + onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void; selectionKeyCode: number; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; @@ -84,6 +87,9 @@ const GraphView = ({ onNodeContextMenu, onNodeDragStart, onNodeDragStop, + onSelectionDragStart, + onSelectionDrag, + onSelectionDragStop, connectionLineType, connectionLineStyle, selectionKeyCode, @@ -262,7 +268,13 @@ const GraphView = ({ markerEndId={markerEndId} /> - {nodesSelectionActive && } + {nodesSelectionActive && ( + + )}
, 'on onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; onSelectionChange?: (elements: Elements | null) => void; + onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void; + onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void; onPaneClick?: (event: MouseEvent) => void; onPaneContextMenu?: (event: MouseEvent) => void; nodeTypes: NodeTypesType; @@ -103,6 +106,9 @@ const ReactFlow = ({ onNodeDragStart, onNodeDragStop, onSelectionChange, + onSelectionDragStart, + onSelectionDrag, + onSelectionDragStop, connectionLineType, connectionLineStyle, deleteKeyCode, @@ -175,6 +181,9 @@ const ReactFlow = ({ paneMoveable={paneMoveable} onPaneClick={onPaneClick} onPaneContextMenu={onPaneContextMenu} + onSelectionDragStart={onSelectionDragStart} + onSelectionDrag={onSelectionDrag} + onSelectionDragStop={onSelectionDragStop} /> {onSelectionChange && } {children} From 17e55d2c59cd4999d9be369360f707ba6c4c7f24 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 24 Aug 2020 04:58:18 +0000 Subject: [PATCH 02/12] chore(deps-dev): bump release-it from 13.6.8 to 13.6.9 Bumps [release-it](https://github.com/release-it/release-it) from 13.6.8 to 13.6.9. - [Release notes](https://github.com/release-it/release-it/releases) - [Changelog](https://github.com/release-it/release-it/blob/master/CHANGELOG.md) - [Commits](https://github.com/release-it/release-it/compare/13.6.8...13.6.9) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 18 +++++++++--------- package.json | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47243b64..05560280 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4240,9 +4240,9 @@ } }, "@octokit/types": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/@octokit/types/-/types-5.4.0.tgz", - "integrity": "sha512-D/uotqF69M50OIlwMqgyIg9PuLT2daOiBAYF0P40I2ekFA2ESwwBY5dxZe/UhXdPvIbNKDzuZmQrO7rMpuFbcg==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-5.4.1.tgz", + "integrity": "sha512-OlMlSySBJoJ6uozkr/i03nO5dlYQyE05vmQNZhAh9MyO4DPBP88QlwsDVLmVjIMFssvIZB6WO0ctIGMRG+xsJQ==", "dev": true, "requires": { "@types/node": ">= 8" @@ -4277,9 +4277,9 @@ } }, "@sindresorhus/is": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-3.1.1.tgz", - "integrity": "sha512-tLnujxFtfH7F+i5ghUfgGlJsvyCKvUnSMFMlWybFdX9/DdX8svb4Zwx1gV0gkkVCHXtmPSetoAR3QlKfOld6Tw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-3.1.2.tgz", + "integrity": "sha512-JiX9vxoKMmu8Y3Zr2RVathBL1Cdu4Nt4MuNWemt1Nc06A0RAin9c5FArkhGsyMBWfCu4zj+9b+GxtjAnE4qqLQ==", "dev": true }, "@svgr/babel-plugin-add-jsx-attribute": { @@ -11038,9 +11038,9 @@ } }, "release-it": { - "version": "13.6.8", - "resolved": "https://registry.npmjs.org/release-it/-/release-it-13.6.8.tgz", - "integrity": "sha512-LY3dZEzAVRBdie0DMG0kdV4DWMTVPM+hvc5O5EmY0qIf+zPuMVu9QXS19La6KBhCI4kVhpwm7VZ8B7YMXTBKLA==", + "version": "13.6.9", + "resolved": "https://registry.npmjs.org/release-it/-/release-it-13.6.9.tgz", + "integrity": "sha512-bZEJBMCHiBPzKVZzCTYaGo+lYpunsX1/LSL1bO5RJ2+7G1glC91G5KIs29zgfHJEQfzE0q3tTEVV+b6gscGKvw==", "dev": true, "requires": { "@iarna/toml": "2.2.5", diff --git a/package.json b/package.json index fb399d32..fce2df4e 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "prettier": "2.0.5", "prop-types": "^15.7.2", "react": "^16.13.1", - "release-it": "^13.6.8", + "release-it": "^13.6.9", "rollup": "^2.26.4", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-bundle-size": "^1.0.3", From 45d6cf341a1e6595012eff22b19c6c0744af4cb1 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 24 Aug 2020 04:58:58 +0000 Subject: [PATCH 03/12] chore(deps-dev): bump @babel/core from 7.11.1 to 7.11.4 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.11.1 to 7.11.4. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.11.4/packages/babel-core) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 28 ++++++++++++++-------------- package.json | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47243b64..cba5234c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,16 +57,16 @@ } }, "@babel/core": { - "version": "7.11.1", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.1.tgz", - "integrity": "sha512-XqF7F6FWQdKGGWAzGELL+aCO1p+lRY5Tj5/tbT3St1G8NaH70jhhDIKknIZaDans0OQBG5wRAldROLHSt44BgQ==", + "version": "7.11.4", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.4.tgz", + "integrity": "sha512-5deljj5HlqRXN+5oJTY7Zs37iH3z3b++KjiKtIsJy1NrjOOVSEaJHEetLBhyu0aQOSNNZ/0IuEAan9GzRuDXHg==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/generator": "^7.11.0", + "@babel/generator": "^7.11.4", "@babel/helper-module-transforms": "^7.11.0", "@babel/helpers": "^7.10.4", - "@babel/parser": "^7.11.1", + "@babel/parser": "^7.11.4", "@babel/template": "^7.10.4", "@babel/traverse": "^7.11.0", "@babel/types": "^7.11.0", @@ -90,9 +90,9 @@ } }, "@babel/generator": { - "version": "7.11.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.0.tgz", - "integrity": "sha512-fEm3Uzw7Mc9Xi//qU20cBKatTfs2aOtKqmvy/Vm7RkJEGFQ4xc9myCfbXxqK//ZS8MR/ciOHw6meGASJuKmDfQ==", + "version": "7.11.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz", + "integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==", "dev": true, "requires": { "@babel/types": "^7.11.0", @@ -191,9 +191,9 @@ } }, "@babel/parser": { - "version": "7.11.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz", - "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==", + "version": "7.11.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz", + "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==", "dev": true }, "@babel/template": { @@ -1531,9 +1531,9 @@ } }, "@babel/parser": { - "version": "7.11.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz", - "integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==", + "version": "7.11.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz", + "integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==", "dev": true }, "@babel/template": { diff --git a/package.json b/package.json index fb399d32..800558d4 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "resize-observer": "^1.0.0" }, "devDependencies": { - "@babel/core": "^7.11.1", + "@babel/core": "^7.11.4", "@babel/preset-env": "^7.11.0", "@babel/preset-react": "^7.10.4", "@svgr/rollup": "^5.4.0", From 9c84a1a74ff22f26dd9664f76c6bd551c31dd687 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 24 Aug 2020 05:00:59 +0000 Subject: [PATCH 04/12] chore(deps-dev): bump typescript from 3.9.7 to 4.0.2 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.9.7 to 4.0.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v3.9.7...v4.0.2) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47243b64..0c19e369 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12364,9 +12364,9 @@ } }, "typescript": { - "version": "3.9.7", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz", - "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.2.tgz", + "integrity": "sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index fb399d32..1ffeae02 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "rollup-plugin-typescript2": "^0.27.2", "rollup-plugin-uglify": "^6.0.4", "start-server-and-test": "^1.11.3", - "typescript": "^3.9.7" + "typescript": "^4.0.2" }, "peerDependencies": { "react": "^16.13.1" From ad79ccc88a1eda794d009c8d9164ea7817a971e4 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 24 Aug 2020 05:04:19 +0000 Subject: [PATCH 05/12] chore(deps-dev): bump rollup from 2.26.4 to 2.26.5 Bumps [rollup](https://github.com/rollup/rollup) from 2.26.4 to 2.26.5. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.26.4...v2.26.5) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 05560280..dc0be87c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11354,9 +11354,9 @@ } }, "rollup": { - "version": "2.26.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.4.tgz", - "integrity": "sha512-6+qsGuP0MXGd7vlYmk72utm1MrgZj5GfXibGL+cRkKQ9+ZL/BnFThDl0D5bcl7AqlzMjAQXRAwZX1HVm22M/4Q==", + "version": "2.26.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.5.tgz", + "integrity": "sha512-rCyFG3ZtQdnn9YwfuAVH0l/Om34BdO5lwCA0W6Hq+bNB21dVEBbCRxhaHOmu1G7OBFDWytbzAC104u7rxHwGjA==", "dev": true, "requires": { "fsevents": "~2.1.2" diff --git a/package.json b/package.json index fce2df4e..1497f703 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "prop-types": "^15.7.2", "react": "^16.13.1", "release-it": "^13.6.9", - "rollup": "^2.26.4", + "rollup": "^2.26.5", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-commonjs": "^10.1.0", From 4293979b64139834f15b832b752da578de9d1fe9 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Tue, 25 Aug 2020 22:25:57 +0000 Subject: [PATCH 06/12] chore(deps): bump d3-selection from 1.4.2 to 2.0.0 Bumps [d3-selection](https://github.com/d3/d3-selection) from 1.4.2 to 2.0.0. - [Release notes](https://github.com/d3/d3-selection/releases) - [Commits](https://github.com/d3/d3-selection/commits/v2.0.0) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 27 ++++++++++++++++++++++++--- package.json | 2 +- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2cbf0f13..5f0bb48a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6968,6 +6968,13 @@ "requires": { "d3-dispatch": "1", "d3-selection": "1" + }, + "dependencies": { + "d3-selection": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", + "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" + } } }, "d3-ease": { @@ -6984,9 +6991,9 @@ } }, "d3-selection": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", - "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz", + "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==" }, "d3-timer": { "version": "1.0.9", @@ -7004,6 +7011,13 @@ "d3-interpolate": "1", "d3-selection": "^1.1.0", "d3-timer": "1" + }, + "dependencies": { + "d3-selection": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", + "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" + } } }, "d3-zoom": { @@ -7016,6 +7030,13 @@ "d3-interpolate": "1", "d3-selection": "1", "d3-transition": "1" + }, + "dependencies": { + "d3-selection": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", + "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" + } } }, "dashdash": { diff --git a/package.json b/package.json index d16c835a..9ec99013 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "dependencies": { "@welldone-software/why-did-you-render": "^4.3.1", "classcat": "^4.1.0", - "d3-selection": "^1.4.2", + "d3-selection": "^2.0.0", "d3-zoom": "^1.8.3", "easy-peasy": "^3.3.1", "fast-deep-equal": "^3.1.3", From 77932d4e620fab4685c969ee9281a5a929384a8f Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Wed, 26 Aug 2020 21:31:06 +0000 Subject: [PATCH 07/12] chore(deps): bump d3-zoom from 1.8.3 to 2.0.0 Bumps [d3-zoom](https://github.com/d3/d3-zoom) from 1.8.3 to 2.0.0. - [Release notes](https://github.com/d3/d3-zoom/releases) - [Commits](https://github.com/d3/d3-zoom/compare/v1.8.3...v2.0.0) Signed-off-by: dependabot-preview[bot] --- package-lock.json | 96 ++++++++++++++++++----------------------------- package.json | 2 +- 2 files changed, 38 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f0bb48a..ca38265d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6952,42 +6952,35 @@ } }, "d3-color": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz", - "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz", + "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==" }, "d3-dispatch": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.5.tgz", - "integrity": "sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz", + "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==" }, "d3-drag": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.4.tgz", - "integrity": "sha512-ICPurDETFAelF1CTHdIyiUM4PsyZLaM+7oIBhmyP+cuVjze5vDZ8V//LdOFjg0jGnFIZD/Sfmk0r95PSiu78rw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz", + "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==", "requires": { - "d3-dispatch": "1", - "d3-selection": "1" - }, - "dependencies": { - "d3-selection": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", - "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" - } + "d3-dispatch": "1 - 2", + "d3-selection": "2" } }, "d3-ease": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.5.tgz", - "integrity": "sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz", + "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==" }, "d3-interpolate": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz", - "integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz", + "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==", "requires": { - "d3-color": "1" + "d3-color": "1 - 2" } }, "d3-selection": { @@ -6996,47 +6989,32 @@ "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==" }, "d3-timer": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.9.tgz", - "integrity": "sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg==" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz", + "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==" }, "d3-transition": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.2.0.tgz", - "integrity": "sha512-VJ7cmX/FPIPJYuaL2r1o1EMHLttvoIuZhhuAlRoOxDzogV8iQS6jYulDm3xEU3TqL80IZIhI551/ebmCMrkvhw==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz", + "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==", "requires": { - "d3-color": "1", - "d3-dispatch": "1", - "d3-ease": "1", - "d3-interpolate": "1", - "d3-selection": "^1.1.0", - "d3-timer": "1" - }, - "dependencies": { - "d3-selection": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", - "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" - } + "d3-color": "1 - 2", + "d3-dispatch": "1 - 2", + "d3-ease": "1 - 2", + "d3-interpolate": "1 - 2", + "d3-timer": "1 - 2" } }, "d3-zoom": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz", - "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz", + "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==", "requires": { - "d3-dispatch": "1", - "d3-drag": "1", - "d3-interpolate": "1", - "d3-selection": "1", - "d3-transition": "1" - }, - "dependencies": { - "d3-selection": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", - "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" - } + "d3-dispatch": "1 - 2", + "d3-drag": "2", + "d3-interpolate": "1 - 2", + "d3-selection": "2", + "d3-transition": "2" } }, "dashdash": { diff --git a/package.json b/package.json index 9ec99013..469cbed0 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@welldone-software/why-did-you-render": "^4.3.1", "classcat": "^4.1.0", "d3-selection": "^2.0.0", - "d3-zoom": "^1.8.3", + "d3-zoom": "^2.0.0", "easy-peasy": "^3.3.1", "fast-deep-equal": "^3.1.3", "react-draggable": "^4.4.3", From 3fe6a956c25b689ac318940da65a9ad4b349bad8 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 27 Aug 2020 00:35:01 +0200 Subject: [PATCH 08/12] refactor(d3-zoom): use new v2 api --- src/hooks/useD3Zoom.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/hooks/useD3Zoom.ts b/src/hooks/useD3Zoom.ts index e25de360..4fbbef6c 100644 --- a/src/hooks/useD3Zoom.ts +++ b/src/hooks/useD3Zoom.ts @@ -1,5 +1,4 @@ import { useEffect, useRef, MutableRefObject } from 'react'; -import { event } from 'd3-selection'; import { useStoreState, useStoreActions } from '../store/hooks'; import { FlowTransform } from '../types'; @@ -53,7 +52,7 @@ export default ({ if (selectionKeyPressed) { d3Zoom.on('zoom', null); } else { - d3Zoom.on('zoom', () => { + d3Zoom.on('zoom', (event: any) => { updateTransform(event.transform); if (onMove) { @@ -68,7 +67,7 @@ export default ({ useEffect(() => { if (d3Zoom) { if (onMoveStart) { - d3Zoom.on('start', () => { + d3Zoom.on('start', (event: any) => { if (viewChanged(prevTransform.current, event.transform)) { const flowTransform = eventToFlowTransform(event.transform); prevTransform.current = flowTransform; @@ -85,7 +84,7 @@ export default ({ useEffect(() => { if (d3Zoom) { if (onMoveEnd) { - d3Zoom.on('end', () => { + d3Zoom.on('end', (event: any) => { if (viewChanged(prevTransform.current, event.transform)) { const flowTransform = eventToFlowTransform(event.transform); prevTransform.current = flowTransform; @@ -101,7 +100,7 @@ export default ({ useEffect(() => { if (d3Zoom) { - d3Zoom.filter(() => { + d3Zoom.filter((event: any) => { if (!paneMoveable) { return false; } From 60c39718f9f6feb864a7ef05375189f842b96a16 Mon Sep 17 00:00:00 2001 From: Robin Goupil Date: Tue, 25 Aug 2020 18:42:41 +0200 Subject: [PATCH 09/12] Allow to pass a string of FuncString for Minimap node className --- src/additional-components/MiniMap/MiniMapNode.tsx | 5 +++-- src/additional-components/MiniMap/index.tsx | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx index f6b5b4ab..93d3aa2e 100644 --- a/src/additional-components/MiniMap/MiniMapNode.tsx +++ b/src/additional-components/MiniMap/MiniMapNode.tsx @@ -6,17 +6,18 @@ interface MiniMapNodeProps { width: number; height: number; color: string; + className: string; borderRadius: number; style?: CSSProperties; } -const MiniMapNode = ({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => { +const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => { const { background, backgroundColor } = style || {}; const fill = (color || background || backgroundColor) as string; return ( string; interface MiniMapProps extends React.HTMLAttributes { nodeColor?: string | StringFunc; + nodeClassName?: string | StringFunc; nodeBorderRadius?: number; maskColor?: string; } @@ -23,6 +24,7 @@ const MiniMap = ({ style = { backgroundColor: '#f8f8f8' }, className, nodeColor = '#ddd', + nodeClassName = '', nodeBorderRadius = 5, maskColor = 'rgba(10, 10, 10, .25)', }: MiniMapProps) => { @@ -35,6 +37,7 @@ const MiniMap = ({ const elementWidth = (style.width || defaultWidth)! as number; const elementHeight = (style.height || defaultHeight)! as number; const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc; + const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc; const hasNodes = nodes && nodes.length; const bb = getRectOfNodes(nodes); const viewBB: Rect = { @@ -73,6 +76,7 @@ const MiniMap = ({ width={node.__rf.width} height={node.__rf.height} style={node.style} + className={nodeClassNameFunc(node)} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} /> From 3b2be2fddb478678cab67e697f317c7a549c74c8 Mon Sep 17 00:00:00 2001 From: Robin Goupil Date: Tue, 25 Aug 2020 18:42:51 +0200 Subject: [PATCH 10/12] Expose getConnectedEdges --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 9bce1399..40da9303 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,7 +8,7 @@ export { getBezierPath } from './components/Edges/BezierEdge'; export { getSmoothStepPath } from './components/Edges/SmoothStepEdge'; export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'; -export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/graph'; +export { isNode, isEdge, removeElements, addEdge, getOutgoers, getConnectedEdges } from './utils/graph'; export * from './additional-components'; export * from './types'; From 40bb9470844ae2e8fb5bc6eeaba8b981e03394c8 Mon Sep 17 00:00:00 2001 From: Robin Goupil Date: Fri, 28 Aug 2020 13:57:47 +0200 Subject: [PATCH 11/12] use classcat instead of template literal --- src/additional-components/MiniMap/MiniMapNode.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx index 93d3aa2e..a3ab7a43 100644 --- a/src/additional-components/MiniMap/MiniMapNode.tsx +++ b/src/additional-components/MiniMap/MiniMapNode.tsx @@ -1,4 +1,5 @@ import React, { memo, CSSProperties } from 'react'; +import cc from 'classcat'; interface MiniMapNodeProps { x: number; @@ -17,7 +18,7 @@ const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadiu return ( Date: Fri, 28 Aug 2020 20:11:29 +0200 Subject: [PATCH 12/12] docs(readme): add new mini map prop, nodrag and getConnectedEdges --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 0025d701..730ead31 100644 --- a/README.md +++ b/README.md @@ -233,6 +233,10 @@ Your custom nodes are wrapped so that the basic functions like dragging or selec - `sourcePosition`: string - `targetPosition`: string +### Prevent dragging + +If you have controls inside your custom node that should not drag the node you can add the class name `nodrag`. + ## Handle Component We export a `Handle` component as a helper for your custom nodes: @@ -425,6 +429,7 @@ const FlowWithMiniMap = () => ( - `nodeColor`: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node. - `nodeBorderRadius`: number +- `nodeClassName`: string or function for adding an additional class to the nodes inside the mini map - `maskColor`: string - `style`: css properties - `className`: additional class name @@ -571,6 +576,11 @@ Returns all direct child nodes of the passed node `getOutgoers = (node: Node, elements: Elements): Node[]` +### getConnectedEdges + +Returns all edges that are connected to the passed nodes + +`getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[]` You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.