@likec4/diagram 1.44.0 → 1.46.0

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

@@ -0,0 +1,190 @@
+import { isStepEdgeId, getParallelStepsPrefix, invariant } from '@likec4/core';
+import { clamp, first } from 'remeda';
+import { assertEvent } from 'xstate';
+import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
+import { updateView, 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.up": {
+      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "previous" })
+    },
+    "key.arrow.right": {
+      actions: xstateActions_cjsExports.raise({ type: "walkthrough.step", direction: "next" })
+    },
+    "key.arrow.down": {
+      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()
+    },
+    "update.view": {
+      guard: "is same view",
+      actions: [
+        updateView(),
+        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;

package/dist/likec4diagram/state/mediaPrintActor.js

@@ -0,0 +1,18 @@
+import { fromCallback } from 'xstate';
+
+const mediaPrintActorLogic = fromCallback(({ sendBack }) => {
+  const beforePrint = () => {
+    sendBack({ type: "media.print.on" });
+  };
+  const afterPrint = () => {
+    sendBack({ type: "media.print.off" });
+  };
+  window.addEventListener("beforeprint", beforePrint);
+  window.addEventListener("afterprint", afterPrint);
+  return () => {
+    window.removeEventListener("beforeprint", beforePrint);
+    window.removeEventListener("afterprint", afterPrint);
+  };
+});
+
+export { mediaPrintActorLogic };

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

@@ -1,19 +1,21 @@
-import { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate';
+import { ActorSystem } from 'xstate';
+import { EditorActorRef } from '../../editor/editorActor';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
-import { DiagramMachineLogic } from './machine';
-import { SyncLayoutActorRef } from './syncManualLayoutActor';
+import { DiagramMachineRef } from './machine';
+export type NodeWithData = {
+    id: string;
+    data: Record<string, unknown>;
+};
 export type System = ActorSystem<{
     actors: {
-        diagram: ActorRefFromLogic<DiagramMachineLogic>;
+        diagram: DiagramMachineRef;
         overlays: OverlaysActorRef;
         search: SearchActorRef;
-        syncLayout: SyncLayoutActorRef;
+        editor: EditorActorRef;
     };
 }>;
-export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic> {
+export interface DiagramActorRef extends DiagramMachineRef {
     system: System;
 }
-export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>;
-export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>;
-export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, } from './machine.setup';
+export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, DiagramMachineSnapshot as DiagramActorSnapshot, } from './machine';

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

@@ -1,16 +1,39 @@
-import { DiagramEdge, DiagramNode, BBox } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, BBox } from '@likec4/core/types';
+import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
+import { EditorActorRef } from '../../editor/editorActor';
+import { ViewPaddings } from '../../LikeC4Diagram.props';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
+import { Types } from '../types';
 import { Context } from './machine.setup';
-import { SyncLayoutActorRef } from './syncManualLayoutActor';
-import { DiagramActorRef } from './types';
+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;
+    };
+}) | null;
 export declare function typedSystem(system: ActorSystem<any>): {
-    readonly syncLayoutActorRef: SyncLayoutActorRef | null;
     readonly overlaysActorRef: OverlaysActorRef | null;
     readonly diagramActorRef: DiagramActorRef;
     readonly searchActorRef: SearchActorRef | null;
+    readonly editorActorRef: EditorActorRef | null;
 };
+export declare namespace typedSystem {
+    var editorActor: ({ system }: {
+        system: ActorSystem<any>;
+    }) => EditorActorRef;
+    var overlaysActor: ({ system }: {
+        system: ActorSystem<any>;
+    }) => OverlaysActorRef;
+    var diagramActor: ({ system }: {
+        system: ActorSystem<any>;
+    }) => DiagramActorRef;
+    var searchActor: ({ system }: {
+        system: ActorSystem<any>;
+    }) => SearchActorRef;
+}
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
 export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;
 export declare function focusedBounds(params: {
@@ -23,5 +46,21 @@ export declare function activeSequenceBounds(params: {
     context: Context;
 }): {
     bounds: BBox;
-    duration?: number;
+    duration: number;
+};
+export declare function nodeRef(node: Types.Node): DeploymentFqn | Fqn | 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;
+};
+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,12 +1,14 @@
 import { BBox } from '@likec4/core/types';
-import { nonNullable } from '@likec4/core/utils';
-import { getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+import { nonNullable, nonexhaustive } from '@likec4/core/utils';
+import { getViewportForBounds, getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+import { MinZoom } from '../../base/const.js';
 
+const findNodeByModelFqn = (xynodes, elementFqn) => {
+  const node = xynodes.find((n) => "modelFqn" in n.data && n.data["modelFqn"] === elementFqn);
+  return node ? node : null;
+};
 function typedSystem(system) {
   return {
-    get syncLayoutActorRef() {
-      return system.get("syncLayout") ?? null;
-    },
     get overlaysActorRef() {
       return system.get("overlays") ?? null;
     },
@@ -15,9 +17,24 @@ function typedSystem(system) {
     },
     get searchActorRef() {
       return system.get("search") ?? null;
+    },
+    get editorActorRef() {
+      return system.get("editor") ?? null;
     }
   };
 }
+typedSystem.editorActor = ({ system }) => {
+  return system.get("editor");
+};
+typedSystem.overlaysActor = ({ system }) => {
+  return system.get("overlays");
+};
+typedSystem.diagramActor = ({ system }) => {
+  return system.get("diagram");
+};
+typedSystem.searchActor = ({ system }) => {
+  return system.get("search");
+};
 function findDiagramNode(ctx, xynodeId) {
   return ctx.view.nodes.find((n) => n.id === xynodeId) ?? null;
 }
@@ -124,5 +141,44 @@ function getEdgeBounds(edge, store) {
     [edgePosition.targetX, edgePosition.targetY]
   ]);
 }
+function nodeRef(node) {
+  switch (node.type) {
+    case "element":
+    case "compound-element":
+    case "seq-actor":
+      return node.data.modelFqn;
+    case "deployment":
+    case "compound-deployment":
+      return node.data.modelFqn ?? node.data.deploymentFqn;
+    case "seq-parallel":
+    case "view-group":
+      return null;
+    default:
+      nonexhaustive(node);
+  }
+}
+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);
+  return { fromNode, toNode };
+}
+function calcViewportForBounds(context, bounds) {
+  let {
+    width,
+    height,
+    transform
+  } = context.xystore.getState();
+  const maxZoom = Math.max(transform[2], 1);
+  return getViewportForBounds(
+    bounds,
+    width,
+    height,
+    MinZoom,
+    maxZoom,
+    context.fitViewPadding
+  );
+}
 
-export { activeSequenceBounds, findDiagramEdge, findDiagramNode, focusedBounds, typedSystem };
+export { activeSequenceBounds, calcViewportForBounds, findCorrespondingNode, findDiagramEdge, findDiagramNode, findNodeByModelFqn, focusedBounds, nodeRef, typedSystem };

package/dist/likec4diagram/types.d.ts

@@ -1,18 +1,17 @@
-import { BBox, DeploymentFqn, DiagramEdge, DiagramEdgeDriftReason, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, NonEmptyReadonlyArray, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, DiagramNodeDriftReason, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, NonEmptyReadonlyArray, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../base/types';
 export declare namespace Types {
-    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
-        technology: string | null;
-        description: RichTextOrEmpty;
+    type LeafNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'tags' | 'x' | 'y'>> & {
         /**
          * View this node belongs to
          */
         viewId: ViewId;
         isMultiple?: boolean | undefined;
         icon: string | null;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     /**
      * Represents element from logical model
@@ -24,7 +23,6 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     /**
      * Represents element from deployment model
@@ -33,7 +31,6 @@ export declare namespace Types {
         navigateTo: ViewId | null;
         deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type SequenceActorNodePort = {
         id: string;
@@ -59,6 +56,7 @@ export declare namespace Types {
         viewId: ViewId;
         depth: number;
         icon?: IconUrl;
+        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type CompoundElementNodeData = Simplify<CompoundNodeData & {
         modelFqn: Fqn;
@@ -67,7 +65,6 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type CompoundDeploymentNodeData = Simplify<CompoundNodeData & {
         deploymentFqn: DeploymentFqn;
@@ -79,7 +76,6 @@ export declare namespace Types {
          * If set - this node has navigation to another view and diagram has handler for this
          */
         navigateTo: ViewId | null;
-        drifts: NonEmptyReadonlyArray<DiagramNodeDriftReason> | null;
     }>;
     type ViewGroupNodeData = Simplify<CompoundNodeData & {
         isViewGroup: true;
@@ -106,14 +102,13 @@ export declare namespace Types {
         type: Type;
     }>;
     type NodeProps<Type extends NodeType = NodeType> = BaseNodeProps<Node<Type>>;
-    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
-        notes: RichTextOrEmpty;
+    type RelationshipEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
-        drifts: NonEmptyReadonlyArray<DiagramEdgeDriftReason> | null;
     }>;
-    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath'>> & {
-        notes: RichTextOrEmpty;
+    type SequenceStepEdgeData = Simplify<BaseEdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'astPath' | 'drifts'>> & {
+        notes: MarkdownOrString | null;
         labelXY: XYPosition | null;
         labelBBox: BBox;
         controlPoints: XYPosition[] | undefined | null;

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -7,7 +7,10 @@ const container = css({
   padding: "2",
   margin: "0",
   width: "min-content",
-  height: "min-content"
+  height: "min-content",
+  _print: {
+    display: "none"
+  }
 });
 const icon = css({
   ["--ai-radius"]: "0px",
@@ -43,7 +46,7 @@ const elementNotation = css({
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // vars: {
-  //   // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  //   // [stokeFillMix]: `color-mix(in oklab, ${vars.element.stroke} 90%, ${vars.element.fill})`
   // },
   _hover: {
     transition: "all 120ms ease-out",

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -9,9 +9,9 @@ import { useDiagramContext } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
 import { container, icon, card, tabPanel, shapeBadge, elementNotation } from './NotationPanel.css.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
-import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
+import IconAlertTriangle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconHelpCircle from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js';
+import IconArrowDownRight from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';