@likec4/diagram 1.44.0 → 1.45.0

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

@@ -0,0 +1,511 @@
+import { CancelAction, StopAction, ActionFunction, Values } from 'xstate';
+import { Context, Events, EmittedEvents } from './machine.setup';
+import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
+import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { OverlaysActorLogic } from '../../overlays/overlaysActor';
+import { SearchActorLogic } from '../../search/searchActor';
+import { MediaPrintActorLogic } from './mediaPrintActor';
+export declare const walkthrough: {
+    id: string;
+    entry: CancelAction<Context, Events, undefined, Events>[];
+    exit: StopAction<Context, Events, undefined, Events>[];
+    on: {
+        'key.esc': {
+            target: string;
+        };
+        'key.arrow.left': {
+            actions: ActionFunction<Context, HotKeyEvent, Events, undefined, never, never, never, never, never>;
+        };
+        'key.arrow.right': {
+            actions: ActionFunction<Context, HotKeyEvent, Events, undefined, never, never, never, never, never>;
+        };
+        'walkthrough.step': {
+            actions: ( ActionFunction<Context, Events, 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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, 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: 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;
+                };
+                "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> | ActionFunction<Context, {
+                type: "walkthrough.step";
+                direction: "next" | "previous";
+            }, 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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, never, never, never, never>)[];
+        };
+        'xyflow.edgeClick': {
+            actions: ( ActionFunction<Context, Events, 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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, 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: 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;
+                };
+                "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> | ActionFunction<Context, {
+                type: "xyflow.edgeClick";
+                edge: 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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, never, never, never, never>)[];
+        };
+        'notations.unhighlight': {
+            actions: ActionFunction<Context, Events, 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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, 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: 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;
+                };
+                "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>;
+        };
+        'tag.unhighlight': {
+            actions: ActionFunction<Context, Events, 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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, 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: 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;
+                };
+                "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>;
+        };
+        'walkthrough.end': {
+            target: string;
+        };
+        'xyflow.paneDblClick': {
+            target: string;
+        };
+    };
+};

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

@@ -0,0 +1,177 @@
+import { isStepEdgeId, getParallelStepsPrefix, invariant } from '@likec4/core';
+import { clamp, first } from 'remeda';
+import { assertEvent } from 'xstate';
+import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
+import { emitEdgeClick, stopHotKeyActor, undimEverything, startHotKeyActor, cancelEditing } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+import { fitFocusedBounds, returnViewportBefore, cancelFitDiagram, assignViewportBefore } from './machine.actions.layout.js';
+import { Base } from '../../base/Base.js';
+
+const updateActiveWalkthroughState = () => machine.enqueueActions(({ context, enqueue }) => {
+  const { activeWalkthrough } = context;
+  if (!activeWalkthrough) {
+    console.warn("Active walkthrough is null");
+    enqueue.raise({ type: "walkthrough.end" });
+    return;
+  }
+  const { stepId, parallelPrefix } = activeWalkthrough;
+  const step = context.xyedges.find((x) => x.id === stepId);
+  if (!step) {
+    console.warn("Invalid walkthrough stepId:", stepId);
+    enqueue.raise({ type: "walkthrough.end" });
+    return;
+  }
+  enqueue.assign({
+    xyedges: context.xyedges.map((edge) => {
+      const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
+      return Base.setData(edge, {
+        active,
+        dimmed: stepId !== edge.id
+      });
+    }),
+    xynodes: context.xynodes.map((node) => {
+      const dimmed = step.source !== node.id && step.target !== node.id;
+      if (node.type === "seq-parallel") {
+        return Base.setData(node, {
+          color: parallelPrefix === node.data.parallelPrefix ? SeqParallelAreaColor.active : SeqParallelAreaColor.default,
+          dimmed
+        });
+      }
+      return Base.setDimmed(node, dimmed);
+    })
+  });
+});
+const emitWalkthroughStarted = () => machine.emit(({ context }) => {
+  const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
+  invariant(edge, "Invalid walkthrough state");
+  return {
+    type: "walkthroughStarted",
+    edge
+  };
+});
+const emitWalkthroughStopped = () => machine.emit(() => ({
+  type: "walkthroughStopped"
+}));
+const emitWalkthroughStep = () => machine.emit(({ context }) => {
+  const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
+  invariant(edge, "Invalid walkthrough state");
+  return {
+    type: "walkthroughStep",
+    edge
+  };
+});
+const walkthrough = machine.createStateConfig({
+  id: targetState.walkthrough.slice(1),
+  entry: [
+    startHotKeyActor(),
+    cancelEditing(),
+    cancelFitDiagram(),
+    assignViewportBefore(),
+    xstateActions_cjsExports.assign({
+      activeWalkthrough: ({ context, event }) => {
+        assertEvent(event, "walkthrough.start");
+        const stepId = event.stepId ?? first(context.xyedges).id;
+        return {
+          stepId,
+          parallelPrefix: getParallelStepsPrefix(stepId)
+        };
+      }
+    }),
+    updateActiveWalkthroughState(),
+    fitFocusedBounds(),
+    emitWalkthroughStarted()
+  ],
+  exit: [
+    stopHotKeyActor(),
+    xstateActions_cjsExports.enqueueActions(({ enqueue, context }) => {
+      enqueue.assign({
+        activeWalkthrough: null
+      });
+      if (context.dynamicViewVariant === "sequence" && context.activeWalkthrough?.parallelPrefix) {
+        enqueue.assign({
+          xynodes: context.xynodes.map((n) => {
+            if (n.type === "seq-parallel") {
+              return Base.setData(n, {
+                color: SeqParallelAreaColor.default
+              });
+            }
+            return n;
+          })
+        });
+      }
+    }),
+    undimEverything(),
+    returnViewportBefore(),
+    emitWalkthroughStopped()
+  ],
+  on: {
+    "key.esc": {
+      target: targetState.idle
+    },
+    "key.arrow.left": {
+      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "previous" })
+    },
+    "key.arrow.right": {
+      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "next" })
+    },
+    "walkthrough.step": {
+      actions: [
+        xstateActions_cjsExports.assign(({ context, event }) => {
+          const { stepId } = context.activeWalkthrough;
+          const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
+          const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
+            min: 0,
+            max: context.xyedges.length - 1
+          });
+          if (nextStepIndex === stepIndex) {
+            return {};
+          }
+          const nextStepId = context.xyedges[nextStepIndex].id;
+          return {
+            activeWalkthrough: {
+              stepId: nextStepId,
+              parallelPrefix: getParallelStepsPrefix(nextStepId)
+            }
+          };
+        }),
+        updateActiveWalkthroughState(),
+        fitFocusedBounds(),
+        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()
+      ]
+    },
+    "notations.unhighlight": {
+      actions: updateActiveWalkthroughState()
+    },
+    "tag.unhighlight": {
+      actions: updateActiveWalkthroughState()
+    },
+    "walkthrough.end": {
+      target: targetState.idle
+    },
+    "xyflow.paneDblClick": {
+      target: targetState.idle
+    }
+  }
+});
+
+export { walkthrough };

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

@@ -0,0 +1,12 @@
+import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from 'xstate';
+export type MediaPrintEvent = {
+    type: 'media.print.on';
+} | {
+    type: 'media.print.off';
+};
+export interface MediaPrintActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, MediaPrintEvent> {
+}
+/**
+ * Actor logic to listen for media print events.
+ */
+export declare const mediaPrintActorLogic: MediaPrintActorLogic;