@likec4/diagram 1.27.0 → 1.27.2

package/dist/state/diagram-machine.js

@@ -13,7 +13,7 @@ import { lastClickedNode, updateNavigationHistory, mergeXYNodesEdges, updateEdge
 import { hotkeyActorLogic } from './hotkeyActor.js';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
-import { typedSystem, focusedBounds, findDiagramNode } from './utils.js';
+import { findDiagramNode, typedSystem, focusedBounds } from './utils.js';
 
 const diagramMachine = setup({
   types: {
@@ -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);
@@ -241,17 +251,36 @@ const diagramMachine = setup({
           return e;
         })
       };
+    }),
+    "notations.highlight": assign(({ context }, params) => {
+      const kinds = params.kind ? [params.kind] : params.notation.kinds;
+      const xynodes = context.xynodes.map((n) => {
+        const node = findDiagramNode(context, n.id);
+        if (node && node.notation === params.notation.title && node.shape === params.notation.shape && node.color === params.notation.color && kinds.includes(node.kind)) {
+          return Base.setDimmed(n, false);
+        }
+        return Base.setDimmed(n, "immediate");
+      });
+      return {
+        xynodes,
+        xyedges: context.xyedges.map(Base.setDimmed("immediate"))
+      };
     })
   }
 }).createMachine({
   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 +293,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 +301,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: {
@@ -389,8 +437,8 @@ const diagramMachine = setup({
         "open.relationshipDetails": {
           actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
             type: "open.relationshipDetails",
-            view: context.view,
-            edgeId: event.edgeId
+            viewId: context.view.id,
+            ...event.params
           }))
         },
         "open.source": {
@@ -437,6 +485,18 @@ const diagramMachine = setup({
             params: prop("event")
           }
         },
+        "notations.highlight": {
+          actions: {
+            type: "notations.highlight",
+            params: prop("event")
+          }
+        },
+        "notations.unhighlight": {
+          actions: assign(({ context }) => ({
+            xynodes: context.xynodes.map(Base.setDimmed(false)),
+            xyedges: context.xyedges.map(Base.setDimmed(false))
+          }))
+        },
         "saveManualLayout.*": {
           guard: "not readonly",
           actions: sendTo((c) => c.context.syncLayoutActorRef, ({ event }) => {
@@ -564,6 +624,11 @@ const diagramMachine = setup({
                 lastClickedNode: null
               }),
               target: "idle"
+            },
+            "notations.unhighlight": {
+              actions: assign((s) => ({
+                ...focusNodesEdges(s)
+              }))
             }
           }
         },
@@ -616,6 +681,11 @@ const diagramMachine = setup({
                 enqueue("xyflow:fitFocusedBounds");
               })
             },
+            "notations.unhighlight": {
+              actions: assign((s) => ({
+                ...updateActiveWalkthrough(s)
+              }))
+            },
             "walkthrough.end": {
               target: "idle"
             },
@@ -658,14 +728,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 +752,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 +799,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 +824,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 +854,12 @@ const diagramMachine = setup({
     assign({
       xyflow: null,
       xystore: null,
-      initialized: false,
+      xyedges: [],
+      xynodes: [],
+      initialized: {
+        xydata: false,
+        xyflow: false
+      },
       syncLayoutActorRef: null
     })
   ]

package/dist/state/syncManualLayoutActor.d.ts

@@ -23,7 +23,7 @@ export declare const syncManualLayoutActorLogic: StateMachine<Readonly<Input>, E
 }, {
     type: "same view";
     params: unknown;
-}, "timeout", "stopped" | "idle" | "synced" | "pending" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, "timeout", "synced" | "pending" | "stopped" | "idle" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly initial: "idle";
     readonly context: ({ input }: {
         spawn: {