@likec4/diagram 1.59.4 → 1.60.0

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

@@ -0,0 +1,176 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { calcEdgeBounds } from "../../utils/view-bounds.mjs";
+import { activeSequenceBounds, focusedBounds, getEdgeBounds, viewBounds } from "./utils.mjs";
+import { isActiveSequenceWalkthrough, machine } from "./machine.setup.mjs";
+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
+const calcMaxZoom = (context, transform = [
+	0,
+	0,
+	1
+]) => {
+	const [, , zoom] = transform;
+	if (isActiveSequenceWalkthrough(context)) return Math.max(zoom, 1.4);
+	return Math.max(zoom, 1);
+};
+const 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 });
+	});
+});
+const 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 });
+	});
+});
+const 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, zoom) {
+	let { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+	let left = void 0;
+	if (isActiveSequenceWalkthrough(context)) {
+		left = context.activeWalkthrough.outlinePanelWidth;
+		width -= left;
+	}
+	const minZoom = zoom ?? context.minZoom;
+	const maxZoom = zoom ?? 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 });
+	});
+}
+const fitDiagram = (params) => machine.createAction(({ context, event }) => {
+	let bounds;
+	let duration;
+	let zoom;
+	if (params) {
+		bounds = params.bounds;
+		duration = params.duration;
+		zoom = params.zoom;
+	} else if (event.type === "xyflow.fitDiagram") {
+		bounds = event.bounds;
+		duration = event.duration;
+	}
+	bounds ??= viewBounds(context);
+	duration ??= 450;
+	fitBoundsInViewport(context, bounds, duration, zoom);
+});
+const fitFocusedBounds = (params) => machine.createAction(({ context }) => {
+	let { bounds, duration = 450 } = !!context.activeWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
+	duration = params?.duration ?? duration;
+	fitBoundsInViewport(context, bounds, duration);
+});
+const DEFAULT_DELAY = 30;
+const raiseSetViewport = (params) => {
+	const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
+	return machine.raise({
+		type: "xyflow.setViewport",
+		...rest
+	}, {
+		id: "fitDiagram",
+		delay
+	});
+};
+const cancelFitDiagram = () => machine.cancel("fitDiagram");
+const raiseFitDiagram = (params) => {
+	const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
+	return machine.raise({
+		type: "xyflow.fitDiagram",
+		...rest
+	}, {
+		id: "fitDiagram",
+		delay
+	});
+};
+const raiseUpdateView = (view) => machine.raise(({ context }) => ({
+	type: "update.view",
+	view: view ?? context.view
+}), { delay: DEFAULT_DELAY });
+const assignViewportBefore = (viewport) => machine.assign(({ context }) => {
+	if (viewport === false) return { viewportBefore: null };
+	return { viewportBefore: {
+		wasChangedManually: context.viewportChangedManually,
+		value: viewport ?? { ...context.viewport }
+	} };
+});
+const 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 };