@likec4/diagram 1.47.0 → 1.49.0

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

@@ -1,8 +1,9 @@
-import { nonNullable } from '@likec4/core';
-import { getViewportForBounds } from '@xyflow/react';
+import { nonNullable, isNonEmptyArray, BBox, invariant } from '@likec4/core';
+import { getViewportForBounds, getNodesBounds } from '@xyflow/react';
 import { assertEvent } from 'xstate';
+import { calcEdgeBounds } from '../../utils/view-bounds.js';
 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 +16,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 +24,72 @@ 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 fitDiagram = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
-  let bounds = context.view.bounds, duration;
+const setViewportCenter = (params) => machine.createAction(({ context, event }) => {
+  let center;
   if (params) {
-    bounds = params.bounds ?? context.view.bounds;
+    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 centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
+  assertEvent(event, "xyflow.centerViewport");
+  const xystate = context.xystore.getState();
+  if ("edgeId" in event) {
+    const edge = xystate.edgeLookup.get(event.edgeId);
+    if (!edge) {
+      return { type: "noop" };
+    }
+    const sourceNode = xystate.nodeLookup.get(edge.source);
+    const targetNode = xystate.nodeLookup.get(edge.target);
+    if (!sourceNode || !targetNode) {
+      return { type: "noop" };
+    }
+    const bounds2 = getNodesBounds([sourceNode, targetNode], xystate);
+    const edgeBounds = calcEdgeBounds({
+      points: edge.data.points,
+      controlPoints: edge.data.controlPoints && isNonEmptyArray(edge.data.controlPoints) ? edge.data.controlPoints : null,
+      labelBBox: edge.data.labelBBox ?? null
+    });
+    return {
+      type: "xyflow.fitDiagram",
+      bounds: BBox.merge(bounds2, edgeBounds)
+    };
+  }
+  const node = xystate.nodeLookup.get(event.nodeId);
+  if (!node) {
+    return { type: "noop" };
+  }
+  const bounds = getNodesBounds([node], xystate);
+  return {
+    type: "xyflow.fitDiagram",
+    bounds
+  };
+});
+const fitDiagram = (params) => machine.createAction(({ context, event }) => {
+  let bounds, duration;
+  if (params) {
+    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 +171,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 +191,4 @@ const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, cont
   }
 });
 
-export { assignViewportBefore, cancelFitDiagram, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport };
+export { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, 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",
@@ -16,7 +16,10 @@ const _diagramMachine = machine.createMachine({
     ...input,
     xyedges: [],
     xynodes: [],
-    features: { ...DefaultFeatures },
+    features: {
+      ...DefaultFeatures,
+      ...input.features
+    },
     toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true,
       enableCompareWithLatest: false
@@ -49,25 +52,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 +66,9 @@ const _diagramMachine = machine.createMachine({
       guard: ({ context, event }) => context.dynamicViewVariant !== event.variant,
       actions: [
         assignDynamicViewVariant(),
+        xstateActions_cjsExports.assign({
+          viewportChangedManually: false
+        }),
         raiseUpdateView()
       ]
     },
@@ -106,14 +94,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 +109,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
+          }
+        })
+      ]
     }
   }
 });

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

@@ -1,4 +1,4 @@
-import { BBox } from '@likec4/core';
+import { BBox } from '@likec4/core/geometry';
 import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutType, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId, WhereOperator } from '@likec4/core/types';
 import { EdgeChange, NodeChange, Rect, Viewport } from '@xyflow/system';
 import { MouseEvent } from 'react';
@@ -44,6 +44,7 @@ export interface Input {
     fitViewPadding: ViewPaddings;
     where: WhereOperator | null;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+    features?: EnabledFeatures;
 }
 export type ToggledFeatures = {
     [P in `enable${TogglableFeature}`]?: boolean;
@@ -99,11 +100,9 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.init';
     instance: XYFlowInstance;
 } | {
-    type: 'xyflow.applyNodeChanges';
-    changes: NodeChange<Types.Node>[];
-} | {
-    type: 'xyflow.applyEdgeChanges';
-    changes: EdgeChange<Types.Edge>[];
+    type: 'xyflow.applyChanges';
+    edges?: EdgeChange<Types.Edge>[];
+    nodes?: NodeChange<Types.Node>[];
 } | {
     type: 'xyflow.viewportMoved';
     viewport: Viewport;
@@ -145,6 +144,14 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.setViewport';
     duration?: number;
     viewport: Viewport;
+} | {
+    type: 'xyflow.centerViewport';
+    nodeId: NodeId;
+    duration?: number;
+} | {
+    type: 'xyflow.centerViewport';
+    edgeId: EdgeId;
+    duration?: number;
 } | {
     type: 'update.nodeData';
     nodeId: NodeId;
@@ -168,7 +175,7 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     bounds: BBox;
 } | {
     type: 'update.inputs';
-    inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant'>>;
+    inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant' | 'features'>>;
 } | {
     type: 'update.features';
     features: EnabledFeatures;
@@ -225,6 +232,14 @@ export type Events = HotKeyEvent | MediaPrintEvent | {
     direction: 'next' | 'previous';
 } | {
     type: 'walkthrough.end';
+} | {
+    type: 'highlight.node';
+    nodeId: NodeId;
+} | {
+    type: 'highlight.edge';
+    edgeId: EdgeId;
+} | {
+    type: 'unhighlight.all';
 } | {
     type: 'notations.highlight';
     notation: ElementNotation;
@@ -328,6 +343,7 @@ export declare const machine: SetupReturn<Context, Events, {
     'click: focused node': unknown;
     'click: node has connections': unknown;
     'click: selected edge': unknown;
+    'click: active walkthrough step': unknown;
 }, never, string, Input, NonReducibleUnknown, EmittedEvents, MetaObject>;
 export declare const targetState: {
     idle: string;
@@ -336,3 +352,20 @@ export declare const targetState: {
     printing: string;
     navigating: string;
 };
+export declare const to: {
+    idle: {
+        target: string;
+    };
+    focused: {
+        target: string;
+    };
+    walkthrough: {
+        target: string;
+    };
+    printing: {
+        target: string;
+    };
+    navigating: {
+        target: string;
+    };
+};

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

@@ -1,7 +1,7 @@
 import { nonexhaustive } from '@likec4/core';
-import { isTruthy } from 'remeda';
+import { mapValues, isTruthy } from 'remeda';
 import { setup, assertEvent } from 'xstate';
-import { editorActorLogic } from '../../editor/editorActor.js';
+import { editorActorLogic } from '../../editor/editorActor.states.js';
 import { overlaysActorLogic } from '../../overlays/overlaysActor.js';
 import { searchActorLogic } from '../../search/searchActor.js';
 import { hotkeyActorLogic } from './hotkeyActor.js';
@@ -11,7 +11,7 @@ const deriveToggledFeatures = (context) => {
   let toggledFeatures = context.toggledFeatures;
   const hasActiveWalkthrough = isTruthy(context.activeWalkthrough);
   const enableCompareWithLatest = context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isTruthy(context.view._layout) && !hasActiveWalkthrough;
-  const enableReadOnly = context.features.enableReadOnly || (toggledFeatures.enableReadOnly ?? false) || hasActiveWalkthrough || context.dynamicViewVariant === "sequence" && context.view._type === "dynamic" || enableCompareWithLatest && context.view._layout === "auto";
+  const enableReadOnly = context.features.enableReadOnly || (toggledFeatures.enableReadOnly ?? false) || hasActiveWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
   return {
     enableCompareWithLatest,
     enableReadOnly
@@ -94,6 +94,14 @@ const machine = setup({
     "click: selected edge": ({ event }) => {
       assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
       return event.edge.selected === true || event.edge.data.active === true;
+    },
+    "click: active walkthrough step": ({ context, event }) => {
+      assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
+      if (!context.activeWalkthrough) {
+        return false;
+      }
+      const { stepId } = context.activeWalkthrough;
+      return event.edge.id === stepId;
     }
   }
 });
@@ -104,5 +112,6 @@ const targetState = {
   printing: "#printing",
   navigating: "#navigating"
 };
+const to = mapValues(targetState, (id) => ({ target: id }));
 
-export { deriveToggledFeatures, machine, targetState };
+export { deriveToggledFeatures, machine, targetState, to };

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

@@ -99,7 +99,7 @@ export declare const initializing: {
 export declare const isReady: {
     always: ({
         guard: "isReady";
-        actions: ActionFunction<Context, Events, Events, undefined, Values<{
+        actions: ( ActionFunction<Context, Events, Events, unknown, Values<{
             hotkeyActorLogic: {
                 src: "hotkeyActorLogic";
                 logic: HotkeyActorLogic;
@@ -214,7 +214,37 @@ export declare const isReady: {
                 type: "click: selected edge";
                 params: unknown;
             };
-        }>, never, EmittedEvents>[];
+            "click: active walkthrough step": {
+                type: "click: active walkthrough step";
+                params: unknown;
+            };
+        }>, never, EmittedEvents> | ActionFunction<Context, Events, Events, undefined, Values<{
+            hotkeyActorLogic: {
+                src: "hotkeyActorLogic";
+                logic: HotkeyActorLogic;
+                id: "hotkey";
+            };
+            overlaysActorLogic: {
+                src: "overlaysActorLogic";
+                logic: OverlaysActorLogic;
+                id: "overlays";
+            };
+            searchActorLogic: {
+                src: "searchActorLogic";
+                logic: SearchActorLogic;
+                id: "search";
+            };
+            mediaPrintActorLogic: {
+                src: "mediaPrintActorLogic";
+                logic: MediaPrintActorLogic;
+                id: "mediaPrint";
+            };
+            editorActor: {
+                src: "editorActor";
+                logic: EditorActorLogic;
+                id: "editor";
+            };
+        }>, never, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
         target: string;
     } | {
         target: string;

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

@@ -8,7 +8,7 @@ import { Context, Events } from './machine.setup';
 export declare const navigating: {
     id: string;
     always: {
-        target: string;
         actions: CancelAction<Context, Events, undefined, Events>[];
+        target: string;
     };
 };

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

@@ -1,13 +1,15 @@
-import { BBox } from '@likec4/core/types';
-import { invariant, nonNullable } from '@likec4/core/utils';
+import { BBox } from '@likec4/core/geometry';
+import { invariant } from '@likec4/core/utils';
 import { isTruthy } from 'remeda';
 import { enqueueActions, assertEvent } from 'xstate';
+import { roundDpr } from '../../utils/roundDpr.js';
+import { parsePaddings } from '../../utils/xyflow.js';
 import { convertToXYFlow } from '../convert-to-xyflow.js';
 import { mergeXYNodesEdges } from './assign.js';
 import { disableCompareWithLatest } from './machine.actions.js';
-import { machine, targetState } from './machine.setup.js';
-import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef } from './utils.js';
-import { cancelFitDiagram, raiseSetViewport, raiseFitDiagram } from './machine.actions.layout.js';
+import { machine, to, targetState } from './machine.setup.js';
+import { viewBounds, calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef } from './utils.js';
+import { cancelFitDiagram, raiseSetViewport } from './machine.actions.layout.js';
 
 const handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
   assertEvent(event, "update.view");
@@ -22,7 +24,7 @@ const handleBrowserForwardBackward = () => machine.assign(({ context, event }) =
   if (!stepCurrent || stepCurrent.viewId === event.view.id || !!lastOnNavigate) {
     return {};
   }
-  const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;
+  const stepBack = currentIndex > 0 ? history.at(currentIndex - 1) : null;
   if (stepBack && stepBack.viewId === event.view.id) {
     return {
       navigationHistory: {
@@ -32,7 +34,7 @@ const handleBrowserForwardBackward = () => machine.assign(({ context, event }) =
       lastOnNavigate: null
     };
   }
-  const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null;
+  const stepForward = currentIndex < history.length - 1 ? history.at(currentIndex + 1) : null;
   if (stepForward && stepForward.viewId === event.view.id) {
     return {
       navigationHistory: {
@@ -60,7 +62,7 @@ const handleBrowserForwardBackward = () => machine.assign(({ context, event }) =
 const navigating = machine.createStateConfig({
   id: targetState.navigating.slice(1),
   always: {
-    target: targetState.idle,
+    ...to.idle,
     actions: [
       cancelFitDiagram(),
       handleBrowserForwardBackward(),
@@ -78,64 +80,75 @@ const navigating = machine.createStateConfig({
         const eventWithXYData = "xynodes" in event ? event : {
           ...event,
           ...convertToXYFlow({
+            currentViewId: context.view.id,
             dynamicViewVariant: context.dynamicViewVariant,
             view: event.view,
             where: context.where
           })
         };
         invariant(xyflow, "xyflow is not initialized");
+        const currentViewport = xyflow.getViewport();
         const calcZoomTowardsNextViewport = (nextViewport2) => {
-          const zoom = xyflow.getZoom();
-          const coef = nextViewport2.zoom < zoom ? 0.8 : 0.4;
-          return zoom + (nextViewport2.zoom - zoom) * coef;
+          const zoom = currentViewport.zoom;
+          const diff = nextViewport2.zoom - zoom;
+          if (Math.abs(diff) < 0.01) {
+            return nextViewport2.zoom;
+          }
+          const coef = diff < 0 ? 0.6 : 0.3;
+          return Math.trunc(1e4 * (zoom + diff * coef)) / 1e4;
+        };
+        const moveTowardsNextViewport = (nextViewport2) => {
+          const zoom = calcZoomTowardsNextViewport(nextViewport2);
+          if (zoom !== nextViewport2.zoom) {
+            xyflow.setViewport({
+              x: roundDpr(nextViewport2.x * (1 + currentViewport.zoom - zoom)),
+              y: roundDpr(nextViewport2.y * (1 + currentViewport.zoom - zoom)),
+              zoom
+            });
+            enqueue(raiseSetViewport({
+              delay: 100,
+              viewport: nextViewport2
+            }));
+          } else {
+            xyflow.setViewport(nextViewport2, { duration: 0 });
+          }
         };
         const fromHistory = history[currentIndex];
-        if (fromHistory && fromHistory.viewId === event.view.id) {
-          enqueue.assign({
+        if (fromHistory && fromHistory.viewId === eventWithXYData.view.id) {
+          const {
+            focusedNode: wasFocused,
+            activeWalkthrough: wasActiveWalkthrough,
+            viewportBefore
+          } = fromHistory;
+          const nextCtx = {
             ...mergeXYNodesEdges(context, eventWithXYData),
             dynamicViewVariant: fromHistory.dynamicViewVariant ?? context.dynamicViewVariant,
-            viewportChangedManually: fromHistory.viewportChangedManually
-          });
-          const wasFocused = fromHistory.focusedNode;
-          const wasActiveWalkthrough = fromHistory.activeWalkthrough;
-          const viewportBefore = fromHistory.viewportBefore;
-          if (viewportBefore && (wasFocused || wasActiveWalkthrough)) {
-            enqueue.assign({
-              viewport: viewportBefore.value,
-              viewportChangedManually: viewportBefore.wasChangedManually,
-              viewportBefore: null
-            });
-          }
-          const center = BBox.center(event.view.bounds);
-          const zoom = calcZoomTowardsNextViewport(fromHistory.viewport);
-          xyflow.setCenter(
-            center.x,
-            center.y,
-            { zoom, duration: 0 }
-          );
+            viewportChangedManually: viewportBefore?.wasChangedManually ?? fromHistory.viewportChangedManually,
+            viewport: viewportBefore?.value ?? fromHistory.viewport,
+            viewportBefore: null
+          };
+          enqueue.assign(nextCtx);
+          moveTowardsNextViewport(nextCtx.viewport);
           if (wasFocused) {
             enqueue.raise({
               type: "focus.node",
               nodeId: wasFocused
-            }, { delay: 50 });
+            }, { delay: 150 });
             return;
           }
           if (wasActiveWalkthrough) {
             enqueue.raise({
               type: "walkthrough.start",
               stepId: wasActiveWalkthrough
-            }, { delay: 50 });
+            }, { delay: 150 });
             return;
           }
-          enqueue(raiseSetViewport({
-            delay: 80,
-            viewport: fromHistory.viewport
-          }));
           return;
         }
+        const nextBounds = viewBounds(context, eventWithXYData.view);
         const nextViewport = calcViewportForBounds(
           context,
-          event.view.bounds
+          nextBounds
         );
         const { fromNode, toNode } = findCorrespondingNode(context, eventWithXYData);
         if (fromNode && toNode) {
@@ -151,17 +164,40 @@ const navigating = machine.createStateConfig({
           xystore.getState().panBy({
             x: Math.round(fromPoint.x - toPoint.x),
             y: Math.round(fromPoint.y - toPoint.y)
+          }).catch((err) => {
+            console.error("Error during xyflow.panBy", { err });
           });
+          enqueue(raiseSetViewport({
+            delay: 100,
+            viewport: nextViewport
+          }));
         } else {
           const zoom = calcZoomTowardsNextViewport(nextViewport);
-          const center = BBox.center(event.view.bounds);
-          xyflow.setCenter(
-            center.x,
-            center.y,
-            { zoom, duration: 0 }
-          );
+          if (zoom !== nextViewport.zoom) {
+            const { width, height } = context.xystore.getState();
+            const nextCenter = BBox.center(nextBounds);
+            const paddings = parsePaddings(context.fitViewPadding, width, height);
+            xyflow.setViewport({
+              x: roundDpr(
+                (width - paddings.x) / 2 - nextCenter.x * zoom + paddings.left
+              ),
+              y: roundDpr(
+                (height - paddings.y) / 2 - nextCenter.y * zoom + paddings.top
+              ),
+              zoom
+            });
+            enqueue(raiseSetViewport({
+              delay: 100,
+              viewport: nextViewport
+            }));
+          } else {
+            xyflow.setViewport(nextViewport, { duration: 0 });
+          }
         }
         const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
+        if (updatedHistory.length > 20) {
+          updatedHistory.shift();
+        }
         updatedHistory.push({
           viewId: event.view.id,
           viewport: { ...nextViewport },
@@ -183,11 +219,7 @@ const navigating = machine.createStateConfig({
             type: "focus.node",
             nodeId: nodeToFocus.id,
             autoUnfocus: true
-          }, { delay: 150 });
-        } else {
-          enqueue(raiseFitDiagram({
-            delay: 100
-          }));
+          }, { delay: 250 });
         }
       })
     ]