From e0751cbc5d3bbfbae0c8c98447648c2ebf23e25f Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 17 Aug 2022 00:16:23 +0200 Subject: [PATCH 1/8] fix(deps): put react types in devDependencies closes #2368 --- package-lock.json | 26 ++++++++++++++++++-------- package.json | 6 +++--- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9b057a99..f94c2a63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,6 @@ "dependencies": { "@babel/runtime": "^7.18.9", "@types/d3": "^7.4.0", - "@types/react": "^18.0.15", - "@types/react-dom": "^18.0.6", "@types/resize-observer-browser": "^0.1.7", "classcat": "^5.0.3", "d3-drag": "^3.0.0", @@ -30,6 +28,8 @@ "@rollup/plugin-commonjs": "^22.0.1", "@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-replace": "^4.0.0", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6", "autoprefixer": "^10.4.7", "babel-preset-react-app": "^10.0.1", "cross-env": "^7.0.3", @@ -2676,12 +2676,14 @@ "node_modules/@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true }, "node_modules/@types/react": { "version": "18.0.15", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz", "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==", + "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2692,6 +2694,7 @@ "version": "18.0.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "dev": true, "dependencies": { "@types/react": "*" } @@ -2722,7 +2725,8 @@ "node_modules/@types/scheduler": { "version": "0.16.1", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", - "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" + "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==", + "dev": true }, "node_modules/@types/sinonjs__fake-timers": { "version": "8.1.1", @@ -4180,7 +4184,8 @@ "node_modules/csstype": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", + "dev": true }, "node_modules/cypress": { "version": "9.6.1", @@ -13288,12 +13293,14 @@ "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true }, "@types/react": { "version": "18.0.15", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.15.tgz", "integrity": "sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==", + "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -13304,6 +13311,7 @@ "version": "18.0.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "dev": true, "requires": { "@types/react": "*" } @@ -13334,7 +13342,8 @@ "@types/scheduler": { "version": "0.16.1", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", - "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" + "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==", + "dev": true }, "@types/sinonjs__fake-timers": { "version": "8.1.1", @@ -14387,7 +14396,8 @@ "csstype": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", + "dev": true }, "cypress": { "version": "9.6.1", diff --git a/package.json b/package.json index a5529f5d..6877e5e3 100644 --- a/package.json +++ b/package.json @@ -56,8 +56,6 @@ "d3-zoom": "^3.0.0", "zustand": "^3.7.2", "@types/d3": "^7.4.0", - "@types/react": "^18.0.15", - "@types/react-dom": "^18.0.6", "@types/resize-observer-browser": "^0.1.7" }, "devDependencies": { @@ -90,7 +88,9 @@ "rollup-plugin-typescript2": "^0.32.1", "rollup-plugin-visualizer": "^5.7.1", "start-server-and-test": "^1.14.0", - "typescript": "^4.7.4" + "typescript": "^4.7.4", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6" }, "peerDependencies": { "react": "16 || 17 || 18", From 147656b22f577bb4141664d000e62ada9b490473 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 17 Aug 2022 00:18:03 +0200 Subject: [PATCH 2/8] chore: release v10.3.16 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f94c2a63..4aae85d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.3.15", + "version": "10.3.16", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.3.15", + "version": "10.3.16", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.9", diff --git a/package.json b/package.json index 6877e5e3..7f72e0cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.3.15", + "version": "10.3.16", "engines": { "node": ">=14" }, From ac11a180fb483cc41e0107370a22a228960653cd Mon Sep 17 00:00:00 2001 From: Ward Oosterlijnck Date: Wed, 7 Sep 2022 15:46:51 +0200 Subject: [PATCH 3/8] Snap node to grid relative to 0,0 instead of relative to starting point of node --- src/hooks/useDrag/index.ts | 4 ++-- src/hooks/useDrag/utils.ts | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/hooks/useDrag/index.ts b/src/hooks/useDrag/index.ts index da626085..e56475ea 100644 --- a/src/hooks/useDrag/index.ts +++ b/src/hooks/useDrag/index.ts @@ -96,14 +96,14 @@ function useDrag({ } }) .on('drag', (event: UseDragEvent) => { - const { updateNodePositions, nodeInternals, nodeExtent, onNodeDrag, onSelectionDrag } = store.getState(); + const { updateNodePositions, snapToGrid, snapGrid, nodeInternals, nodeExtent, onNodeDrag, onSelectionDrag } = store.getState(); const pointerPos = getPointerPosition(event); // skip events without movement if ((lastPos.current.x !== pointerPos.x || lastPos.current.y !== pointerPos.y) && dragItems.current) { lastPos.current = pointerPos; dragItems.current = dragItems.current.map((n) => - updatePosition(n, pointerPos, nodeInternals, nodeExtent) + updatePosition(n, pointerPos, snapToGrid, snapGrid, nodeInternals, nodeExtent) ); const onDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag); diff --git a/src/hooks/useDrag/utils.ts b/src/hooks/useDrag/utils.ts index 9679a5c7..e071e810 100644 --- a/src/hooks/useDrag/utils.ts +++ b/src/hooks/useDrag/utils.ts @@ -59,11 +59,18 @@ export function getDragItems(nodeInternals: NodeInternals, mousePos: XYPosition, export function updatePosition( dragItem: NodeDragItem, mousePos: XYPosition, + snapToGrid: boolean, + [snapX, snapY]: [number, number], nodeInternals: NodeInternals, nodeExtent?: CoordinateExtent ): NodeDragItem { let currentExtent = dragItem.extent || nodeExtent; const nextPosition = { x: mousePos.x - dragItem.distance.x, y: mousePos.y - dragItem.distance.y }; + if (snapToGrid) { + nextPosition.x = snapX * Math.round(nextPosition.x / snapX) + nextPosition.y = snapY * Math.round(nextPosition.y / snapY) + } + if (dragItem.extent === 'parent') { if (dragItem.parentNode && dragItem.width && dragItem.height) { From a766ba35c98937d92947487021963da0e978e6ab Mon Sep 17 00:00:00 2001 From: Jakub Majorek Date: Thu, 8 Sep 2022 18:56:11 +0200 Subject: [PATCH 4/8] Use event.composedPath for getting event target --- src/hooks/useKeyPress.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index 2e6c65c1..8ac7dcf8 100644 --- a/src/hooks/useKeyPress.ts +++ b/src/hooks/useKeyPress.ts @@ -108,7 +108,7 @@ function useKeyOrCode(eventCode: string, keysToWatch: KeyCode): KeyOrCode { } function isInputDOMNode(event: KeyboardEvent): boolean { - const target = event.target as HTMLElement; + const target = event.composedPath()[0] as HTMLElement; return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); } From 0891b83d7b89c2a3c9f39e0597307787dc4f1b91 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 14 Sep 2022 14:30:10 +0200 Subject: [PATCH 5/8] chore(isInputDOMNode): add event.target as fallback --- src/hooks/useKeyPress.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts index 8ac7dcf8..6b164556 100644 --- a/src/hooks/useKeyPress.ts +++ b/src/hooks/useKeyPress.ts @@ -108,7 +108,8 @@ function useKeyOrCode(eventCode: string, keysToWatch: KeyCode): KeyOrCode { } function isInputDOMNode(event: KeyboardEvent): boolean { - const target = event.composedPath()[0] as HTMLElement; + // using composed path for handling shadow dom + const target = (event.composedPath?.()[0] || event.target) as HTMLElement; return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || target?.hasAttribute('contenteditable'); } From 23d1dd027ac9f7456cb611e5894164686659c9cc Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 14 Sep 2022 15:11:26 +0200 Subject: [PATCH 6/8] fix(edge-renderer): fallback to default edge if type is invalid --- src/container/EdgeRenderer/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index b5f47151..90986c90 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -100,7 +100,16 @@ const EdgeRenderer = (props: EdgeRendererProps) => { return null; } - const edgeType = edge.type || 'default'; + let edgeType = edge.type || 'default'; + + if (!props.edgeTypes[edgeType]) { + console.warn( + `[React Flow]: Edge type "${edgeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300` + ); + + edgeType = 'default'; + } + const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default; // when connection type is loose we can define all handles as sources const targetNodeHandles = From 4e9cc377b10c3a1784a16c1515bfb31e333fed52 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 14 Sep 2022 15:32:27 +0200 Subject: [PATCH 7/8] chore(node-edges): add data-testid --- src/components/Edges/wrapEdge.tsx | 1 + src/components/Nodes/wrapNode.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 0f2938bd..631decc6 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -157,6 +157,7 @@ export default (EdgeComponent: ComponentType) => { targetHandleId={targetHandleId} markerStart={markerStartUrl} markerEnd={markerEndUrl} + data-testid={`rf__edge-${id}`} /> {handleEdgeUpdate && ( ) => { onContextMenu={onContextMenuHandler} onClick={onSelectNodeHandler} onDoubleClick={onDoubleClickHandler} + data-testid={`rf__node-${id}`} data-id={id} > From f8c39ea8225424ba3cbb49512153d9d4f8541e10 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 14 Sep 2022 15:33:33 +0200 Subject: [PATCH 8/8] chore: release v10.3.17 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4aae85d9..dcd646e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.3.16", + "version": "10.3.17", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.3.16", + "version": "10.3.17", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.9", diff --git a/package.json b/package.json index 7f72e0cd..d27680a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.3.16", + "version": "10.3.17", "engines": { "node": ">=14" },