@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,232 +0,0 @@
-import { ActionFunction } from 'xstate';
-import { Context, Events, EmittedEvents } from './machine.setup';
-import { XYFlowInstance } from '../../hooks';
-import { SearchActorLogic } from '../../search/searchActor';
-import { HotkeyActorLogic } from './hotkeyActor';
-import { OverlaysActorLogic } from '../../overlays/overlaysActor';
-import { MediaPrintActorLogic } from './mediaPrintActor';
-import { EditorActorLogic } from '../../editor';
-import { NavigationPanelActorLogic } from '../../navigationpanel/actor';
-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, {
-                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, never, never, never>;
-            target: string;
-        };
-        'update.view': {
-            actions: ActionFunction<Context, {
-                type: "update.view";
-                view: DiagramView;
-                source?: "editor" | "external";
-            } | {
-                type: "update.view";
-                view: DiagramView;
-                source?: "editor" | "external";
-                xynodes: import("../types").Types.Node[];
-                xyedges: import("../types").Types.Edge[];
-            }, Events, undefined, {
-                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, 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, unknown, {
-            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: "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: 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, EmittedEvents> | ActionFunction<Context, Events, Events, undefined, {
-            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, never, never, never> | ActionFunction<Context, Events, Events, undefined, never, never, never, never, EmittedEvents>)[];
-        target: string;
-    } | {
-        target: string;
-        guard?: never;
-        actions?: never;
-    })[];
-};

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

@@ -1,55 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { machine } from "./machine.setup.js";
-import { fitDiagram } from "./machine.actions.layout.js";
-import { assignXYDataFromView, emitInitialized } from "./machine.actions.js";
-import { assign } from "xstate/actions";
-//#region src/likec4diagram/state/machine.state.initializing.ts
-/**
-* 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.
-*/
-var initializing = machine.createStateConfig({ on: {
-	"xyflow.init": {
-		actions: assign(({ context, event }) => ({
-			initialized: {
-				...context.initialized,
-				xyflow: true
-			},
-			xyflow: event.instance
-		})),
-		target: "isReady"
-	},
-	"update.view": {
-		actions: [assignXYDataFromView(), assign(({ context }) => ({ initialized: {
-			...context.initialized,
-			xydata: true
-		} }))],
-		target: "isReady"
-	}
-} });
-/**
-* 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.`
-*/
-var isReady = machine.createStateConfig({ always: [{
-	guard: "isReady",
-	actions: [
-		fitDiagram({ duration: 0 }),
-		assign(({ context }) => ({ navigationHistory: {
-			currentIndex: 0,
-			history: [{
-				viewId: context.view.id,
-				viewport: { ...context.xyflow.getViewport() },
-				viewportChangedManually: false
-			}]
-		} })),
-		emitInitialized()
-	],
-	target: "ready"
-}, { target: "initializing" }] });
-//#endregion
-export { initializing, isReady };

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

@@ -1,14 +0,0 @@
-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: {
-        actions: CancelAction<Context, Events, undefined, Events>[];
-        target: string;
-    };
-};

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

@@ -1,199 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { roundDpr } from "../../utils/roundDpr.js";
-import { parsePaddings } from "../../utils/xyflow.js";
-import { calcViewportForBounds, findCorrespondingNode, findNodeByModelFqn, nodeRef, viewBounds } from "./utils.js";
-import { machine, targetState, to } from "./machine.setup.js";
-import { mergeXYNodesEdges } from "./assign.js";
-import { convertToXYFlow } from "../convert-to-xyflow.js";
-import { cancelFitDiagram, raiseSetViewport } from "./machine.actions.layout.js";
-import { disableCompareWithLatest } from "./machine.actions.js";
-import { isTruthy } from "remeda";
-import { BBox } from "@likec4/core/geometry";
-import { invariant } from "@likec4/core/utils";
-import { assertEvent, enqueueActions } from "xstate";
-//#region src/likec4diagram/state/machine.state.navigating.ts
-/**
-* If the user navigates back or forward using the browser's back/forward buttons,
-* update the navigation history and return to the previous or next view.
-*/
-var 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 ? history.at(currentIndex - 1) : null;
-	if (stepBack && stepBack.viewId === event.view.id) return {
-		navigationHistory: {
-			currentIndex: currentIndex - 1,
-			history
-		},
-		lastOnNavigate: null
-	};
-	const stepForward = currentIndex < history.length - 1 ? history.at(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 {};
-});
-/**
-* 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.
-*/
-var navigating = machine.createStateConfig({
-	id: targetState.navigating.slice(1),
-	always: {
-		...to.idle,
-		actions: [
-			cancelFitDiagram(),
-			handleBrowserForwardBackward(),
-			disableCompareWithLatest(),
-			enqueueActions(({ enqueue, context, event }) => {
-				assertEvent(event, "update.view");
-				const { xyflow, xystore, navigationHistory: { currentIndex, history } } = context;
-				const collapsedSequenceFlows = {};
-				const eventWithXYData = "xynodes" in event ? event : {
-					...event,
-					...convertToXYFlow({
-						currentViewId: context.view.id,
-						dynamicViewVariant: context.dynamicViewVariant,
-						view: event.view,
-						where: context.where,
-						collapsedSequenceFlows
-					})
-				};
-				invariant(xyflow, "xyflow is not initialized");
-				const currentViewport = xyflow.getViewport();
-				const calcZoomTowardsNextViewport = (nextViewport) => {
-					const zoom = currentViewport.zoom;
-					const diff = nextViewport.zoom - zoom;
-					if (Math.abs(diff) < .01) return nextViewport.zoom;
-					return Math.trunc(1e4 * (zoom + diff * (diff < 0 ? .6 : .3))) / 1e4;
-				};
-				const moveTowardsNextViewport = (nextViewport) => {
-					const zoom = calcZoomTowardsNextViewport(nextViewport);
-					if (zoom !== nextViewport.zoom) {
-						xyflow.setViewport({
-							x: roundDpr(nextViewport.x * (1 + currentViewport.zoom - zoom)),
-							y: roundDpr(nextViewport.y * (1 + currentViewport.zoom - zoom)),
-							zoom
-						});
-						enqueue(raiseSetViewport({
-							delay: 100,
-							viewport: nextViewport
-						}));
-					} else xyflow.setViewport(nextViewport, { duration: 0 });
-				};
-				const fromHistory = history[currentIndex];
-				if (fromHistory && fromHistory.viewId === eventWithXYData.view.id) {
-					const { focusedNode: wasFocused, activeWalkthrough: wasActiveWalkthrough, viewportBefore } = fromHistory;
-					const nextCtx = {
-						...mergeXYNodesEdges(context, eventWithXYData),
-						dynamicViewVariant: fromHistory.dynamicViewVariant ?? (eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : void 0) ?? context.dynamicViewVariant,
-						viewportChangedManually: viewportBefore?.wasChangedManually ?? fromHistory.viewportChangedManually,
-						viewport: viewportBefore?.value ?? fromHistory.viewport,
-						viewportBefore: null,
-						collapsedSequenceFlows
-					};
-					enqueue.assign(nextCtx);
-					moveTowardsNextViewport(nextCtx.viewport);
-					if (wasFocused) {
-						enqueue.raise({
-							type: "focus.node",
-							nodeId: wasFocused
-						}, { delay: 150 });
-						return;
-					}
-					if (wasActiveWalkthrough) {
-						enqueue.raise({
-							type: "walkthrough.start",
-							stepId: wasActiveWalkthrough
-						}, { delay: 150 });
-						return;
-					}
-					return;
-				}
-				const nextBounds = viewBounds(context, eventWithXYData.view);
-				const nextViewport = calcViewportForBounds(context, nextBounds);
-				const { fromNode, toNode } = findCorrespondingNode(context, eventWithXYData);
-				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)
-					}).catch((err) => {
-						console.error("Error during xyflow.panBy", { err });
-					});
-					enqueue(raiseSetViewport({
-						delay: 100,
-						viewport: nextViewport
-					}));
-				} else {
-					const zoom = calcZoomTowardsNextViewport(nextViewport);
-					if (zoom !== nextViewport.zoom) {
-						const { width, height } = context.xystore.getState();
-						const nextCenter = BBox.center(nextBounds);
-						const paddings = parsePaddings(context.fitViewPadding, width, height);
-						xyflow.setViewport({
-							x: roundDpr((width - paddings.x) / 2 - nextCenter.x * zoom + paddings.left),
-							y: roundDpr((height - paddings.y) / 2 - nextCenter.y * zoom + paddings.top),
-							zoom
-						});
-						enqueue(raiseSetViewport({
-							delay: 100,
-							viewport: nextViewport
-						}));
-					} else xyflow.setViewport(nextViewport, { duration: 0 });
-				}
-				const updatedHistory = currentIndex < history.length - 1 ? history.slice(0, currentIndex + 1) : [...history];
-				if (updatedHistory.length > 20) updatedHistory.shift();
-				updatedHistory.push({
-					viewId: event.view.id,
-					viewport: { ...nextViewport },
-					viewportChangedManually: false
-				});
-				const focusOnElement = context.lastOnNavigate?.focusOnElement;
-				const nodeToFocus = isTruthy(focusOnElement) ? findNodeByModelFqn(eventWithXYData.xynodes, focusOnElement) : null;
-				enqueue.assign({
-					...mergeXYNodesEdges(context, eventWithXYData),
-					viewportChangedManually: false,
-					lastOnNavigate: null,
-					dynamicViewVariant: eventWithXYData.view._type === "dynamic" ? eventWithXYData.view.variant : context.dynamicViewVariant,
-					navigationHistory: {
-						currentIndex: updatedHistory.length - 1,
-						history: updatedHistory
-					},
-					collapsedSequenceFlows
-				});
-				if (nodeToFocus) enqueue.raise({
-					type: "focus.node",
-					nodeId: nodeToFocus.id,
-					autoUnfocus: true
-				}, { delay: 250 });
-			})
-		]
-	}
-});
-//#endregion
-export { navigating };