diff --git a/example/package-lock.json b/example/package-lock.json index 77722d84..c8dbbf4d 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -2030,7 +2030,8 @@ "@types/dagre": { "version": "0.7.44", "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.44.tgz", - "integrity": "sha512-N6HD+79w77ZVAaVO7JJDW5yJ9LAxM62FpgNGO9xEde+KVYjDRyhIMzfiErXpr1g0JPon9kwlBzoBK6s4fOww9Q==" + "integrity": "sha512-N6HD+79w77ZVAaVO7JJDW5yJ9LAxM62FpgNGO9xEde+KVYjDRyhIMzfiErXpr1g0JPon9kwlBzoBK6s4fOww9Q==", + "dev": true }, "@types/eslint": { "version": "7.2.6", @@ -2109,6 +2110,7 @@ "version": "0.0.34", "resolved": "https://registry.npmjs.org/@types/localforage/-/localforage-0.0.34.tgz", "integrity": "sha1-XjHDLdh5HsS5/z70fJy1Wy0NlDg=", + "dev": true, "requires": { "localforage": "*" } @@ -2141,7 +2143,8 @@ "@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/q": { "version": "1.5.4", @@ -2152,6 +2155,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz", "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==", + "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -2161,6 +2165,7 @@ "version": "17.0.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.1.tgz", "integrity": "sha512-yIVyopxQb8IDZ7SOHeTovurFq+fXiPICa+GV3gp0Xedsl+MwQlMLKmvrnEjFbQxjliH5YVAEWFh975eVNmKj7Q==", + "dev": true, "requires": { "@types/react": "*" } @@ -4639,7 +4644,8 @@ "csstype": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", - "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==", + "dev": true }, "cyclist": { "version": "1.0.1", @@ -12232,7 +12238,8 @@ } }, "react": { - "version": "file:../node_modules/react", + "version": "file:https:/registry.npmjs.org/react/-/react-17.0.1.tgz", + "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -12378,7 +12385,8 @@ } }, "react-dom": { - "version": "file:../node_modules/react-dom", + "version": "file:https:/registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", + "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 28a695a5..77f4b5fb 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -171,7 +171,7 @@ export default (NodeComponent: ComponentType) => { useEffect(() => { if (nodeElement.current && !isHidden) { - updateNodeDimensions([{ id, nodeElement: nodeElement.current }]); + updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]); } }, [id, isHidden, sourcePosition, targetPosition]); diff --git a/src/store/reducer.ts b/src/store/reducer.ts index 747bd8f6..57d4ea97 100644 --- a/src/store/reducer.ts +++ b/src/store/reducer.ts @@ -78,12 +78,12 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow const update = action.payload.find((u) => u.id === node.id); if (update) { const dimensions = getDimensions(update.nodeElement); - - if ( + const doUpdate = dimensions.width && dimensions.height && - (node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height) - ) { + (node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || update.forceUpdate); + + if (doUpdate) { const handleBounds = getHandleBounds(update.nodeElement, state.transform[2]); return { diff --git a/src/types/index.ts b/src/types/index.ts index 4ae5c45a..edea4031 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -370,6 +370,7 @@ export type OnEdgeUpdateFunc = (oldEdge: Edge, newConnection: Connec export type NodeDimensionUpdate = { id: ElementId; nodeElement: HTMLDivElement; + forceUpdate?: boolean; }; export type InitD3ZoomPayload = {