@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/state/machine.actions.layout.js

@@ -1,172 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { MinZoom } from "../../base/const.js";
-import { calcEdgeBounds } from "../../utils/view-bounds.js";
-import { activeSequenceBounds, focusedBounds, getEdgeBounds, viewBounds } from "./utils.js";
-import { isActiveSequenceWalkthrough, machine } from "./machine.setup.js";
-import { getNodesBounds, getViewportForBounds } from "@xyflow/react";
-import { BBox, invariant, isNonEmptyArray, nonNullable } from "@likec4/core";
-import { assertEvent } from "xstate";
-//#region src/likec4diagram/state/machine.actions.layout.ts
-var calcMaxZoom = (context, transform = [
-	0,
-	0,
-	1
-]) => {
-	const [, , zoom] = transform;
-	if (isActiveSequenceWalkthrough(context)) return Math.max(zoom, 1.4);
-	return Math.max(zoom, 1);
-};
-var setViewport = (params) => machine.createAction(({ context, event }) => {
-	let viewport;
-	let duration;
-	if (params) {
-		viewport = params.viewport;
-		duration = params.duration;
-	} else {
-		assertEvent(event, "xyflow.setViewport");
-		viewport = event.viewport;
-		duration = event.duration;
-	}
-	duration = duration ?? 450;
-	const { panZoom } = nonNullable(context.xystore).getState();
-	const animationProps = duration > 0 ? {
-		duration,
-		interpolate: "smooth"
-	} : void 0;
-	panZoom?.setViewport({
-		x: Math.round(viewport.x),
-		y: Math.round(viewport.y),
-		zoom: viewport.zoom
-	}, animationProps).catch((err) => {
-		console.error("Error during setViewport", { err });
-	});
-});
-var setViewportCenter = (params) => machine.createAction(({ context, event }) => {
-	let center;
-	if (params) center = params;
-	else if (event.type === "update.view") center = BBox.center(viewBounds(context, event.view));
-	else center = BBox.center(viewBounds(context));
-	invariant(context.xyflow, "xyflow is not initialized");
-	const zoom = context.xyflow.getZoom();
-	context.xyflow.setCenter(Math.round(center.x), Math.round(center.y), { zoom }).catch((err) => {
-		console.error("Error during setViewportCenter", { err });
-	});
-});
-var centerOnNodeOrEdge = () => machine.raise(({ context, event }) => {
-	assertEvent(event, "xyflow.centerViewport");
-	const xystate = context.xystore.getState();
-	if ("edgeId" in event) {
-		const edge = xystate.edgeLookup.get(event.edgeId);
-		if (!edge) return { type: "noop" };
-		let bounds = calcEdgeBounds({
-			points: edge.data.points,
-			controlPoints: edge.data.controlPoints && isNonEmptyArray(edge.data.controlPoints) ? edge.data.controlPoints : null,
-			labelBBox: edge.data.labelBBox ?? null
-		});
-		const edgeBounds = getEdgeBounds(edge, xystate);
-		if (edgeBounds) bounds = BBox.merge(bounds, edgeBounds);
-		return {
-			type: "xyflow.fitDiagram",
-			bounds
-		};
-	}
-	const node = xystate.nodeLookup.get(event.nodeId);
-	if (!node) return { type: "noop" };
-	return {
-		type: "xyflow.fitDiagram",
-		bounds: getNodesBounds([node], xystate)
-	};
-});
-function fitBoundsInViewport(context, bounds, duration) {
-	let { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
-	let left = void 0;
-	if (isActiveSequenceWalkthrough(context)) {
-		left = context.activeWalkthrough.outlinePanelWidth;
-		width -= left;
-	}
-	const maxZoom = calcMaxZoom(context, transform);
-	const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, context.fitViewPadding);
-	viewport.x = Math.round(viewport.x);
-	viewport.y = Math.round(viewport.y);
-	if (left !== void 0) viewport.x += left;
-	const animationProps = duration > 0 ? {
-		duration,
-		interpolate: "smooth"
-	} : void 0;
-	panZoom?.setViewport(viewport, animationProps).catch((err) => {
-		console.error("Error during fitDiagram panZoom setViewport", { err });
-	});
-}
-var fitDiagram = (params) => machine.createAction(({ context, event }) => {
-	let bounds;
-	let duration;
-	if (params) {
-		bounds = params.bounds;
-		duration = params.duration;
-	} else if (event.type === "xyflow.fitDiagram") {
-		bounds = event.bounds;
-		duration = event.duration;
-	}
-	bounds ??= viewBounds(context);
-	duration ??= 450;
-	fitBoundsInViewport(context, bounds, duration);
-});
-var fitFocusedBounds = (params) => machine.createAction(({ context }) => {
-	let { bounds, duration = 450 } = !!context.activeWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
-	duration = params?.duration ?? duration;
-	fitBoundsInViewport(context, bounds, duration);
-});
-var DEFAULT_DELAY = 30;
-var raiseSetViewport = (params) => {
-	const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
-	return machine.raise({
-		type: "xyflow.setViewport",
-		...rest
-	}, {
-		id: "fitDiagram",
-		delay
-	});
-};
-var cancelFitDiagram = () => machine.cancel("fitDiagram");
-var raiseFitDiagram = (params) => {
-	const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
-	return machine.raise({
-		type: "xyflow.fitDiagram",
-		...rest
-	}, {
-		id: "fitDiagram",
-		delay
-	});
-};
-var raiseUpdateView = (view) => machine.raise(({ context }) => ({
-	type: "update.view",
-	view: view ?? context.view
-}), { delay: DEFAULT_DELAY });
-var assignViewportBefore = (viewport) => machine.assign(({ context }) => {
-	if (viewport === false) return { viewportBefore: null };
-	return { viewportBefore: {
-		wasChangedManually: context.viewportChangedManually,
-		value: viewport ?? { ...context.viewport }
-	} };
-});
-var returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
-	enqueue(cancelFitDiagram());
-	const noDelay = params?.delay === 0;
-	if (viewportBefore) {
-		enqueue.assign({
-			viewportChangedManually: viewportBefore.wasChangedManually,
-			viewportBefore: null
-		});
-		if (noDelay) enqueue(setViewport({
-			viewport: viewportBefore.value,
-			...params
-		}));
-		else enqueue(raiseSetViewport({
-			viewport: viewportBefore.value,
-			...params
-		}));
-	} else if (noDelay) enqueue(fitDiagram({ ...params }));
-	else enqueue(raiseFitDiagram({ ...params }));
-});
-//#endregion
-export { assignViewportBefore, cancelFitDiagram, centerOnNodeOrEdge, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, raiseUpdateView, returnViewportBefore, setViewport, setViewportCenter };

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

@@ -1,161 +0,0 @@
-import { ActorRef, SnapshotFrom, StateValueFrom, StateMachine, ActorRefFromLogic, NonReducibleUnknown, MetaObject } from 'xstate';
-import { BaseEditorActorRef } from '../../editor/actor/setup';
-import { NavigationPanelActorRef, NavigationPanelActorLogic } from '../../navigationpanel/actor';
-import { OverlaysActorRef, OverlaysActorLogic } from '../../overlays/overlaysActor';
-import { SearchActorRef, SearchActorLogic } from '../../search/searchActor';
-import { BaseDiagramMachineLogic, EmittedEvents as DiagramEmittedEvents, Events as DiagramEvents, Context as DiagramContext, Input } from './machine.setup';
-import { HotkeyActorLogic } from './hotkeyActor';
-import { MediaPrintActorLogic } from './mediaPrintActor';
-import { EditorActorLogic } from '../../editor';
-declare const _diagramMachine: StateMachine<DiagramContext, DiagramEvents, {
-    search?: ActorRefFromLogic<SearchActorLogic>;
-    hotkey?: ActorRefFromLogic<HotkeyActorLogic>;
-    overlays?: ActorRefFromLogic<OverlaysActorLogic>;
-    mediaPrint?: ActorRefFromLogic<MediaPrintActorLogic>;
-    editor?: ActorRefFromLogic<EditorActorLogic>;
-    navigationPanel?: 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: "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, "final" | "isReady" | "navigating" | "initializing" | {
-    ready: "idle" | "walkthrough" | "focused" | "printing";
-}, string, Input, NonReducibleUnknown, DiagramEmittedEvents, MetaObject, {
-    states: {
-        readonly initializing: {};
-        readonly isReady: {};
-        readonly ready: {
-            states: {
-                idle: {
-                    id: string;
-                };
-                focused: {
-                    id: string;
-                };
-                walkthrough: {
-                    id: string;
-                };
-                printing: {
-                    id: string;
-                };
-            };
-        };
-        readonly navigating: {
-            id: string;
-        };
-        readonly final: {};
-    };
-}>;
-export interface DiagramMachineLogic extends BaseDiagramMachineLogic<{
-    overlays: OverlaysActorRef | undefined;
-    search: SearchActorRef | undefined;
-    editor: BaseEditorActorRef | undefined;
-    navigationPanel: NavigationPanelActorRef | undefined;
-}, StateValueFrom<typeof _diagramMachine>> {
-}
-/**
- * Here is a trick to reduce inference types
- */
-export declare const diagramMachine: DiagramMachineLogic;
-export type DiagramMachineSnapshot = SnapshotFrom<DiagramMachineLogic>;
-export interface DiagramMachineRef extends ActorRef<DiagramMachineSnapshot, DiagramEvents, DiagramEmittedEvents> {
-}
-export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, };

package/dist/likec4diagram/state/machine.js

@@ -1,79 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { Context, machine } from "./machine.setup.js";
-import { updateEdgeData, updateNodeData } from "./assign.js";
-import { cancelFitDiagram, raiseUpdateView } from "./machine.actions.layout.js";
-import { assignDynamicViewVariant, emitOnLayoutTypeChange, stopEditorActor, triggerChange, updateFeatures, updateInputs } from "./machine.actions.js";
-import { initializing, isReady } from "./machine.state.initializing.js";
-import { navigating } from "./machine.state.navigating.js";
-import { ready } from "./machine.state.ready.js";
-import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
-import { assign, stopChild } from "xstate/actions";
-/**
-* Here is a trick to reduce inference types
-*/
-var 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()
-			]
-		},
-		"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
-					}
-				})
-			]
-		}
-	}
-});
-//#endregion
-export { diagramMachine };