@likec4/diagram 1.26.1 → 1.27.0

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: {},
@@ -46,9 +48,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 +74,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 +101,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 +117,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 +131,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");
@@ -183,21 +183,64 @@ 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"
       }
-    }),
+    ),
     "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({
@@ -232,72 +275,168 @@ const diagramMachine = setup({
     initializing: {
       on: {
         "xyflow.init": {
-          actions: enqueueActions(({ enqueue, check }) => {
-            enqueue.assign({
+          actions: [
+            assign(({ context, event }) => ({
               initialized: true,
-              xyflow: ({ event }) => event.instance,
-              navigationHistory: ({ context, event }) => ({
+              xyflow: event.instance,
+              navigationHistory: {
                 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"
+              }
+            })),
+            enqueueActions(({ enqueue, check }) => {
+              if (check("enabled: FitView")) {
+                enqueue({
+                  type: "xyflow:fitDiagram",
+                  params: { duration: 0 }
+                });
+              }
+            })
+          ],
+          target: "ready"
         }
       }
     },
-    idle: {
-      id: "idle",
+    ready: {
+      initial: "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
+        "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 +448,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",
@@ -445,82 +698,6 @@ const diagramMachine = setup({
           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 +724,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: [
@@ -622,101 +784,11 @@ 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,
@@ -728,13 +800,11 @@ const diagramMachine = setup({
 });
 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 };