@likec4/diagram 1.43.0 → 1.45.0

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

@@ -0,0 +1,208 @@
+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 { MediaPrintActorLogic } from './mediaPrintActor';
+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";
+                };
+                mediaPrintActorLogic: {
+                    src: "mediaPrintActorLogic";
+                    logic: MediaPrintActorLogic;
+                    id: "mediaPrint";
+                };
+            }>, 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[];
+                source?: "internal" | "external";
+            }, 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>;
+            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";
+            };
+            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>[];
+        target: string;
+    } | {
+        target: string;
+        guard?: never;
+        actions?: never;
+    })[];
+};

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

@@ -0,0 +1,55 @@
+import { emitInitialized } from './machine.actions.js';
+import { fitDiagram } from './machine.actions.layout.js';
+import { machine } from './machine.setup.js';
+import { x as xstateActions_cjsExports } from '../../_virtual/xstate-actions.cjs.js';
+
+const initializing = machine.createStateConfig({
+  on: {
+    "xyflow.init": {
+      actions: xstateActions_cjsExports.assign(({ context, event }) => ({
+        initialized: {
+          ...context.initialized,
+          xyflow: true
+        },
+        xyflow: event.instance
+      })),
+      target: "isReady"
+    },
+    "update.view": {
+      actions: xstateActions_cjsExports.assign(({ context, event }) => ({
+        initialized: {
+          ...context.initialized,
+          xydata: true
+        },
+        view: event.view,
+        xynodes: event.xynodes,
+        xyedges: event.xyedges
+      })),
+      target: "isReady"
+    }
+  }
+});
+const isReady = machine.createStateConfig({
+  always: [{
+    guard: "isReady",
+    actions: [
+      fitDiagram({ duration: 0 }),
+      xstateActions_cjsExports.assign(({ context }) => ({
+        navigationHistory: {
+          currentIndex: 0,
+          history: [{
+            viewId: context.view.id,
+            viewport: { ...context.xyflow.getViewport() },
+            viewportChangedManually: false
+          }]
+        }
+      })),
+      emitInitialized()
+    ],
+    target: "ready"
+  }, {
+    target: "initializing"
+  }]
+});
+
+export { initializing, isReady };

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

@@ -0,0 +1,14 @@
+import { CancelAction } from 'xstate';
+import { Context, Events } from './machine.setup';
+/**
+ * State for handling navigation to a different view.
+ * Closes overlays and search, stops sync layout and fit diagram actions,
+ * then processes the view update and transitions back to idle state.
+ */
+export declare const navigating: {
+    id: string;
+    always: {
+        target: string;
+        actions: CancelAction<Context, Events, undefined, Events>[];
+    };
+};

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

@@ -0,0 +1,178 @@
+import { BBox } from '@likec4/core/types';
+import { invariant, nonNullable } from '@likec4/core/utils';
+import { enqueueActions, assertEvent } from 'xstate';
+import { mergeXYNodesEdges } from './assign.js';
+import { disableCompareWithLatest } from './machine.actions.js';
+import { machine, targetState } from './machine.setup.js';
+import { calcViewportForBounds, findCorrespondingNode, nodeRef } from './utils.js';
+import { cancelFitDiagram, raiseSetViewport, raiseFitDiagram } from './machine.actions.layout.js';
+
+const handleBrowserForwardBackward = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "update.view");
+  let {
+    lastOnNavigate,
+    navigationHistory: {
+      currentIndex,
+      history
+    }
+  } = context;
+  const stepCurrent = history[currentIndex];
+  if (!stepCurrent || stepCurrent.viewId === event.view.id || !!lastOnNavigate) {
+    return {};
+  }
+  const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;
+  if (stepBack && stepBack.viewId === event.view.id) {
+    return {
+      navigationHistory: {
+        currentIndex: currentIndex - 1,
+        history
+      },
+      lastOnNavigate: null
+    };
+  }
+  const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null;
+  if (stepForward && stepForward.viewId === event.view.id) {
+    return {
+      navigationHistory: {
+        currentIndex: currentIndex + 1,
+        history
+      },
+      lastOnNavigate: null
+    };
+  }
+  if (event.view._type === "element" && event.view.viewOf) {
+    const toRef = event.view.viewOf;
+    const existingNode = context.xynodes.find((n) => nodeRef(n) === toRef);
+    if (existingNode) {
+      return {
+        lastOnNavigate: {
+          fromView: context.view.id,
+          toView: event.view.id,
+          fromNode: existingNode.id
+        }
+      };
+    }
+  }
+  return {};
+});
+const navigating = machine.createStateConfig({
+  id: targetState.navigating.slice(1),
+  always: {
+    target: targetState.idle,
+    actions: [
+      cancelFitDiagram(),
+      handleBrowserForwardBackward(),
+      disableCompareWithLatest(),
+      enqueueActions(({ enqueue, context, event }) => {
+        assertEvent(event, "update.view");
+        const {
+          xyflow,
+          xystore,
+          navigationHistory: {
+            currentIndex,
+            history
+          }
+        } = context;
+        invariant(xyflow, "xyflow is not initialized");
+        const calcZoomTowardsNextViewport = (nextViewport2) => {
+          const zoom = xyflow.getZoom();
+          const coef = nextViewport2.zoom < zoom ? 0.7 : 0.3;
+          return zoom + (nextViewport2.zoom - zoom) * coef;
+        };
+        const fromHistory = history[currentIndex];
+        if (fromHistory && fromHistory.viewId === event.view.id) {
+          console.log("Navigating: fromHistory", fromHistory);
+          enqueue.assign({
+            ...mergeXYNodesEdges(context, event),
+            dynamicViewVariant: fromHistory.dynamicViewVariant ?? context.dynamicViewVariant,
+            viewportChangedManually: fromHistory.viewportChangedManually
+          });
+          const wasFocused = fromHistory.focusedNode;
+          const wasActiveWalkthrough = fromHistory.activeWalkthrough;
+          const viewportBefore = fromHistory.viewportBefore;
+          if (viewportBefore && (wasFocused || wasActiveWalkthrough)) {
+            enqueue.assign({
+              viewport: viewportBefore.value,
+              viewportChangedManually: viewportBefore.wasChangedManually,
+              viewportBefore: null
+            });
+          }
+          const center = BBox.center(event.view.bounds);
+          const zoom = calcZoomTowardsNextViewport(fromHistory.viewport);
+          xyflow.setCenter(
+            center.x,
+            center.y,
+            { zoom, duration: 0 }
+          );
+          if (wasFocused) {
+            enqueue.raise({
+              type: "focus.node",
+              nodeId: wasFocused
+            }, { delay: 50 });
+            return;
+          }
+          if (wasActiveWalkthrough) {
+            enqueue.raise({
+              type: "walkthrough.start",
+              stepId: wasActiveWalkthrough
+            }, { delay: 50 });
+            return;
+          }
+          enqueue(raiseSetViewport({
+            delay: 80,
+            viewport: fromHistory.viewport
+          }));
+          return;
+        }
+        const nextViewport = calcViewportForBounds(
+          context,
+          event.view.bounds
+        );
+        const { fromNode, toNode } = findCorrespondingNode(context, event);
+        if (fromNode && toNode) {
+          const elFrom = xyflow.getInternalNode(fromNode.id);
+          const fromPoint = xyflow.flowToScreenPosition({
+            x: elFrom.internals.positionAbsolute.x,
+            y: elFrom.internals.positionAbsolute.y
+          });
+          const toPoint = xyflow.flowToScreenPosition({
+            x: toNode.data.x,
+            y: toNode.data.y
+          });
+          xystore.getState().panBy({
+            x: Math.round(fromPoint.x - toPoint.x),
+            y: Math.round(fromPoint.y - toPoint.y)
+          });
+        } else {
+          const zoom = calcZoomTowardsNextViewport(nextViewport);
+          const center = BBox.center(event.view.bounds);
+          xyflow.setCenter(
+            center.x,
+            center.y,
+            { zoom, duration: 0 }
+          );
+        }
+        const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
+        updatedHistory.push({
+          viewId: event.view.id,
+          viewport: { ...nextViewport },
+          viewportChangedManually: false
+        });
+        enqueue.assign({
+          ...mergeXYNodesEdges(context, event),
+          viewportChangedManually: false,
+          lastOnNavigate: null,
+          navigationHistory: {
+            currentIndex: updatedHistory.length - 1,
+            history: updatedHistory
+          }
+        });
+        enqueue(raiseFitDiagram({
+          delay: 100
+        }));
+      })
+    ]
+  }
+});
+
+export { navigating };