@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/xyflow-diagram/diagram-view.mjs

@@ -0,0 +1,275 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../../base/const.mjs";
+import { readableText } from "../../utils/readableText.mjs";
+import { hasAtLeast, pick } from "remeda";
+import { GroupElementKind, Queue, invariant, isStepPath, nonNullable, whereOperatorAsPredicate } from "@likec4/core";
+
+//#region src/likec4diagram/xyflow-diagram/diagram-view.ts
+function sentence(parts) {
+	return parts.filter((part) => !!part).map((part) => part.endsWith(".") ? part : `${part}.`).join(" ");
+}
+function nodeAriaLabel(node) {
+	const title = readableText(node.title) ?? node.id;
+	const description = readableText(node.description);
+	const notes = readableText(node.notes);
+	if (node.kind === GroupElementKind) {
+		const childCount = node.children.length;
+		return sentence([
+			title,
+			"Group",
+			`Contains ${childCount} ${childCount === 1 ? "node" : "nodes"}`,
+			notes && `Notes: ${notes}`
+		]);
+	}
+	return sentence([
+		title,
+		`Node kind: ${node.kind}`,
+		node.technology && `Technology: ${node.technology}`,
+		description && `Description: ${description}`,
+		notes && `Notes: ${notes}`,
+		node.navigateTo && `Opens view ${node.navigateTo}`
+	]);
+}
+function edgeAriaLabel(edge, source, target) {
+	const sourceTitle = readableText(source.title) ?? source.id;
+	const targetTitle = readableText(target.title) ?? target.id;
+	const label = readableText(edge.label);
+	const description = readableText(edge.description);
+	const notes = readableText(edge.notes);
+	return sentence([
+		`Relationship from ${sourceTitle} to ${targetTitle}`,
+		label && `Label: ${label}`,
+		edge.technology && `Technology: ${edge.technology}`,
+		description && `Description: ${description}`,
+		notes && `Notes: ${notes}`,
+		edge.navigateTo && `Opens view ${edge.navigateTo}`
+	]);
+}
+/**
+* Convert a diagram view to XY flow nodes and edges.
+* @param opts
+* @param opts.view - The diagram view to convert.
+* @param opts.currentViewId - The ID of the current view.
+* @param opts.where - Optional filter for nodes and edges.
+* @returns An object containing an array of XY flow nodes and an array of XY flow edges.
+*/
+function diagramToXY(opts) {
+	const { view } = opts;
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const viewLayoutDir = view.autoLayout?.direction ?? "TB";
+	const isDynamic = view._type === "dynamic";
+	const deletable = view._type !== "dynamic";
+	const queue = Queue.from(view.nodes.reduce((acc, node) => {
+		nodeLookup.set(node.id, node);
+		if (!node.parent) acc.push({
+			node,
+			parent: null
+		});
+		return acc;
+	}, []));
+	let visiblePredicate = (_nodeOrEdge) => true;
+	if (opts.where) try {
+		const filterablePredicate = whereOperatorAsPredicate(opts.where);
+		visiblePredicate = (i) => filterablePredicate({
+			...pick(i, ["tags", "kind"]),
+			..."source" in i ? { source: nodeById(i.source) } : i,
+			..."target" in i ? { target: nodeById(i.target) } : i
+		});
+	} catch (e) {
+		console.error("Error in where filter:", e);
+	}
+	const ns = "";
+	const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+	let next;
+	while (next = queue.dequeue()) {
+		const { node, parent } = next;
+		const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
+		if (isCompound) for (const child of node.children) queue.enqueue({
+			node: nodeById(child),
+			parent: node
+		});
+		const position = {
+			x: node.x,
+			y: node.y
+		};
+		if (parent) {
+			position.x -= parent.x;
+			position.y -= parent.y;
+		}
+		const base = {
+			id: ns + node.id,
+			deletable,
+			position,
+			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+			style: {
+				width: node.width,
+				height: node.height
+			},
+			ariaLabel: nodeAriaLabel(node),
+			initialWidth: node.width,
+			initialHeight: node.height,
+			hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
+			...parent && { parentId: ns + parent.id }
+		};
+		const modelFqn = node.modelRef ?? null;
+		const deploymentFqn = node.deploymentRef ?? null;
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		/**
+		* Compound nodes
+		*/
+		if (isCompound) {
+			const compoundData = {
+				viewId: view.id,
+				id: node.id,
+				title: node.title,
+				color: node.color,
+				shape: node.shape,
+				style: node.style,
+				depth: node.depth ?? 0,
+				icon: node.icon ?? "none",
+				tags: node.tags ?? null,
+				x: node.x,
+				y: node.y,
+				drifts: node.drifts ?? null,
+				notes: node.notes,
+				viewLayoutDir
+			};
+			switch (true) {
+				case node.kind === GroupElementKind:
+					xynodes.push({
+						...base,
+						type: "view-group",
+						data: {
+							isViewGroup: true,
+							...compoundData
+						}
+					});
+					break;
+				case !!deploymentFqn:
+					xynodes.push({
+						...base,
+						type: "compound-deployment",
+						data: {
+							...compoundData,
+							...navigateTo,
+							deploymentFqn,
+							modelFqn
+						}
+					});
+					break;
+				default:
+					invariant(!!modelFqn, "ModelRef expected");
+					xynodes.push({
+						...base,
+						type: "compound-element",
+						data: {
+							...compoundData,
+							...navigateTo,
+							modelFqn
+						}
+					});
+			}
+			continue;
+		}
+		if (!modelFqn && !deploymentFqn) {
+			console.error("Invalid node", node);
+			throw new Error("Element should have either modelRef or deploymentRef");
+		}
+		const leafNodeData = {
+			viewId: view.id,
+			id: node.id,
+			title: node.title,
+			technology: node.technology ?? null,
+			description: node.description ?? null,
+			height: node.height,
+			width: node.width,
+			level: node.level,
+			color: node.color,
+			shape: node.shape,
+			style: node.style,
+			icon: node.icon ?? null,
+			tags: node.tags,
+			notes: node.notes,
+			x: node.x,
+			y: node.y,
+			isMultiple: node.style?.multiple ?? false,
+			drifts: node.drifts ?? null,
+			viewLayoutDir
+		};
+		switch (true) {
+			case !!deploymentFqn:
+				xynodes.push({
+					...base,
+					type: "deployment",
+					data: {
+						...leafNodeData,
+						...navigateTo,
+						deploymentFqn,
+						modelFqn
+					}
+				});
+				break;
+			default:
+				invariant(!!modelFqn, "ModelRef expected");
+				xynodes.push({
+					...base,
+					type: "element",
+					data: {
+						...leafNodeData,
+						...navigateTo,
+						modelFqn
+					}
+				});
+		}
+	}
+	let stepnum = 1;
+	for (const edge of view.edges) {
+		const source = edge.source;
+		const target = edge.target;
+		const id = ns + edge.id;
+		if (!hasAtLeast(edge.points, 2)) {
+			console.error("edge should have at least 2 points", edge);
+			continue;
+		}
+		xyedges.push({
+			id,
+			type: "relationship",
+			source: ns + source,
+			target: ns + target,
+			ariaLabel: edgeAriaLabel(edge, nodeById(source), nodeById(target)),
+			zIndex: ZIndexes.Edge,
+			hidden: !visiblePredicate(edge),
+			deletable,
+			data: {
+				id: edge.id,
+				label: edge.label,
+				technology: edge.technology,
+				notes: edge.notes ?? null,
+				navigateTo: edge.navigateTo,
+				controlPoints: edge.controlPoints ?? null,
+				labelBBox: edge.labelBBox ?? null,
+				isLabelCustomized: edge.isLabelCustomized ?? false,
+				labelXY: null,
+				points: edge.points,
+				color: edge.color ?? "gray",
+				line: edge.line ?? "dashed",
+				dir: edge.dir ?? "forward",
+				head: edge.head ?? "normal",
+				tail: edge.tail ?? "none",
+				astPath: edge.astPath,
+				drifts: edge.drifts ?? null,
+				...isDynamic && isStepPath(edge.id) && { stepnum: stepnum++ }
+			},
+			interactionWidth: 20
+		});
+	}
+	return {
+		xynodes,
+		xyedges
+	};
+}
+
+//#endregion
+export { diagramToXY };

package/dist/likec4diagram/xyflow-graph/graph-view-to-xy.mjs

@@ -0,0 +1,176 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../../base/const.mjs";
+import { readableText } from "../../utils/readableText.mjs";
+import { pick } from "remeda";
+import { nonNullable, whereOperatorAsPredicate } from "@likec4/core";
+
+//#region src/likec4diagram/xyflow-graph/graph-view-to-xy.ts
+/**
+* Diameter (in px) of the circle used to represent an element in "graph" display variant.
+*/
+const GraphNodeDiameter = 20;
+/**
+* Joins a list of optional sentence fragments into one screen-reader label, ending each
+* fragment with a period.
+*/
+function sentence(parts) {
+	return parts.filter((part) => !!part).map((part) => part.endsWith(".") ? part : `${part}.`).join(" ");
+}
+/**
+* Screen-reader label for a graph-mode circle: title, technology, and description.
+*/
+function nodeAriaLabel(node) {
+	const title = readableText(node.title) ?? node.id;
+	const description = readableText(node.description);
+	return sentence([
+		title,
+		node.technology && `Technology: ${node.technology}`,
+		description && `Description: ${description}`
+	]);
+}
+/**
+* Screen-reader label for a graph-mode edge: source, target, and technology.
+*/
+function edgeAriaLabel(edge, source, target) {
+	return sentence([`Relationship from ${readableText(source.title) ?? source.id} to ${readableText(target.title) ?? target.id}`, edge.technology && `Technology: ${edge.technology}`]);
+}
+/**
+* Converts an element view to a compact "graph" rendering:
+* - compound nodes are flattened away, only leaf elements are rendered
+* - each leaf element becomes a fixed-size circle, centered at its layouted position
+*   (so switching between "diagram" and "graph" variants preserves the mental map)
+* - edges are straight lines between circle centers, with labels hidden
+*/
+function graphViewToXY(opts) {
+	const { view } = opts;
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	for (const node of view.nodes) nodeLookup.set(node.id, node);
+	const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+	let visiblePredicate = (_nodeOrEdge) => true;
+	if (opts.where) try {
+		const filterablePredicate = whereOperatorAsPredicate(opts.where);
+		visiblePredicate = (i) => filterablePredicate({
+			...pick(i, ["tags", "kind"]),
+			..."source" in i ? { source: nodeById(i.source) } : i,
+			..."target" in i ? { target: nodeById(i.target) } : i
+		});
+	} catch (e) {
+		console.error("Error in where filter:", e);
+	}
+	const radius = 20 / 2;
+	const isLeaf = (node) => node.children.length === 0;
+	for (const node of view.nodes) {
+		if (!isLeaf(node)) continue;
+		const modelFqn = node.modelRef ?? null;
+		const deploymentFqn = node.deploymentRef ?? null;
+		if (!modelFqn && !deploymentFqn) continue;
+		const id = node.id;
+		const centerX = node.x + node.width / 2;
+		const centerY = node.y + node.height / 2;
+		xynodes.push({
+			id,
+			type: "graph-element",
+			deletable: false,
+			selectable: true,
+			position: {
+				x: centerX - radius,
+				y: centerY - radius
+			},
+			zIndex: ZIndexes.Element,
+			style: {
+				width: 20,
+				height: 20
+			},
+			ariaLabel: nodeAriaLabel(node),
+			initialWidth: 20,
+			initialHeight: 20,
+			hidden: !visiblePredicate(node),
+			data: {
+				viewId: view.id,
+				id: node.id,
+				title: node.title,
+				technology: node.technology ?? null,
+				description: node.description ?? null,
+				notes: node.notes,
+				color: node.color,
+				shape: node.shape,
+				style: node.style,
+				level: node.level,
+				x: node.x,
+				y: node.y,
+				width: node.width,
+				height: node.height,
+				icon: node.icon ?? null,
+				tags: node.tags,
+				isMultiple: node.style?.multiple ?? false,
+				drifts: node.drifts ?? null,
+				modelFqn,
+				deploymentFqn,
+				navigateTo: node.navigateTo ?? null
+			}
+		});
+	}
+	for (const edge of view.edges) {
+		const source = nodeLookup.get(edge.source);
+		const target = nodeLookup.get(edge.target);
+		if (!source || !target || !isLeaf(source) || !isLeaf(target)) continue;
+		const sourceCenter = {
+			x: source.x + source.width / 2,
+			y: source.y + source.height / 2
+		};
+		const targetCenter = {
+			x: target.x + target.width / 2,
+			y: target.y + target.height / 2
+		};
+		const p0 = [sourceCenter.x, sourceCenter.y];
+		const p3 = [targetCenter.x, targetCenter.y];
+		const p1 = [p0[0] + (p3[0] - p0[0]) / 3, p0[1] + (p3[1] - p0[1]) / 3];
+		const p2 = [p0[0] + (p3[0] - p0[0]) * 2 / 3, p0[1] + (p3[1] - p0[1]) * 2 / 3];
+		const id = edge.id;
+		xyedges.push({
+			id,
+			type: "relationship",
+			source: edge.source,
+			target: edge.target,
+			ariaLabel: edgeAriaLabel(edge, source, target),
+			zIndex: ZIndexes.Edge,
+			hidden: !visiblePredicate(edge),
+			deletable: false,
+			selectable: true,
+			data: {
+				id: edge.id,
+				label: null,
+				technology: edge.technology,
+				notes: edge.notes ?? null,
+				navigateTo: edge.navigateTo,
+				controlPoints: [],
+				labelBBox: null,
+				isLabelCustomized: false,
+				labelXY: null,
+				points: [
+					p0,
+					p1,
+					p2,
+					p3
+				],
+				color: edge.color ?? "gray",
+				line: edge.line ?? "dashed",
+				dir: edge.dir ?? "forward",
+				head: edge.head ?? "normal",
+				tail: edge.tail ?? "none",
+				astPath: edge.astPath,
+				drifts: edge.drifts ?? null
+			},
+			interactionWidth: 20
+		});
+	}
+	return {
+		xynodes,
+		xyedges
+	};
+}
+
+//#endregion
+export { graphViewToXY };

package/dist/likec4diagram/xyflow-graph/useGraphForceSimulation.mjs

@@ -0,0 +1,128 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useDiagram } from "../../hooks/safeContext.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from "d3-force";
+
+//#region src/likec4diagram/xyflow-graph/useGraphForceSimulation.ts
+const radius = 20 / 2;
+/**
+* Picks the visible graph-element nodes and visible relationship edges out of a diagram's
+* xynodes/xyedges, plus a stable string key identifying that exact topology (node ids, and
+* edge ids with their endpoints).
+*
+* Both hidden nodes and hidden edges (e.g. dimmed out by a `where`/search filter) are excluded -
+* an invisible relationship must not keep pulling visible nodes together via a d3-force link.
+*
+* Exported as a pure function so it can be unit-tested without a render harness - this package
+* has no `renderHook` infrastructure, so hook effects themselves stay untested; this is the part
+* of the hook worth covering in isolation.
+*/
+function selectGraphTopology(xynodes, xyedges) {
+	const graphNodes = xynodes.filter((n) => n.type === "graph-element" && !n.hidden);
+	const graphEdges = xyedges.filter((e) => e.type === "relationship" && !e.hidden);
+	return {
+		graphNodes,
+		graphEdges,
+		topologyKey: graphNodes.map((n) => n.id).sort().join(",") + "|" + graphEdges.map((e) => `${e.id}:${e.source}-${e.target}`).sort().join(",")
+	};
+}
+/**
+* Builds the d3-force graph (nodes seeded at their current center, links between existing nodes
+* only) from the visible graph-element nodes/edges returned by {@link selectGraphTopology}.
+*
+* Dropping links with a dangling endpoint (e.g. the other side was hidden or belonged to a
+* flattened-away compound) is what would otherwise make d3-force's forceLink throw.
+*/
+function buildSimGraph(graphNodes, graphEdges) {
+	const nodes = graphNodes.map((xynode) => {
+		const homeX = xynode.position.x + radius;
+		const homeY = xynode.position.y + radius;
+		return {
+			id: xynode.id,
+			x: homeX,
+			y: homeY,
+			homeX,
+			homeY
+		};
+	});
+	const nodeIds = new Set(nodes.map((n) => n.id));
+	return {
+		nodes,
+		links: graphEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target)).map((e) => ({
+			source: e.source,
+			target: e.target
+		}))
+	};
+}
+/**
+* Runs a d3-force simulation for the "graph" display variant of element views, so switching
+* into it (and dragging nodes around) feels alive - nodes repel each other, edges act as
+* springs, and everything settles back with a bit of bounce (similar to Structurizr's Explore).
+*
+* Positions are pushed through the same `xyflow.applyChanges` channel as a regular node drag,
+* so they stay in sync with the rest of the diagram state instead of drifting out of it.
+*/
+function useGraphForceSimulation({ enabled, nodes: xynodes, edges: xyedges }) {
+	const diagram = useDiagram();
+	const simulationRef = useRef(void 0);
+	const { graphNodes, graphEdges, topologyKey } = useMemo(() => selectGraphTopology(xynodes, xyedges), [xynodes, xyedges]);
+	useEffect(() => {
+		if (!enabled || graphNodes.length === 0) {
+			simulationRef.current?.stop();
+			simulationRef.current = void 0;
+			return;
+		}
+		const { nodes, links } = buildSimGraph(graphNodes, graphEdges);
+		const simulation = forceSimulation(nodes).force("charge", forceManyBody().strength(-150)).force("link", forceLink(links).id((n) => n.id).distance(80).strength(.4)).force("collide", forceCollide(radius + 10)).force("x", forceX((n) => n.homeX).strength(.06)).force("y", forceY((n) => n.homeY).strength(.06)).alphaDecay(.02).on("tick", () => {
+			diagram.send({
+				type: "xyflow.applyChanges",
+				nodes: nodes.map((n) => ({
+					id: n.id,
+					type: "position",
+					position: {
+						x: (n.x ?? n.homeX) - radius,
+						y: (n.y ?? n.homeY) - radius
+					},
+					dragging: n.fx != null || n.fy != null
+				}))
+			});
+		});
+		simulationRef.current = simulation;
+		return () => {
+			simulation.stop();
+			simulationRef.current = void 0;
+		};
+	}, [enabled, topologyKey]);
+	return useMemo(() => ({
+		onNodeDragStart: (_event, xynode) => {
+			const simulation = simulationRef.current;
+			if (!simulation || xynode.type !== "graph-element") return;
+			const simNode = simulation.nodes().find((n) => n.id === xynode.id);
+			if (!simNode) return;
+			simNode.fx = xynode.position.x + radius;
+			simNode.fy = xynode.position.y + radius;
+			simulation.alphaTarget(.3).restart();
+		},
+		onNodeDrag: (_event, xynode) => {
+			const simulation = simulationRef.current;
+			if (!simulation || xynode.type !== "graph-element") return;
+			const simNode = simulation.nodes().find((n) => n.id === xynode.id);
+			if (!simNode) return;
+			simNode.fx = xynode.position.x + radius;
+			simNode.fy = xynode.position.y + radius;
+		},
+		onNodeDragStop: (_event, xynode) => {
+			const simulation = simulationRef.current;
+			if (!simulation || xynode.type !== "graph-element") return;
+			const simNode = simulation.nodes().find((n) => n.id === xynode.id);
+			if (simNode) {
+				simNode.fx = null;
+				simNode.fy = null;
+			}
+			simulation.alphaTarget(0);
+		}
+	}), []);
+}
+
+//#endregion
+export { buildSimGraph, selectGraphTopology, useGraphForceSimulation };

package/dist/likec4diagram/xyflow-sequence/const.mjs

@@ -0,0 +1,14 @@
+//#region src/likec4diagram/xyflow-sequence/const.ts
+const SeqZIndex = {
+	compound: 1,
+	subflows: 10,
+	actor: 50,
+	step: 100
+};
+const SeqParallelAreaColor = {
+	default: "gray",
+	active: "amber"
+};
+
+//#endregion
+export { SeqParallelAreaColor, SeqZIndex };