@likec4/diagram 1.26.2 → 1.27.1

package/dist/state/diagram-machine.js

@@ -1,18 +1,20 @@
-import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getParallelStepsPrefix } from "@likec4/core";
-import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
-import { nodeToRect } from "@xyflow/system";
-import { hasAtLeast, prop, clamp, first } from "remeda";
-import { setup, enqueueActions, assign, assertEvent, stopChild, sendTo, cancel, raise, spawnChild, and, or } from "xstate";
-import { MinZoom } from "../base/const.js";
-import { AllDisabled } from "../context/DiagramFeatures.js";
-import { createLayoutConstraints } from "../likec4diagram/useLayoutConstraints.js";
-import { overlaysActorLogic } from "../overlays/overlaysActor.js";
-import { getAligner, toNodeRect } from "./aligners.js";
-import { lastClickedNode, resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges } from "./assign.js";
-import { hotkeyActorLogic } from "./hotkeyActor.js";
-import { DiagramToggledFeaturesPersistence } from "./persistence.js";
-import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
-import { typedSystem, focusedBounds, findDiagramNode } from "./utils.js";
+import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getParallelStepsPrefix } from '@likec4/core';
+import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
+import { nodeToRect } from '@xyflow/system';
+import { hasAtLeast, prop, clamp, first } from 'remeda';
+import { setup, assign, enqueueActions, sendTo, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
+import { MinZoom } from '../base/const.js';
+import { Base } from '../base/types.js';
+import { AllDisabled } from '../context/DiagramFeatures.js';
+import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints.js';
+import { overlaysActorLogic } from '../overlays/overlaysActor.js';
+import { getAligner, toNodeRect } from './aligners.js';
+import { lastClickedNode, updateNavigationHistory, mergeXYNodesEdges, updateEdgeData, updateNodeData, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, resetEdgeControlPoints, navigateForward, navigateBack } from './assign.js';
+import { hotkeyActorLogic } from './hotkeyActor.js';
+import { DiagramToggledFeaturesPersistence } from './persistence.js';
+import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
+import { typedSystem, focusedBounds, findDiagramNode } from './utils.js';
+
 const diagramMachine = setup({
   types: {
     context: {},
@@ -26,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,
@@ -46,9 +49,8 @@ const diagramMachine = setup({
       return event.node.selected === true;
     },
     "click: same node": ({ context, event }) => {
-      var _a;
       assertEvent(event, "xyflow.nodeClick");
-      return ((_a = context.lastClickedNode) == null ? void 0 : _a.id) === event.node.id;
+      return context.lastClickedNode?.id === event.node.id;
     },
     "click: focused node": ({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
@@ -73,8 +75,7 @@ const diagramMachine = setup({
       };
     }),
     "open source of focused or last clicked node": enqueueActions(({ context, enqueue }) => {
-      var _a;
-      const nodeId = context.focusedNode ?? ((_a = context.lastClickedNode) == null ? void 0 : _a.id);
+      const nodeId = context.focusedNode ?? context.lastClickedNode?.id;
       if (!nodeId || !context.features.enableVscode) return;
       const diagramNode = findDiagramNode(context, nodeId);
       if (!diagramNode) return;
@@ -101,7 +102,7 @@ const diagramMachine = setup({
       );
       viewport.x = Math.round(viewport.x);
       viewport.y = Math.round(viewport.y);
-      panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:fitFocusedBounds": ({ context }) => {
       const { bounds, duration = 450 } = focusedBounds({ context });
@@ -117,7 +118,7 @@ const diagramMachine = setup({
       );
       viewport.x = Math.round(viewport.x);
       viewport.y = Math.round(viewport.y);
-      panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:setViewportCenter": ({ context }, params) => {
       const { x, y } = params;
@@ -131,7 +132,7 @@ const diagramMachine = setup({
         duration = 350
       } = params;
       const { panZoom } = context.xystore.getState();
-      panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:alignNodeFromToAfterNavigate": ({ context }, params) => {
       const xyflow = nonNullable(context.xyflow, "xyflow is not initialized");
@@ -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");
@@ -183,32 +187,86 @@ const diagramMachine = setup({
         return;
       }
       if (!enableOverlays && hasRunning) {
+        enqueue.sendTo(hasRunning, {
+          type: "close.all"
+        });
         enqueue.stopChild("overlays");
       }
     }),
-    "closeAllOverlays": enqueueActions(({ system, enqueue }) => {
-      const overlays = typedSystem(system).overlaysActorRef;
-      if (overlays) {
-        enqueue.sendTo(overlays, { type: "close.all" });
+    "closeAllOverlays": sendTo(
+      ({ system }) => typedSystem(system).overlaysActorRef,
+      {
+        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);
       enqueue.assign({
         syncLayoutActorRef: null
       });
+    }),
+    "onNodeMouseEnter": assign(({ context }, params) => {
+      return {
+        xynodes: context.xynodes.map((n) => {
+          if (n.id === params.node.id) {
+            return Base.setHovered(n, true);
+          }
+          return n;
+        })
+      };
+    }),
+    "onNodeMouseLeave": assign(({ context }, params) => {
+      return {
+        xynodes: context.xynodes.map((n) => {
+          if (n.id === params.node.id) {
+            return Base.setHovered(n, false);
+          }
+          return n;
+        })
+      };
+    }),
+    "onEdgeMouseEnter": assign(({ context }, params) => {
+      return {
+        xyedges: context.xyedges.map((e) => {
+          if (e.id === params.edge.id) {
+            return Base.setHovered(e, true);
+          }
+          return e;
+        })
+      };
+    }),
+    "onEdgeMouseLeave": assign(({ context }, params) => {
+      return {
+        xyedges: context.xyedges.map((e) => {
+          if (e.id === params.edge.id) {
+            return Base.setHovered(e, false);
+          }
+          return e;
+        })
+      };
     })
   }
 }).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,
@@ -221,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 } }),
@@ -232,72 +287,190 @@ const diagramMachine = setup({
     initializing: {
       on: {
         "xyflow.init": {
-          actions: enqueueActions(({ enqueue, check }) => {
-            enqueue.assign({
-              initialized: true,
-              xyflow: ({ event }) => event.instance,
-              navigationHistory: ({ context, event }) => ({
-                currentIndex: 0,
-                history: [{
-                  viewId: context.view.id,
-                  fromNode: null,
-                  viewport: { ...event.instance.getViewport() }
-                }]
-              })
-            });
-            if (check("enabled: FitView")) {
-              enqueue({
-                type: "xyflow:fitDiagram",
-                params: { duration: 0 }
-              });
-            }
-          }),
-          target: "idle"
+          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"
         }
       }
     },
-    idle: {
-      id: "idle",
-      on: {
-        "xyflow.nodeClick": [
+    "isReady": {
+      always: [{
+        guard: "isReady",
+        actions: [
           {
-            // TODO: xstate fails to infer the type of the guard
-            guard: and([
-              "enabled: FocusMode",
-              "click: node has connections",
-              or([
-                "click: same node",
-                "click: selected node"
-              ])
-            ]),
-            actions: [
-              assign({
-                lastClickedNode,
-                focusedNode: ({ event }) => event.node.id
-              })
-            ],
-            target: "focused"
+            type: "xyflow:fitDiagram",
+            params: { duration: 0 }
           },
-          {
-            actions: [
-              "assign lastClickedNode",
-              "open source of focused or last clicked node"
-            ]
-          }
+          "startSyncLayout",
+          assign(({ context }) => ({
+            navigationHistory: {
+              currentIndex: 0,
+              history: [{
+                viewId: context.view.id,
+                fromNode: null,
+                viewport: { ...context.xyflow.getViewport() }
+              }]
+            }
+          }))
         ],
-        "xyflow.paneClick": {
-          actions: [
-            assign({
-              lastClickedNode: null
+        target: "ready"
+      }, {
+        target: "initializing"
+      }]
+    },
+    ready: {
+      initial: "idle",
+      on: {
+        "navigate.to": {
+          guard: "is another view",
+          actions: assign({
+            lastOnNavigate: ({ context, event }) => ({
+              fromView: context.view.id,
+              toView: event.viewId,
+              fromNode: event.fromNode ?? null
             })
+          }),
+          target: "#navigating"
+        },
+        "navigate.back": {
+          guard: ({ context }) => context.navigationHistory.currentIndex > 0,
+          actions: assign(navigateBack),
+          target: "#navigating"
+        },
+        "navigate.forward": {
+          guard: ({ context }) => context.navigationHistory.currentIndex < context.navigationHistory.history.length - 1,
+          actions: assign(navigateForward),
+          target: "#navigating"
+        },
+        "layout.align": {
+          guard: "not readonly",
+          actions: [
+            {
+              type: "layout.align",
+              params: ({ event }) => ({ mode: event.mode })
+            },
+            raise({ type: "saveManualLayout.schedule" })
+          ]
+        },
+        "layout.resetEdgeControlPoints": {
+          guard: "not readonly",
+          actions: [
+            assign(resetEdgeControlPoints),
+            raise({ type: "saveManualLayout.schedule" })
           ]
         },
-        "xyflow.paneDblClick": {
+        "xyflow.resized": {
+          guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
           actions: [
-            { type: "xyflow:fitDiagram" },
-            { type: "trigger:OpenSource", params: ({ context }) => ({ view: context.view.id }) }
+            cancel("fitDiagram"),
+            raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
           ]
         },
+        "open.elementDetails": {
+          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => {
+            let initiatedFrom = null;
+            const fromNodeId = event.fromNode ?? context.view.nodes.find((n) => DiagramNode.modelRef(n) === event.fqn)?.id;
+            const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null;
+            if (fromNodeId && internalNode) {
+              const nodeRect = nodeToRect(internalNode);
+              const zoom = context.xyflow.getZoom();
+              const clientRect = {
+                ...context.xyflow.flowToScreenPosition(nodeRect),
+                width: nodeRect.width * zoom,
+                height: nodeRect.height * zoom
+              };
+              initiatedFrom = {
+                node: fromNodeId,
+                clientRect
+              };
+            }
+            return {
+              type: "open.elementDetails",
+              subject: event.fqn,
+              currentView: context.view,
+              ...initiatedFrom && { initiatedFrom }
+            };
+          })
+        },
+        "open.relationshipsBrowser": {
+          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
+            type: "open.relationshipsBrowser",
+            subject: event.fqn,
+            viewId: context.view.id,
+            scope: "view",
+            closeable: true,
+            enableChangeScope: true,
+            enableSelectSubject: true
+          }))
+        },
+        "open.relationshipDetails": {
+          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
+            type: "open.relationshipDetails",
+            view: context.view,
+            edgeId: event.edgeId
+          }))
+        },
+        "open.source": {
+          actions: {
+            type: "trigger:OpenSource",
+            params: prop("event")
+          }
+        },
+        "walkthrough.start": {
+          guard: "is dynamic view",
+          target: ".walkthrough"
+        },
+        "toggle.feature": {
+          actions: assign({
+            toggledFeatures: ({ context, event }) => {
+              return DiagramToggledFeaturesPersistence.write({
+                ...context.toggledFeatures,
+                [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
+              });
+            }
+          })
+        },
+        "xyflow.nodeMouseEnter": {
+          actions: {
+            type: "onNodeMouseEnter",
+            params: prop("event")
+          }
+        },
+        "xyflow.nodeMouseLeave": {
+          actions: {
+            type: "onNodeMouseLeave",
+            params: prop("event")
+          }
+        },
+        "xyflow.edgeMouseEnter": {
+          actions: {
+            type: "onEdgeMouseEnter",
+            params: prop("event")
+          }
+        },
+        "xyflow.edgeMouseLeave": {
+          actions: {
+            type: "onEdgeMouseLeave",
+            params: prop("event")
+          }
+        },
         "saveManualLayout.*": {
           guard: "not readonly",
           actions: sendTo((c) => c.context.syncLayoutActorRef, ({ event }) => {
@@ -309,92 +482,206 @@ const diagramMachine = setup({
             }
             nonexhaustive(event);
           })
-        },
-        "focus.node": {
-          guard: "enabled: FocusMode",
-          actions: assign({
-            focusedNode: ({ event }) => event.nodeId
-          }),
-          target: "focused"
         }
-      }
-    },
-    focused: {
-      entry: [
-        assign((s) => ({
-          ...focusNodesEdges(s),
-          viewportBeforeFocus: { ...s.context.viewport }
-        })),
-        "open source of focused or last clicked node",
-        spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-        "xyflow:fitFocusedBounds"
+      },
+      exit: [
+        cancel("fitDiagram")
       ],
-      exit: enqueueActions(({ enqueue, context }) => {
-        enqueue.stopChild("hotkey");
-        if (context.viewportBeforeFocus) {
-          enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
-        } else {
-          enqueue({ type: "xyflow:fitDiagram" });
-        }
-        enqueue.assign((s) => ({
-          ...unfocusNodesEdges(s),
-          viewportBeforeFocus: null,
-          focusedNode: null
-        }));
-      }),
-      on: {
-        "xyflow.nodeClick": [
-          {
-            guard: "click: focused node",
-            target: "#idle"
-          },
-          {
-            actions: [
-              assign({
-                lastClickedNode
+      states: {
+        idle: {
+          id: "idle",
+          on: {
+            "xyflow.nodeClick": [
+              {
+                // TODO: xstate fails to infer the type of the guard
+                guard: and([
+                  "enabled: FocusMode",
+                  "click: node has connections",
+                  or([
+                    "click: same node",
+                    "click: selected node"
+                  ])
+                ]),
+                actions: [
+                  assign({
+                    lastClickedNode,
+                    focusedNode: ({ event }) => event.node.id
+                  })
+                ],
+                target: "focused"
+              },
+              {
+                actions: [
+                  "assign lastClickedNode",
+                  "open source of focused or last clicked node"
+                ]
+              }
+            ],
+            "xyflow.paneClick": {
+              actions: [
+                assign({
+                  lastClickedNode: null
+                })
+              ]
+            },
+            "xyflow.paneDblClick": {
+              actions: [
+                { type: "xyflow:fitDiagram" },
+                { type: "trigger:OpenSource", params: ({ context }) => ({ view: context.view.id }) }
+              ]
+            },
+            "focus.node": {
+              guard: "enabled: FocusMode",
+              actions: assign({
+                focusedNode: ({ event }) => event.nodeId
               }),
-              raise(({ event }) => ({
-                type: "focus.node",
-                nodeId: event.node.id
-              }))
-            ]
+              target: "focused"
+            }
           }
-        ],
-        "focus.node": {
-          actions: [
-            assign({
-              focusedNode: ({ event }) => event.nodeId
-            }),
-            assign(focusNodesEdges),
+        },
+        focused: {
+          entry: [
+            assign((s) => ({
+              ...focusNodesEdges(s),
+              viewportBeforeFocus: { ...s.context.viewport }
+            })),
             "open source of focused or last clicked node",
+            spawnChild("hotkeyActorLogic", { id: "hotkey" }),
             "xyflow:fitFocusedBounds"
-          ]
-        },
-        "key.esc": {
-          target: "idle"
-        },
-        "xyflow.paneClick": {
-          actions: assign({
-            lastClickedNode: null
+          ],
+          exit: enqueueActions(({ enqueue, context }) => {
+            enqueue.stopChild("hotkey");
+            if (context.viewportBeforeFocus) {
+              enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
+            } else {
+              enqueue({ type: "xyflow:fitDiagram" });
+            }
+            enqueue.assign((s) => ({
+              ...unfocusNodesEdges(s),
+              viewportBeforeFocus: null,
+              focusedNode: null
+            }));
           }),
-          target: "idle"
+          on: {
+            "xyflow.nodeClick": [
+              {
+                guard: "click: focused node",
+                target: "#idle"
+              },
+              {
+                actions: [
+                  assign({
+                    lastClickedNode
+                  }),
+                  raise(({ event }) => ({
+                    type: "focus.node",
+                    nodeId: event.node.id
+                  }))
+                ]
+              }
+            ],
+            "focus.node": {
+              actions: [
+                assign({
+                  focusedNode: ({ event }) => event.nodeId
+                }),
+                assign(focusNodesEdges),
+                "open source of focused or last clicked node",
+                "xyflow:fitFocusedBounds"
+              ]
+            },
+            "key.esc": {
+              target: "idle"
+            },
+            "xyflow.paneClick": {
+              actions: assign({
+                lastClickedNode: null
+              }),
+              target: "idle"
+            }
+          }
         },
-        "saveManualLayout.*": {
-          guard: "not readonly",
-          actions: sendTo((c) => c.context.syncLayoutActorRef, ({ event }) => {
-            if (event.type === "saveManualLayout.schedule") {
-              return { type: "sync" };
+        walkthrough: {
+          entry: [
+            spawnChild("hotkeyActorLogic", { id: "hotkey" }),
+            assign({
+              viewportBeforeFocus: ({ context }) => context.viewport,
+              activeWalkthrough: ({ context, event }) => {
+                assertEvent(event, "walkthrough.start");
+                const stepId = event.stepId ?? first(context.xyedges).id;
+                return {
+                  stepId,
+                  parallelPrefix: getParallelStepsPrefix(stepId)
+                };
+              }
+            }),
+            assign(updateActiveWalkthrough),
+            "xyflow:fitFocusedBounds"
+          ],
+          on: {
+            "key.esc": {
+              target: "idle"
+            },
+            "key.arrow.left": {
+              actions: raise({ type: "walkthrough.step", direction: "previous" })
+            },
+            "key.arrow.right": {
+              actions: raise({ type: "walkthrough.step", direction: "next" })
+            },
+            "walkthrough.step": {
+              actions: enqueueActions(({ enqueue, context, event }) => {
+                const { stepId } = context.activeWalkthrough;
+                const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
+                const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
+                  min: 0,
+                  max: context.xyedges.length - 1
+                });
+                if (nextStepIndex === stepIndex) {
+                  return;
+                }
+                const nextStepId = context.xyedges[nextStepIndex].id;
+                enqueue.assign({
+                  activeWalkthrough: {
+                    stepId: nextStepId,
+                    parallelPrefix: getParallelStepsPrefix(nextStepId)
+                  }
+                });
+                enqueue.assign(updateActiveWalkthrough);
+                enqueue("xyflow:fitFocusedBounds");
+              })
+            },
+            "walkthrough.end": {
+              target: "idle"
+            },
+            "xyflow.paneDblClick": {
+              target: "idle"
+            },
+            // We received another view, close overlay and process event again
+            "update.view": {
+              guard: "is another view",
+              actions: raise(({ event }) => event, { delay: 50 }),
+              target: "idle"
             }
-            if (event.type === "saveManualLayout.cancel") {
-              return { type: "cancel" };
+          },
+          exit: enqueueActions(({ enqueue, context, event }) => {
+            enqueue.stopChild("hotkey");
+            if (context.viewportBeforeFocus) {
+              enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
+            } else {
+              enqueue({ type: "xyflow:fitDiagram" });
             }
-            nonexhaustive(event);
+            enqueue.assign({
+              activeWalkthrough: null,
+              ...unfocusNodesEdges({ context}),
+              viewportBeforeFocus: null
+            });
           })
         }
       }
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
+      id: "navigating",
       entry: [
         "closeAllOverlays",
         "stopSyncLayout",
@@ -405,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 }) => {
@@ -437,90 +716,15 @@ 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"
         }
       }
-    },
-    walkthrough: {
-      entry: [
-        spawnChild("hotkeyActorLogic", { id: "hotkey" }),
-        assign({
-          viewportBeforeFocus: ({ context }) => context.viewport,
-          activeWalkthrough: ({ context, event }) => {
-            assertEvent(event, "walkthrough.start");
-            const stepId = event.stepId ?? first(context.xyedges).id;
-            return {
-              stepId,
-              parallelPrefix: getParallelStepsPrefix(stepId)
-            };
-          }
-        }),
-        assign(updateActiveWalkthrough),
-        "xyflow:fitFocusedBounds"
-      ],
-      on: {
-        "key.esc": {
-          target: "idle"
-        },
-        "key.arrow.left": {
-          actions: raise({ type: "walkthrough.step", direction: "previous" })
-        },
-        "key.arrow.right": {
-          actions: raise({ type: "walkthrough.step", direction: "next" })
-        },
-        "walkthrough.step": {
-          actions: enqueueActions(({ enqueue, context, event }) => {
-            const { stepId } = context.activeWalkthrough;
-            const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
-            const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
-              min: 0,
-              max: context.xyedges.length - 1
-            });
-            if (nextStepIndex === stepIndex) {
-              return;
-            }
-            const nextStepId = context.xyedges[nextStepIndex].id;
-            enqueue.assign({
-              activeWalkthrough: {
-                stepId: nextStepId,
-                parallelPrefix: getParallelStepsPrefix(nextStepId)
-              }
-            });
-            enqueue.assign(updateActiveWalkthrough);
-            enqueue("xyflow:fitFocusedBounds");
-          })
-        },
-        "walkthrough.end": {
-          target: "idle"
-        },
-        "xyflow.paneDblClick": {
-          target: "idle"
-        },
-        // We received another view, close overlay and process event again
-        "update.view": {
-          guard: "is another view",
-          actions: raise(({ event }) => event, { delay: 50 }),
-          target: "idle"
-        }
-      },
-      exit: enqueueActions(({ enqueue, context, event }) => {
-        enqueue.stopChild("hotkey");
-        if (context.viewportBeforeFocus) {
-          enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
-        } else {
-          enqueue({ type: "xyflow:fitDiagram" });
-        }
-        enqueue.assign({
-          activeWalkthrough: null,
-          ...unfocusNodesEdges({ context }),
-          viewportBeforeFocus: null
-        });
-      })
     }
   },
   on: {
@@ -547,26 +751,11 @@ const diagramMachine = setup({
         params: prop("event")
       }
     },
-    "navigate.to": {
-      guard: "is another view",
-      actions: assign({
-        lastOnNavigate: ({ context, event }) => ({
-          fromView: context.view.id,
-          toView: event.viewId,
-          fromNode: event.fromNode ?? null
-        })
-      }),
-      target: ".navigating"
-    },
-    "navigate.back": {
-      guard: ({ context }) => context.navigationHistory.currentIndex > 0,
-      actions: assign(navigateBack),
-      target: ".navigating"
+    "update.nodeData": {
+      actions: assign(updateNodeData)
     },
-    "navigate.forward": {
-      guard: ({ context }) => context.navigationHistory.currentIndex < context.navigationHistory.history.length - 1,
-      actions: assign(navigateForward),
-      target: ".navigating"
+    "update.edgeData": {
+      actions: assign(updateEdgeData)
     },
     "update.view": {
       actions: [
@@ -574,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) {
@@ -604,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
-          });
         })
       ]
     },
@@ -622,119 +809,32 @@ const diagramMachine = setup({
     },
     "update.features": {
       actions: "updateFeatures"
-    },
-    "update.nodeData": {
-      actions: assign(updateNodeData)
-    },
-    "update.edgeData": {
-      actions: assign(updateEdgeData)
-    },
-    "layout.align": {
-      guard: "not readonly",
-      actions: [
-        {
-          type: "layout.align",
-          params: ({ event }) => ({ mode: event.mode })
-        },
-        raise({ type: "saveManualLayout.schedule" })
-      ]
-    },
-    "layout.resetEdgeControlPoints": {
-      guard: "not readonly",
-      actions: [
-        assign(resetEdgeControlPoints),
-        raise({ type: "saveManualLayout.schedule" })
-      ]
-    },
-    "xyflow.resized": {
-      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
-      actions: [
-        cancel("fitDiagram"),
-        raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
-      ]
-    },
-    "open.elementDetails": {
-      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => {
-        var _a;
-        let initiatedFrom = null;
-        const fromNodeId = event.fromNode ?? ((_a = context.view.nodes.find((n) => DiagramNode.modelRef(n) === event.fqn)) == null ? void 0 : _a.id);
-        const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null;
-        if (fromNodeId && internalNode) {
-          const nodeRect = nodeToRect(internalNode);
-          const zoom = context.xyflow.getZoom();
-          const clientRect = {
-            ...context.xyflow.flowToScreenPosition(nodeRect),
-            width: nodeRect.width * zoom,
-            height: nodeRect.height * zoom
-          };
-          initiatedFrom = {
-            node: fromNodeId,
-            clientRect
-          };
-        }
-        return {
-          type: "open.elementDetails",
-          subject: event.fqn,
-          currentView: context.view,
-          ...initiatedFrom && { initiatedFrom }
-        };
-      })
-    },
-    "open.relationshipsBrowser": {
-      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
-        type: "open.relationshipsBrowser",
-        subject: event.fqn,
-        scope: context.view
-      }))
-    },
-    "open.relationshipDetails": {
-      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
-        type: "open.relationshipDetails",
-        view: context.view,
-        edgeId: event.edgeId
-      }))
-    },
-    "open.source": {
-      actions: {
-        type: "trigger:OpenSource",
-        params: prop("event")
-      }
-    },
-    "walkthrough.start": {
-      guard: "is dynamic view",
-      target: ".walkthrough"
-    },
-    "toggle.feature": {
-      actions: assign({
-        toggledFeatures: ({ context, event }) => {
-          return DiagramToggledFeaturesPersistence.write({
-            ...context.toggledFeatures,
-            [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
-          });
-        }
-      })
     }
   },
   exit: [
     "stopSyncLayout",
+    cancel("fitDiagram"),
     stopChild("hotkey"),
     assign({
       xyflow: null,
       xystore: null,
-      initialized: false,
+      xyedges: [],
+      xynodes: [],
+      initialized: {
+        xydata: false,
+        xyflow: false
+      },
       syncLayoutActorRef: null
     })
   ]
 });
 const nodeRef = (node) => DiagramNode.modelRef(node) ?? DiagramNode.deploymentRef(node);
 function findCorrespondingNode(context, event) {
-  var _a;
-  const fromNodeId = (_a = context.lastOnNavigate) == null ? void 0 : _a.fromNode;
+  const fromNodeId = context.lastOnNavigate?.fromNode;
   const fromNode = fromNodeId && context.view.nodes.find((n) => n.id === fromNodeId);
   const fromRef = fromNode && nodeRef(fromNode);
   const toNode = fromRef && event.view.nodes.find((n) => nodeRef(n) === fromRef);
   return { fromNode, toNode };
 }
-export {
-  diagramMachine
-};
+
+export { diagramMachine };