@likec4/diagram 1.59.4 → 1.61.0

package/dist/likec4diagram/state/machine.d.mts

@@ -0,0 +1,166 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { SearchActorLogic, SearchActorRef } from "../../search/searchActor.mjs";
+import { EditorActorLogic } from "../../editor/actor/machine.mjs";
+import { HotkeyActorLogic } from "./hotkeyActor.mjs";
+import { OverlaysActorLogic, OverlaysActorRef } from "../../overlays/overlaysActor.mjs";
+import { MediaPrintActorLogic } from "./mediaPrintActor.mjs";
+import "../../editor/index.mjs";
+import { NavigationPanelActorLogic, NavigationPanelActorRef } from "../../navigationpanel/actor.mjs";
+import { BaseDiagramMachineLogic, Context, EmittedEvents, Events, Input } from "./machine.setup.mjs";
+import { BaseEditorActorRef } from "../../editor/actor/setup.mjs";
+import { ActorRef, SnapshotFrom, StateValueFrom } from "xstate";
+declare const _diagramMachine: import("xstate").StateMachine<Context, Events, {
+  search?: import("xstate").ActorRefFromLogic<SearchActorLogic>;
+  hotkey?: import("xstate").ActorRefFromLogic<HotkeyActorLogic>;
+  overlays?: import("xstate").ActorRefFromLogic<OverlaysActorLogic>;
+  mediaPrint?: import("xstate").ActorRefFromLogic<MediaPrintActorLogic>;
+  editor?: import("xstate").ActorRefFromLogic<EditorActorLogic>;
+  navigationPanel?: import("xstate").ActorRefFromLogic<NavigationPanelActorLogic>;
+}, {
+  src: "search";
+  logic: SearchActorLogic;
+  id: "search";
+} | {
+  src: "hotkey";
+  logic: HotkeyActorLogic;
+  id: "hotkey";
+} | {
+  src: "overlays";
+  logic: OverlaysActorLogic;
+  id: "overlays";
+} | {
+  src: "mediaPrint";
+  logic: MediaPrintActorLogic;
+  id: "mediaPrint";
+} | {
+  src: "editor";
+  logic: EditorActorLogic;
+  id: "editor";
+} | {
+  src: "navigationPanel";
+  logic: NavigationPanelActorLogic;
+  id: "navigationPanel";
+}, never, {
+  type: "isReady";
+  params: unknown;
+} | {
+  type: "enabled: Editor";
+  params: unknown;
+} | {
+  type: "enabled: FitView";
+  params: unknown;
+} | {
+  type: "enabled: FocusMode";
+  params: unknown;
+} | {
+  type: "enabled: Readonly";
+  params: unknown;
+} | {
+  type: "enabled: RelationshipDetails";
+  params: unknown;
+} | {
+  type: "enabled: Search";
+  params: unknown;
+} | {
+  type: "enabled: ElementDetails";
+  params: unknown;
+} | {
+  type: "enabled: OpenSource";
+  params: unknown;
+} | {
+  type: "enabled: DynamicViewWalkthrough";
+  params: unknown;
+} | {
+  type: "enabled: NavigationPanel";
+  params: unknown;
+} | {
+  type: "focus.node: autoUnfocus";
+  params: unknown;
+} | {
+  type: "enabled: Overlays";
+  params: unknown;
+} | {
+  type: "not readonly";
+  params: unknown;
+} | {
+  type: "can compare layouts";
+  params: unknown;
+} | {
+  type: "is dynamic view";
+  params: unknown;
+} | {
+  type: "is dynamic view in sequence variant";
+  params: unknown;
+} | {
+  type: "is same view";
+  params: unknown;
+} | {
+  type: "is another view";
+  params: unknown;
+} | {
+  type: "click: node has modelFqn";
+  params: unknown;
+} | {
+  type: "click: node has details";
+  params: unknown;
+} | {
+  type: "click: selected node";
+  params: unknown;
+} | {
+  type: "click: same node";
+  params: unknown;
+} | {
+  type: "click: focused node";
+  params: unknown;
+} | {
+  type: "click: node.type = seq-subflow";
+  params: unknown;
+} | {
+  type: "click: node has connections";
+  params: unknown;
+} | {
+  type: "click: selected edge";
+  params: unknown;
+} | {
+  type: "click: active walkthrough step";
+  params: unknown;
+}, never, "final" | "isReady" | "initializing" | "navigating" | {
+  ready: "idle" | "walkthrough" | "focused" | "printing" | "comparing";
+}, string, Input, import("xstate").NonReducibleUnknown, EmittedEvents, import("xstate").MetaObject, {
+  states: {
+    readonly initializing: {};
+    readonly isReady: {};
+    readonly ready: {
+      states: {
+        idle: {
+          id: string;
+        };
+        focused: {
+          id: string;
+        };
+        walkthrough: {
+          id: string;
+        };
+        printing: {
+          id: string;
+        };
+        comparing: {
+          id: string;
+        };
+      };
+    };
+    readonly navigating: {
+      id: string;
+    };
+    readonly final: {};
+  };
+}, import("xstate").MetaObject>;
+export interface DiagramMachineLogic extends BaseDiagramMachineLogic<{
+  overlays: OverlaysActorRef | undefined;
+  search: SearchActorRef | undefined;
+  editor: BaseEditorActorRef | undefined;
+  navigationPanel: NavigationPanelActorRef | undefined;
+}, StateValueFrom<typeof _diagramMachine>> {}
+export type DiagramMachineSnapshot = SnapshotFrom<DiagramMachineLogic>;
+export interface DiagramMachineRef extends ActorRef<DiagramMachineSnapshot, Events, EmittedEvents> {}
+export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents };

package/dist/likec4diagram/state/machine.mjs

@@ -0,0 +1,90 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { updateEdgeData, updateNodeData } from "./assign.mjs";
+import { assignDynamicViewVariant, assignElementViewVariant, emitOnLayoutTypeChange, stopEditorActor, triggerChange, updateFeatures, updateInputs } from "./machine.actions.mjs";
+import { cancelFitDiagram, raiseUpdateView } from "./machine.actions.layout.mjs";
+import { Context, machine } from "./machine.setup.mjs";
+import { initializing, isReady } from "./machine.state.initializing.mjs";
+import { navigating } from "./machine.state.navigating.mjs";
+import { ready } from "./machine.state.ready.mjs";
+import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
+import { assign, stopChild } from "xstate/actions";
+
+// src/likec4diagram/state/machine.ts
+const _diagramMachine = machine.createMachine({
+	initial: "initializing",
+	context: Context,
+	states: {
+		initializing,
+		isReady,
+		ready,
+		navigating,
+		final: { type: "final" }
+	},
+	on: {
+		"update.nodeData": { actions: assign(updateNodeData) },
+		"update.edgeData": { actions: assign(updateEdgeData) },
+		"switch.dynamicViewVariant": {
+			guard: ({ context, event }) => context.dynamicViewVariant !== event.variant,
+			actions: [
+				assignDynamicViewVariant(),
+				assign({ viewportChangedManually: false }),
+				raiseUpdateView()
+			]
+		},
+		"switch.elementViewVariant": {
+			guard: ({ context, event }) => context.elementViewVariant !== event.variant,
+			actions: [
+				assignElementViewVariant(),
+				assign({ viewportChangedManually: false }),
+				raiseUpdateView()
+			]
+		},
+		"update.inputs": { actions: updateInputs() },
+		"update.view-bounds": { actions: assign(({ context, event }) => {
+			return { view: {
+				...context.view,
+				bounds: event.bounds
+			} };
+		}) },
+		"update.features": { actions: updateFeatures() },
+		"trigger.change": { actions: triggerChange() },
+		"emit.onLayoutTypeChange": { actions: emitOnLayoutTypeChange() },
+		"xyflow.applyChanges": { actions: assign(({ context, event }) => {
+			return {
+				xynodes: event.nodes ? applyNodeChanges(event.nodes, context.xynodes) : context.xynodes,
+				xyedges: event.edges ? applyEdgeChanges(event.edges, context.xyedges) : context.xyedges
+			};
+		}) },
+		"xyflow.viewportMoved": { actions: assign(({ event, context }) => ({
+			viewportChangedManually: context.viewportChangedManually || event.manually,
+			viewport: { ...event.viewport }
+		})) },
+		"destroy": {
+			target: ".final",
+			actions: [
+				stopEditorActor(),
+				cancelFitDiagram(),
+				stopChild("hotkey"),
+				stopChild("overlays"),
+				stopChild("search"),
+				stopChild("mediaPrint"),
+				assign({
+					xyflow: null,
+					xystore: null,
+					xyedges: [],
+					xynodes: [],
+					initialized: {
+						xydata: false,
+						xyflow: false
+					}
+				})
+			]
+		}
+	}
+});
+/**
+* Here is a trick to reduce inference types
+*/
+const diagramMachine = _diagramMachine;
+
+export { diagramMachine };

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

@@ -0,0 +1,380 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { HotKeyEvent, HotkeyActorLogic } from "./hotkeyActor.mjs";
+import { OverlaysActorLogic } from "../../overlays/overlaysActor.mjs";
+import { EditorActorLogic } from "../../editor/actor/machine.mjs";
+import { SearchActorLogic } from "../../search/searchActor.mjs";
+import { MediaPrintActorLogic, MediaPrintEvent } from "./mediaPrintActor.mjs";
+import "../../editor/index.mjs";
+import { NavigationPanelActorLogic } from "../../navigationpanel/actor.mjs";
+import { EnabledFeatures, TogglableFeature } from "../../context/DiagramFeatures.mjs";
+import { XYFlowInstance, XYStoreApi } from "../../hooks/useXYFlow.mjs";
+import { OpenSourceParams, RelationshipBrowserScope, ViewPaddings } from "../../LikeC4Diagram.props.mjs";
+import { DetailsSubject } from "../../overlays/element-details/subject.mjs";
+import { Types } from "../types.mjs";
+import { AlignmentMode } from "./aligners.mjs";
+import { MouseEvent } from "react";
+import { EdgeChange, NodeChange, Rect, Viewport } from "@xyflow/system";
+import { BBox } from "@likec4/core/geometry";
+import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutType, NodeId, NodeNotation, StepPath, ViewChange, ViewId, WhereOperator } from "@likec4/core/types";
+import { ActorRefFromLogic, StateMachine, StateValue } from "xstate";
+import { PartialDeep } from "type-fest";
+/**
+ * Display variant for element views: plain boxes-and-lines diagram, or a compact graph
+ * of circles (topology-focused, akin to Structurizr's "Explore" graph view).
+ * Client-side only - not persisted, no DSL/grammar impact.
+ */
+export type ElementViewDisplayVariant = 'diagram' | 'graph';
+/**
+ * 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 | StepPath;
+}
+export interface NavigationHistory {
+  history: ReadonlyArray<NavigationHistoryEntry>;
+  currentIndex: number;
+}
+export interface Input {
+  view: DiagramView;
+  xystore: XYStoreApi;
+  zoomable: boolean;
+  pannable: boolean;
+  fitView?: boolean | undefined;
+  initialZoom?: number | undefined;
+  minZoom?: number | undefined;
+  maxZoom?: number | undefined;
+  nodesDraggable: boolean;
+  nodesSelectable: boolean;
+  fitViewPadding: ViewPaddings;
+  where: WhereOperator | null;
+  dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+  relationshipBrowserScope?: RelationshipBrowserScope | undefined;
+  features?: EnabledFeatures;
+}
+export type ToggledFeatures = { [P in `enable${TogglableFeature}`]?: boolean; };
+export interface Context extends Input {
+  relationshipBrowserScope: RelationshipBrowserScope;
+  xynodes: Types.Node[];
+  xyedges: Types.Edge[];
+  features: EnabledFeatures;
+  toggledFeatures: ToggledFeatures;
+  initialized: {
+    xydata: boolean;
+    xyflow: boolean;
+  };
+  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;
+    fromNode: NodeId | null;
+    focusOnElement?: Fqn | null;
+  };
+  navigationHistory: NavigationHistory;
+  lastClickedNode: null | {
+    id: NodeId;
+    clicks: number;
+    timestamp: number;
+  };
+  focusedNode: NodeId | null;
+  autoUnfocusTimer: boolean;
+  activeElementDetails: null | {
+    fqn: Fqn;
+    fromNode: NodeId | null;
+    nodeRect?: Rect | null;
+    nodeRectScreen?: Rect | null;
+  };
+  xyflow: XYFlowInstance | null;
+  dynamicViewVariant: DynamicViewDisplayVariant;
+  elementViewVariant: ElementViewDisplayVariant;
+  activeWalkthrough: null | {
+    stepId: StepPath;
+    activeFlow: StepPath | null;
+    outlinePanelWidth: number;
+  };
+  collapsedSequenceFlows: {
+    [flowId: StepPath]: boolean;
+  };
+  minZoom: number;
+  maxZoom: number;
+}
+export declare function Context({ input }: {
+  input: Input;
+}): Context;
+export type Events = HotKeyEvent | MediaPrintEvent | {
+  type: 'xyflow.init';
+  instance: XYFlowInstance;
+} | {
+  type: 'xyflow.applyChanges';
+  edges?: EdgeChange<Types.Edge>[];
+  nodes?: NodeChange<Types.Node>[];
+} | {
+  type: 'xyflow.viewportMoved';
+  viewport: Viewport;
+  manually: boolean;
+} | {
+  type: 'xyflow.nodeClick';
+  node: Types.Node;
+} | {
+  type: 'xyflow.edgeClick';
+  edge: Types.Edge;
+} | {
+  type: 'xyflow.edgeDoubleClick';
+  edge: Types.Edge;
+} | {
+  type: 'xyflow.paneClick';
+} | {
+  type: 'xyflow.paneDblClick';
+} | {
+  type: 'xyflow.resized';
+} | {
+  type: 'xyflow.nodeMouseEnter';
+  node: Types.Node | NodeId;
+} | {
+  type: 'xyflow.nodeMouseLeave';
+  node: Types.Node | NodeId;
+} | {
+  type: 'xyflow.edgeMouseEnter';
+  edge: Types.Edge;
+  event: MouseEvent;
+} | {
+  type: 'xyflow.edgeMouseLeave';
+  edge: Types.Edge;
+  event: MouseEvent;
+} | {
+  type: 'xyflow.fitDiagram';
+  duration?: number;
+  bounds?: BBox;
+} | {
+  type: 'xyflow.setViewport';
+  duration?: number;
+  viewport: Viewport;
+} | {
+  type: 'xyflow.centerViewport';
+  nodeId: NodeId;
+  duration?: number;
+} | {
+  type: 'xyflow.centerViewport';
+  edgeId: EdgeId;
+  duration?: number;
+} | {
+  type: 'xyflow.resetSelection';
+} | {
+  type: 'xyflow.select';
+  nodes?: NodeId[] | undefined;
+  edges?: EdgeId[] | undefined;
+} | {
+  type: 'update.nodeData';
+  nodeId: NodeId;
+  data: PartialDeep<Types.NodeData>;
+} | {
+  type: 'update.edgeData';
+  edgeId: EdgeId;
+  data: PartialDeep<Types.EdgeData>;
+} | {
+  type: 'update.view';
+  view: DiagramView;
+  source?: 'editor' | 'external';
+} | {
+  type: 'update.view';
+  view: DiagramView;
+  source?: 'editor' | 'external';
+  xynodes: Types.Node[];
+  xyedges: Types.Edge[];
+} | {
+  type: 'update.view-bounds';
+  bounds: BBox;
+} | {
+  type: 'update.inputs';
+  inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant' | 'features'>>;
+} | {
+  type: 'update.features';
+  features: EnabledFeatures;
+} | ({
+  type: 'open.source';
+} & OpenSourceParams) | {
+  type: 'open.nodeDetails';
+  target: NodeId | DetailsSubject;
+  fromNode?: NodeId | undefined;
+} | {
+  type: 'open.relationshipDetails';
+  params: {
+    edgeId: EdgeId;
+  } | {
+    source: Fqn;
+    target: Fqn;
+  };
+} | {
+  type: 'open.relationshipsBrowser';
+  fqn: Fqn;
+  scope?: RelationshipBrowserScope | undefined;
+} | {
+  type: 'open.search';
+  search?: string;
+} | {
+  type: 'navigate.to';
+  viewId: ViewId;
+  fromNode?: NodeId | undefined;
+  focusOnElement?: Fqn | undefined;
+} | {
+  type: 'navigate.back';
+} | {
+  type: 'navigate.forward';
+} | {
+  type: 'layout.align';
+  mode: AlignmentMode;
+} | {
+  type: 'layout.resetEdgeControlPoints';
+} | {
+  type: 'layout.resetManualLayout';
+} | {
+  type: 'focus.node';
+  nodeId: NodeId;
+  autoUnfocus?: boolean;
+} | {
+  type: 'focus.autoUnfocus';
+} | {
+  type: 'switch.dynamicViewVariant';
+  variant: DynamicViewDisplayVariant;
+} | {
+  type: 'switch.elementViewVariant';
+  variant: ElementViewDisplayVariant;
+} | {
+  type: 'walkthrough.start';
+  stepId?: StepPath | undefined;
+} | {
+  type: 'walkthrough.step';
+  direction: 'next' | 'prev';
+  stepId?: never;
+} | {
+  type: 'walkthrough.step';
+  stepId: StepPath;
+  direction?: never;
+} | {
+  type: 'walkthrough.end';
+} | {
+  type: 'compare.start';
+} | {
+  type: 'compare.end';
+} | {
+  type: 'sequence.flow.collapse';
+  flowId: StepPath;
+} | {
+  type: 'sequence.flow.expand';
+  flowId: StepPath;
+} | {
+  type: 'sequence.flow.toggle';
+  flowId: StepPath;
+} | {
+  type: 'sequence.walkthrough.end';
+} | {
+  type: 'highlight.node';
+  nodeId: NodeId;
+} | {
+  type: 'highlight.edge';
+  edgeId: EdgeId;
+} | {
+  type: 'unhighlight.all';
+} | {
+  type: 'notations.highlight';
+  notation: NodeNotation;
+  kind?: string;
+} | {
+  type: 'notations.unhighlight';
+} | {
+  type: 'tag.highlight';
+  tag: string;
+} | {
+  type: 'tag.unhighlight';
+} | {
+  type: 'toggle.feature';
+  feature: TogglableFeature;
+  forceValue?: boolean;
+} | {
+  type: 'trigger.change';
+  change: ViewChange;
+} | {
+  type: 'emit.onLayoutTypeChange';
+  layoutType: LayoutType;
+} | {
+  type: 'destroy';
+};
+export type EmittedEvents = {
+  type: 'initialized';
+  instance: XYFlowInstance;
+} | {
+  type: 'navigateTo';
+  viewId: ViewId;
+} | {
+  type: 'openSource';
+  params: OpenSourceParams;
+} | {
+  type: 'paneClick';
+} | {
+  type: 'nodeClick';
+  node: DiagramNode;
+  xynode: Types.Node;
+} | {
+  type: 'edgeClick';
+  edge: DiagramEdge;
+  xyedge: Types.Edge;
+} | {
+  type: 'edgeMouseEnter';
+  edge: Types.Edge;
+  event: MouseEvent;
+} | {
+  type: 'edgeMouseLeave';
+  edge: Types.Edge;
+  event: MouseEvent;
+} | {
+  type: 'walkthroughStarted';
+  edge: Types.Edge;
+} | {
+  type: 'walkthroughStep';
+  edge: Types.Edge;
+  stepId: StepPath;
+} | {
+  type: 'walkthroughStopped';
+} | {
+  type: 'onLayoutTypeChange';
+  layoutType: LayoutType;
+};
+declare const actors: {
+  hotkey: HotkeyActorLogic;
+  overlays: OverlaysActorLogic;
+  search: SearchActorLogic;
+  mediaPrint: MediaPrintActorLogic;
+  editor: EditorActorLogic;
+  navigationPanel: NavigationPanelActorLogic;
+};
+type ChildrenActors = typeof actors;
+type ActorLogicMap = { [K in keyof ChildrenActors]: ActorRefFromLogic<ChildrenActors[K]> | undefined; };
+type ChildrenActor = { [K in keyof ChildrenActors]: {
+  id: K;
+  logic: ChildrenActors[K];
+  src: K;
+}; }[keyof ChildrenActors];
+/**
+ * Here is a trick to reduce inference types
+ */
+export interface BaseDiagramMachineLogic<Actors extends Partial<ActorLogicMap> = ActorLogicMap, State extends StateValue = never> extends StateMachine<Context, Events, Actors & Omit<ActorLogicMap, keyof Actors>, ChildrenActor, never, never, never, State, never, Input, never, EmittedEvents, never, never> {}
+export {};