@likec4/diagram 1.27.0 → 1.27.1

package/dist/state/diagram-machine.js

@@ -28,6 +28,7 @@ const diagramMachine = setup({
     overlaysActorLogic
   },
   guards: {
+    "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     "enabled: FitView": ({ context }) => context.features.enableFitView,
     "enabled: FocusMode": ({ context }) => context.features.enableFocusMode,
     "enabled: Readonly": ({ context }) => context.features.enableReadOnly,
@@ -160,15 +161,18 @@ const diagramMachine = setup({
       }
       const constraints = createLayoutConstraints(xystore, nodesToAlign);
       const aligner = getAligner(mode);
-      constraints.onMove((nodes) => {
-        aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)));
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = {
-            ...rect.positionAbsolute,
-            ...aligner.applyPosition(toNodeRect(node))
-          };
-        });
-      });
+      const nodes = nodesToAlign.map((id) => ({
+        node: nonNullable(nodeLookup.get(id)),
+        rect: nonNullable(constraints.rects.get(id))
+      }));
+      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)));
+      for (const { rect, node } of nodes) {
+        rect.positionAbsolute = {
+          ...rect.positionAbsolute,
+          ...aligner.applyPosition(toNodeRect(node))
+        };
+      }
+      constraints.updateXYFlowNodes();
     },
     "updateFeatures": enqueueActions(({ enqueue, system, event }) => {
       assertEvent(event, "update.features");
@@ -195,6 +199,12 @@ const diagramMachine = setup({
         type: "close.all"
       }
     ),
+    "startSyncLayout": assign(({ context, spawn, self }) => ({
+      syncLayoutActorRef: spawn("syncManualLayoutActorLogic", {
+        id: "syncLayout",
+        input: { parent: self, viewId: context.view.id }
+      })
+    })),
     "stopSyncLayout": enqueueActions(({ context, enqueue }) => {
       enqueue.sendTo(context.syncLayoutActorRef, { type: "stop" });
       enqueue.stopChild(context.syncLayoutActorRef);
@@ -247,11 +257,16 @@ const diagramMachine = setup({
   initial: "initializing",
   context: ({ input, self, spawn }) => ({
     ...input,
+    xyedges: [],
+    xynodes: [],
     features: { ...AllDisabled },
     toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true
     },
-    initialized: false,
+    initialized: {
+      xydata: false,
+      xyflow: false
+    },
     viewportChangedManually: false,
     lastOnNavigate: null,
     lastClickedNode: null,
@@ -264,10 +279,7 @@ const diagramMachine = setup({
     },
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
-    syncLayoutActorRef: spawn("syncManualLayoutActorLogic", {
-      id: "syncLayout",
-      input: { parent: self, viewId: input.view.id }
-    }),
+    syncLayoutActorRef: null,
     activeWalkthrough: null
   }),
   // entry: ({ spawn }) => spawn(layoutActor, { id: 'layout', input: { parent: self } }),
@@ -275,32 +287,54 @@ const diagramMachine = setup({
     initializing: {
       on: {
         "xyflow.init": {
-          actions: [
-            assign(({ context, event }) => ({
-              initialized: true,
-              xyflow: event.instance,
-              navigationHistory: {
-                currentIndex: 0,
-                history: [{
-                  viewId: context.view.id,
-                  fromNode: null,
-                  viewport: { ...event.instance.getViewport() }
-                }]
-              }
-            })),
-            enqueueActions(({ enqueue, check }) => {
-              if (check("enabled: FitView")) {
-                enqueue({
-                  type: "xyflow:fitDiagram",
-                  params: { duration: 0 }
-                });
-              }
-            })
-          ],
-          target: "ready"
+          actions: assign(({ context, event }) => ({
+            initialized: {
+              ...context.initialized,
+              xyflow: true
+            },
+            xyflow: event.instance
+          })),
+          target: "isReady"
+        },
+        "update.view": {
+          actions: assign(({ context, event, spawn, self }) => ({
+            initialized: {
+              ...context.initialized,
+              xydata: true
+            },
+            view: event.view,
+            xynodes: event.xynodes,
+            xyedges: event.xyedges
+          })),
+          target: "isReady"
         }
       }
     },
+    "isReady": {
+      always: [{
+        guard: "isReady",
+        actions: [
+          {
+            type: "xyflow:fitDiagram",
+            params: { duration: 0 }
+          },
+          "startSyncLayout",
+          assign(({ context }) => ({
+            navigationHistory: {
+              currentIndex: 0,
+              history: [{
+                viewId: context.view.id,
+                fromNode: null,
+                viewport: { ...context.xyflow.getViewport() }
+              }]
+            }
+          }))
+        ],
+        target: "ready"
+      }, {
+        target: "initializing"
+      }]
+    },
     ready: {
       initial: "idle",
       on: {
@@ -658,14 +692,6 @@ const diagramMachine = setup({
           })
         }
       ],
-      exit: assign({
-        syncLayoutActorRef: ({ self, context, spawn }) => spawn("syncManualLayoutActorLogic", {
-          id: "syncLayout",
-          systemId: "syncLayout",
-          input: { parent: self, viewId: context.view.id }
-        })
-        // lastOnNavigate: null,
-      }),
       on: {
         "update.view": {
           actions: enqueueActions(({ enqueue, context, event }) => {
@@ -690,10 +716,11 @@ const diagramMachine = setup({
               enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
             }
             enqueue.assign(updateNavigationHistory);
-            enqueue.assign(mergeXYNodesEdges);
             enqueue.assign({
+              ...mergeXYNodesEdges({ context, event }),
               lastOnNavigate: null
             });
+            enqueue("startSyncLayout");
           }),
           target: "#idle"
         }
@@ -736,15 +763,10 @@ const diagramMachine = setup({
         enqueueActions(({ enqueue, event, check, context }) => {
           const isAnotherView = check("is another view");
           if (isAnotherView) {
-            const viewId = event.view.id;
             enqueue("closeAllOverlays");
             enqueue("stopSyncLayout");
             enqueue.assign({
-              focusedNode: null,
-              syncLayoutActorRef: ({ self, spawn }) => spawn("syncManualLayoutActorLogic", {
-                id: "syncLayout",
-                input: { parent: self, viewId }
-              })
+              focusedNode: null
             });
             const { fromNode, toNode } = findCorrespondingNode(context, event);
             if (fromNode && toNode) {
@@ -766,16 +788,19 @@ const diagramMachine = setup({
               });
               enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
             }
+          }
+          enqueue.assign({
+            ...mergeXYNodesEdges({ context, event }),
+            lastOnNavigate: null
+          });
+          if (isAnotherView) {
+            enqueue("startSyncLayout");
           } else {
             enqueue.sendTo((c) => c.context.syncLayoutActorRef, { type: "synced" });
             if (!context.viewportChangedManually) {
               enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
             }
           }
-          enqueue.assign(mergeXYNodesEdges);
-          enqueue.assign({
-            lastOnNavigate: null
-          });
         })
       ]
     },
@@ -793,7 +818,12 @@ const diagramMachine = setup({
     assign({
       xyflow: null,
       xystore: null,
-      initialized: false,
+      xyedges: [],
+      xynodes: [],
+      initialized: {
+        xydata: false,
+        xyflow: false
+      },
       syncLayoutActorRef: null
     })
   ]