fix(node-update): force update when source or target pos changes

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",

src/components/Nodes/wrapNode.tsx

@@ -171,7 +171,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
     useEffect(() => {
       if (nodeElement.current && !isHidden) {
-        updateNodeDimensions([{ id, nodeElement: nodeElement.current }]);
+        updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]);
       }
     }, [id, isHidden, sourcePosition, targetPosition]);
 

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 {

src/types/index.ts

@@ -370,6 +370,7 @@ export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connec
 export type NodeDimensionUpdate = {
   id: ElementId;
   nodeElement: HTMLDivElement;
+  forceUpdate?: boolean;
 };
 
 export type InitD3ZoomPayload = {