@likec4/diagram 1.43.0 → 1.45.0

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

@@ -0,0 +1,22 @@
+import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
+import { OverlaysActorRef } from '../../overlays/overlaysActor';
+import { SearchActorRef } from '../../search/searchActor';
+import { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Input } from './machine.setup';
+import { SyncLayoutActorRef } from './syncManualLayoutActor';
+/**
+ * Here is a trick to reduce inference types
+ */
+export interface DiagramMachineLogic extends StateMachine<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    syncLayout: SyncLayoutActorRef | undefined;
+}, any, any, any, any, any, any, Input, any, any, any, any> {
+}
+export declare const diagramMachine: DiagramMachineLogic;
+export type DiagramMachineSnapshot = MachineSnapshot<DiagramContext, DiagramEvents, {
+    overlays: OverlaysActorRef | undefined;
+    search: SearchActorRef | undefined;
+    syncLayout: SyncLayoutActorRef | undefined;
+}, any, any, any, {}, {}>;
+export type DiagramMachineRef = ActorRef<DiagramMachineSnapshot, DiagramEvents, DiagramEmittedEvents>;
+export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, };

package/dist/likec4diagram/state/machine.js

@@ -0,0 +1,127 @@
+import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
+import { DefaultFeatures } from '../../context/DiagramFeatures.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",
+  context: ({ input }) => ({
+    ...input,
+    xyedges: [],
+    xynodes: [],
+    features: { ...DefaultFeatures },
+    toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
+      enableReadOnly: true,
+      enableCompareWithLatest: false
+    },
+    initialized: {
+      xydata: false,
+      xyflow: false
+    },
+    viewportChangedManually: false,
+    lastOnNavigate: null,
+    lastClickedNode: null,
+    focusedNode: null,
+    activeElementDetails: null,
+    viewportBefore: null,
+    viewportOnManualLayout: null,
+    viewportOnAutoLayout: null,
+    navigationHistory: {
+      currentIndex: 0,
+      history: []
+    },
+    viewport: { x: 0, y: 0, zoom: 1 },
+    xyflow: null,
+    dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
+    activeWalkthrough: null
+  }),
+  states: {
+    initializing,
+    isReady,
+    ready,
+    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: {
+    "update.nodeData": {
+      actions: xstateActions_cjsExports.assign(updateNodeData)
+    },
+    "update.edgeData": {
+      actions: xstateActions_cjsExports.assign(updateEdgeData)
+    },
+    "switch.dynamicViewVariant": {
+      actions: assignDynamicViewVariant()
+    },
+    "update.inputs": {
+      actions: updateInputs()
+    },
+    "update.view-bounds": {
+      actions: xstateActions_cjsExports.assign(({ context, event }) => {
+        return {
+          view: {
+            ...context.view,
+            bounds: event.bounds
+          }
+        };
+      })
+    },
+    "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"
+    }
+  }
+});
+const diagramMachine = _diagramMachine;
+
+export { diagramMachine };

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

@@ -0,0 +1,327 @@
+import { BBox } from '@likec4/core';
+import { DiagramEdge, DiagramNode, DiagramView, DynamicViewDisplayVariant, EdgeId, Fqn, LayoutType, NodeId, NodeNotation as ElementNotation, StepEdgeId, ViewChange, ViewId } from '@likec4/core/types';
+import { EdgeChange, NodeChange, Rect, Viewport } from '@xyflow/system';
+import { MouseEvent } from 'react';
+import { PartialDeep } from 'type-fest';
+import { EnabledFeatures, TogglableFeature } from '../../context/DiagramFeatures';
+import { XYFlowInstance, XYStoreApi } from '../../hooks/useXYFlow';
+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<NavigationHistoryEntry>;
+    currentIndex: number;
+}
+export interface Input {
+    view: DiagramView;
+    xystore: XYStoreApi;
+    zoomable: boolean;
+    pannable: boolean;
+    nodesDraggable: boolean;
+    nodesSelectable: boolean;
+    fitViewPadding: ViewPaddings;
+    dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+}
+export type ToggledFeatures = {
+    [P in `enable${TogglableFeature}`]?: boolean;
+};
+export interface Context extends Input {
+    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;
+    };
+    navigationHistory: NavigationHistory;
+    lastClickedNode: null | {
+        id: NodeId;
+        clicks: number;
+        timestamp: number;
+    };
+    focusedNode: NodeId | null;
+    activeElementDetails: null | {
+        fqn: Fqn;
+        fromNode: NodeId | null;
+        nodeRect?: Rect | null;
+        nodeRectScreen?: Rect | null;
+    };
+    xyflow: XYFlowInstance | null;
+    dynamicViewVariant: DynamicViewDisplayVariant;
+    activeWalkthrough: null | {
+        stepId: StepEdgeId;
+        parallelPrefix: string | null;
+    };
+}
+export type Events = HotKeyEvent | MediaPrintEvent | {
+    type: 'xyflow.init';
+    instance: XYFlowInstance;
+} | {
+    type: 'xyflow.applyNodeChanges';
+    changes: NodeChange<Types.Node>[];
+} | {
+    type: 'xyflow.applyEdgeChanges';
+    changes: EdgeChange<Types.Edge>[];
+} | {
+    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;
+} | {
+    type: 'xyflow.nodeMouseLeave';
+    node: Types.Node;
+} | {
+    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: 'update.nodeData';
+    nodeId: NodeId;
+    data: PartialDeep<Types.NodeData>;
+} | {
+    type: 'update.edgeData';
+    edgeId: EdgeId;
+    data: PartialDeep<Types.EdgeData>;
+} | {
+    type: 'update.view';
+    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: 'open.source';
+} & OpenSourceParams) | {
+    type: 'open.elementDetails';
+    fqn: Fqn;
+    fromNode?: NodeId | undefined;
+} | {
+    type: 'open.relationshipDetails';
+    params: {
+        edgeId: EdgeId;
+    } | {
+        source: Fqn;
+        target: Fqn;
+    };
+} | {
+    type: 'open.relationshipsBrowser';
+    fqn: Fqn;
+} | {
+    type: 'open.search';
+    search?: string;
+} | {
+    type: 'navigate.to';
+    viewId: ViewId;
+    fromNode?: NodeId | undefined;
+} | {
+    type: 'navigate.back';
+} | {
+    type: 'navigate.forward';
+} | {
+    type: 'layout.align';
+    mode: AlignmentMode;
+} | {
+    type: 'layout.resetEdgeControlPoints';
+} | {
+    type: 'layout.resetManualLayout';
+} | {
+    type: 'focus.node';
+    nodeId: NodeId;
+} | {
+    type: 'switch.dynamicViewVariant';
+    variant: DynamicViewDisplayVariant;
+} | {
+    type: 'walkthrough.start';
+    stepId?: StepEdgeId;
+} | {
+    type: 'walkthrough.step';
+    direction: 'next' | 'previous';
+} | {
+    type: 'walkthrough.end';
+} | {
+    type: 'notations.highlight';
+    notation: ElementNotation;
+    kind?: string;
+} | {
+    type: 'notations.unhighlight';
+} | {
+    type: 'tag.highlight';
+    tag: string;
+} | {
+    type: 'tag.unhighlight';
+} | {
+    type: 'toggle.feature';
+    feature: TogglableFeature;
+    forceValue?: boolean;
+} | {
+    type: 'emit.onChange';
+    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;
+} | {
+    type: 'walkthroughStopped';
+} | {
+    type: 'onChange';
+    change: ViewChange;
+} | {
+    type: 'onLayoutTypeChange';
+    layoutType: LayoutType;
+};
+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;
+    'enabled: FocusMode': unknown;
+    'enabled: Readonly': unknown;
+    '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;
+    'click: node has modelFqn': unknown;
+    'click: selected node': unknown;
+    'click: same node': unknown;
+    'click: focused node': unknown;
+    '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

@@ -0,0 +1,93 @@
+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 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: {},
+    input: {},
+    children: {},
+    events: {},
+    emitted: {}
+  },
+  actors: {
+    syncManualLayoutActorLogic,
+    hotkeyActorLogic,
+    overlaysActorLogic,
+    searchActorLogic,
+    mediaPrintActorLogic
+  },
+  guards: {
+    "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
+    "enabled: FitView": ({ context }) => context.features.enableFitView,
+    "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: 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 }) => {
+      assertEvent(event, ["update.view", "navigate.to"]);
+      if (event.type === "update.view") {
+        return context.view.id !== event.view.id;
+      }
+      if (event.type === "navigate.to") {
+        return context.view.id !== event.viewId;
+      }
+      nonexhaustive(event.type);
+    },
+    "click: node has modelFqn": ({ event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return "modelFqn" in event.node.data;
+    },
+    "click: selected node": ({ event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return event.node.selected === true;
+    },
+    "click: same node": ({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return context.lastClickedNode?.id === event.node.id;
+    },
+    "click: focused node": ({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return context.focusedNode === event.node.id;
+    },
+    "click: node has connections": ({ context, event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
+    },
+    "click: selected edge": ({ event }) => {
+      assertEvent(event, ["xyflow.edgeClick", "xyflow.edgeDoubleClick"]);
+      return event.edge.selected === true || event.edge.data.active === true;
+    }
+  }
+});
+const targetState = {
+  idle: "#idle",
+  focused: "#focused",
+  walkthrough: "#walkthrough",
+  printing: "#printing",
+  navigating: "#navigating"
+};
+
+export { deriveToggledFeatures, machine, targetState };