@likec4/diagram 1.44.0 → 1.46.0

package/dist/likec4diagram/state/machine.actions.js

@@ -1,121 +1,18 @@
-import { BBox, invariant, nonNullable, nonexhaustive } from '@likec4/core';
-import { getViewportForBounds } from '@xyflow/react';
+import { nonNullable, nonexhaustive, invariant } from '@likec4/core';
 import { nodeToRect } from '@xyflow/system';
-import { isNumber, isTruthy, hasAtLeast } from 'remeda';
+import { produce } from 'immer';
+import { hasAtLeast, isTruthy } from 'remeda';
 import { assertEvent } from 'xstate';
+import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { createLayoutConstraints } from '../useLayoutConstraints.js';
 import { getAligner, toNodeRect } from './aligners.js';
-import { mergeXYNodesEdges, resetEdgeControlPoints, updateActiveWalkthrough, focusNodesEdges } from './assign.js';
-import { createViewChange } from './createViewChange.js';
+import { resetEdgeControlPoints, mergeXYNodesEdges, focusNodesEdges } from './assign.js';
+import { setViewport, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
+export { assignViewportBefore, fitDiagram, fitFocusedBounds, raiseSetViewport, raiseUpdateView, returnViewportBefore } from './machine.actions.layout.js';
 import { machine } from './machine.setup.js';
-import { typedSystem, activeSequenceBounds, focusedBounds, findDiagramEdge, findDiagramNode } from './utils.js';
-import { MinZoom } from '../../base/const.js';
+import { typedSystem, findDiagramEdge, findDiagramNode } from './utils.js';
 import { Base } from '../../base/Base.js';
 
-function nodeRef(node) {
-  switch (node.type) {
-    case "element":
-    case "compound-element":
-    case "seq-actor":
-      return node.data.modelFqn;
-    case "deployment":
-    case "compound-deployment":
-      return node.data.modelFqn ?? node.data.deploymentFqn;
-    case "seq-parallel":
-    case "view-group":
-      return null;
-    default:
-      nonexhaustive(node);
-  }
-}
-function findCorrespondingNode(context, event) {
-  const fromNodeId = context.lastOnNavigate?.fromNode;
-  const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
-  const fromRef = fromNode && nodeRef(fromNode);
-  const toNode = fromRef && event.xynodes.find((n) => nodeRef(n) === fromRef);
-  return { fromNode, toNode };
-}
-const trigger = {
-  navigateTo: () => machine.emit(({ context }) => ({
-    type: "navigateTo",
-    viewId: nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-  }))
-};
-const xyflow = {
-  fitDiagram: (params) => machine.createAction(({ context, event }) => {
-    params ??= event.type === "fitDiagram" ? event : {};
-    const {
-      bounds = context.view.bounds,
-      duration = 450
-    } = params;
-    const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-    const maxZoom = Math.max(1, transform[2]);
-    const viewport = getViewportForBounds(
-      bounds,
-      width,
-      height,
-      MinZoom,
-      maxZoom,
-      context.fitViewPadding
-    );
-    viewport.x = Math.round(viewport.x);
-    viewport.y = Math.round(viewport.y);
-    panZoom?.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0).catch(
-      console.error
-    );
-  }),
-  fitFocusedBounds: () => machine.createAction(({ context }) => {
-    const isActiveSequenceWalkthrough = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence";
-    const { bounds, duration = 450 } = isActiveSequenceWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
-    const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-    const maxZoom = Math.max(1, transform[2]);
-    const viewport = getViewportForBounds(
-      bounds,
-      width,
-      height,
-      MinZoom,
-      maxZoom,
-      context.fitViewPadding
-    );
-    viewport.x = Math.round(viewport.x);
-    viewport.y = Math.round(viewport.y);
-    panZoom?.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0);
-  }),
-  alignNodeFromToAfterNavigate: (params) => machine.createAction(({ context }) => {
-    const xyflow2 = nonNullable(context.xyflow, "xyflow is not initialized");
-    const elFrom = xyflow2.getInternalNode(params.fromNode);
-    if (!elFrom) return;
-    const fromPos = xyflow2.flowToScreenPosition({
-      x: elFrom.internals.positionAbsolute.x,
-      y: elFrom.internals.positionAbsolute.y
-    }), toPos = xyflow2.flowToScreenPosition(params.toPosition), diff = {
-      x: Math.round(fromPos.x - toPos.x),
-      y: Math.round(fromPos.y - toPos.y)
-    };
-    context.xystore.getState().panBy(diff);
-  }),
-  setViewportCenter: (params) => machine.createAction(({ context, event }) => {
-    let center;
-    if (params) {
-      center = params;
-    } else if (event.type === "update.view") {
-      center = BBox.center(event.view.bounds);
-    } else {
-      center = BBox.center(context.view.bounds);
-    }
-    invariant(context.xyflow, "xyflow is not initialized");
-    const zoom = context.xyflow.getZoom();
-    context.xyflow.setCenter(Math.round(center.x), Math.round(center.y), { zoom });
-  }),
-  setViewport: (params) => machine.createAction(({ context }) => {
-    const {
-      viewport,
-      duration = 350
-    } = params;
-    const panZoom = context.xystore?.getState().panZoom;
-    panZoom?.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0);
-  })
-};
 const disableCompareWithLatest = () => machine.assign(({ context }) => {
   return {
     toggledFeatures: {
@@ -143,7 +40,7 @@ const onEdgeDoubleClick = () => machine.assign(({ context, event }) => {
             ...e.data,
             controlPoints,
             labelBBox: e.data.labelBBox ? { ...e.data.labelBBox, ...pt } : null,
-            labelXY: e.data.labelXY ? pt : null
+            labelXY: null
           }
         };
       }
@@ -151,60 +48,6 @@ const onEdgeDoubleClick = () => machine.assign(({ context, event }) => {
     })
   };
 });
-const emitOnChange = () => machine.enqueueActions(({ event, enqueue }) => {
-  assertEvent(event, "emit.onChange");
-  enqueue.assign({
-    viewportChangedManually: true
-  });
-  enqueue.emit({
-    type: "onChange",
-    change: event.change
-  });
-});
-const emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, context, enqueue }) => {
-  if (!context.features.enableCompareWithLatest) {
-    console.warn("Layout type cannot be changed while CompareWithLatest feature is disabled");
-    return;
-  }
-  const currentLayoutType = context.view._layout;
-  let nextLayoutType = currentLayoutType === "auto" ? "manual" : "auto";
-  if (event.type === "emit.onLayoutTypeChange") {
-    nextLayoutType = event.layoutType;
-  }
-  if (currentLayoutType === nextLayoutType) {
-    console.warn("Ignoring layout type change event, layout type is already", currentLayoutType);
-    return;
-  }
-  if (context.toggledFeatures.enableCompareWithLatest === true) {
-    if (currentLayoutType === "manual" && nextLayoutType === "auto") {
-      const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-      const syncState = syncLayoutActor?.getSnapshot().value;
-      const isPending = syncLayoutActor && (syncState === "pending" || syncState === "paused");
-      if (isPending) {
-        enqueue.sendTo(syncLayoutActor, { type: "cancel" });
-        enqueue.emit({
-          type: "onChange",
-          change: createViewChange(context)
-        });
-      }
-    }
-    const currentViewport = context.viewport;
-    if (currentLayoutType === "auto") {
-      enqueue.assign({
-        viewportOnAutoLayout: currentViewport
-      });
-    }
-    if (currentLayoutType === "manual") {
-      enqueue.assign({
-        viewportOnManualLayout: currentViewport
-      });
-    }
-  }
-  enqueue.emit({
-    type: "onLayoutTypeChange",
-    layoutType: nextLayoutType
-  });
-});
 const assignLastClickedNode = () => machine.assign(({ context, event }) => {
   assertEvent(event, "xyflow.nodeClick");
   const { lastClickedNode } = context;
@@ -227,18 +70,21 @@ const assignLastClickedNode = () => machine.assign(({ context, event }) => {
 });
 const assignFocusedNode = () => machine.assign(({ event }) => {
   let focusedNode;
+  let autoUnfocusTimer = false;
   switch (event.type) {
     case "xyflow.nodeClick":
       focusedNode = event.node.data.id;
       break;
     case "focus.node":
       focusedNode = event.nodeId;
+      autoUnfocusTimer = event.autoUnfocus === true;
       break;
     default:
       throw new Error(`Unexpected event type: ${event.type} in action 'assign: focusedNode'`);
   }
   return {
-    focusedNode
+    focusedNode,
+    autoUnfocusTimer
   };
 });
 const resetLastClickedNode = () => machine.assign(() => ({
@@ -254,14 +100,47 @@ const updateInputs = () => machine.assign(({ event }) => {
   assertEvent(event, "update.inputs");
   return { ...event.inputs };
 });
-const updateXYNodesEdges = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "update.view");
-  return {
-    ...mergeXYNodesEdges({ context, event }),
-    lastClickedNode: null
-  };
+const assignXYDataFromView = (view) => machine.assign(({ context, event }) => {
+  let xydata;
+  {
+    assertEvent(event, "update.view");
+    xydata = "xynodes" in event ? event : convertToXYFlow({
+      dynamicViewVariant: context.dynamicViewVariant,
+      view: event.view,
+      where: context.where
+    });
+  }
+  const update = mergeXYNodesEdges(context, xydata);
+  let { lastClickedNode, focusedNode, activeWalkthrough } = context;
+  if (lastClickedNode || focusedNode || activeWalkthrough) {
+    const nodeIds = new Set(update.xynodes.map((n) => n.id));
+    if (lastClickedNode && !nodeIds.has(lastClickedNode.id)) {
+      lastClickedNode = null;
+    }
+    if (focusedNode && !nodeIds.has(focusedNode)) {
+      focusedNode = null;
+    }
+    const stepId = activeWalkthrough?.stepId;
+    if (stepId && !update.xyedges.some((e) => e.id === stepId)) {
+      activeWalkthrough = null;
+    }
+    return {
+      ...update,
+      lastClickedNode,
+      focusedNode,
+      activeWalkthrough
+    };
+  }
+  return update;
+});
+const focusOnNodesAndEdges = () => machine.enqueueActions(({ context, enqueue }) => {
+  const next = focusNodesEdges(context);
+  if (next) {
+    enqueue.assign(next);
+  } else {
+    enqueue.raise({ type: "key.esc" });
+  }
 });
-const focusOnNodesAndEdges = () => machine.assign(focusNodesEdges);
 const undimEverything = () => machine.assign(({ context }) => ({
   xynodes: context.xynodes.map(Base.setDimmed(false)),
   xyedges: context.xyedges.map(Base.setData({
@@ -269,7 +148,6 @@ const undimEverything = () => machine.assign(({ context }) => ({
     active: false
   }))
 }));
-const updateActiveWalkthroughState = () => machine.assign(updateActiveWalkthrough);
 const assignDynamicViewVariant = () => machine.assign(({ event }) => {
   assertEvent(event, "switch.dynamicViewVariant");
   return {
@@ -306,9 +184,6 @@ const onNodeMouseLeave = (params) => machine.assign(({ context, event }) => {
     })
   };
 });
-const emitWalkthroughStopped = () => machine.emit(() => ({
-  type: "walkthroughStopped"
-}));
 const emitPaneClick = () => machine.emit(() => ({
   type: "paneClick"
 }));
@@ -341,6 +216,10 @@ const emitNodeClick = () => machine.emit(({ context, event }) => {
     xynode: event.node
   };
 });
+const emitNavigateTo = (params) => machine.emit(({ context }) => ({
+  type: "navigateTo",
+  viewId: params?.viewId ?? nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+}));
 const emitEdgeClick = () => machine.emit(({ context, event }) => {
   assertEvent(event, "xyflow.edgeClick");
   const edge = nonNullable(findDiagramEdge(context, event.edge.id), `Edge ${event.edge.id} not found in diagram`);
@@ -350,21 +229,59 @@ const emitEdgeClick = () => machine.emit(({ context, event }) => {
     xyedge: event.edge
   };
 });
-const emitWalkthroughStarted = () => machine.emit(({ context }) => {
-  const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
-  invariant(edge, "Invalid walkthrough state");
-  return {
-    type: "walkthroughStarted",
-    edge
-  };
+const triggerChange = (viewChange) => machine.enqueueActions(({ event, enqueue }) => {
+  let change = viewChange;
+  if (!change) {
+    assertEvent(event, "trigger.change");
+    change = event.change;
+  }
+  enqueue.assign({
+    viewportChangedManually: true
+  });
+  enqueue.sendTo(
+    typedSystem.editorActor,
+    {
+      type: "change",
+      change
+    }
+  );
 });
-const emitWalkthroughStep = () => machine.emit(({ context }) => {
-  const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
-  invariant(edge, "Invalid walkthrough state");
-  return {
-    type: "walkthroughStep",
-    edge
-  };
+const emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, context, enqueue }) => {
+  if (!context.features.enableCompareWithLatest) {
+    console.warn("Layout type cannot be changed while CompareWithLatest feature is disabled");
+    return;
+  }
+  const currentLayoutType = context.view._layout;
+  let nextLayoutType = currentLayoutType === "auto" ? "manual" : "auto";
+  if (event.type === "emit.onLayoutTypeChange") {
+    nextLayoutType = event.layoutType;
+  }
+  if (currentLayoutType === nextLayoutType) {
+    console.warn("Ignoring layout type change event, layout type is already", currentLayoutType);
+    return;
+  }
+  if (context.toggledFeatures.enableCompareWithLatest === true) {
+    if (currentLayoutType === "manual" && nextLayoutType === "auto") {
+      typedSystem(system).editorActorRef?.send({
+        type: "cancel"
+      });
+    }
+    const currentViewport = context.viewport;
+    if (currentLayoutType === "auto") {
+      enqueue.assign({
+        viewportOnAutoLayout: currentViewport
+      });
+    }
+    if (currentLayoutType === "manual") {
+      enqueue.assign({
+        viewportOnManualLayout: currentViewport
+      });
+    }
+  }
+  enqueue.emit({
+    type: "onLayoutTypeChange",
+    layoutType: nextLayoutType
+  });
 });
 const layoutAlign = (params) => machine.createAction(({ context, event }) => {
   let mode;
@@ -416,26 +333,20 @@ const resetEdgesControlPoints = () => machine.assign(({ context }) => {
     })
   };
 });
-const notationsHighlight = (params) => machine.assign(({ context, event }) => {
-  if (!params) {
-    assertEvent(event, "notations.highlight");
-    params = {
-      ...event
-    };
-  }
-  const notation = params.notation;
-  const kinds = params.kind ? [params.kind] : notation.kinds;
+const notationsHighlight = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "notations.highlight");
+  const { notation, kind } = event;
+  const targetKinds = kind ? [kind] : notation.kinds;
+  const shouldHighlight = (node) => node.notation === notation.title && node.shape === notation.shape && node.color === notation.color && targetKinds.includes(node.kind);
   const xynodes = context.xynodes.map((n) => {
     const node = findDiagramNode(context, n.id);
-    if (node && node.notation === notation.title && node.shape === notation.shape && node.color === notation.color && kinds.includes(node.kind)) {
-      return Base.setDimmed(n, false);
-    }
-    return Base.setDimmed(n, "immediate");
+    const highlighted = node && shouldHighlight(node);
+    return Base.setDimmed(n, highlighted ? false : "immediate");
   });
-  return {
-    xynodes,
-    xyedges: context.xyedges.map(Base.setDimmed("immediate"))
-  };
+  const xyedges = context.xyedges.map((edge) => {
+    return Base.setDimmed(edge, true);
+  });
+  return { xynodes, xyedges };
 });
 const tagHighlight = () => machine.assign(({ context, event }) => {
   assertEvent(event, "tag.highlight");
@@ -448,7 +359,7 @@ const tagHighlight = () => machine.assign(({ context, event }) => {
     })
   };
 });
-const toggleFeature = () => machine.assign(({ context, event }) => {
+const assignToggledFeatures = () => machine.assign(({ context, event }) => {
   assertEvent(event, "toggle.feature");
   const currentValue = context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`];
   const nextValue = event.forceValue ?? !currentValue;
@@ -460,57 +371,68 @@ const toggleFeature = () => machine.assign(({ context, event }) => {
   };
 });
 const closeSearch = () => machine.sendTo(
-  ({ system }) => typedSystem(system).searchActorRef,
+  typedSystem.searchActor,
   {
     type: "close"
   }
 );
 const closeAllOverlays = () => machine.sendTo(
-  ({ system }) => typedSystem(system).overlaysActorRef,
+  typedSystem.overlaysActor,
   {
     type: "close.all"
   }
 );
-const isReadOnly = (context) => context.features.enableReadOnly || context.toggledFeatures.enableReadOnly === true;
-const stopSyncLayout = () => machine.enqueueActions(({ enqueue, system }) => {
-  const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-  if (!syncLayoutActor) return;
-  enqueue.stopChild(syncLayoutActor);
-});
-const ensureSyncLayout = () => machine.enqueueActions(({ context, enqueue, system }) => {
-  const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-  if (isReadOnly(context)) {
-    if (syncLayoutActor) {
-      enqueue.stopChild(syncLayoutActor);
-    }
+const stopEditorActor = () => machine.enqueueActions(({ enqueue, system }) => {
+  const actor = typedSystem(system).editorActorRef;
+  if (!actor) return;
+  enqueue.stopChild(actor);
+});
+const ensureEditorActor = () => machine.enqueueActions(({ enqueue, context, system, check }) => {
+  const hasEditor = check("enabled: Editor");
+  const editor = typedSystem(system).editorActorRef;
+  if (!hasEditor && editor) {
+    enqueue.stopChild(editor);
     return;
   }
-  if (syncLayoutActor) return;
-  enqueue.spawnChild("syncManualLayoutActorLogic", {
-    id: "syncLayout",
-    systemId: "syncLayout",
-    input: {
-      viewId: context.view.id
-    },
-    syncSnapshot: true
-  });
+  if (hasEditor && !editor) {
+    enqueue.spawnChild("editorActor", {
+      id: "editor",
+      systemId: "editor",
+      input: {
+        viewId: context.view.id
+      },
+      syncSnapshot: true
+    });
+  }
 });
 const startEditing = (subject = "node") => machine.sendTo(
-  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  typedSystem.editorActor,
   {
-    type: "editing.start",
+    type: "edit.start",
     subject
   }
 );
+const sendSynced = () => machine.sendTo(
+  typedSystem.editorActor,
+  {
+    type: "synced"
+  }
+);
 const stopEditing = (wasChanged = true) => machine.sendTo(
-  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  typedSystem.editorActor,
   {
-    type: "editing.stop",
+    type: "edit.finish",
     wasChanged
   }
 );
+const cancelEditing = () => machine.sendTo(
+  typedSystem.editorActor,
+  {
+    type: "cancel"
+  }
+);
 const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
-const openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue, system }) => {
+const openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
   let initiatedFrom = null;
   let fromNodeId, subject;
   switch (true) {
@@ -564,7 +486,7 @@ const openElementDetails = (params) => machine.enqueueActions(({ context, event,
     };
   }
   enqueue.sendTo(
-    typedSystem(system).overlaysActorRef,
+    typedSystem.overlaysActor,
     {
       type: "open.elementDetails",
       subject,
@@ -573,6 +495,47 @@ const openElementDetails = (params) => machine.enqueueActions(({ context, event,
     }
   );
 });
+const openOverlay = () => machine.enqueueActions(({ context, event, enqueue, check }) => {
+  assertEvent(event, ["open.relationshipsBrowser", "open.relationshipDetails", "open.elementDetails"]);
+  if (!check("enabled: Overlays")) {
+    console.warn("Overlays feature is disabled");
+    return;
+  }
+  switch (event.type) {
+    case "open.elementDetails": {
+      check("enabled: ElementDetails") ? enqueue(openElementDetails()) : console.warn("ElementDetails feature is disabled");
+      break;
+    }
+    case "open.relationshipsBrowser": {
+      enqueue.sendTo(
+        typedSystem.overlaysActor,
+        {
+          type: "open.relationshipsBrowser",
+          subject: event.fqn,
+          viewId: context.view.id,
+          scope: "view",
+          closeable: true,
+          enableChangeScope: true,
+          enableSelectSubject: true
+        }
+      );
+      break;
+    }
+    case "open.relationshipDetails": {
+      enqueue.sendTo(
+        typedSystem.overlaysActor,
+        {
+          type: "open.relationshipDetails",
+          viewId: context.view.id,
+          ...event.params
+        }
+      );
+      break;
+    }
+    default:
+      nonexhaustive(event);
+  }
+});
 const openSourceOfFocusedOrLastClickedNode = () => machine.enqueueActions(({ context, enqueue }) => {
   const nodeId = context.focusedNode ?? context.lastClickedNode?.id;
   if (!nodeId || !context.features.enableVscode) return;
@@ -584,8 +547,8 @@ const openSourceOfFocusedOrLastClickedNode = () => machine.enqueueActions(({ con
     enqueue.raise({ type: "open.source", element: diagramNode.modelRef });
   }
 });
-const ensureOverlaysActorState = () => machine.enqueueActions(({ enqueue, context: { features }, system }) => {
-  const enableOverlays = features.enableElementDetails || features.enableRelationshipDetails || features.enableRelationshipBrowser;
+const ensureOverlaysActor = () => machine.enqueueActions(({ enqueue, check, system }) => {
+  const enableOverlays = check("enabled: Overlays");
   const hasRunning = typedSystem(system).overlaysActorRef;
   if (enableOverlays && !hasRunning) {
     enqueue.spawnChild("overlaysActorLogic", { id: "overlays", systemId: "overlays" });
@@ -598,7 +561,7 @@ const ensureOverlaysActorState = () => machine.enqueueActions(({ enqueue, contex
     enqueue.stopChild("overlays");
   }
 });
-const ensureSearchActorState = () => machine.enqueueActions(({ enqueue, context: { features: { enableSearch } }, system }) => {
+const ensureSearchActor = () => machine.enqueueActions(({ enqueue, context: { features: { enableSearch } }, system }) => {
   const hasRunning = typedSystem(system).searchActorRef;
   if (enableSearch && !hasRunning) {
     enqueue.spawnChild("searchActorLogic", { id: "search", systemId: "search" });
@@ -647,63 +610,121 @@ const onEdgeMouseLeave = () => machine.enqueueActions(({ enqueue, context, event
     event: event.event
   });
 });
-const cancelFitDiagram = () => machine.cancel("fitDiagram");
-const raiseFitDiagram = (params) => machine.enqueueActions(({ enqueue }) => {
-  enqueue.cancel("fitDiagram");
-  enqueue.raise(
-    {
-      type: "fitDiagram",
-      ...isNumber(params?.duration) ? { duration: params.duration } : {}
-    },
-    {
-      id: "fitDiagram",
-      ...isNumber(params?.delay) ? { delay: params.delay } : {}
+const startHotKeyActor = () => machine.spawnChild("hotkeyActorLogic", { id: "hotkey" });
+const stopHotKeyActor = () => machine.stopChild("hotkey");
+const AUTO_UNFOCUS_DELAY = 3e3;
+const startAutoUnfocusTimer = () => machine.enqueueActions(({ context, enqueue }) => {
+  if (context.autoUnfocusTimer && AUTO_UNFOCUS_DELAY > 0) {
+    enqueue.raise({ type: "focus.autoUnfocus" }, { delay: AUTO_UNFOCUS_DELAY, id: "autoUnfocusTimer" });
+  }
+});
+const cancelAutoUnfocusTimer = () => machine.cancel("autoUnfocusTimer");
+const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }) => {
+  assertEvent(event, ["navigate.to", "navigate.back", "navigate.forward"]);
+  const {
+    view,
+    focusedNode,
+    activeWalkthrough,
+    dynamicViewVariant,
+    viewport,
+    viewportChangedManually,
+    viewportBefore,
+    navigationHistory: {
+      currentIndex,
+      history: _history
     }
-  );
+  } = context;
+  let history = [..._history];
+  if (currentIndex < _history.length) {
+    const updatedEntry = produce(_history[currentIndex], (draft) => {
+      draft.viewport = { ...viewport };
+      draft.viewportChangedManually = viewportChangedManually;
+      draft.focusedNode = focusedNode;
+      if (view._type === "dynamic") {
+        draft.activeWalkthrough = activeWalkthrough?.stepId ?? null;
+        draft.dynamicViewVariant = dynamicViewVariant;
+      } else {
+        draft.activeWalkthrough = null;
+        draft.dynamicViewVariant = null;
+      }
+      if (viewportBefore) {
+        draft.viewportBefore = viewportBefore;
+      } else {
+        delete draft.viewportBefore;
+      }
+    });
+    history = [..._history];
+    history[currentIndex] = updatedEntry;
+  }
+  switch (event.type) {
+    case "navigate.to": {
+      enqueue.assign({
+        navigationHistory: {
+          currentIndex,
+          history
+        },
+        lastOnNavigate: {
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null,
+          focusOnElement: event.focusOnElement ?? null
+        }
+      });
+      enqueue(emitNavigateTo());
+      break;
+    }
+    case "navigate.back": {
+      invariant(currentIndex > 0, "Cannot navigate back");
+      const stepBack = history[currentIndex - 1];
+      enqueue.assign({
+        navigationHistory: {
+          currentIndex: currentIndex - 1,
+          history
+        },
+        lastOnNavigate: null
+      });
+      enqueue(emitNavigateTo({ viewId: stepBack.viewId }));
+      break;
+    }
+    case "navigate.forward": {
+      invariant(currentIndex < history.length - 1, "Cannot navigate forward");
+      const stepForward = history[currentIndex + 1];
+      enqueue.assign({
+        navigationHistory: {
+          currentIndex: currentIndex + 1,
+          history
+        },
+        lastOnNavigate: null
+      });
+      enqueue(emitNavigateTo({ viewId: stepForward.viewId }));
+      break;
+    }
+    default:
+      nonexhaustive(event);
+  }
 });
 const updateView = () => machine.enqueueActions(
-  ({ enqueue, event, check, context, system }) => {
-    assertEvent(event, "update.view");
-    const isAnotherView = check("is another view");
-    enqueue(cancelFitDiagram());
+  ({ enqueue, event, context }) => {
+    if (event.type !== "update.view") {
+      console.warn(`Ignoring unexpected event type: ${event.type} in action 'update.view'`);
+      return;
+    }
+    const nextView = event.view;
+    const isAnotherView = nextView.id !== context.view.id;
     if (isAnotherView) {
-      enqueue(stopSyncLayout());
-      enqueue(closeAllOverlays());
-      enqueue(closeSearch());
-      enqueue.assign({
-        focusedNode: null
-      });
-      enqueue(disableCompareWithLatest());
-      const { fromNode, toNode } = findCorrespondingNode(context, event);
-      if (fromNode && toNode) {
-        enqueue(xyflow.alignNodeFromToAfterNavigate({
-          fromNode: fromNode.id,
-          toPosition: {
-            x: toNode.data.x,
-            y: toNode.data.y
-          }
-        }));
-        enqueue(raiseFitDiagram({ delay: 80 }));
-      } else {
-        enqueue(
-          xyflow.setViewportCenter()
-        );
-        enqueue(raiseFitDiagram({ duration: 200, delay: 25 }));
-      }
-      enqueue(updateXYNodesEdges());
-      enqueue(ensureSyncLayout());
+      console.warn("updateView called for another view - ignoring", { event });
       return;
     }
-    enqueue(updateXYNodesEdges());
-    const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
-    if (syncLayoutActor) {
-      enqueue.sendTo(syncLayoutActor, { type: "synced" });
+    enqueue(assignXYDataFromView());
+    if (event.source === "editor") {
+      return;
     }
-    const nextView = event.view;
+    enqueue(sendSynced());
+    let recenter = !context.viewportChangedManually && !context.focusedNode && !context.activeWalkthrough;
     if (context.toggledFeatures.enableCompareWithLatest === true && context.view._layout !== nextView._layout) {
       if (nextView._layout === "auto" && context.viewportOnAutoLayout) {
         enqueue(
-          xyflow.setViewport({
+          setViewport({
             viewport: context.viewportOnAutoLayout,
             duration: 0
           })
@@ -712,7 +733,7 @@ const updateView = () => machine.enqueueActions(
       }
       if (nextView._layout === "manual" && context.viewportOnManualLayout) {
         enqueue(
-          xyflow.setViewport({
+          setViewport({
             viewport: context.viewportOnManualLayout,
             duration: 0
           })
@@ -720,16 +741,15 @@ const updateView = () => machine.enqueueActions(
         return;
       }
     }
-    let recenter = !context.viewportChangedManually;
     recenter = recenter || nextView._type === "dynamic" && context.view._type === "dynamic" && nextView.variant !== context.view.variant;
     recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
     if (recenter) {
-      enqueue(
-        xyflow.setViewportCenter(BBox.center(nextView.bounds))
-      );
-      enqueue(raiseFitDiagram({ delay: 50 }));
+      enqueue(cancelFitDiagram());
+      enqueue(raiseFitDiagram({
+        bounds: event.view.bounds
+      }));
     }
   }
 );
 
-export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, cancelFitDiagram, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNodeClick, emitOnChange, emitOnLayoutTypeChange, emitOpenSource, emitPaneClick, emitWalkthroughStarted, emitWalkthroughStep, emitWalkthroughStopped, ensureOverlaysActorState, ensureSearchActorState, ensureSyncLayout, findCorrespondingNode, focusOnNodesAndEdges, layoutAlign, nodeRef, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, resetEdgesControlPoints, resetLastClickedNode, startEditing, stopEditing, stopSyncLayout, tagHighlight, toggleFeature, trigger, undimEverything, updateActiveWalkthroughState, updateFeatures, updateInputs, updateView, updateXYNodesEdges, xyflow };
+export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitPaneClick, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, focusOnNodesAndEdges, handleNavigate, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, resetEdgesControlPoints, resetLastClickedNode, sendSynced, setViewport, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };