From ae4bce1295ba2f5af9cbde0367b08ab80f3238f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Loridan?= Date: Wed, 22 Sep 2021 18:07:24 +0200 Subject: [PATCH 1/5] fix(connectionLine): sourceHandle with connectionMode = loose --- example/src/CustomNode/ColorSelectorNode.tsx | 2 +- example/src/CustomNode/index.tsx | 10 +++++++++- src/components/ConnectionLine/index.tsx | 20 +++++++++++++++++--- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/example/src/CustomNode/ColorSelectorNode.tsx b/example/src/CustomNode/ColorSelectorNode.tsx index 7ad20340..7e0e1ff9 100644 --- a/example/src/CustomNode/ColorSelectorNode.tsx +++ b/example/src/CustomNode/ColorSelectorNode.tsx @@ -11,7 +11,7 @@ const onConnect = (params: Connection | Edge) => console.log('handle onConnect', const ColorSelectorNode: FC = ({ data, isConnectable }) => { return ( <> - +
Custom Color Picker Node: {data.color}
diff --git a/example/src/CustomNode/index.tsx b/example/src/CustomNode/index.tsx index 804aabea..5f9f2723 100644 --- a/example/src/CustomNode/index.tsx +++ b/example/src/CustomNode/index.tsx @@ -7,11 +7,13 @@ import ReactFlow, { addEdge, MiniMap, Controls, + updateEdge, Node, FlowElement, OnLoadParams, Elements, Position, + ConnectionMode, SnapGrid, Connection, Edge, @@ -79,6 +81,7 @@ const CustomNodeFlow = () => { data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: Position.Left, + }, { id: '4', @@ -86,6 +89,7 @@ const CustomNodeFlow = () => { data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: Position.Left, + }, { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } }, @@ -97,7 +101,8 @@ const CustomNodeFlow = () => { const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els)); - + const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) => + setElements((els) => updateEdge(oldEdge, newConnection, els)); return ( { snapToGrid={true} snapGrid={snapGrid} defaultZoom={1.5} + onEdgeUpdate={onEdgeUpdate} + connectionMode={ConnectionMode.Loose} + > { diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index e3c71f9e..1246dc52 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/src/components/ConnectionLine/index.tsx @@ -53,9 +53,22 @@ export default ({ return null; } - const sourceHandle = handleId - ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId) - : sourceNode.__rf.handleBounds[connectionHandleType][0]; + const getSourceHandle = (handleId: ElementId | null, sourceNode: Node) => { + const handleBound = sourceNode.__rf.handleBounds[connectionHandleType]; + if (handleBound) { + if (handleId) { + return sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId); + } + return sourceNode.__rf.handleBounds[connectionHandleType][0] + } + const handleType = connectionHandleType === 'source' ? 'target' : 'source'; + if (handleId) { + return sourceNode.__rf.handleBounds[handleType].find((d: HandleElement) => d.id === handleId); + } + return sourceNode.__rf.handleBounds[handleType][0] + } + + const sourceHandle = getSourceHandle(handleId, sourceNode); const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rf.width / 2; const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rf.height; const sourceX = sourceNode.__rf.position.x + sourceHandleX; @@ -68,6 +81,7 @@ export default ({ const targetPosition = isRightOrLeft ? Position.Left : Position.Top; if (CustomConnectionLineComponent) { + return ( Date: Thu, 23 Sep 2021 10:40:01 +0200 Subject: [PATCH 2/5] fix(tsconfig): add baseUrl --- tsconfig.json | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 33a51e49..4287d407 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,9 +1,13 @@ { "compilerOptions": { + "baseUrl": ".", "outDir": "dist", "module": "esnext", "target": "esnext", - "lib": ["dom", "esnext"], + "lib": [ + "dom", + "esnext" + ], "jsx": "react", "moduleResolution": "node", "declaration": true, @@ -21,6 +25,14 @@ "allowSyntheticDefaultImports": true, "esModuleInterop": true }, - "include": ["src"], - "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"] -} + "include": [ + "src" + ], + "exclude": [ + "node_modules", + "build", + "dist", + "example", + "rollup.config.js" + ] +} \ No newline at end of file From 596aaee9dd87c05796a62b964bd94ee4cec6bfd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Loridan?= Date: Thu, 23 Sep 2021 10:46:39 +0200 Subject: [PATCH 3/5] fix(store): add type --- src/store/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/store/index.ts b/src/store/index.ts index 6640d9e0..cf24e6b9 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,3 +1,4 @@ +import { Store } from 'redux'; import configureStore from './configure-store'; import { ReactFlowState, ConnectionMode } from '../types'; @@ -56,7 +57,7 @@ export const initialState: ReactFlowState = { reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-', }; -const store = configureStore(initialState); +const store: Store = configureStore(initialState); export type ReactFlowDispatch = typeof store.dispatch; From e391a12ee284c11371d30f9fb6aef31458538b8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Loridan?= Date: Thu, 23 Sep 2021 11:16:55 +0200 Subject: [PATCH 4/5] fix(root): downgrade react and react-dom --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index a9db505b..e5c87ea5 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,8 @@ "postcss-nested": "^5.0.6", "prettier": "2.3.2", "prop-types": "^15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^16.11.0", + "react-dom": "^16.11.0", "release-it": "^14.11.5", "rollup": "^2.56.3", "rollup-plugin-bundle-size": "^1.0.3", @@ -72,11 +72,11 @@ "typescript": "^4.4.2" }, "peerDependencies": { - "react": "16 || 17", - "react-dom": "16 || 17" + "react": "^16.11.0", + "react-dom": "^16.11.0" }, "files": [ "dist", "nocss" ] -} +} \ No newline at end of file From 3cc33aa7cb90eb0b60797ec4ba9fe8a7d2045b09 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 2 Nov 2021 14:49:16 +0100 Subject: [PATCH 5/5] refactor(conenctionline): simplify getSourceHandle helper --- package.json | 2 +- src/components/ConnectionLine/index.tsx | 26 +++++++++---------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index abcfbf85..5dada299 100644 --- a/package.json +++ b/package.json @@ -82,4 +82,4 @@ "dist", "nocss" ] -} \ No newline at end of file +} diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index 1246dc52..98b162e5 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/src/components/ConnectionLine/index.tsx @@ -27,6 +27,14 @@ interface ConnectionLineProps { CustomConnectionLineComponent?: ConnectionLineComponent; } +const getSourceHandle = (handleId: ElementId | null, sourceNode: Node, connectionHandleType: HandleType) => { + const handleTypeInverted = connectionHandleType === 'source' ? 'target' : 'source'; + const handleBound = + sourceNode.__rf.handleBounds[connectionHandleType] || sourceNode.__rf.handleBounds[handleTypeInverted]; + + return handleId ? handleBound.find((d: HandleElement) => d.id === handleId) : handleBound[0]; +}; + export default ({ connectionNodeId, connectionHandleId, @@ -53,22 +61,7 @@ export default ({ return null; } - const getSourceHandle = (handleId: ElementId | null, sourceNode: Node) => { - const handleBound = sourceNode.__rf.handleBounds[connectionHandleType]; - if (handleBound) { - if (handleId) { - return sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId); - } - return sourceNode.__rf.handleBounds[connectionHandleType][0] - } - const handleType = connectionHandleType === 'source' ? 'target' : 'source'; - if (handleId) { - return sourceNode.__rf.handleBounds[handleType].find((d: HandleElement) => d.id === handleId); - } - return sourceNode.__rf.handleBounds[handleType][0] - } - - const sourceHandle = getSourceHandle(handleId, sourceNode); + const sourceHandle = getSourceHandle(handleId, sourceNode, connectionHandleType); const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rf.width / 2; const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rf.height; const sourceX = sourceNode.__rf.position.x + sourceHandleX; @@ -81,7 +74,6 @@ export default ({ const targetPosition = isRightOrLeft ? Position.Left : Position.Top; if (CustomConnectionLineComponent) { - return (