@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/useLayoutConstraints.mjs

@@ -0,0 +1,482 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useXYStoreApi } from "../hooks/useXYFlow.mjs";
+import { leafNodeRects, nodeToRect as nodeToRect$1 } from "../utils/xyflow.mjs";
+import { useDiagram } from "../hooks/safeContext.mjs";
+import { useCurrentViewRouting } from "../hooks/useCurrentView.mjs";
+import { vector as vector$1 } from "../utils/index.mjs";
+import { selectLabelRoutes } from "../hooks/useEdgeTracks.mjs";
+import { initialControlPoints } from "../utils/edge-corners.mjs";
+import { useMemo, useRef } from "react";
+import { clamp, difference, filter, flatMap, hasAtLeast, map, pipe, unique } from "remeda";
+import { DefaultMap, nonNullable } from "@likec4/core";
+import { BBox as BBox$1, placeLabelsAlongRoutes } from "@likec4/core/geometry";
+import { invariant as invariant$1, isome } from "@likec4/core/utils";
+import { getNodeDimensions } from "@xyflow/system";
+import { produce } from "immer";
+
+//#region src/likec4diagram/useLayoutConstraints.ts
+var Rect$1 = class {
+	static {
+		__name(this, "Rect");
+	}
+	static LeftPadding = 42;
+	static RightPadding = 42;
+	static TopPadding = 60;
+	static BottomPadding = 42;
+	id;
+	minX = Infinity;
+	minY = Infinity;
+	maxX = -Infinity;
+	maxY = -Infinity;
+	initial;
+	get positionAbsolute() {
+		return {
+			x: this.minX,
+			y: this.minY
+		};
+	}
+	set positionAbsolute(pos) {
+		const x = Math.trunc(pos.x);
+		const y = Math.trunc(pos.y);
+		this.maxX += x - this.minX;
+		this.maxY += y - this.minY;
+		this.minX = x;
+		this.minY = y;
+	}
+	get dimensions() {
+		return {
+			width: Math.ceil(this.maxX - this.minX),
+			height: Math.ceil(this.maxY - this.minY)
+		};
+	}
+	get diff() {
+		const { x, y } = this.positionAbsolute;
+		return {
+			x: Math.trunc(x - this.initial.x),
+			y: Math.trunc(y - this.initial.y)
+		};
+	}
+	get isMoved() {
+		const diff = this.diff;
+		return diff.x !== 0 || diff.y !== 0;
+	}
+	get isResized() {
+		const dim = this.dimensions;
+		return dim.width !== this.initial.width || dim.height !== this.initial.height;
+	}
+	get position() {
+		const positionAbsolute = this.positionAbsolute;
+		if (!this.parent) return positionAbsolute;
+		const parentPosition = this.parent.positionAbsolute;
+		return {
+			x: positionAbsolute.x - parentPosition.x,
+			y: positionAbsolute.y - parentPosition.y
+		};
+	}
+	constructor(xynode, parent = null) {
+		this.id = xynode.id;
+		this.positionAbsolute = !parent ? xynode.position : {
+			x: xynode.position.x + parent.minX,
+			y: xynode.position.y + parent.minY
+		};
+		const { width, height } = getNodeDimensions(xynode);
+		this.maxX = this.minX + Math.ceil(width);
+		this.maxY = this.minY + Math.ceil(height);
+		this.initial = {
+			x: this.minX,
+			y: this.minY,
+			width: Math.ceil(width),
+			height: Math.ceil(height)
+		};
+		if (parent) parent.children.push(this);
+	}
+};
+var CompoundRect = class extends Rect$1 {
+	parent;
+	children = [];
+	constructor(xynode, parent = null) {
+		super(xynode, parent);
+		this.parent = parent;
+	}
+};
+var Leaf = class extends Rect$1 {
+	parent;
+	constructor(xynode, parent = null) {
+		super(xynode, parent);
+		this.parent = parent;
+	}
+};
+/**
+* Creates a modifier function that moves edge points according to the given rectangle's diff.
+*/
+function makeEdgeModifier(edge, anchor) {
+	const controlPoints = edge.data.controlPoints ?? null;
+	return (edgeLookup) => {
+		const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
+		const { x: dx, y: dy } = anchor.diff;
+		if (dx === 0 && dy === 0) {
+			const item = produce(current, (draft) => {
+				draft.data.points = edge.data.points;
+				draft.data.controlPoints = controlPoints;
+				draft.data.labelBBox = edge.data.labelBBox;
+			});
+			return item === current ? null : {
+				id: edge.id,
+				type: "replace",
+				item
+			};
+		}
+		return {
+			id: edge.id,
+			type: "replace",
+			item: produce(current, (draft) => {
+				draft.data.points = map(edge.data.points, (pt) => [pt[0] + dx, pt[1] + dy]);
+				if (controlPoints) draft.data.controlPoints = controlPoints.map((pt) => ({
+					x: pt.x + dx,
+					y: pt.y + dy
+				}));
+				else draft.data.controlPoints = null;
+				if (edge.data.labelBBox) {
+					draft.data.labelBBox ??= edge.data.labelBBox;
+					draft.data.labelBBox.x = edge.data.labelBBox.x + dx;
+					draft.data.labelBBox.y = edge.data.labelBBox.y + dy;
+				}
+			})
+		};
+	};
+}
+/**
+* Creates a modifier function that moves edge points when one of its nodes is moved.
+*/
+function makeRelativeEdgeModifier(edge, movingRect, ends, routing) {
+	const [anchorNode, staticNode] = ends.isSourceMoving ? [ends.source, ends.target] : [ends.target, ends.source];
+	const controlPoints = edge.data.controlPoints ?? initialControlPoints(edge.data.points, routing);
+	const anchorV = vector$1(BBox$1.center(anchorNode));
+	const staticV = vector$1(BBox$1.center(staticNode));
+	const staticToAnchor = anchorV.subtract(staticV);
+	const staticToAnchorLength = staticToAnchor.length();
+	return (edgeLookup) => {
+		const current = nonNullable(edgeLookup.get(edge.id), `Edge ${edge.id} not found`);
+		const { x: dx, y: dy } = movingRect.diff;
+		if (dx === 0 && dy === 0) {
+			const item = produce(current, (draft) => {
+				draft.data.points = edge.data.points;
+				draft.data.controlPoints = edge.data.controlPoints;
+				draft.data.labelBBox = edge.data.labelBBox;
+			});
+			return item === current ? null : {
+				id: edge.id,
+				type: "replace",
+				item
+			};
+		}
+		const d = vector$1(dx, dy);
+		const relativePoint = (pt) => {
+			if (staticToAnchorLength === 0) return {
+				x: pt.x,
+				y: pt.y
+			};
+			const point = vector$1(pt);
+			const projLength = point.subtract(staticV).dot(staticToAnchor);
+			const coeff = clamp(projLength / staticToAnchorLength ** 2, {
+				min: -1,
+				max: 1
+			});
+			const newPoint = point.add(d.multiply(coeff)).trunc();
+			return {
+				x: newPoint.x,
+				y: newPoint.y
+			};
+		};
+		return {
+			id: edge.id,
+			type: "replace",
+			item: produce(current, (draft) => {
+				draft.data.controlPoints = controlPoints.map(relativePoint);
+				draft.data.points = map(edge.data.points, ([x, y]) => {
+					const point = relativePoint({
+						x,
+						y
+					});
+					return [point.x, point.y];
+				});
+				if (edge.data.labelBBox) {
+					draft.data.labelBBox ??= edge.data.labelBBox;
+					const { x, y } = relativePoint(edge.data.labelBBox);
+					draft.data.labelBBox.x = x;
+					draft.data.labelBBox.y = y;
+				}
+			})
+		};
+	};
+}
+function createLayoutConstraints(xyflowApi, editingNodeIds, routing) {
+	const { parentLookup, nodeLookup, edges } = xyflowApi.getState();
+	const initialNodeRects = new Map([...nodeLookup].map(([id, node]) => [id, nodeToRect$1(node)]));
+	const rects = /* @__PURE__ */ new Map();
+	/** Maps node id to all its ancestors */
+	const ancestorsOf = new DefaultMap((nodeId) => {
+		let parent = nodeLookup.get(nodeId)?.parentId;
+		if (!parent) return [];
+		return [parent, ...ancestorsOf.get(parent)];
+	});
+	/** Maps node id to all its nested descendants */
+	const nestedOf = new DefaultMap((nodeId) => {
+		const children = parentLookup.get(nodeId);
+		if (!children || children.size === 0) return /* @__PURE__ */ new Set();
+		const nested = /* @__PURE__ */ new Set();
+		for (const child of children.values()) {
+			nested.add(child.id);
+			for (const desc of nestedOf.get(child.id)) nested.add(desc);
+		}
+		return nested;
+	});
+	if (hasAtLeast(editingNodeIds, 2)) {
+		const leafsOnly = pipe(editingNodeIds, flatMap((id) => [...nestedOf.get(id)]), unique(), (exclude) => difference(editingNodeIds, exclude));
+		invariant$1(hasAtLeast(leafsOnly, 1), "All editing nodes are nested within each other");
+		editingNodeIds = leafsOnly;
+	}
+	const ancestorsOfDraggingNodes = new Set(editingNodeIds.flatMap((i) => ancestorsOf.get(i)));
+	const traverse = [...nodeLookup.values()].flatMap((x) => !x.parentId ? {
+		xynode: x,
+		parent: null
+	} : []);
+	while (traverse.length > 0) {
+		const { xynode, parent } = traverse.shift();
+		if (!editingNodeIds.includes(xynode.id) && ancestorsOfDraggingNodes.has(xynode.id)) {
+			const rect = new CompoundRect(xynode, parent);
+			rects.set(xynode.id, rect);
+			parentLookup.get(xynode.id)?.forEach((child) => {
+				traverse.push({
+					xynode: child,
+					parent: rect
+				});
+			});
+			continue;
+		}
+		rects.set(xynode.id, new Leaf(xynode, parent));
+	}
+	const rectsToUpdate = [...rects.values()];
+	/**
+	* Edges that need to be updated because both source and target are moved
+	* - source and target are inside a compound node that is moved
+	* - source and target are selected and moved
+	*/
+	const edgeModifiers = /* @__PURE__ */ new Map();
+	const findMovingAncestor = (nodeId) => {
+		const r = rects.get(nodeId);
+		if (r) return r;
+		for (const parent of ancestorsOf.get(nodeId)) {
+			const rect = rects.get(parent);
+			if (rect) return rect;
+		}
+		return null;
+	};
+	const movingNodes = new Set(editingNodeIds.flatMap((id) => [id, ...nestedOf.get(id)]));
+	for (const edge of edges) {
+		const isSourceMoving = movingNodes.has(edge.source);
+		const isTargetMoving = movingNodes.has(edge.target);
+		if (!isSourceMoving && !isTargetMoving) continue;
+		if (isSourceMoving && isTargetMoving) {
+			let r = rects.get(edge.source) ?? rects.get(edge.target) ?? findMovingAncestor(edge.source) ?? findMovingAncestor(edge.target);
+			invariant$1(!!r, "At least one of the edge nodes should have a moving ancestor");
+			edgeModifiers.set(edge, makeEdgeModifier(edge, r));
+			continue;
+		}
+		invariant$1(isSourceMoving !== isTargetMoving, "Logic error");
+		const movingRect = isSourceMoving ? findMovingAncestor(edge.source) : findMovingAncestor(edge.target);
+		invariant$1(!!movingRect, "Moving endpoint should be found");
+		const [sourceNode, targetNode] = pipe([edge.source, edge.target], map((id) => nonNullable(nodeLookup.get(id), `Node ${id} not found`)), map(nodeToRect$1));
+		edgeModifiers.set(edge, makeRelativeEdgeModifier(edge, movingRect, {
+			source: sourceNode,
+			target: targetNode,
+			isSourceMoving
+		}, routing));
+	}
+	function applyConstraints(targets) {
+		for (const r of targets) {
+			if (!(r instanceof CompoundRect)) continue;
+			applyConstraints(r.children);
+			const childrenBB = {
+				minX: Infinity,
+				minY: Infinity,
+				maxX: -Infinity,
+				maxY: -Infinity
+			};
+			for (const child of r.children) {
+				childrenBB.minX = Math.min(childrenBB.minX, child.minX);
+				childrenBB.minY = Math.min(childrenBB.minY, child.minY);
+				childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX);
+				childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY);
+			}
+			r.minX = childrenBB.minX - Rect$1.LeftPadding;
+			r.minY = childrenBB.minY - Rect$1.TopPadding;
+			r.maxX = childrenBB.maxX + Rect$1.RightPadding;
+			r.maxY = childrenBB.maxY + Rect$1.BottomPadding;
+		}
+	}
+	const _edgeModifiers = [...edgeModifiers.values()];
+	/**
+	* Read current node positions from XYFlow internal state into rects.
+	* Only needed for drag operations where XYFlow already has the updated positions.
+	*/
+	function syncFromXYFlow() {
+		const { nodeLookup } = xyflowApi.getState();
+		for (const id of editingNodeIds) {
+			const rect = rects.get(id);
+			if (!rect) {
+				console.warn(`Rect not found for id ${id}`);
+				continue;
+			}
+			const node = nodeLookup.get(id);
+			if (!node) {
+				console.warn(`Node not found for id ${id}`);
+				continue;
+			}
+			rect.positionAbsolute = node.internals.positionAbsolute;
+		}
+	}
+	function updateXYFlow() {
+		const { edgeLookup, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+		applyConstraints(rectsToUpdate);
+		const nodeUpdates = [];
+		let edgeUpdates = [];
+		for (const r of rectsToUpdate) {
+			nodeUpdates.push({
+				id: r.id,
+				type: "position",
+				dragging: false,
+				position: r.position,
+				positionAbsolute: r.positionAbsolute
+			});
+			if (r instanceof CompoundRect) nodeUpdates.push({
+				id: r.id,
+				type: "dimensions",
+				setAttributes: true,
+				resizing: false,
+				dimensions: r.dimensions
+			});
+		}
+		if (nodeUpdates.length > 0) triggerNodeChanges(nodeUpdates);
+		for (const fm of _edgeModifiers) {
+			const change = fm(edgeLookup);
+			if (change) edgeUpdates.push(change);
+		}
+		if (routing === "ortho" && edgeUpdates.length > 0 && hasChanges()) {
+			const finalNodeLookup = new Map([...nodeLookup].map(([id, node]) => {
+				const rect = rects.get(id);
+				const initial = initialNodeRects.get(id);
+				const shift = findMovingAncestor(id)?.diff ?? {
+					x: 0,
+					y: 0
+				};
+				const positionAbsolute = rect?.positionAbsolute ?? {
+					x: initial.x + shift.x,
+					y: initial.y + shift.y
+				};
+				const dimensions = rect?.dimensions ?? initial;
+				return [id, {
+					...node,
+					measured: {
+						width: dimensions.width,
+						height: dimensions.height
+					},
+					internals: {
+						...node.internals,
+						positionAbsolute
+					}
+				}];
+			}));
+			const updatedEdges = new Map(edgeUpdates.map((change) => [change.id, change.item]));
+			const state = xyflowApi.getState();
+			const routes = selectLabelRoutes({
+				...state,
+				nodeLookup: finalNodeLookup,
+				edges: state.edges.map((edge) => updatedEdges.get(edge.id) ?? edge)
+			}).map((route) => ({
+				...route,
+				fixed: route.fixed || !updatedEdges.has(route.id)
+			}));
+			const labels = placeLabelsAlongRoutes(routes, leafNodeRects(finalNodeLookup.values()));
+			edgeUpdates = edgeUpdates.map((change) => {
+				const labelBBox = labels.get(change.id);
+				return labelBBox ? {
+					...change,
+					item: produce(change.item, (draft) => {
+						draft.data.labelBBox = labelBBox;
+					})
+				} : change;
+			});
+		}
+		if (edgeUpdates.length > 0) triggerEdgeChanges(edgeUpdates);
+	}
+	let animationFrameId = null;
+	function cancelPending() {
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+			animationFrameId = null;
+		}
+	}
+	function flushPending() {
+		cancelPending();
+		syncFromXYFlow();
+		updateXYFlow();
+	}
+	function onMove() {
+		animationFrameId ??= requestAnimationFrame(() => {
+			animationFrameId = null;
+			syncFromXYFlow();
+			updateXYFlow();
+		});
+	}
+	function hasChanges() {
+		return isome(rectsToUpdate, (r) => r.isMoved || r.isResized);
+	}
+	return {
+		rects,
+		onMove,
+		updateXYFlow,
+		hasChanges,
+		cancelPending,
+		flushPending
+	};
+}
+/**
+* Keeps the layout constraints (parent nodes and children) when dragging a node
+*/
+function useLayoutConstraints() {
+	const xystore = useXYStoreApi();
+	const diagram = useDiagram();
+	const routing = useCurrentViewRouting();
+	const solverRef = useRef(void 0);
+	return useMemo(() => {
+		return {
+			onNodeDragStart: (_event, xynode) => {
+				const { nodeLookup } = xystore.getState();
+				const draggingNodes = pipe(Array.from(nodeLookup.values()), filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true), map((n) => n.id));
+				if (hasAtLeast(draggingNodes, 1)) {
+					diagram.startEditing("node");
+					solverRef.current = createLayoutConstraints(xystore, draggingNodes, routing);
+				}
+			},
+			onNodeDrag: (_event) => {
+				solverRef.current?.onMove();
+			},
+			onNodeDragStop: (_event) => {
+				if (!solverRef.current) return;
+				const hasChanges = solverRef.current.hasChanges();
+				if (hasChanges) solverRef.current.flushPending();
+				else solverRef.current.cancelPending();
+				diagram.stopEditing(hasChanges);
+				solverRef.current = void 0;
+			}
+		};
+	}, [
+		xystore,
+		diagram,
+		routing
+	]);
+}
+
+//#endregion
+export { createLayoutConstraints, useLayoutConstraints };