@likec4/diagram 1.58.0 → 1.59.0

package/dist/likec4diagram/xyflow-sequence/layouter.js

@@ -0,0 +1,561 @@
+import "../../_virtual/_rolldown/runtime.js";
+import { normalizeSpacing, rectFromSteps } from "./utils.js";
+import { filter, first, flatMap, hasAtLeast, last, map, only, pipe } from "remeda";
+import { invariant, nonNullable, nonexhaustive } from "@likec4/core/utils";
+import { flowGuards } from "@likec4/core/types";
+import * as kiwi from "@lume/kiwi";
+import defu from "defu";
+//#region src/likec4diagram/xyflow-sequence/layouter.ts
+var Strength = {
+	required: kiwi.Strength.required,
+	strong: kiwi.Strength.strong,
+	medium: kiwi.Strength.medium,
+	soft: kiwi.Strength.create(0, .8, 1),
+	weak: kiwi.Strength.weak
+};
+var SequenceViewLayouter = class {
+	#flow;
+	#solver = new kiwi.Solver();
+	#actors;
+	#compounds = [];
+	#viewportRight;
+	#viewportBottom;
+	#rowsTop;
+	/**
+	* Each row has inner and outer bounds
+	* For adjacent rows, outer-bottom equals outer-top of the next row
+	*
+	* Inner bounds (top and bottom) are updated during layouting (when wrapped with subflow)
+	*
+	* ------ outer-top -------
+	* [ subflow stack begins ]
+	* ------ inner-top -------
+	*      [ A ---> B ]
+	* ---- inner-bottom ------
+	* [ subflow stack ends ]
+	* ---- outer-bottom ------
+	*/
+	#rows = [];
+	#subflows = /* @__PURE__ */ new Map();
+	constructor({ actors, steps, compounds, flow, collapsedFlows }) {
+		this.#solver.maxIterations = 2e3;
+		this.#flow = flow;
+		const firstRowOffset = Math.max(...actors.map((actor) => actor.height)) + 30;
+		this.#rowsTop = this.newVar(firstRowOffset);
+		this.constraint(this.#rowsTop, "==", firstRowOffset, Strength.soft);
+		this.constraint(this.#rowsTop, ">=", firstRowOffset, Strength.weak);
+		this.#viewportRight = this.newVar(0);
+		this.#viewportBottom = this.newVar(0);
+		this.#actors = this.addActors(actors);
+		for (const compound of compounds) {
+			const result = this.addCompound(compound);
+			const toplevel = result[0];
+			this.constraint(toplevel.y1, "==", 0, Strength.strong);
+			this.put(this.#rowsTop, Strength.strong).after(toplevel.y2);
+			this.#compounds.push(...result);
+		}
+		const [firstActor, ...restActors] = this.#actors;
+		this.constraint(firstActor.offset.left, "==", 0, Strength.strong);
+		const lastActor = restActors.reduce((prev, actor) => {
+			this.put(actor.x).after(prev.right, 80);
+			this.put(prev.offset.right, Strength.strong).before(actor.offset.left, 50);
+			this.constraint(actor.centerY, "==", prev.centerY, Strength.strong);
+			return actor;
+		}, firstActor);
+		for (const step of steps) this.addStep(step);
+		this.createSubflowAreas(steps, new Set(collapsedFlows));
+		this.constraint(this.#viewportRight, "==", lastActor.offset.right);
+		const mostBottom = last(this.#rows)?.inner.bottom ?? this.#rowsTop;
+		this.put(this.#viewportBottom, Strength.strong).after(mostBottom, 16);
+		if (compounds.length > 0) for (const compound of this.#compounds) {
+			const from = compound.from.column;
+			const to = compound.to.column;
+			let maxRow = Math.max(compound.from.maxRow, compound.to.maxRow);
+			for (let i = from + 1; i < to; i++) {
+				const actorBox = this.actorBox(i);
+				maxRow = Math.max(maxRow, actorBox.maxRow);
+			}
+			const lastRow = nonNullable(this.#rows[maxRow], `row ${maxRow} not found`);
+			this.put(compound.bottom, Strength.strong).after(lastRow.inner.bottom, 10);
+		}
+		this.#solver.updateVariables();
+	}
+	getSubflowAreas() {
+		return [...this.#subflows.entries()].map(([id, { x1, y1, x2, y2 }]) => ({
+			id,
+			x: x1.value(),
+			y: y1.value(),
+			width: x2.value() - x1.value(),
+			height: y2.value() - y1.value()
+		}));
+	}
+	getActorBox(actor) {
+		const actorBox = this.actorBox(actor);
+		return {
+			x: actorBox.x.value(),
+			y: actorBox.y.value(),
+			width: actorBox.width,
+			height: actorBox.height
+		};
+	}
+	getCompoundBoxes() {
+		return this.#compounds.map(({ node, depth, x1, y1, x2, bottom }) => ({
+			node,
+			depth,
+			x: x1.value(),
+			y: y1.value(),
+			width: x2.value() - x1.value(),
+			height: bottom.value() - y1.value()
+		}));
+	}
+	getPortCenter(step, type) {
+		const { column, row } = type === "source" ? step.from : step.to;
+		const x = this.actorBox(column).centerX;
+		const { rowTop } = nonNullable(this.#rows[row]);
+		return {
+			cx: x.value(),
+			cy: rowTop.value() + 40 + step.offset,
+			height: type === "source" ? 40 : 24
+		};
+	}
+	isStepCollapsed(step) {
+		if (step.from.row === step.to.row) return this.#rows[step.from.row]?.collapsed ?? false;
+		const minRow = Math.min(step.from.row, step.to.row);
+		const maxRow = Math.min(step.from.row, step.to.row);
+		let collapsed = true;
+		for (let i = minRow; i <= maxRow; i++) {
+			collapsed = collapsed && (this.#rows[i]?.collapsed ?? false);
+			if (!collapsed) break;
+		}
+		return collapsed;
+	}
+	getViewBounds() {
+		return {
+			x: 0,
+			y: 0,
+			width: this.#viewportRight.value(),
+			height: this.#viewportBottom.value()
+		};
+	}
+	actorBox(actor) {
+		if (typeof actor !== "number") {
+			const id = typeof actor === "string" ? actor : actor.id;
+			actor = this.#actors.findIndex((a) => a.actor.id === id);
+			invariant(actor >= 0, `actor ${id} not found`);
+		}
+		return nonNullable(this.#actors[actor], `actor at index ${actor} not found`);
+	}
+	addActors(actors) {
+		let accX = 0;
+		return map(actors, (actor, column) => {
+			const x = this.newVar(accX);
+			accX += actor.width + 80;
+			const y = this.newVar(0);
+			const actorBox = {
+				column,
+				actor,
+				x,
+				y,
+				centerX: x.plus(Math.round(actor.width / 2)),
+				centerY: y.plus(Math.round(actor.height / 2)),
+				width: actor.width,
+				height: actor.height,
+				right: x.plus(actor.width),
+				bottom: y.plus(actor.height),
+				minRow: Infinity,
+				maxRow: -Infinity
+			};
+			const top = this.newVar(0);
+			const left = this.newVar(0);
+			const right = this.newVar(0);
+			const bottom = this.newVar(0);
+			this.put(y, Strength.strong).after(top);
+			this.put(x, Strength.strong).after(left);
+			this.put(actorBox.right, Strength.strong).before(right);
+			this.put(actorBox.bottom, Strength.strong).before(bottom);
+			return {
+				...actorBox,
+				offset: {
+					top,
+					left,
+					right,
+					bottom
+				}
+			};
+		});
+	}
+	addStep(step) {
+		const source = this.actorBox(step.source);
+		const target = this.actorBox(step.target);
+		source.minRow = Math.min(source.minRow, step.from.row);
+		source.maxRow = Math.max(source.maxRow, step.from.row);
+		target.minRow = Math.min(target.minRow, step.to.row);
+		target.maxRow = Math.max(target.maxRow, step.to.row);
+		const [left, right] = source.column <= target.column ? [source, target] : [target, source];
+		const width = (step.label?.width ?? 100) + 50;
+		if (Math.abs(target.column - source.column) <= 1) if (left !== right) this.constraint(left.centerX.plus(width), "<=", right.centerX);
+		else this.constraint(left.centerX.plus(width), "<=", left.offset.right);
+		let height = step.label?.height ? step.label.height + 50 + 24 : 100;
+		height = Math.max(height, 100) + step.offset;
+		this.ensureRow(step.from.row, height);
+		if (step.isSelfLoop) this.ensureRow(step.to.row, 0);
+		return this;
+	}
+	/**
+	* Recursively adds a compound and its nested compounds to the layout.
+	* Also updates offsets of the actor boxes to accommodate the compound.
+	*/
+	addCompound(compound) {
+		const PADDING = 32;
+		const PADDING_TOP = 40;
+		const PADDING_TOP_FROM_ACTOR = 52;
+		const children = [];
+		const nested = compound.nested.flatMap((c) => {
+			const result = this.addCompound(c);
+			children.push(result[0]);
+			return result;
+		});
+		const depth = Math.max(...nested.map((c) => c.depth + 1), 0);
+		const from = this.actorBox(compound.from);
+		const to = this.actorBox(compound.to);
+		const x1 = from.offset.left.minus(PADDING);
+		from.offset.left = x1;
+		const x2 = to.offset.right.plus(PADDING);
+		to.offset.right = x2;
+		const bottom = this.newVar(0);
+		const onlyChild = only(children);
+		let y1;
+		let y2;
+		switch (true) {
+			case !!onlyChild:
+				y1 = onlyChild.y1.minus(PADDING_TOP);
+				y2 = onlyChild.y2.plus(PADDING);
+				this.put(onlyChild.bottom).before(bottom, PADDING);
+				break;
+			case to === from:
+				y1 = this.newVar(0);
+				y2 = this.newVar(0);
+				this.put(y1).before(from.offset.top, PADDING_TOP_FROM_ACTOR);
+				this.put(from.offset.bottom).before(y2, PADDING);
+				this.put(y2).before(bottom);
+				break;
+			case children.length > 0:
+				y1 = this.newVar(0);
+				y2 = this.newVar(0);
+				for (const child of children) {
+					this.put(y1).before(child.y1, PADDING);
+					this.put(child.y2).before(y2, PADDING);
+					this.put(child.bottom).before(bottom, PADDING);
+				}
+				break;
+			default:
+				y1 = this.newVar(0);
+				y2 = this.newVar(0);
+				for (var col = from.column; col <= to.column; col++) {
+					const offset = this.actorBox(col).offset;
+					this.put(y1).before(offset.top, PADDING_TOP_FROM_ACTOR);
+					this.put(offset.bottom).before(y2, PADDING);
+				}
+				this.put(y2).before(bottom);
+				break;
+		}
+		for (var col = from.column; col <= to.column; col++) {
+			const offset = this.actorBox(col).offset;
+			offset.top = y1;
+			offset.bottom = y2;
+		}
+		return [{
+			node: compound.node,
+			depth,
+			from,
+			to,
+			x1,
+			y1,
+			x2,
+			y2,
+			bottom
+		}, ...nested];
+	}
+	ensureRow(row, rowHeight) {
+		while (row >= this.#rows.length) {
+			const outerTop = last(this.#rows)?.outer.bottom || this.#rowsTop;
+			const innerTop = this.newVar(outerTop.value());
+			this.put(innerTop).after(outerTop);
+			let heightValue = rowHeight;
+			if (row !== this.#rows.length) heightValue = 100;
+			const height = new kiwi.Variable();
+			height.setValue(heightValue);
+			this.#solver.addEditVariable(height, Strength.strong);
+			this.#solver.suggestValue(height, heightValue);
+			const innerBottom = this.newVar(innerTop.value() + heightValue);
+			this.require(innerBottom).after(innerTop);
+			this.constraint(innerBottom.minus(innerTop), "==", height, Strength.strong);
+			const outerBottom = this.newVar(innerBottom.value());
+			this.put(outerBottom).after(innerBottom);
+			this.#rows.push({
+				inner: {
+					top: innerTop,
+					bottom: innerBottom
+				},
+				rowTop: innerTop,
+				outer: {
+					top: outerTop,
+					bottom: outerBottom
+				},
+				height
+			});
+		}
+		const rowVar = nonNullable(this.#rows[row]);
+		if (rowHeight > rowVar.height.value()) {
+			rowVar.height.setValue(rowHeight);
+			this.#solver.suggestValue(rowVar.height, rowHeight);
+		}
+		return rowVar;
+	}
+	collapseRect({ min, max }) {
+		const h = 0;
+		for (let row = min.row; row <= max.row; row++) {
+			const r = nonNullable(this.#rows[row], `Row ${row} not found`);
+			r.collapsed = true;
+			r.height.setValue(h);
+			this.#solver.suggestValue(r.height, h);
+		}
+	}
+	getRectBounds({ min, max }) {
+		const firstRow = this.#rows[min.row];
+		const lastRow = this.#rows[max.row];
+		invariant(firstRow && lastRow, `Subflow box invalid minRow=${min.row} maxRow=${max.row}`);
+		return {
+			x1: this.actorBox(min.column).centerX,
+			x2: this.actorBox(max.column).centerX,
+			get top() {
+				return firstRow.inner.top;
+			},
+			set top(value) {
+				firstRow.inner.top = value;
+			},
+			get bottom() {
+				return lastRow.inner.bottom;
+			},
+			set bottom(value) {
+				lastRow.inner.bottom = value;
+			},
+			minY: firstRow.outer.top,
+			maxY: lastRow.outer.bottom
+		};
+	}
+	wrapAroundRect(rect, spacing) {
+		const p = normalizeSpacing(spacing ?? 16);
+		const bounds = this.getRectBounds(rect);
+		const x1 = this.newVar(0);
+		this.put(x1).before(bounds.x1, p.left);
+		const x2 = this.newVar(0);
+		this.put(x2).after(bounds.x2, p.right);
+		const y1 = this.newVar(bounds.minY.value());
+		this.require(y1).after(bounds.minY);
+		this.put(y1).before(bounds.top, p.top);
+		const y2 = this.newVar(bounds.maxY.value());
+		this.put(y2).after(bounds.bottom, p.bottom);
+		this.require(y2).before(bounds.maxY);
+		bounds.top = y1;
+		bounds.bottom = y2;
+		return {
+			x1,
+			y1,
+			x2,
+			y2
+		};
+	}
+	createSubflowAreas(steps, collapsed) {
+		const selectSteps = (id) => filter(steps, (s) => s.id.startsWith(id));
+		const spacing = {
+			top: 30,
+			right: 40,
+			bottom: 10,
+			left: 90
+		};
+		/**
+		* Expands the parent bounding box to fit all subflows and their nested steps.
+		*/
+		const fitSubflows = ({ area, visited, stretch = false, padding }) => {
+			const areas = pipe(visited, filter(flowGuards.isSubFlow), flatMap((b) => this.#subflows.get(b.id) ?? []));
+			if (!hasAtLeast(areas, 1)) return;
+			const p = defu(padding, spacing);
+			const firstArea = first(areas);
+			const lastArea = last(areas);
+			if (firstArea.min.row == area.min.row) this.require(area.y1).before(firstArea.y1, p.top);
+			if (lastArea.max.row == area.max.row) this.require(lastArea.y2).before(area.y2, p.bottom);
+			for (const subarea of areas) {
+				this.require(subarea.x1).after(area.x1, p.left);
+				this.require(subarea.x2).before(area.x2, p.right);
+				if (stretch) {
+					subarea.x1 = p.left > 0 ? area.x1.plus(p.left) : area.x1;
+					subarea.x2 = p.right > 0 ? area.x2.minus(p.right) : area.x2;
+				}
+			}
+		};
+		const createSubflowArea = (subflow) => {
+			const rect = rectFromSteps(selectSteps(subflow.id));
+			let space;
+			switch (true) {
+				case flowGuards.isAltOrTry(subflow):
+					space = 0;
+					break;
+				case collapsed.has(subflow.id) && flowGuards.isAltOrTryBranch(subflow):
+					space = {
+						...spacing,
+						top: 36,
+						bottom: 0
+					};
+					break;
+				case collapsed.has(subflow.id):
+					space = {
+						...spacing,
+						top: 24,
+						bottom: 0
+					};
+					break;
+				default:
+					space = spacing;
+					break;
+			}
+			const area = {
+				...this.wrapAroundRect(rect, space),
+				...rect
+			};
+			this.#subflows.set(subflow.id, area);
+			return area;
+		};
+		this.#flow.walk({ subflow: ({ subflow, previous, parent }) => ({
+			next: collapsed.has(subflow.id) ? [] : subflow.flow,
+			onLeave: ({ visited }) => {
+				const area = createSubflowArea(subflow);
+				const previousSubflow = flowGuards.isSubFlow(previous) && this.#subflows.get(previous.id);
+				if (!flowGuards.isAltOrTryBranch(subflow) && previousSubflow) this.put(previousSubflow.y2).before(area.y1, 32);
+				if (!parent && area.min.column > 0) this.require(this.actorBox(area.min.column - 1).centerX).before(area.x1, 100);
+				switch (true) {
+					case collapsed.has(subflow.id):
+						this.collapseRect(area);
+						return;
+					case flowGuards.isAltOrTry(subflow): return fitSubflows({
+						area,
+						visited,
+						padding: {
+							top: 30,
+							left: 0,
+							right: 0
+						},
+						stretch: true
+					});
+					case flowGuards.isAltOrTryBranch(subflow): return fitSubflows({
+						area,
+						visited,
+						padding: {
+							top: 50,
+							left: 32,
+							bottom: 32,
+							right: 32
+						}
+					});
+					default: return fitSubflows({
+						area,
+						visited,
+						padding: {
+							top: 40,
+							bottom: 12,
+							left: 32,
+							right: 16
+						}
+					});
+				}
+			}
+		}) });
+	}
+	newVar(initialValue) {
+		const v = new kiwi.Variable();
+		this.#solver.addEditVariable(v, Strength.weak);
+		if (typeof initialValue === "number") {
+			v.setValue(initialValue);
+			this.#solver.suggestValue(v, initialValue);
+		}
+		return v;
+	}
+	require(...args) {
+		if (args.length == 1) {
+			const [left] = args;
+			return {
+				before: (right, gap = 0) => {
+					let other = gap ? right.minus(gap) : right;
+					return this.constraint(left, "<=", other, Strength.required);
+				},
+				after: (right, gap = 0) => {
+					let other = gap ? right.plus(gap) : right;
+					return this.constraint(left, ">=", other, Strength.required);
+				}
+			};
+		}
+		const [left, op, right] = args;
+		const constraint = this.constraint(left, op, right, Strength.required);
+		switch (op) {
+			case "<=":
+			case ">=":
+				this.constraint(left, "==", right, Strength.weak);
+				break;
+			case "<= 0":
+			case ">= 0":
+				this.constraint(left, "== 0", void 0, Strength.weak);
+				break;
+		}
+		return constraint;
+	}
+	/**
+	* Adds a constraint with medium strength by default
+	*/
+	constraint(left, op, right = void 0, strength = Strength.medium) {
+		let operator;
+		switch (op) {
+			case "==":
+				operator = kiwi.Operator.Eq;
+				break;
+			case ">=":
+				operator = kiwi.Operator.Ge;
+				break;
+			case "<=":
+				operator = kiwi.Operator.Le;
+				break;
+			case "== 0":
+				operator = kiwi.Operator.Eq;
+				right = 0;
+				break;
+			case ">= 0":
+				operator = kiwi.Operator.Ge;
+				right = 0;
+				break;
+			case "<= 0":
+				operator = kiwi.Operator.Le;
+				right = 0;
+				break;
+			default: nonexhaustive(op);
+		}
+		const constraint = new kiwi.Constraint(left, operator, right ?? 0, strength);
+		this.#solver.addConstraint(constraint);
+		return constraint;
+	}
+	put(variable, strength = Strength.required) {
+		const eqStrength = strength === Strength.required ? Strength.soft : Strength.weak;
+		return {
+			before: (other, gap) => {
+				if (gap) other = other.minus(gap);
+				this.constraint(variable, "<=", other, strength);
+				this.constraint(variable, "==", other, eqStrength);
+			},
+			after: (other, gap) => {
+				if (gap) other = other.plus(gap);
+				this.constraint(variable, ">=", other, strength);
+				this.constraint(variable, "==", other, eqStrength);
+			}
+		};
+	}
+};
+//#endregion
+export { SequenceViewLayouter, Strength };

package/dist/likec4diagram/xyflow-sequence/{sequence-layout.d.ts → sequence-view-to-xy.d.ts}

@@ -1,11 +1,17 @@
 import { LayoutedDynamicView, ViewId } from '@likec4/core/types';
+import { DiagramContext } from '../state/types';
 import { Types } from '../types';
 /**
  * Converts a sequence layout to XY flow nodes and edges.
  * @param view The next dynamic view which contains the sequence layout.
  * @param currentViewId The ID of the current view (optional, used to exclude navigation to the current view)
  */
-export declare function sequenceLayoutToXY(view: LayoutedDynamicView, currentViewId: ViewId | undefined): {
-    xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>;
+export declare function sequenceLayoutToXY({ view, currentViewId, collapsedFlows }: {
+    view: LayoutedDynamicView;
+    currentViewId: ViewId | undefined;
+    collapsedFlows: DiagramContext['collapsedSequenceFlows'];
+}): {
+    xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.SequenceSubflowArea | Types.ViewGroupNode>;
     xyedges: Array<Types.SequenceStepEdge>;
+    layout: LayoutedDynamicView.Sequence.Layout;
 };