@likec4/diagram 1.44.0 → 1.45.0

package/dist/likec4diagram/state/machine.js

@@ -1,13 +1,14 @@
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { DefaultFeatures } from '../../context/DiagramFeatures.js';
-import { updateNavigationHistory, updateEdgeData, updateNodeData } from './assign.js';
-import { stopSyncLayout, cancelFitDiagram, emitOnLayoutTypeChange, emitOnChange, assignDynamicViewVariant, updateFeatures, ensureOverlaysActorState, ensureSearchActorState, updateInputs, updateView, xyflow, resetLastClickedNode, emitEdgeClick, assignLastClickedNode, emitNodeClick, emitPaneClick } from './machine.actions.js';
+import { updateEdgeData, updateNodeData } from './assign.js';
+import { emitOnLayoutTypeChange, emitOnChange, updateFeatures, updateInputs, assignDynamicViewVariant, stopSyncLayout } 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 { cancelFitDiagram } from './machine.actions.layout.js';
 
 const _diagramMachine = machine.createMachine({
   initial: "initializing",
@@ -29,7 +30,7 @@ const _diagramMachine = machine.createMachine({
     lastClickedNode: null,
     focusedNode: null,
     activeElementDetails: null,
-    viewportBeforeFocus: null,
+    viewportBefore: null,
     viewportOnManualLayout: null,
     viewportOnAutoLayout: null,
     navigationHistory: {
@@ -45,96 +46,81 @@ const _diagramMachine = machine.createMachine({
     initializing,
     isReady,
     ready,
-    navigating
+    navigating,
+    final: {
+      type: "final",
+      entry: [
+        stopSyncLayout(),
+        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
+          }
+        })
+      ]
+    }
   },
   on: {
-    "xyflow.paneClick": {
-      actions: [
-        resetLastClickedNode(),
-        emitPaneClick()
-      ]
-    },
-    "xyflow.nodeClick": {
-      actions: [
-        assignLastClickedNode(),
-        emitNodeClick()
-      ]
-    },
-    "xyflow.edgeClick": {
-      actions: [
-        resetLastClickedNode(),
-        emitEdgeClick()
-      ]
-    },
-    "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.viewportMoved": {
-      actions: xstateActions_cjsExports.assign({
-        viewportChangedManually: (({ event }) => event.manually),
-        viewport: (({ event }) => event.viewport)
-      })
-    },
-    "fitDiagram": {
-      guard: "enabled: FitView",
-      actions: xyflow.fitDiagram()
-    },
     "update.nodeData": {
       actions: xstateActions_cjsExports.assign(updateNodeData)
     },
     "update.edgeData": {
       actions: xstateActions_cjsExports.assign(updateEdgeData)
     },
-    "update.view": {
-      actions: [
-        xstateActions_cjsExports.assign(updateNavigationHistory),
-        updateView()
-      ]
+    "switch.dynamicViewVariant": {
+      actions: assignDynamicViewVariant()
     },
     "update.inputs": {
       actions: updateInputs()
     },
-    "update.features": {
-      actions: [
-        updateFeatures(),
-        ensureOverlaysActorState(),
-        ensureSearchActorState()
-      ]
+    "update.view-bounds": {
+      actions: xstateActions_cjsExports.assign(({ context, event }) => {
+        return {
+          view: {
+            ...context.view,
+            bounds: event.bounds
+          }
+        };
+      })
     },
-    "switch.dynamicViewVariant": {
-      actions: assignDynamicViewVariant()
+    "update.features": {
+      actions: updateFeatures()
     },
     "emit.onChange": {
       actions: emitOnChange()
     },
     "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.viewportMoved": {
+      actions: xstateActions_cjsExports.assign(({ event, context }) => ({
+        viewportChangedManually: context.viewportChangedManually || event.manually,
+        viewport: event.viewport
+      }))
+    },
+    "destroy": {
+      target: ".final"
     }
-  },
-  exit: [
-    stopSyncLayout(),
-    cancelFitDiagram(),
-    xstateActions_cjsExports.stopChild("hotkey"),
-    xstateActions_cjsExports.stopChild("overlays"),
-    xstateActions_cjsExports.stopChild("search"),
-    xstateActions_cjsExports.assign({
-      xyflow: null,
-      xystore: null,
-      xyedges: [],
-      xynodes: [],
-      initialized: {
-        xydata: false,
-        xyflow: false
-      }
-    })
-  ]
+  }
 });
 const diagramMachine = _diagramMachine;
 

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

@@ -3,22 +3,35 @@ import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeI
 import { EdgeChange, NodeChange, Rect, Viewport } from '@xyflow/system';
 import { MouseEvent } from 'react';
 import { PartialDeep } from 'type-fest';
-import { EnabledFeatures, FeatureName } from '../../context/DiagramFeatures';
+import { EnabledFeatures, TogglableFeature } from '../../context/DiagramFeatures';
 import { XYFlowInstance, XYStoreApi } from '../../hooks/useXYFlow';
-import { OpenSourceParams, ViewPadding } from '../../LikeC4Diagram.props';
+import { OpenSourceParams, ViewPaddings } from '../../LikeC4Diagram.props';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
 import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
+import { MediaPrintEvent, MediaPrintActorLogic } from './mediaPrintActor';
 import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
 import { SyncLayoutActorLogic } from './syncManualLayoutActor';
 import { OverlaysActorLogic } from '../../overlays/overlaysActor';
 import { SearchActorLogic } from '../../search/searchActor';
+/**
+ * Navigation history entry represents a current view state,
+ * including viewport, focused node, dynamic view variant, etc.
+ */
+export interface NavigationHistoryEntry {
+    viewId: ViewId;
+    viewport: Viewport;
+    viewportChangedManually: boolean;
+    viewportBefore?: null | {
+        wasChangedManually: boolean;
+        value: Viewport;
+    };
+    focusedNode?: NodeId | null;
+    dynamicViewVariant?: DynamicViewDisplayVariant | null;
+    activeWalkthrough?: null | StepEdgeId;
+}
 export interface NavigationHistory {
-    history: ReadonlyArray<{
-        viewId: ViewId;
-        fromNode: NodeId | null;
-        viewport: Viewport;
-    }>;
+    history: ReadonlyArray<NavigationHistoryEntry>;
     currentIndex: number;
 }
 export interface Input {
@@ -28,10 +41,12 @@ export interface Input {
     pannable: boolean;
     nodesDraggable: boolean;
     nodesSelectable: boolean;
-    fitViewPadding: ViewPadding;
+    fitViewPadding: ViewPaddings;
     dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
 }
-export type ToggledFeatures = Partial<EnabledFeatures>;
+export type ToggledFeatures = {
+    [P in `enable${TogglableFeature}`]?: boolean;
+};
 export interface Context extends Input {
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
@@ -43,6 +58,15 @@ export interface Context extends Input {
     };
     viewport: Viewport;
     viewportChangedManually: boolean;
+    /**
+     * Viewport before entering focus mode, walkthrough or printing
+     */
+    viewportBefore: null | {
+        wasChangedManually: boolean;
+        value: Viewport;
+    };
+    viewportOnManualLayout: null | Viewport;
+    viewportOnAutoLayout: null | Viewport;
     lastOnNavigate: null | {
         fromView: ViewId;
         toView: ViewId;
@@ -61,9 +85,6 @@ export interface Context extends Input {
         nodeRect?: Rect | null;
         nodeRectScreen?: Rect | null;
     };
-    viewportBeforeFocus: null | Viewport;
-    viewportOnManualLayout: null | Viewport;
-    viewportOnAutoLayout: null | Viewport;
     xyflow: XYFlowInstance | null;
     dynamicViewVariant: DynamicViewDisplayVariant;
     activeWalkthrough: null | {
@@ -71,7 +92,7 @@ export interface Context extends Input {
         parallelPrefix: string | null;
     };
 }
-export type Events = HotKeyEvent | {
+export type Events = HotKeyEvent | MediaPrintEvent | {
     type: 'xyflow.init';
     instance: XYFlowInstance;
 } | {
@@ -113,6 +134,14 @@ export type Events = HotKeyEvent | {
     type: 'xyflow.edgeMouseLeave';
     edge: Types.Edge;
     event: MouseEvent;
+} | {
+    type: 'xyflow.fitDiagram';
+    duration?: number;
+    bounds?: BBox;
+} | {
+    type: 'xyflow.setViewport';
+    duration?: number;
+    viewport: Viewport;
 } | {
     type: 'update.nodeData';
     nodeId: NodeId;
@@ -126,16 +155,16 @@ export type Events = HotKeyEvent | {
     view: DiagramView;
     xynodes: Types.Node[];
     xyedges: Types.Edge[];
+    source?: 'internal' | 'external';
+} | {
+    type: 'update.view-bounds';
+    bounds: BBox;
 } | {
     type: 'update.inputs';
     inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant'>>;
 } | {
     type: 'update.features';
     features: EnabledFeatures;
-} | {
-    type: 'fitDiagram';
-    duration?: number;
-    bounds?: BBox;
 } | ({
     type: 'open.source';
 } & OpenSourceParams) | {
@@ -198,7 +227,7 @@ export type Events = HotKeyEvent | {
     type: 'tag.unhighlight';
 } | {
     type: 'toggle.feature';
-    feature: FeatureName;
+    feature: TogglableFeature;
     forceValue?: boolean;
 } | {
     type: 'emit.onChange';
@@ -206,6 +235,8 @@ export type Events = HotKeyEvent | {
 } | {
     type: 'emit.onLayoutTypeChange';
     layoutType: LayoutType;
+} | {
+    type: 'destroy';
 };
 export type EmittedEvents = {
     type: 'initialized';
@@ -253,16 +284,19 @@ export type ActionArg = {
     context: Context;
     event: Events;
 };
+export declare const deriveToggledFeatures: (context: Context) => Required<ToggledFeatures>;
 export declare const machine: SetupReturn<Context, Events, {
     syncManualLayoutActorLogic: SyncLayoutActorLogic;
     hotkeyActorLogic: HotkeyActorLogic;
     overlaysActorLogic: OverlaysActorLogic;
     searchActorLogic: SearchActorLogic;
+    mediaPrintActorLogic: MediaPrintActorLogic;
 }, {
     syncLayout: "syncManualLayoutActorLogic";
     hotkey: "hotkeyActorLogic";
     overlays: "overlaysActorLogic";
     search: "searchActorLogic";
+    mediaPrint: "mediaPrintActorLogic";
 }, {}, {
     isReady: unknown;
     'enabled: FitView': unknown;
@@ -271,7 +305,9 @@ export declare const machine: SetupReturn<Context, Events, {
     'enabled: RelationshipDetails': unknown;
     'enabled: Search': unknown;
     'enabled: ElementDetails': unknown;
+    'enabled: OpenSource': unknown;
     'enabled: DynamicViewWalkthrough': unknown;
+    'enabled: Overlays': unknown;
     'not readonly': unknown;
     'is dynamic view': unknown;
     'is another view': unknown;
@@ -282,3 +318,10 @@ export declare const machine: SetupReturn<Context, Events, {
     'click: node has connections': unknown;
     'click: selected edge': unknown;
 }, never, string, Input, NonReducibleUnknown, EmittedEvents, MetaObject>;
+export declare const targetState: {
+    idle: string;
+    focused: string;
+    walkthrough: string;
+    printing: string;
+    navigating: string;
+};

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

@@ -1,11 +1,23 @@
 import { nonexhaustive } from '@likec4/core';
+import { isTruthy } from 'remeda';
 import { setup, assertEvent } from 'xstate';
 import { overlaysActorLogic } from '../../overlays/overlaysActor.js';
 import { searchActorLogic } from '../../search/searchActor.js';
 import { hotkeyActorLogic } from './hotkeyActor.js';
+import { mediaPrintActorLogic } from './mediaPrintActor.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
-const isReadOnly = (context) => (context.features.enableReadOnly || context.toggledFeatures.enableReadOnly === true) && (context.view._type !== "dynamic" || context.dynamicViewVariant !== "sequence");
+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";
+  return {
+    enableCompareWithLatest,
+    enableReadOnly
+  };
+};
+const isReadOnly = (context) => deriveToggledFeatures(context).enableReadOnly;
 const machine = setup({
   types: {
     context: {},
@@ -18,17 +30,20 @@ const machine = setup({
     syncManualLayoutActorLogic,
     hotkeyActorLogic,
     overlaysActorLogic,
-    searchActorLogic
+    searchActorLogic,
+    mediaPrintActorLogic
   },
   guards: {
     "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     "enabled: FitView": ({ context }) => context.features.enableFitView,
-    "enabled: FocusMode": ({ context }) => (context.toggledFeatures.enableFocusMode ?? context.features.enableFocusMode) === true && isReadOnly(context),
+    "enabled: FocusMode": ({ context }) => context.features.enableFocusMode && isReadOnly(context),
     "enabled: Readonly": ({ context }) => isReadOnly(context),
     "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
     "enabled: Search": ({ context }) => context.features.enableSearch,
     "enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
-    "enabled: DynamicViewWalkthrough": ({ context }) => isReadOnly(context) && context.features.enableDynamicViewWalkthrough,
+    "enabled: OpenSource": ({ context }) => context.features.enableVscode,
+    "enabled: DynamicViewWalkthrough": ({ context }) => context.features.enableDynamicViewWalkthrough,
+    "enabled: Overlays": ({ context }) => context.features.enableElementDetails || context.features.enableRelationshipBrowser || context.features.enableRelationshipDetails,
     "not readonly": ({ context }) => !isReadOnly(context),
     "is dynamic view": ({ context }) => context.view._type === "dynamic",
     "is another view": ({ context, event }) => {
@@ -67,5 +82,12 @@ const machine = setup({
     }
   }
 });
+const targetState = {
+  idle: "#idle",
+  focused: "#focused",
+  walkthrough: "#walkthrough",
+  printing: "#printing",
+  navigating: "#navigating"
+};
 
-export { machine };
+export { deriveToggledFeatures, machine, targetState };

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

@@ -5,6 +5,7 @@ import { SyncLayoutActorLogic } from './syncManualLayoutActor';
 import { HotkeyActorLogic } from './hotkeyActor';
 import { OverlaysActorLogic } from '../../overlays/overlaysActor';
 import { SearchActorLogic } from '../../search/searchActor';
+import { MediaPrintActorLogic } from './mediaPrintActor';
 import { DiagramView } from '@likec4/core';
 /**
  * To be in `initializing` state, the diagram must wait for two events:
@@ -40,6 +41,11 @@ export declare const initializing: {
                     logic: SearchActorLogic;
                     id: "search";
                 };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
             }>, never, never, never, never>;
             target: string;
         };
@@ -49,6 +55,7 @@ export declare const initializing: {
                 view: DiagramView;
                 xynodes: import("../types").Types.Node[];
                 xyedges: import("../types").Types.Edge[];
+                source?: "internal" | "external";
             }, Events, undefined, Values<{
                 syncManualLayoutActorLogic: {
                     src: "syncManualLayoutActorLogic";
@@ -70,6 +77,11 @@ export declare const initializing: {
                     logic: SearchActorLogic;
                     id: "search";
                 };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
             }>, never, never, never, never>;
             target: string;
         };
@@ -104,6 +116,11 @@ export declare const isReady: {
                 logic: SearchActorLogic;
                 id: "search";
             };
+            mediaPrintActorLogic: {
+                src: "mediaPrintActorLogic";
+                logic: MediaPrintActorLogic;
+                id: "mediaPrint";
+            };
         }>, never, Values<{
             isReady: {
                 type: "isReady";
@@ -133,10 +150,18 @@ export declare const isReady: {
                 type: "enabled: ElementDetails";
                 params: unknown;
             };
+            "enabled: OpenSource": {
+                type: "enabled: OpenSource";
+                params: unknown;
+            };
             "enabled: DynamicViewWalkthrough": {
                 type: "enabled: DynamicViewWalkthrough";
                 params: unknown;
             };
+            "enabled: Overlays": {
+                type: "enabled: Overlays";
+                params: unknown;
+            };
             "not readonly": {
                 type: "not readonly";
                 params: unknown;

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

@@ -1,4 +1,5 @@
-import { xyflow, ensureSyncLayout, emitInitialized } from './machine.actions.js';
+import { emitInitialized } from './machine.actions.js';
+import { fitDiagram } from './machine.actions.layout.js';
 import { machine } from './machine.setup.js';
 import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
 
@@ -32,18 +33,17 @@ const isReady = machine.createStateConfig({
   always: [{
     guard: "isReady",
     actions: [
-      xyflow.fitDiagram({ duration: 0 }),
+      fitDiagram({ duration: 0 }),
       xstateActions_cjsExports.assign(({ context }) => ({
         navigationHistory: {
           currentIndex: 0,
           history: [{
             viewId: context.view.id,
-            fromNode: null,
-            viewport: { ...context.xyflow.getViewport() }
+            viewport: { ...context.xyflow.getViewport() },
+            viewportChangedManually: false
           }]
         }
       })),
-      ensureSyncLayout(),
       emitInitialized()
     ],
     target: "ready"

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

@@ -1,10 +1,5 @@
-import { CancelAction, ActionFunction, Values } from 'xstate';
-import { Context, Events, EmittedEvents } from './machine.setup';
-import { DiagramView } from '@likec4/core';
-import { SyncLayoutActorLogic } from './syncManualLayoutActor';
-import { HotkeyActorLogic } from './hotkeyActor';
-import { OverlaysActorLogic } from '../../overlays/overlaysActor';
-import { SearchActorLogic } from '../../search/searchActor';
+import { CancelAction } from 'xstate';
+import { Context, Events } from './machine.setup';
 /**
  * State for handling navigation to a different view.
  * Closes overlays and search, stops sync layout and fit diagram actions,
@@ -12,106 +7,8 @@ import { SearchActorLogic } from '../../search/searchActor';
  */
 export declare const navigating: {
     id: string;
-    entry: CancelAction<Context, Events, undefined, Events>[];
-    on: {
-        'update.view': {
-            actions: ActionFunction<Context, {
-                type: "update.view";
-                view: DiagramView;
-                xynodes: import("../types").Types.Node[];
-                xyedges: import("../types").Types.Edge[];
-            }, Events, undefined, Values<{
-                syncManualLayoutActorLogic: {
-                    src: "syncManualLayoutActorLogic";
-                    logic: SyncLayoutActorLogic;
-                    id: "syncLayout";
-                };
-                hotkeyActorLogic: {
-                    src: "hotkeyActorLogic";
-                    logic: HotkeyActorLogic;
-                    id: "hotkey";
-                };
-                overlaysActorLogic: {
-                    src: "overlaysActorLogic";
-                    logic: OverlaysActorLogic;
-                    id: "overlays";
-                };
-                searchActorLogic: {
-                    src: "searchActorLogic";
-                    logic: SearchActorLogic;
-                    id: "search";
-                };
-            }>, never, Values<{
-                isReady: {
-                    type: "isReady";
-                    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: DynamicViewWalkthrough": {
-                    type: "enabled: DynamicViewWalkthrough";
-                    params: unknown;
-                };
-                "not readonly": {
-                    type: "not readonly";
-                    params: unknown;
-                };
-                "is dynamic view": {
-                    type: "is dynamic 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;
-                };
-            }>, never, EmittedEvents>;
-            target: string;
-        };
+    always: {
+        target: string;
+        actions: CancelAction<Context, Events, undefined, Events>[];
     };
 };