@likec4/diagram 1.47.0 → 1.48.0

package/dist/likec4diagram/state/machine.actions.d.ts

@@ -341,6 +341,10 @@ export declare const focusOnNodesAndEdges: () => ActionFunction<Context, Events,
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const undimEverything: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -456,6 +460,7 @@ export declare const onNodeMouseLeave: (params?: {
 }>, never, never, never, never>;
 export declare const emitPaneClick: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
 export declare const emitOpenSource: (params?: OpenSourceParams) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
+export declare const emitOpenSourceOfView: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
 export declare const emitInitialized: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
 export declare const emitNodeClick: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>;
 export declare const emitNavigateTo: (params?: {
@@ -577,6 +582,10 @@ export declare const triggerChange: (viewChange?: ViewChange) => ActionFunction<
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const emitOnLayoutTypeChange: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -693,6 +702,10 @@ export declare const emitOnLayoutTypeChange: () => ActionFunction<Context, Event
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const layoutAlign: (params?: {
     mode: AlignmentMode;
@@ -811,6 +824,10 @@ export declare const layoutAlign: (params?: {
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const resetEdgesControlPoints: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -1037,6 +1054,10 @@ export declare const stopEditorActor: () => ActionFunction<Context, Events, Even
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 /**
  * Ensure that the sync layout actor is running or stopped based on the read-only state
@@ -1156,6 +1177,10 @@ export declare const ensureEditorActor: () => ActionFunction<Context, Events, Ev
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const startEditing: (subject?: "node" | "edge") => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
 export declare const sendSynced: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
@@ -1279,6 +1304,10 @@ export declare const openElementDetails: (params?: {
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const openOverlay: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -1395,6 +1424,10 @@ export declare const openOverlay: () => ActionFunction<Context, Events, Events,
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const openSourceOfFocusedOrLastClickedNode: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -1511,6 +1544,10 @@ export declare const openSourceOfFocusedOrLastClickedNode: () => ActionFunction<
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 /**
  * Ensure that the overlays actor is running or stopped based on the current feature flags
@@ -1630,6 +1667,10 @@ export declare const ensureOverlaysActor: () => ActionFunction<Context, Events,
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 /**
  * Ensure that the search actor is running or stopped based on the current feature flags
@@ -1749,6 +1790,10 @@ export declare const ensureSearchActor: () => ActionFunction<Context, Events, Ev
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const onEdgeMouseEnter: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -1865,6 +1910,10 @@ export declare const onEdgeMouseEnter: () => ActionFunction<Context, Events, Eve
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const onEdgeMouseLeave: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -1981,6 +2030,10 @@ export declare const onEdgeMouseLeave: () => ActionFunction<Context, Events, Eve
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const reraise: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
 export declare const startHotKeyActor: () => ActionFunction<Context, Events, Events, undefined, Values<{
@@ -2126,6 +2179,10 @@ export declare const startAutoUnfocusTimer: () => ActionFunction<Context, Events
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const cancelAutoUnfocusTimer: () => CancelAction<Context, Events, undefined, Events>;
 export declare const handleNavigate: () => ActionFunction<Context, Events, Events, undefined, Values<{
@@ -2243,6 +2300,10 @@ export declare const handleNavigate: () => ActionFunction<Context, Events, Event
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const updateView: () => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
@@ -2359,4 +2420,8 @@ export declare const updateView: () => ActionFunction<Context, Events, Events, u
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;

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

@@ -1,4 +1,4 @@
-import { nonNullable, nonexhaustive, invariant } from '@likec4/core';
+import { nonNullable, BBox, nonexhaustive, invariant } from '@likec4/core';
 import { nodeToRect } from '@xyflow/system';
 import { produce } from 'immer';
 import { hasAtLeast, isTruthy } from 'remeda';
@@ -7,10 +7,10 @@ import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { createLayoutConstraints } from '../useLayoutConstraints.js';
 import { getAligner, toNodeRect } from './aligners.js';
 import { resetEdgeControlPoints, mergeXYNodesEdges, focusNodesEdges } from './assign.js';
-import { setViewport, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
+import { setViewport, setViewportCenter, 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, findDiagramEdge, findDiagramNode } from './utils.js';
+import { typedSystem, findDiagramNode, findDiagramEdge, viewBounds } from './utils.js';
 import { Base } from '../../base/Base.js';
 
 const disableCompareWithLatest = () => machine.assign(({ context }) => {
@@ -31,20 +31,20 @@ const onEdgeDoubleClick = () => machine.assign(({ context, event }) => {
   const { nodeLookup } = context.xystore.getState();
   return {
     xyedges: context.xyedges.map((e) => {
-      if (e.id === event.edge.id) {
-        const controlPoints = resetEdgeControlPoints(nodeLookup, e);
-        const pt = controlPoints[0];
-        return {
-          ...e,
-          data: {
-            ...e.data,
-            controlPoints,
-            labelBBox: e.data.labelBBox ? { ...e.data.labelBBox, ...pt } : null,
-            labelXY: null
-          }
-        };
+      if (e.id !== event.edge.id) {
+        return e;
       }
-      return e;
+      const controlPoints = resetEdgeControlPoints(nodeLookup, e);
+      const pt = controlPoints[0];
+      return {
+        ...e,
+        data: {
+          ...e.data,
+          controlPoints,
+          labelBBox: e.data.labelBBox ? { ...e.data.labelBBox, ...pt } : null,
+          labelXY: null
+        }
+      };
     })
   };
 });
@@ -75,10 +75,11 @@ const assignFocusedNode = () => machine.assign(({ event }) => {
     case "xyflow.nodeClick":
       focusedNode = event.node.data.id;
       break;
-    case "focus.node":
+    case "focus.node": {
       focusedNode = event.nodeId;
       autoUnfocusTimer = event.autoUnfocus === true;
       break;
+    }
     default:
       throw new Error(`Unexpected event type: ${event.type} in action 'assign: focusedNode'`);
   }
@@ -105,6 +106,7 @@ const assignXYDataFromView = (view) => machine.assign(({ context, event }) => {
   {
     assertEvent(event, "update.view");
     xydata = "xynodes" in event ? event : convertToXYFlow({
+      currentViewId: context.view.id,
       dynamicViewVariant: context.dynamicViewVariant,
       view: event.view,
       where: context.where
@@ -188,18 +190,18 @@ const emitPaneClick = () => machine.emit(() => ({
   type: "paneClick"
 }));
 const emitOpenSource = (params) => machine.emit(({ event }) => {
-  if (params) {
-    return {
-      type: "openSource",
-      params
-    };
-  }
   assertEvent(event, "open.source");
   return {
     type: "openSource",
     params: event
   };
 });
+const emitOpenSourceOfView = () => machine.emit(({ context }) => ({
+  type: "openSource",
+  params: {
+    view: context.view.id
+  }
+}));
 const emitInitialized = () => machine.emit(({ context }) => {
   invariant(context.xyflow, "XYFlow instance not found");
   return {
@@ -361,12 +363,13 @@ const tagHighlight = () => 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 feature = `enable${event.feature}`;
+  const currentValue = context.toggledFeatures[feature] ?? context.features[feature];
   const nextValue = event.forceValue ?? !currentValue;
   return {
     toggledFeatures: {
       ...context.toggledFeatures,
-      [`enable${event.feature}`]: nextValue
+      [feature]: nextValue
     }
   };
 });
@@ -418,7 +421,7 @@ const sendSynced = () => machine.sendTo(
     type: "synced"
   }
 );
-const stopEditing = (wasChanged = true) => machine.sendTo(
+const stopEditing = (wasChanged = false) => machine.sendTo(
   typedSystem.editorActor,
   {
     type: "edit.finish",
@@ -507,6 +510,10 @@ const openOverlay = () => machine.enqueueActions(({ context, event, enqueue, che
       break;
     }
     case "open.relationshipsBrowser": {
+      if (!context.features.enableRelationshipBrowser) {
+        console.warn("RelationshipBrowser feature is disabled");
+        return;
+      }
       enqueue.sendTo(
         typedSystem.overlaysActor,
         {
@@ -522,6 +529,10 @@ const openOverlay = () => machine.enqueueActions(({ context, event, enqueue, che
       break;
     }
     case "open.relationshipDetails": {
+      if (!context.features.enableRelationshipDetails) {
+        console.warn("RelationshipDetails feature is disabled");
+        return;
+      }
       enqueue.sendTo(
         typedSystem.overlaysActor,
         {
@@ -629,14 +640,12 @@ const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }
     viewport,
     viewportChangedManually,
     viewportBefore,
-    navigationHistory: {
-      currentIndex,
-      history: _history
-    }
+    navigationHistory
   } = context;
-  let history = [..._history];
+  let { currentIndex, history: _history } = navigationHistory;
+  let history = _history;
   if (currentIndex < _history.length) {
-    const updatedEntry = produce(_history[currentIndex], (draft) => {
+    const updatedEntry = produce(_history.at(currentIndex) ?? {}, (draft) => {
       draft.viewport = { ...viewport };
       draft.viewportChangedManually = viewportChangedManually;
       draft.focusedNode = focusedNode;
@@ -648,7 +657,7 @@ const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }
         draft.dynamicViewVariant = null;
       }
       if (viewportBefore) {
-        draft.viewportBefore = viewportBefore;
+        draft.viewportBefore = structuredClone(viewportBefore);
       } else {
         delete draft.viewportBefore;
       }
@@ -720,7 +729,6 @@ const updateView = () => machine.enqueueActions(
       return;
     }
     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(
@@ -741,15 +749,19 @@ const updateView = () => machine.enqueueActions(
         return;
       }
     }
-    recenter = recenter || nextView._type === "dynamic" && context.view._type === "dynamic" && nextView.variant !== context.view.variant;
+    let recenter = !context.viewportChangedManually && !context.focusedNode && !context.activeWalkthrough;
     recenter = recenter || context.toggledFeatures.enableCompareWithLatest === true && !!nextView._layout && context.view._layout !== nextView._layout;
+    if (nextView._type === "dynamic" && context.view._type === "dynamic") {
+      if (nextView.variant === context.view.variant && nextView.variant !== context.dynamicViewVariant) {
+        const nextCenter = BBox.center(viewBounds(context, nextView));
+        enqueue(setViewportCenter(nextCenter));
+      }
+    }
     if (recenter) {
       enqueue(cancelFitDiagram());
-      enqueue(raiseFitDiagram({
-        bounds: event.view.bounds
-      }));
+      enqueue(raiseFitDiagram());
     }
   }
 );
 
-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 };
+export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, assignXYDataFromView, cancelAutoUnfocusTimer, cancelEditing, cancelFitDiagram, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnLayoutTypeChange, emitOpenSource, emitOpenSourceOfView, emitPaneClick, ensureEditorActor, ensureOverlaysActor, ensureSearchActor, focusOnNodesAndEdges, handleNavigate, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openOverlay, openSourceOfFocusedOrLastClickedNode, raiseFitDiagram, resetEdgesControlPoints, resetLastClickedNode, sendSynced, setViewport, setViewportCenter, startAutoUnfocusTimer, startEditing, startHotKeyActor, stopEditing, stopEditorActor, stopHotKeyActor, tagHighlight, triggerChange, undimEverything, updateFeatures, updateInputs, updateView };

package/dist/likec4diagram/state/machine.actions.layout.d.ts

@@ -126,6 +126,10 @@ export declare const setViewport: (params?: {
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const setViewportCenter: (params?: {
     x: number;
@@ -245,11 +249,15 @@ export declare const setViewportCenter: (params?: {
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const fitDiagram: (params?: {
     duration?: number;
     bounds?: BBox;
-}) => ActionFunction<Context, Events, Events, undefined, Values<{
+}) => ActionFunction<Context, Events, Events, unknown, Values<{
     hotkeyActorLogic: {
         src: "hotkeyActorLogic";
         logic: HotkeyActorLogic;
@@ -364,6 +372,10 @@ export declare const fitDiagram: (params?: {
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Events, unknown, Values<{
     hotkeyActorLogic: {
@@ -480,6 +492,10 @@ export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Eve
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;
 export declare const raiseSetViewport: (params: {
     delay?: number;
@@ -493,7 +509,7 @@ export declare const raiseFitDiagram: (params?: {
     bounds?: BBox;
 }) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
 export declare const raiseUpdateView: (view?: DiagramView) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-export declare const assignViewportBefore: (viewport?: Viewport | null) => ActionFunction<Context, Events, Events, undefined, Values<{
+export declare const assignViewportBefore: (viewport?: Viewport | false) => ActionFunction<Context, Events, Events, undefined, Values<{
     hotkeyActorLogic: {
         src: "hotkeyActorLogic";
         logic: HotkeyActorLogic;
@@ -638,4 +654,8 @@ export declare const returnViewportBefore: (params?: {
         type: "click: selected edge";
         params: unknown;
     };
+    "click: active walkthrough step": {
+        type: "click: active walkthrough step";
+        params: unknown;
+    };
 }>, never, EmittedEvents>;

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

@@ -1,8 +1,8 @@
-import { nonNullable } from '@likec4/core';
+import { nonNullable, BBox, invariant } from '@likec4/core';
 import { getViewportForBounds } from '@xyflow/react';
 import { assertEvent } from 'xstate';
 import { machine } from './machine.setup.js';
-import { activeSequenceBounds, focusedBounds } from './utils.js';
+import { viewBounds, activeSequenceBounds, focusedBounds } from './utils.js';
 import { MinZoom } from '../../base/const.js';
 
 const setViewport = (params) => machine.createAction(({ context, event }) => {
@@ -15,7 +15,7 @@ const setViewport = (params) => machine.createAction(({ context, event }) => {
     viewport = event.viewport;
     duration = event.duration;
   }
-  duration = duration ?? 400;
+  duration = duration ?? 450;
   const { panZoom } = nonNullable(context.xystore).getState();
   const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
   panZoom?.setViewport({
@@ -23,21 +23,38 @@ const setViewport = (params) => machine.createAction(({ context, event }) => {
     y: Math.round(viewport.y),
     zoom: viewport.zoom
   }, animationProps).catch((err) => {
-    console.error("Error during fitDiagram panZoom setViewport", { err });
+    console.error("Error during setViewport", { err });
+  });
+});
+const setViewportCenter = (params) => machine.createAction(({ context, event }) => {
+  let center;
+  if (params) {
+    center = params;
+  } else if (event.type === "update.view") {
+    center = BBox.center(viewBounds(context, event.view));
+  } else {
+    center = BBox.center(viewBounds(context));
+  }
+  invariant(context.xyflow, "xyflow is not initialized");
+  const zoom = context.xyflow.getZoom();
+  context.xyflow.setCenter(
+    Math.round(center.x),
+    Math.round(center.y),
+    { zoom }
+  ).catch((err) => {
+    console.error("Error during setViewportCenter", { err });
   });
 });
-const fitDiagram = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
-  let bounds = context.view.bounds, duration;
+const fitDiagram = (params) => machine.createAction(({ context, event }) => {
+  let bounds, duration;
   if (params) {
-    bounds = params.bounds ?? context.view.bounds;
+    bounds = params.bounds;
     duration = params.duration;
   } else if (event.type === "xyflow.fitDiagram") {
-    bounds = event.bounds ?? context.view.bounds;
+    bounds = event.bounds;
     duration = event.duration;
-    enqueue.assign({
-      viewportChangedManually: false
-    });
   }
+  bounds ??= viewBounds(context);
   duration ??= 450;
   const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
   const maxZoom = Math.max(1, transform[2]);
@@ -119,18 +136,19 @@ const assignViewportBefore = (viewport) => machine.assign(({ context }) => {
 });
 const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
   enqueue(cancelFitDiagram());
+  const noDelay = params?.delay === 0;
   if (viewportBefore) {
     enqueue.assign({
       viewportChangedManually: viewportBefore.wasChangedManually,
       viewportBefore: null
     });
-    if (params && params.delay === 0) {
+    if (noDelay) {
       enqueue(setViewport({ viewport: viewportBefore.value, ...params }));
     } else {
       enqueue(raiseSetViewport({ viewport: viewportBefore.value, ...params }));
     }
   } else {
-    if (params && params.delay === 0) {
+    if (noDelay) {
       enqueue(fitDiagram({ ...params }));
     } else {
       enqueue(raiseFitDiagram({ ...params }));
@@ -138,4 +156,4 @@ const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, cont
   }
 });
 
-export { assignViewportBefore, cancelFitDiagram, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport };
+export { assignViewportBefore, cancelFitDiagram, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter };

package/dist/likec4diagram/state/machine.d.ts

@@ -1,5 +1,5 @@
 import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor';
+import { EditorActorRef } from '../../editor/editorActor.states';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Input } from './machine.setup';

package/dist/likec4diagram/state/machine.js

@@ -1,14 +1,14 @@
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { DefaultFeatures } from '../../context/DiagramFeatures.js';
 import { updateEdgeData, updateNodeData } from './assign.js';
-import { emitOnLayoutTypeChange, triggerChange, updateFeatures, updateInputs, assignDynamicViewVariant, stopEditorActor } from './machine.actions.js';
+import { stopEditorActor, emitOnLayoutTypeChange, triggerChange, updateFeatures, updateInputs, assignDynamicViewVariant } from './machine.actions.js';
 import { machine } from './machine.setup.js';
 import { isReady, initializing } from './machine.state.initializing.js';
 import { navigating } from './machine.state.navigating.js';
 import { ready } from './machine.state.ready.js';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
-import { raiseUpdateView, cancelFitDiagram } from './machine.actions.layout.js';
+import { cancelFitDiagram, raiseUpdateView } from './machine.actions.layout.js';
 
 const _diagramMachine = machine.createMachine({
   initial: "initializing",
@@ -49,25 +49,7 @@ const _diagramMachine = machine.createMachine({
     ready,
     navigating,
     final: {
-      type: "final",
-      entry: [
-        stopEditorActor(),
-        cancelFitDiagram(),
-        xstateActions_cjsExports.stopChild("hotkey"),
-        xstateActions_cjsExports.stopChild("overlays"),
-        xstateActions_cjsExports.stopChild("search"),
-        xstateActions_cjsExports.stopChild("mediaPrint"),
-        xstateActions_cjsExports.assign({
-          xyflow: null,
-          xystore: null,
-          xyedges: [],
-          xynodes: [],
-          initialized: {
-            xydata: false,
-            xyflow: false
-          }
-        })
-      ]
+      type: "final"
     }
   },
   on: {
@@ -81,6 +63,9 @@ const _diagramMachine = machine.createMachine({
       guard: ({ context, event }) => context.dynamicViewVariant !== event.variant,
       actions: [
         assignDynamicViewVariant(),
+        xstateActions_cjsExports.assign({
+          viewportChangedManually: false
+        }),
         raiseUpdateView()
       ]
     },
@@ -106,14 +91,12 @@ const _diagramMachine = machine.createMachine({
     "emit.onLayoutTypeChange": {
       actions: emitOnLayoutTypeChange()
     },
-    "xyflow.applyNodeChanges": {
-      actions: xstateActions_cjsExports.assign({
-        xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes)
-      })
-    },
-    "xyflow.applyEdgeChanges": {
-      actions: xstateActions_cjsExports.assign({
-        xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges)
+    "xyflow.applyChanges": {
+      actions: xstateActions_cjsExports.assign(({ context, event }) => {
+        return {
+          xynodes: event.nodes ? applyNodeChanges(event.nodes, context.xynodes) : context.xynodes,
+          xyedges: event.edges ? applyEdgeChanges(event.edges, context.xyedges) : context.xyedges
+        };
       })
     },
     "xyflow.viewportMoved": {
@@ -123,7 +106,25 @@ const _diagramMachine = machine.createMachine({
       }))
     },
     "destroy": {
-      target: ".final"
+      target: ".final",
+      actions: [
+        stopEditorActor(),
+        cancelFitDiagram(),
+        xstateActions_cjsExports.stopChild("hotkey"),
+        xstateActions_cjsExports.stopChild("overlays"),
+        xstateActions_cjsExports.stopChild("search"),
+        xstateActions_cjsExports.stopChild("mediaPrint"),
+        xstateActions_cjsExports.assign({
+          xyflow: null,
+          xystore: null,
+          xyedges: [],
+          xynodes: [],
+          initialized: {
+            xydata: false,
+            xyflow: false
+          }
+        })
+      ]
     }
   }
 });