@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/state/DiagramActorProvider.mjs

@@ -0,0 +1,152 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { MaxZoom, MinZoom } from "../../base/const.mjs";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.mjs";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.mjs";
+import { DiagramFeatures, useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { DiagramActorContextProvider, DiagramApiContextProvider, selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.mjs";
+import { DiagramToggledFeaturesPersistence } from "./persistence.mjs";
+import { useEditorActorLogic } from "../../editor/useEditorActorLogic.mjs";
+import { DiagramApi } from "./diagram-api.mjs";
+import { diagramMachine } from "./machine.mjs";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStoreApi } from "@xyflow/react";
+import { isNullish } from "remeda";
+import { useActorRef } from "@xstate/react";
+
+//#region src/likec4diagram/state/DiagramActorProvider.tsx
+function DiagramActorProvider({ id, view, zoomable, pannable, fitView, initialZoom, nodesDraggable, nodesSelectable, fitViewPadding, where = null, minZoom = MinZoom, maxZoom = 3, children, dynamicViewVariant: _defaultVariant, relationshipBrowserScope }) {
+	const xystore = useStoreApi();
+	const editor = useEditorActorLogic();
+	const features = useEnabledFeatures();
+	const actor = useActorRef(diagramMachine.provide({ actors: { editor } }), {
+		id: `diagram-${id}`,
+		systemId: "diagram",
+		input: {
+			xystore,
+			view,
+			zoomable,
+			pannable,
+			fitView,
+			initialZoom,
+			minZoom,
+			maxZoom,
+			fitViewPadding,
+			nodesDraggable,
+			nodesSelectable,
+			where,
+			features,
+			dynamicViewVariant: _defaultVariant,
+			relationshipBrowserScope
+		}
+	});
+	const actorRef = useRef(actor);
+	if (actorRef.current !== actor) {
+		console.warn("DiagramMachine actor instance changed", {
+			previous: actorRef.current.getSnapshot().context,
+			current: actor.getSnapshot().context
+		});
+		actorRef.current = actor;
+	}
+	useEffect(() => {
+		actor.send({
+			type: "update.features",
+			features
+		});
+	}, [actor, features]);
+	useUpdateEffect(() => actor.send({
+		type: "update.inputs",
+		inputs: {
+			zoomable,
+			where,
+			pannable,
+			fitView,
+			initialZoom,
+			minZoom,
+			maxZoom,
+			fitViewPadding,
+			nodesDraggable,
+			nodesSelectable,
+			relationshipBrowserScope
+		}
+	}), [
+		actor,
+		zoomable,
+		where,
+		pannable,
+		fitView,
+		initialZoom,
+		minZoom,
+		maxZoom,
+		fitViewPadding,
+		nodesDraggable,
+		nodesSelectable,
+		relationshipBrowserScope
+	]);
+	useUpdateEffect(() => {
+		if (!_defaultVariant) return;
+		actor.send({
+			type: "switch.dynamicViewVariant",
+			variant: _defaultVariant
+		});
+	}, [actor, _defaultVariant]);
+	useEffect(() => actor.send({
+		type: "update.view",
+		view,
+		source: "external"
+	}), [actor, view]);
+	return /* @__PURE__ */ jsx(DiagramActorContextProvider, {
+		value: actor,
+		children: /* @__PURE__ */ jsxs(DiagramApiContextProvider, {
+			value: DiagramApi.withActor(actorRef),
+			children: [/* @__PURE__ */ jsx(ToggledFeatures, { children }), /* @__PURE__ */ jsx(PropagateDiagramActorEvents, {})]
+		})
+	});
+}
+const selectToggledFeatures = selectDiagramContext((context) => {
+	let toggledFeatures = context.toggledFeatures;
+	const enableCompareWithLatest = context.view.drifts != null && context.view.drifts.length > 0 && context.features.enableCompareWithLatest && (toggledFeatures.enableCompareWithLatest ?? false) && isNullish(context.activeWalkthrough);
+	const enableReadOnly = context.features.enableReadOnly || toggledFeatures.enableReadOnly || !!context.activeWalkthrough || enableCompareWithLatest && context.view._layout === "auto";
+	if (toggledFeatures.enableReadOnly !== enableReadOnly || toggledFeatures.enableCompareWithLatest !== enableCompareWithLatest) toggledFeatures = {
+		...toggledFeatures,
+		enableCompareWithLatest,
+		enableReadOnly
+	};
+	return toggledFeatures;
+});
+function ToggledFeatures({ children }) {
+	const toggledFeatures = useDiagramSelector(selectToggledFeatures);
+	useUpdateEffect(() => {
+		DiagramToggledFeaturesPersistence.write(toggledFeatures);
+	}, [toggledFeatures]);
+	return /* @__PURE__ */ jsx(DiagramFeatures, {
+		overrides: toggledFeatures,
+		children
+	});
+}
+function PropagateDiagramActorEvents() {
+	const diagram = useDiagram();
+	const handlers = useDiagramEventHandlers();
+	useOnDiagramEvent("openSource", ({ params }) => {
+		return handlers.onOpenSource?.(params);
+	});
+	useOnDiagramEvent("navigateTo", ({ viewId }) => handlers.onNavigateTo?.(viewId));
+	useOnDiagramEvent("onLayoutTypeChange", ({ layoutType }) => {
+		handlers.onLayoutTypeChange?.(layoutType);
+	});
+	useOnDiagramEvent("initialized", ({ instance: xyflow }) => {
+		try {
+			handlers.onInitialized?.({
+				diagram,
+				xyflow
+			});
+		} catch (error) {
+			console.error(error);
+		}
+	}, { once: true });
+	return null;
+}
+
+//#endregion
+export { DiagramActorProvider };

package/dist/likec4diagram/state/aligners.d.mts

@@ -0,0 +1,7 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import "@xyflow/react";
+//#region src/likec4diagram/state/aligners.d.ts
+export type GridAlignmentMode = 'Column' | 'Row';
+export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom';
+export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode;
+//#endregion

package/dist/likec4diagram/state/aligners.mjs

@@ -0,0 +1,294 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { map, pick, pipe, reduce, sortBy } from "remeda";
+import { invariant, nonexhaustive } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
+
+//#region src/likec4diagram/state/aligners.ts
+var Aligner = class {};
+var LinearAligner = class extends Aligner {
+	getEdgePosition;
+	computePosition;
+	propertyToEdit;
+	alignTo;
+	constructor(getEdgePosition, computePosition, propertyToEdit) {
+		super();
+		this.getEdgePosition = getEdgePosition;
+		this.computePosition = computePosition;
+		this.propertyToEdit = propertyToEdit;
+	}
+	computeLayout(nodes) {
+		this.alignTo = this.getEdgePosition(nodes);
+	}
+	applyPosition(node) {
+		return { [this.propertyToEdit]: this.computePosition(this.alignTo, node) };
+	}
+};
+var GridAligner = class extends Aligner {
+	layout = /* @__PURE__ */ new Map();
+	axisPreset;
+	get primaryAxisCoord() {
+		return this.axisPreset.primaryAxisCoord;
+	}
+	get secondaryAxisCoord() {
+		return this.axisPreset.secondaryAxisCoord;
+	}
+	get primaryAxisDimension() {
+		return this.axisPreset.primaryAxisDimension;
+	}
+	get secondaryAxisDimension() {
+		return this.axisPreset.secondaryAxisDimension;
+	}
+	constructor(alignmentMode) {
+		super();
+		this.axisPreset = alignmentMode === "Column" ? {
+			primaryAxisDimension: "width",
+			secondaryAxisDimension: "height",
+			primaryAxisCoord: "x",
+			secondaryAxisCoord: "y"
+		} : {
+			primaryAxisDimension: "height",
+			secondaryAxisDimension: "width",
+			primaryAxisCoord: "y",
+			secondaryAxisCoord: "x"
+		};
+	}
+	applyPosition(node) {
+		return this.layout?.get(node.id) ?? {};
+	}
+	computeLayout(nodes) {
+		const sortedNodeRects = pipe(nodes, sortBy((r) => r[this.primaryAxisCoord]));
+		const layoutRect = this.getLayoutRect(sortedNodeRects);
+		const layers = this.getLayers(sortedNodeRects);
+		this.layout = this.buildLayout(layers, layoutRect, sortedNodeRects);
+	}
+	getLayoutRect(nodeRects) {
+		const x = Math.min(...nodeRects.map((n) => n.x));
+		const y = Math.min(...nodeRects.map((n) => n.y));
+		const right = Math.max(...nodeRects.map((n) => n.x + n.width));
+		const bottom = Math.max(...nodeRects.map((n) => n.y + n.height));
+		return {
+			x,
+			y,
+			width: right - x,
+			height: bottom - y
+		};
+	}
+	getLayers(sortedNodeRects) {
+		const layers = [];
+		let layerEnd = 0;
+		let layer = null;
+		for (let node of sortedNodeRects) if (!!layer && node[this.primaryAxisCoord] < layerEnd) {
+			layer.nodes.push(node);
+			layer.primaryAxisSize = Math.max(layer.primaryAxisSize, node[this.primaryAxisDimension]);
+			layer.occupiedSpace += node[this.secondaryAxisDimension];
+			layerEnd = Math.max(node[this.primaryAxisCoord] + node[this.primaryAxisDimension], layerEnd);
+		} else {
+			layer = {
+				primaryAxisSize: node[this.primaryAxisDimension],
+				nodes: [node],
+				occupiedSpace: node[this.secondaryAxisDimension],
+				layout: null
+			};
+			layers.push(layer);
+			layerEnd = node[this.primaryAxisCoord] + node[this.primaryAxisDimension];
+			continue;
+		}
+		layers.forEach((l) => l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord]));
+		return layers;
+	}
+	buildLayout(layers, layoutRect, nodeRects) {
+		const nodeMap = new Map(nodeRects.map((n) => [n.id, n]));
+		const layout = [];
+		const occupiedSpace = layers.reduce((a, b) => a + b.primaryAxisSize, 0);
+		const rowMargin = layers.length > 1 ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1) : 0;
+		const baseLayerIndex = layers.reduce((widestLayerIndex, layer, i) => layers[widestLayerIndex].occupiedSpace < layer.occupiedSpace ? i : widestLayerIndex, 0);
+		const baseLayer = layers[baseLayerIndex];
+		const baseLayerPosition = layers.slice(0, baseLayerIndex).reduce((a, layer) => a + layer.primaryAxisSize + rowMargin, layoutRect[this.primaryAxisCoord]);
+		const baseLayerLayout = this.buildLayerLayout(baseLayer, layoutRect, baseLayerPosition, nodeMap, null);
+		baseLayer.layout = baseLayerLayout;
+		layout.push(...baseLayerLayout.nodePositions);
+		let placeNextLayerAt = baseLayerPosition + baseLayer.primaryAxisSize + rowMargin;
+		let refLayer = baseLayer;
+		for (let i = baseLayerIndex + 1; i < layers.length; i++) {
+			const layer = layers[i];
+			layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer);
+			layout.push(...layer.layout.nodePositions);
+			refLayer = layer.layout.refLayer ?? layer;
+			placeNextLayerAt += layer.primaryAxisSize + rowMargin;
+		}
+		placeNextLayerAt = baseLayerPosition;
+		refLayer = baseLayer;
+		for (let i = baseLayerIndex - 1; i >= 0; i--) {
+			const layer = layers[i];
+			placeNextLayerAt -= layer.primaryAxisSize + rowMargin;
+			layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer);
+			layout.push(...layer.layout.nodePositions);
+			refLayer = layer.layout.refLayer ?? layer;
+		}
+		return new Map(layout);
+	}
+	buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer) {
+		let bestLayerLayout = this.scoreLayout(this.spaceAround(layer, layoutRect, placeNextLayerAt), nodeMap);
+		if (layer.nodes.length != 1) {
+			const currentlayerLayout = this.scoreLayout(this.spaceBetween(layer, layoutRect, placeNextLayerAt), nodeMap);
+			bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+		}
+		if (refLayer && refLayer.nodes.length - 1 >= layer.nodes.length) {
+			const currentlayerLayout = this.scoreLayout(this.placeInGaps(layer, placeNextLayerAt, refLayer), nodeMap);
+			bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+		}
+		if (refLayer && refLayer.nodes.length >= layer.nodes.length) {
+			const currentlayerLayout = this.scoreLayout(this.placeInCells(layer, placeNextLayerAt, refLayer), nodeMap);
+			bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+		}
+		return bestLayerLayout[1];
+	}
+	spaceBetween(layer, layoutRect, placeNextLayerAt) {
+		const margin = (layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace) / (layer.nodes.length - 1);
+		let placeNextNodeAt = layoutRect[this.secondaryAxisCoord];
+		const result = /* @__PURE__ */ new Map();
+		for (let node of layer.nodes) {
+			result.set(node.id, {
+				[this.secondaryAxisCoord]: placeNextNodeAt,
+				[this.primaryAxisCoord]: placeNextLayerAt
+			});
+			placeNextNodeAt += node[this.secondaryAxisDimension] + margin;
+		}
+		return {
+			nodePositions: result,
+			refLayer: null
+		};
+	}
+	spaceAround(layer, layoutRect, placeNextLayerAt) {
+		const margin = (layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace) / (layer.nodes.length + 1);
+		let placeNextNodeAt = layoutRect[this.secondaryAxisCoord] + margin;
+		const result = /* @__PURE__ */ new Map();
+		for (let node of sortBy(layer.nodes, (n) => n[this.secondaryAxisCoord])) {
+			result.set(node.id, {
+				[this.secondaryAxisCoord]: placeNextNodeAt,
+				[this.primaryAxisCoord]: placeNextLayerAt
+			});
+			placeNextNodeAt += node[this.secondaryAxisDimension] + margin;
+		}
+		return {
+			nodePositions: result,
+			refLayer: null
+		};
+	}
+	placeInGaps(layer, placeNextLayerAt, refLayer) {
+		const result = /* @__PURE__ */ new Map();
+		const nodes = layer.nodes;
+		const placementOptions = this.getGapsPositions(refLayer);
+		let optionIndex = 0;
+		for (let i = 0, node = nodes[i]; i < nodes.length; i++, node = nodes[i]) {
+			const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2;
+			let bestOffset = Infinity;
+			while (optionIndex - i <= placementOptions.length - nodes.length) {
+				const offset = placementOptions[optionIndex] - nodeCenter;
+				if (Math.abs(offset) < Math.abs(bestOffset)) {
+					bestOffset = offset;
+					optionIndex++;
+				} else break;
+			}
+			result.set(node.id, {
+				[this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+				[this.primaryAxisCoord]: placeNextLayerAt
+			});
+		}
+		return {
+			nodePositions: result,
+			refLayer
+		};
+	}
+	placeInCells(layer, placeNextLayerAt, refLayer) {
+		const result = /* @__PURE__ */ new Map();
+		const nodes = layer.nodes;
+		const placementOptions = this.getNodePositions(refLayer);
+		let optionIndex = 0;
+		for (let i = 0, node = nodes[i]; i < nodes.length; i++, node = nodes[i]) {
+			const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2;
+			let bestOffset = Infinity;
+			while (optionIndex - i <= placementOptions.length - nodes.length) {
+				const offset = placementOptions[optionIndex] - nodeCenter;
+				if (Math.abs(offset) < Math.abs(bestOffset)) {
+					bestOffset = offset;
+					optionIndex++;
+				} else break;
+			}
+			result.set(node.id, {
+				[this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+				[this.primaryAxisCoord]: placeNextLayerAt
+			});
+		}
+		return {
+			nodePositions: result,
+			refLayer
+		};
+	}
+	scoreLayout(layout, originalRects) {
+		return [pipe(Array.from(layout.nodePositions), map(([id, position]) => {
+			const originalRect = originalRects.get(id);
+			invariant(originalRect, `Could not find original rect for node ${id}`);
+			return [pick(originalRect, ["x", "y"]), position];
+		}), map(([original, suggested]) => Math.abs(original[this.secondaryAxisCoord] - suggested[this.secondaryAxisCoord])), reduce((a, b) => a + b, 0)), layout];
+	}
+	getGapsPositions(layer) {
+		const result = [];
+		const { layout, nodes } = layer;
+		invariant(layout, "Layout of the layer must be computed before calling getGapsPositions");
+		for (let i = 1; i < nodes.length; i++) {
+			const previousNode = nodes[i - 1];
+			const currentNode = nodes[i];
+			const previousNodePosition = layout.nodePositions.get(previousNode.id);
+			const currentNodePosition = layout.nodePositions.get(currentNode.id);
+			result.push((currentNodePosition[this.secondaryAxisCoord] + previousNodePosition[this.secondaryAxisCoord] + previousNode[this.secondaryAxisDimension]) / 2);
+		}
+		return result;
+	}
+	getNodePositions(layer) {
+		const result = [];
+		const { layout, nodes } = layer;
+		invariant(layout, "Layout of the layer must be computed before calling getGapsPositions");
+		for (let i = 0; i < nodes.length; i++) {
+			const node = nodes[i];
+			const nodePosition = layout.nodePositions.get(node.id);
+			result.push(nodePosition[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2);
+		}
+		return result;
+	}
+};
+function getLinearAligner(mode) {
+	switch (mode) {
+		case "Left": return new LinearAligner((nodes) => Math.min(...nodes.map((n) => n.x)), (alignTo, _) => Math.floor(alignTo), "x");
+		case "Top": return new LinearAligner((nodes) => Math.min(...nodes.map((n) => n.y)), (alignTo, _) => Math.floor(alignTo), "y");
+		case "Right": return new LinearAligner((nodes) => Math.max(...nodes.map((n) => n.x + n.width)), (alignTo, node) => Math.floor(alignTo - node.width), "x");
+		case "Bottom": return new LinearAligner((nodes) => Math.max(...nodes.map((n) => n.y + n.height)), (alignTo, node) => Math.floor(alignTo - node.height), "y");
+		case "Center": return new LinearAligner((nodes) => Math.min(...nodes.map((n) => n.x + n.width / 2)), (alignTo, node) => Math.floor(alignTo - node.width / 2), "x");
+		case "Middle": return new LinearAligner((nodes) => Math.min(...nodes.map((n) => n.y + n.height / 2)), (alignTo, node) => Math.floor(alignTo - node.height / 2), "y");
+	}
+}
+function toNodeRect(node) {
+	const { width, height } = getNodeDimensions(node);
+	return {
+		...node.internals.positionAbsolute,
+		id: node.id,
+		width,
+		height
+	};
+}
+function getAligner(mode) {
+	switch (mode) {
+		case "Left":
+		case "Right":
+		case "Top":
+		case "Bottom":
+		case "Center":
+		case "Middle": return getLinearAligner(mode);
+		case "Column":
+		case "Row": return new GridAligner(mode);
+		default: nonexhaustive(mode);
+	}
+}
+
+//#endregion
+export { Aligner, GridAligner, LinearAligner, getAligner, getLinearAligner, toNodeRect };

package/dist/likec4diagram/state/assign.mjs

@@ -0,0 +1,99 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { getNodeCenter } from "../../utils/xyflow.mjs";
+import { Base } from "../../base/Base.mjs";
+import { updateEdges } from "../../base/updateEdges.mjs";
+import { updateNodes } from "../../base/updateNodes.mjs";
+import { deepEqual } from "fast-equals";
+import { mergeDeep } from "remeda";
+import { nonNullable } from "@likec4/core";
+import { vector } from "@likec4/core/geometry";
+import { getNodeDimensions } from "@xyflow/system";
+import { assertEvent } from "xstate";
+
+//#region src/likec4diagram/state/assign.ts
+function mergeXYNodesEdges(context, event) {
+	const nextView = event.view;
+	const isSameView = context.view.id === nextView.id;
+	if (nextView._type === "dynamic" && nextView.variant === "sequence") return {
+		xynodes: event.xynodes,
+		xyedges: event.xyedges,
+		view: nextView
+	};
+	return {
+		xynodes: updateNodes(context.xynodes, event.xynodes),
+		xyedges: isSameView ? updateEdges(context.xyedges, event.xyedges) : event.xyedges,
+		view: nextView
+	};
+}
+function focusNodesEdges(context) {
+	const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = context;
+	if (!focusedNode) return null;
+	const focused = /* @__PURE__ */ new Set([focusedNode]);
+	const xyedges = _xyedges.map((edge) => {
+		if (edge.source === focusedNode || edge.target === focusedNode) {
+			focused.add(edge.source);
+			focused.add(edge.target);
+			return Base.setData(edge, {
+				dimmed: false,
+				active: true
+			});
+		}
+		return Base.setData(edge, {
+			dimmed: true,
+			active: false
+		});
+	});
+	return {
+		xynodes: _xynodes.map((n) => Base.setDimmed(n, !focused.has(n.id))),
+		xyedges
+	};
+}
+function updateNodeData({ context, event }) {
+	assertEvent(event, "update.nodeData");
+	return { xynodes: context.xynodes.map((node) => {
+		if (node.id !== event.nodeId) return node;
+		const data = mergeDeep(node.data, event.data);
+		if (deepEqual(data, node.data)) return node;
+		return {
+			...node,
+			data
+		};
+	}) };
+}
+function updateEdgeData({ context, event }) {
+	assertEvent(event, "update.edgeData");
+	return { xyedges: context.xyedges.map((edge) => {
+		if (edge.id !== event.edgeId) return edge;
+		const data = mergeDeep(edge.data, event.data);
+		if (deepEqual(data, edge.data)) return edge;
+		return {
+			...edge,
+			data
+		};
+	}) };
+}
+function getBorderPointOnVector(node, nodeCenter, v) {
+	const dimensions = getNodeDimensions(node);
+	const xScale = dimensions.width / 2 / v.x;
+	const yScale = dimensions.height / 2 / v.y;
+	const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+	return vector(v).multiply(scale).add(nodeCenter);
+}
+function resetEdgeControlPoints(nodeLookup, edge) {
+	const source = nonNullable(nodeLookup.get(edge.source), `Source node ${edge.source} not found`);
+	const target = nonNullable(nodeLookup.get(edge.target), `Target node ${edge.target} not found`);
+	const sourceCenter = vector(getNodeCenter(source));
+	const targetCenter = vector(getNodeCenter(target));
+	if (source === target) {
+		const loopSize = 80;
+		const centerOfTopBoundary = vector(0, source.height || 0).multiply(-.5).add(sourceCenter);
+		return [centerOfTopBoundary.add(vector(-32, -80)).round().toObject(), centerOfTopBoundary.add(vector(loopSize / 2.5, -80)).round().toObject()];
+	}
+	const sourceToTargetVector = targetCenter.subtract(sourceCenter);
+	const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
+	const sourceToTarget = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.multiply(-1)).subtract(sourceBorderPoint);
+	return [sourceBorderPoint.add(sourceToTarget.multiply(.4)).round().toObject(), sourceBorderPoint.add(sourceToTarget.multiply(.6)).round().toObject()];
+}
+
+//#endregion
+export { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints, updateEdgeData, updateNodeData };

package/dist/likec4diagram/state/createViewChange.mjs

@@ -0,0 +1,73 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { calcViewBounds } from "../../utils/view-bounds.mjs";
+import { hasAtLeast, map } from "remeda";
+import { getNodeDimensions } from "@xyflow/system";
+
+//#region src/likec4diagram/state/createViewChange.ts
+function createViewChange(parentContext) {
+	const { view: { drifts: _1, _layout: _2, ...view }, xynodes, xystore } = parentContext;
+	const { nodeLookup, edgeLookup } = xystore.getState();
+	const nodes = map(view.nodes, (node) => {
+		const internal = nodeLookup.get(node.id);
+		if (!internal) {
+			console.error(`Internal node not found for ${node.id}`);
+			return node;
+		}
+		const xynodedata = xynodes.find((n) => n.data.id === node.id)?.data ?? internal.data;
+		const position = internal.internals.positionAbsolute;
+		const { width, height } = getNodeDimensions(internal);
+		return {
+			...node,
+			shape: xynodedata.shape,
+			color: xynodedata.color,
+			style: { ...xynodedata.style },
+			x: Math.floor(position.x),
+			y: Math.floor(position.y),
+			width: Math.ceil(width),
+			height: Math.ceil(height)
+		};
+	});
+	const edges = map(view.edges, (edge) => {
+		const xyedge = edgeLookup.get(edge.id);
+		if (!xyedge) {
+			console.error(`Internal edge not found for ${edge.id}`);
+			return edge;
+		}
+		const data = xyedge.data;
+		const controlPoints = data.controlPoints ?? [];
+		const _updated = {
+			...edge,
+			points: data.points
+		};
+		if (data.labelBBox) _updated.labelBBox = {
+			x: Math.round(data.labelBBox.x),
+			y: Math.round(data.labelBBox.y),
+			width: Math.round(data.labelBBox.width),
+			height: Math.round(data.labelBBox.height)
+		};
+		else _updated.labelBBox = null;
+		if (data.isLabelCustomized !== void 0) _updated.isLabelCustomized = data.isLabelCustomized;
+		if (hasAtLeast(controlPoints, 1)) _updated.controlPoints = map(controlPoints, (v) => ({
+			x: Math.round(v.x),
+			y: Math.round(v.y)
+		}));
+		else _updated.controlPoints = null;
+		return _updated;
+	});
+	return {
+		op: "save-view-snapshot",
+		layout: {
+			...view,
+			_layout: "manual",
+			bounds: calcViewBounds({
+				nodes,
+				edges
+			}),
+			nodes,
+			edges
+		}
+	};
+}
+
+//#endregion
+export { createViewChange };