@likec4/diagram 1.47.0 → 1.49.0

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

@@ -1,13 +1,13 @@
-import { updateView, resetLastClickedNode, emitEdgeClick, assignLastClickedNode, emitNodeClick, emitPaneClick, undimEverything, tagHighlight, notationsHighlight, startEditing, onEdgeDoubleClick, stopEditing, onEdgeMouseLeave, onEdgeMouseEnter, onNodeMouseLeave, onNodeMouseEnter, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, emitOpenSource, openOverlay, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, handleNavigate, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
-import { machine, targetState } from './machine.setup.js';
+import { resetLastClickedNode, emitOpenSourceOfView, emitPaneClick, onNodeMouseLeave, onNodeMouseEnter, assignLastClickedNode, emitNodeClick, onEdgeMouseLeave, onEdgeMouseEnter, startEditing, onEdgeDoubleClick, stopEditing, emitEdgeClick, updateView, updateFeatures, ensureOverlaysActor, ensureSearchActor, ensureEditorActor, assignToggledFeatures, undimEverything, tagHighlight, emitOpenSource, openOverlay, highlightNodeOrEdge, notationsHighlight, handleNavigate, cancelEditing, disableCompareWithLatest, triggerChange, resetEdgesControlPoints, layoutAlign, closeAllOverlays, closeSearch, stopEditorActor } from './machine.actions.js';
+import { machine, to } from './machine.setup.js';
 import { focused } from './machine.state.ready.focused.js';
 import { idle } from './machine.state.ready.idle.js';
 import { printing } from './machine.state.ready.printing.js';
 import { walkthrough } from './machine.state.ready.walkthrough.js';
 import { typedSystem } from './utils.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+import { setViewport, cancelFitDiagram, raiseFitDiagram, fitDiagram, centerOnNodeOrEdge } from './machine.actions.layout.js';
 import { x as xstateGuards_cjsExports } from '../../_virtual/xstate-guards.cjs.js';
-import { setViewport, fitDiagram, cancelFitDiagram, raiseFitDiagram } from './machine.actions.layout.js';
 
 const ready = machine.createStateConfig({
   initial: "idle",
@@ -31,9 +31,6 @@ const ready = machine.createStateConfig({
     printing
   },
   on: {
-    "navigate.*": {
-      actions: handleNavigate()
-    },
     "layout.align": {
       guard: "not readonly",
       actions: [
@@ -51,7 +48,6 @@ const ready = machine.createStateConfig({
       ]
     },
     "layout.resetManualLayout": {
-      guard: "not readonly",
       actions: [
         cancelEditing(),
         disableCompareWithLatest(),
@@ -60,35 +56,52 @@ const ready = machine.createStateConfig({
         })
       ]
     },
-    "xyflow.resized": {
-      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
-      actions: [
-        cancelFitDiagram(),
-        raiseFitDiagram({ delay: 200 })
-      ]
+    "media.print.on": {
+      ...to.printing
+    },
+    "navigate.*": {
+      actions: handleNavigate()
+    },
+    "notations.highlight": {
+      actions: notationsHighlight()
+    },
+    "notations.unhighlight": {
+      actions: undimEverything()
+    },
+    "highlight.*": {
+      actions: highlightNodeOrEdge()
+    },
+    "unhighlight.all": {
+      actions: undimEverything()
     },
     "open.elementDetails": {
       actions: openOverlay()
     },
-    "open.relationshipsBrowser": {
+    "open.relationshipDetails": {
       actions: openOverlay()
     },
-    "open.relationshipDetails": {
+    "open.relationshipsBrowser": {
       actions: openOverlay()
     },
+    "open.search": {
+      guard: "enabled: Search",
+      actions: xstateActions_cjsExports.sendTo(typedSystem.searchActor, ({ event }) => ({
+        type: "open",
+        search: event.search
+      }))
+    },
     "open.source": {
       guard: "enabled: OpenSource",
       actions: emitOpenSource()
     },
-    "walkthrough.start": {
-      guard: "is dynamic view",
-      target: targetState.walkthrough
+    "tag.highlight": {
+      actions: tagHighlight()
+    },
+    "tag.unhighlight": {
+      actions: undimEverything()
     },
     "toggle.feature": {
-      actions: [
-        assignToggledFeatures(),
-        ensureEditorActor()
-      ]
+      actions: assignToggledFeatures()
     },
     "update.features": {
       actions: [
@@ -98,17 +111,26 @@ const ready = machine.createStateConfig({
         ensureEditorActor()
       ]
     },
-    "xyflow.nodeMouseEnter": {
-      actions: onNodeMouseEnter()
-    },
-    "xyflow.nodeMouseLeave": {
-      actions: onNodeMouseLeave()
-    },
-    "xyflow.edgeMouseEnter": {
-      actions: onEdgeMouseEnter()
+    "update.view": [
+      // Redirect to navigating state if received another view
+      {
+        guard: "is another view",
+        ...to.navigating
+      },
+      // Otherwise, just update the view in place
+      {
+        actions: updateView()
+      }
+    ],
+    "walkthrough.start": {
+      guard: "is dynamic view",
+      ...to.walkthrough
     },
-    "xyflow.edgeMouseLeave": {
-      actions: onEdgeMouseLeave()
+    "xyflow.edgeClick": {
+      actions: [
+        resetLastClickedNode(),
+        emitEdgeClick()
+      ]
     },
     "xyflow.edgeDoubleClick": {
       guard: xstateGuards_cjsExports.and([
@@ -121,29 +143,22 @@ const ready = machine.createStateConfig({
         stopEditing(true)
       ]
     },
-    "notations.highlight": {
-      actions: notationsHighlight()
-    },
-    "notations.unhighlight": {
-      actions: undimEverything()
-    },
-    "tag.highlight": {
-      actions: tagHighlight()
+    "xyflow.edgeMouseEnter": {
+      actions: onEdgeMouseEnter()
     },
-    "tag.unhighlight": {
-      actions: undimEverything()
+    "xyflow.edgeMouseLeave": {
+      actions: onEdgeMouseLeave()
     },
-    "open.search": {
-      guard: "enabled: Search",
-      actions: xstateActions_cjsExports.sendTo(({ system }) => typedSystem(system).searchActorRef, ({ event }) => ({
-        type: "open",
-        search: event.search
-      }))
+    "xyflow.centerViewport": {
+      actions: centerOnNodeOrEdge()
     },
-    "xyflow.paneClick": {
+    "xyflow.fitDiagram": {
+      guard: "enabled: FitView",
       actions: [
-        resetLastClickedNode(),
-        emitPaneClick()
+        xstateActions_cjsExports.assign({
+          viewportChangedManually: false
+        }),
+        fitDiagram()
       ]
     },
     "xyflow.nodeClick": {
@@ -152,32 +167,36 @@ const ready = machine.createStateConfig({
         emitNodeClick()
       ]
     },
-    "xyflow.edgeClick": {
+    "xyflow.nodeMouseEnter": {
+      actions: onNodeMouseEnter()
+    },
+    "xyflow.nodeMouseLeave": {
+      actions: onNodeMouseLeave()
+    },
+    "xyflow.paneClick": {
       actions: [
         resetLastClickedNode(),
-        emitEdgeClick()
+        emitPaneClick()
       ]
     },
-    "xyflow.fitDiagram": {
-      guard: "enabled: FitView",
-      actions: fitDiagram()
+    "xyflow.paneDblClick": {
+      actions: [
+        resetLastClickedNode(),
+        cancelFitDiagram(),
+        raiseFitDiagram(),
+        emitOpenSourceOfView(),
+        emitPaneClick()
+      ]
+    },
+    "xyflow.resized": {
+      guard: ({ context }) => context.features.enableFitView && !context.viewportChangedManually,
+      actions: [
+        cancelFitDiagram(),
+        raiseFitDiagram({ delay: 150 })
+      ]
     },
     "xyflow.setViewport": {
       actions: setViewport()
-    },
-    "update.view": [
-      // Redirect to navigating state if received another view
-      {
-        guard: "is another view",
-        target: targetState.navigating
-      },
-      // Otherwise, just update the view in place
-      {
-        actions: updateView()
-      }
-    ],
-    "media.print.on": {
-      target: targetState.printing
     }
   }
 });

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

@@ -128,6 +128,10 @@ export declare const printing: {
             type: "click: selected edge";
             params: unknown;
         };
+        "click: active walkthrough step": {
+            type: "click: active walkthrough step";
+            params: unknown;
+        };
     }>, never, EmittedEvents>[];
     on: {
         'media.print.off': {

package/dist/likec4diagram/state/machine.state.ready.printing.js

@@ -1,5 +1,6 @@
 import { log, enqueueActions } from 'xstate';
-import { machine, targetState } from './machine.setup.js';
+import { machine, to, targetState } from './machine.setup.js';
+import { viewBounds } from './utils.js';
 import { returnViewportBefore, cancelFitDiagram, assignViewportBefore, setViewport } from './machine.actions.layout.js';
 
 const printing = machine.createStateConfig({
@@ -8,7 +9,7 @@ const printing = machine.createStateConfig({
     cancelFitDiagram(),
     assignViewportBefore(),
     enqueueActions(({ enqueue, context }) => {
-      const bounds = context.view.bounds;
+      const bounds = viewBounds(context);
       const OFFSET = 16;
       enqueue(
         setViewport({
@@ -27,7 +28,7 @@ const printing = machine.createStateConfig({
   ],
   on: {
     "media.print.off": {
-      target: targetState.idle
+      ...to.idle
     },
     "*": {
       actions: [

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

@@ -141,6 +141,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents> | ActionFunction<Context, {
                 type: "walkthrough.step";
                 direction: "next" | "previous";
@@ -172,7 +176,129 @@ export declare const walkthrough: {
                 };
             }>, never, never, never, never>)[];
         };
-        'xyflow.edgeClick': {
+        'xyflow.edgeClick': ({
+            guard: "click: active walkthrough step";
+            actions: ( ActionFunction<Context, Events, Events, unknown, 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, Values<{
+                isReady: {
+                    type: "isReady";
+                    params: unknown;
+                };
+                "enabled: Editor": {
+                    type: "enabled: Editor";
+                    params: unknown;
+                };
+                "enabled: FitView": {
+                    type: "enabled: FitView";
+                    params: unknown;
+                };
+                "enabled: FocusMode": {
+                    type: "enabled: FocusMode";
+                    params: unknown;
+                };
+                "enabled: Readonly": {
+                    type: "enabled: Readonly";
+                    params: unknown;
+                };
+                "enabled: RelationshipDetails": {
+                    type: "enabled: RelationshipDetails";
+                    params: unknown;
+                };
+                "enabled: Search": {
+                    type: "enabled: Search";
+                    params: unknown;
+                };
+                "enabled: ElementDetails": {
+                    type: "enabled: ElementDetails";
+                    params: unknown;
+                };
+                "enabled: OpenSource": {
+                    type: "enabled: OpenSource";
+                    params: unknown;
+                };
+                "enabled: DynamicViewWalkthrough": {
+                    type: "enabled: DynamicViewWalkthrough";
+                    params: unknown;
+                };
+                "focus.node: autoUnfocus": {
+                    type: "focus.node: autoUnfocus";
+                    params: unknown;
+                };
+                "enabled: Overlays": {
+                    type: "enabled: Overlays";
+                    params: unknown;
+                };
+                "not readonly": {
+                    type: "not readonly";
+                    params: unknown;
+                };
+                "is dynamic view": {
+                    type: "is dynamic view";
+                    params: unknown;
+                };
+                "is same view": {
+                    type: "is same view";
+                    params: unknown;
+                };
+                "is another view": {
+                    type: "is another view";
+                    params: unknown;
+                };
+                "click: node has modelFqn": {
+                    type: "click: node has modelFqn";
+                    params: unknown;
+                };
+                "click: selected node": {
+                    type: "click: selected node";
+                    params: unknown;
+                };
+                "click: same node": {
+                    type: "click: same node";
+                    params: unknown;
+                };
+                "click: focused node": {
+                    type: "click: focused node";
+                    params: unknown;
+                };
+                "click: node has connections": {
+                    type: "click: node has connections";
+                    params: unknown;
+                };
+                "click: selected edge": {
+                    type: "click: selected edge";
+                    params: unknown;
+                };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
+            }>, never, EmittedEvents> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
+        } | {
             actions: ( ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
                     src: "hotkeyActorLogic";
@@ -288,6 +414,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents> | ActionFunction<Context, {
                 type: "xyflow.edgeClick";
                 edge: import("../types").Types.Edge;
@@ -318,7 +448,8 @@ export declare const walkthrough: {
                     id: "editor";
                 };
             }>, never, never, never, never>)[];
-        };
+            guard?: never;
+        })[];
         'notations.unhighlight': {
             actions: ActionFunction<Context, Events, Events, undefined, Values<{
                 hotkeyActorLogic: {
@@ -435,6 +566,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>;
         };
         'tag.unhighlight': {
@@ -553,6 +688,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>;
         };
         'update.view': {
@@ -672,6 +811,10 @@ export declare const walkthrough: {
                     type: "click: selected edge";
                     params: unknown;
                 };
+                "click: active walkthrough step": {
+                    type: "click: active walkthrough step";
+                    params: unknown;
+                };
             }>, never, EmittedEvents>[];
         };
         'walkthrough.end': {

package/dist/likec4diagram/state/machine.state.ready.walkthrough.js

@@ -1,4 +1,4 @@
-import { isStepEdgeId, getParallelStepsPrefix, invariant } from '@likec4/core';
+import { invariant, isStepEdgeId, getParallelStepsPrefix, nonNullable } from '@likec4/core';
 import { clamp, first } from 'remeda';
 import { assertEvent } from 'xstate';
 import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
@@ -133,7 +133,7 @@ const walkthrough = machine.createStateConfig({
           if (nextStepIndex === stepIndex) {
             return {};
           }
-          const nextStepId = context.xyedges[nextStepIndex].id;
+          const nextStepId = nonNullable(context.xyedges[nextStepIndex]).id;
           return {
             activeWalkthrough: {
               stepId: nextStepId,
@@ -146,25 +146,33 @@ const walkthrough = machine.createStateConfig({
         emitWalkthroughStep()
       ]
     },
-    "xyflow.edgeClick": {
-      actions: [
-        xstateActions_cjsExports.assign(({ event, context }) => {
-          if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
-            return {};
-          }
-          return {
-            activeWalkthrough: {
-              stepId: event.edge.id,
-              parallelPrefix: getParallelStepsPrefix(event.edge.id)
-            }
-          };
-        }),
-        updateActiveWalkthroughState(),
-        fitFocusedBounds(),
-        emitEdgeClick(),
-        emitWalkthroughStep()
-      ]
-    },
+    "xyflow.edgeClick": [
+      {
+        guard: "click: active walkthrough step",
+        actions: [
+          fitFocusedBounds(),
+          emitEdgeClick()
+        ]
+      },
+      {
+        actions: [
+          xstateActions_cjsExports.assign(({ event }) => {
+            const stepId = event.edge.id;
+            invariant(isStepEdgeId(stepId));
+            return {
+              activeWalkthrough: {
+                stepId,
+                parallelPrefix: getParallelStepsPrefix(stepId)
+              }
+            };
+          }),
+          updateActiveWalkthroughState(),
+          fitFocusedBounds(),
+          emitEdgeClick(),
+          emitWalkthroughStep()
+        ]
+      }
+    ],
     "notations.unhighlight": {
       actions: updateActiveWalkthroughState()
     },

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

@@ -1,5 +1,5 @@
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor';
+import { EditorActorRef } from '../../editor/editorActor.states';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { DiagramMachineRef } from './machine';

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

@@ -1,14 +1,13 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, BBox } from '@likec4/core/types';
+import { BBox } from '@likec4/core/geometry';
+import { DeploymentFqn, DiagramEdge, DiagramNode, DiagramView, Fqn } from '@likec4/core/types';
 import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
-import { EditorActorRef } from '../../editor/editorActor';
-import { ViewPaddings } from '../../LikeC4Diagram.props';
+import { EditorActorRef } from '../../editor/editorActor.states';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
 import { Types } from '../types';
 import { Context } from './machine.setup';
 import { DiagramActorRef, NodeWithData } from './types';
-import { DeploymentFqn } from '@likec4/core';
 export declare const findNodeByModelFqn: <T extends NodeWithData>(xynodes: T[], elementFqn: Fqn) => (T & {
     data: {
         modelFqn: Fqn;
@@ -36,6 +35,11 @@ export declare namespace typedSystem {
 }
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
 export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;
+/**
+ * Returns the bounds of the current view from the context.
+ * If {@link nextView} is provided, returns the bounds of the next view.
+ */
+export declare function viewBounds(ctx: Pick<Context, 'view' | 'dynamicViewVariant'>, nextView?: DiagramView): BBox;
 export declare function focusedBounds(params: {
     context: Context;
 }): {
@@ -48,19 +52,15 @@ export declare function activeSequenceBounds(params: {
     bounds: BBox;
     duration: number;
 };
-export declare function nodeRef(node: Types.Node): DeploymentFqn | Fqn | null;
+export declare function nodeRef(node: Types.Node): Fqn | DeploymentFqn | null;
 export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavigate' | 'xynodes'>, event: {
     view: DiagramView;
     xynodes: Types.Node[];
 }): {
-    fromNode: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel"> | null | undefined;
-    toNode: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel"> | null | undefined;
+    fromNode: null;
+    toNode: null;
+} | {
+    fromNode: Types.Node;
+    toNode: Types.Node | null;
 };
 export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'fitViewPadding'>, bounds: BBox): Viewport;
-export declare function parseAsNumber(value: string | number | undefined): number;
-export declare function parseViewPaddings(paddings: ViewPaddings): {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};

package/dist/likec4diagram/state/utils.js

@@ -1,7 +1,8 @@
-import { BBox } from '@likec4/core/types';
+import { BBox } from '@likec4/core/geometry';
 import { nonNullable, nonexhaustive } from '@likec4/core/utils';
 import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
 import { MinZoom } from '../../base/const.js';
+import { pickViewBounds } from '../../utils/view-bounds.js';
 
 const findNodeByModelFqn = (xynodes, elementFqn) => {
   const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
@@ -41,6 +42,10 @@ function findDiagramNode(ctx, xynodeId) {
 function findDiagramEdge(ctx, xyedgeId) {
   return ctx.view.edges.find((e) => e.id === xyedgeId) ?? null;
 }
+function viewBounds(ctx, nextView) {
+  const view = nextView ?? ctx.view;
+  return pickViewBounds(view, ctx.dynamicViewVariant);
+}
 function focusedBounds(params) {
   const knownAbsolutes = /* @__PURE__ */ new Map();
   const b = params.context.xynodes.reduce((acc, node) => {
@@ -71,7 +76,7 @@ function focusedBounds(params) {
   });
   if (b.minX === Infinity) {
     return {
-      bounds: params.context.view.bounds
+      bounds: viewBounds(params.context)
     };
   }
   return {
@@ -161,7 +166,10 @@ 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);
+  if (!fromNode || !fromRef) {
+    return { fromNode: null, toNode: null };
+  }
+  const toNode = event.xynodes.find((n) => nodeRef(n) === fromRef) ?? null;
   return { fromNode, toNode };
 }
 function calcViewportForBounds(context, bounds) {
@@ -181,4 +189,4 @@ function calcViewportForBounds(context, bounds) {
   );
 }
 
-export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem };
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem, viewBounds };