Merge branch 'next' into handle-connection-fixes

packages/react/src/store/index.ts

@@ -89,6 +89,7 @@ const createRFStore = ({
           fitViewOnInitOptions,
           domNode,
           nodeOrigin,
+          debug,
         } = get();
         const changes: NodeDimensionChange[] = [];
 
@@ -130,6 +131,9 @@ const createRFStore = ({
         set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
 
         if (changes?.length > 0) {
+          if (debug) {
+            console.log('React Flow: trigger node changes', changes);
+          }
           onNodesChange?.(changes);
         }
       },
@@ -149,7 +153,7 @@ const createRFStore = ({
         get().triggerNodeChanges(changes);
       },
       triggerNodeChanges: (changes) => {
-        const { onNodesChange, setNodes, nodes, hasDefaultNodes } = get();
+        const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
 
         if (changes?.length) {
           if (hasDefaultNodes) {
@@ -157,11 +161,15 @@ const createRFStore = ({
             setNodes(updatedNodes);
           }
 
+          if (debug) {
+            console.log('React Flow: trigger node changes', changes);
+          }
+
           onNodesChange?.(changes);
         }
       },
       triggerEdgeChanges: (changes) => {
-        const { onEdgesChange, setEdges, edges, hasDefaultEdges } = get();
+        const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
 
         if (changes?.length) {
           if (hasDefaultEdges) {
@@ -169,6 +177,10 @@ const createRFStore = ({
             setEdges(updatedEdges);
           }
 
+          if (debug) {
+            console.log('React Flow: trigger edge changes', changes);
+          }
+
           onEdgesChange?.(changes);
         }
       },

packages/react/src/store/initialState.ts

@@ -43,7 +43,9 @@ const getInitialState = ({
   let transform: Transform = [0, 0, 1];
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
+    const nodesWithDimensions = nextNodes.filter(
+      (node) => (node.width || node.initialWidth) && (node.height || node.initialHeight)
+    );
     // @todo users nodeOrigin should be used here
     const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
     const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
@@ -113,6 +115,7 @@ const getInitialState = ({
     onSelectionChangeHandlers: [],
 
     lib: 'react',
+    debug: false,
   };
 };