@likec4/diagram 1.42.1 → 1.44.0

package/dist/likec4diagram/state/machine.js

@@ -0,0 +1,141 @@
+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 { 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';
+
+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,
+    viewportBeforeFocus: 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
+  },
+  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()
+      ]
+    },
+    "update.inputs": {
+      actions: updateInputs()
+    },
+    "update.features": {
+      actions: [
+        updateFeatures(),
+        ensureOverlaysActorState(),
+        ensureSearchActorState()
+      ]
+    },
+    "switch.dynamicViewVariant": {
+      actions: assignDynamicViewVariant()
+    },
+    "emit.onChange": {
+      actions: emitOnChange()
+    },
+    "emit.onLayoutTypeChange": {
+      actions: emitOnLayoutTypeChange()
+    }
+  },
+  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;
+
+export { diagramMachine };

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

@@ -0,0 +1,284 @@
+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, FeatureName } from '../../context/DiagramFeatures';
+import { XYFlowInstance, XYStoreApi } from '../../hooks/useXYFlow';
+import { OpenSourceParams, ViewPadding } from '../../LikeC4Diagram.props';
+import { Types } from '../types';
+import { AlignmentMode } from './aligners';
+import { HotKeyEvent, HotkeyActorLogic } from './hotkeyActor';
+import { SetupReturn, NonReducibleUnknown, MetaObject } from 'xstate';
+import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { OverlaysActorLogic } from '../../overlays/overlaysActor';
+import { SearchActorLogic } from '../../search/searchActor';
+export interface NavigationHistory {
+    history: ReadonlyArray<{
+        viewId: ViewId;
+        fromNode: NodeId | null;
+        viewport: Viewport;
+    }>;
+    currentIndex: number;
+}
+export interface Input {
+    view: DiagramView;
+    xystore: XYStoreApi;
+    zoomable: boolean;
+    pannable: boolean;
+    nodesDraggable: boolean;
+    nodesSelectable: boolean;
+    fitViewPadding: ViewPadding;
+    dynamicViewVariant?: DynamicViewDisplayVariant | undefined;
+}
+export type ToggledFeatures = Partial<EnabledFeatures>;
+export interface Context extends Input {
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+    features: EnabledFeatures;
+    toggledFeatures: ToggledFeatures;
+    initialized: {
+        xydata: boolean;
+        xyflow: boolean;
+    };
+    viewport: Viewport;
+    viewportChangedManually: boolean;
+    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;
+    };
+    viewportBeforeFocus: null | Viewport;
+    viewportOnManualLayout: null | Viewport;
+    viewportOnAutoLayout: null | Viewport;
+    xyflow: XYFlowInstance | null;
+    dynamicViewVariant: DynamicViewDisplayVariant;
+    activeWalkthrough: null | {
+        stepId: StepEdgeId;
+        parallelPrefix: string | null;
+    };
+}
+export type Events = HotKeyEvent | {
+    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: '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[];
+} | {
+    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) | {
+    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: FeatureName;
+    forceValue?: boolean;
+} | {
+    type: 'emit.onChange';
+    change: ViewChange;
+} | {
+    type: 'emit.onLayoutTypeChange';
+    layoutType: LayoutType;
+};
+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 machine: SetupReturn<Context, Events, {
+    syncManualLayoutActorLogic: SyncLayoutActorLogic;
+    hotkeyActorLogic: HotkeyActorLogic;
+    overlaysActorLogic: OverlaysActorLogic;
+    searchActorLogic: SearchActorLogic;
+}, {
+    syncLayout: "syncManualLayoutActorLogic";
+    hotkey: "hotkeyActorLogic";
+    overlays: "overlaysActorLogic";
+    search: "searchActorLogic";
+}, {}, {
+    isReady: unknown;
+    'enabled: FitView': unknown;
+    'enabled: FocusMode': unknown;
+    'enabled: Readonly': unknown;
+    'enabled: RelationshipDetails': unknown;
+    'enabled: Search': unknown;
+    'enabled: ElementDetails': unknown;
+    'enabled: DynamicViewWalkthrough': 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>;

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

@@ -0,0 +1,71 @@
+import { nonexhaustive } from '@likec4/core';
+import { setup, assertEvent } from 'xstate';
+import { overlaysActorLogic } from '../../overlays/overlaysActor.js';
+import { searchActorLogic } from '../../search/searchActor.js';
+import { hotkeyActorLogic } from './hotkeyActor.js';
+import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
+
+const isReadOnly = (context) => (context.features.enableReadOnly || context.toggledFeatures.enableReadOnly === true) && (context.view._type !== "dynamic" || context.dynamicViewVariant !== "sequence");
+const machine = setup({
+  types: {
+    context: {},
+    input: {},
+    children: {},
+    events: {},
+    emitted: {}
+  },
+  actors: {
+    syncManualLayoutActorLogic,
+    hotkeyActorLogic,
+    overlaysActorLogic,
+    searchActorLogic
+  },
+  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: 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,
+    "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;
+    }
+  }
+});
+
+export { machine };

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

@@ -0,0 +1,183 @@
+import { ActionFunction, Values } from 'xstate';
+import { Context, Events, EmittedEvents } from './machine.setup';
+import { XYFlowInstance } from '../../hooks';
+import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { HotkeyActorLogic } from './hotkeyActor';
+import { OverlaysActorLogic } from '../../overlays/overlaysActor';
+import { SearchActorLogic } from '../../search/searchActor';
+import { DiagramView } from '@likec4/core';
+/**
+ * To be in `initializing` state, the diagram must wait for two events:
+ * - `xyflow.init` - indicates that the `xyflow` instance is ready
+ * - `update.view` - provides the initial diagram data (nodes and edges)
+ *
+ * Once both events have been received, the diagram transitions to `isReady` state.
+ */
+export declare const initializing: {
+    on: {
+        'xyflow.init': {
+            actions: ActionFunction<Context, {
+                type: "xyflow.init";
+                instance: XYFlowInstance;
+            }, 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, never, never, never>;
+            target: string;
+        };
+        '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, never, never, never>;
+            target: string;
+        };
+    };
+};
+/**
+ * State that checks whether the diagram is ready to be used.
+ * Transitions to `ready` state if both `xyflow` and `xydata` are initialized,
+ * otherwise goes back to `initializing` state.`
+ */
+export declare const isReady: {
+    always: ({
+        guard: "isReady";
+        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";
+            };
+        }>, 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;
+    } | {
+        target: string;
+        guard?: never;
+        actions?: never;
+    })[];
+};