@likec4/diagram 1.47.0 → 1.48.0

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

@@ -99,11 +99,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;
@@ -328,6 +326,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 +335,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 { 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 });
         }
       })
     ]