@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/relationship-details/layout-to-xyflow.mjs

@@ -0,0 +1,124 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../../base/const.mjs";
+import { hasAtLeast } from "remeda";
+import { Queue, nonNullable } from "@likec4/core";
+
+//#region src/overlays/relationship-details/layout-to-xyflow.ts
+function layoutResultToXYFlow(layout) {
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const queue = Queue.from(layout.nodes.reduce((acc, node) => {
+		nodeLookup.set(node.id, node);
+		if (!node.parent) acc.push({
+			node,
+			parent: null
+		});
+		return acc;
+	}, []));
+	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);
+		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 id = node.id;
+		const base = {
+			id,
+			draggable: false,
+			deletable: false,
+			position,
+			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+			style: {
+				width: node.width,
+				height: node.height
+			},
+			initialWidth: node.width,
+			initialHeight: node.height,
+			...parent && { parentId: parent.id }
+		};
+		const fqn = node.modelRef;
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		switch (true) {
+			case isCompound:
+				xynodes.push({
+					...base,
+					type: "compound",
+					data: {
+						id,
+						column: node.column,
+						title: node.title,
+						color: node.color,
+						style: node.style,
+						depth: node.depth ?? 0,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						fqn,
+						...navigateTo
+					}
+				});
+				break;
+			default: xynodes.push({
+				...base,
+				type: "element",
+				data: {
+					id,
+					column: node.column,
+					fqn,
+					title: node.title,
+					technology: node.technology,
+					description: node.description ?? null,
+					height: node.height,
+					width: node.width,
+					color: node.color,
+					shape: node.shape,
+					icon: node.icon ?? "none",
+					ports: node.ports,
+					style: node.style,
+					tags: node.tags,
+					...navigateTo
+				}
+			});
+		}
+	}
+	for (const { source, target, relationId, label, technology, description, navigateTo = null, color = "gray", line = "dashed", ...edge } of layout.edges) {
+		const id = edge.id;
+		xyedges.push({
+			id,
+			type: "relationship",
+			source,
+			target,
+			sourceHandle: edge.sourceHandle,
+			targetHandle: edge.targetHandle,
+			deletable: false,
+			data: {
+				relationId,
+				label,
+				color,
+				navigateTo,
+				line,
+				description: description ?? null,
+				...technology && { technology }
+			}
+		});
+	}
+	return {
+		xynodes,
+		xyedges,
+		bounds: layout.bounds
+	};
+}
+
+//#endregion
+export { layoutResultToXYFlow };

package/dist/overlays/relationship-details/layout.d.mts

@@ -0,0 +1,27 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipDetailsTypes } from "./_types.mjs";
+import "./compute.mjs";
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, MarkdownOrString, RelationId } from "@likec4/core/types";
+import { LikeC4ViewModel } from "@likec4/core/model";
+import { Except } from "type-fest";
+//#region src/overlays/relationship-details/layout.d.ts
+export type LayoutResult = {
+  nodes: LayoutResult.Node[];
+  edges: LayoutResult.Edge[];
+  bounds: DiagramView['bounds'];
+};
+export declare namespace LayoutResult {
+  type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    description: MarkdownOrString | null;
+    modelRef: Fqn;
+    column: RelationshipDetailsTypes.Column;
+    ports: RelationshipDetailsTypes.Ports;
+  };
+  type Edge = Except<DiagramEdge, 'relations' | 'description'> & {
+    relationId: RelationId;
+    sourceHandle: string;
+    targetHandle: string;
+    description: MarkdownOrString | null;
+  };
+}
+//#endregion

package/dist/overlays/relationship-details/layout.mjs

@@ -0,0 +1,287 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { filter, find, map, mapToObj, omit, pipe, prop, reduce, sortBy, tap } from "remeda";
+import { DefaultMap, ifind, invariant } from "@likec4/core/utils";
+import { exact, preferSummary } from "@likec4/core/types";
+import { treeFromElements } from "@likec4/core/compute-view";
+import dagre from "@dagrejs/dagre";
+
+//#region src/overlays/relationship-details/layout.ts
+/**
+* All constants related to the layout
+*/
+const Sizes = {
+	dagre: {
+		ranksep: 60,
+		nodesep: 35,
+		edgesep: 25
+	},
+	edgeLabel: {
+		width: 220,
+		height: 55
+	},
+	nodeWidth: 330,
+	nodeHeight: 180,
+	spacerHeight: 0,
+	compound: {
+		labelHeight: 2,
+		paddingTop: 50,
+		paddingBottom: 32
+	}
+};
+function createGraph() {
+	const g = new dagre.graphlib.Graph({
+		directed: true,
+		compound: true,
+		multigraph: true
+	});
+	g.setGraph({
+		...Sizes.dagre,
+		rankdir: "LR"
+	});
+	g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
+	g.setDefaultNodeLabel(() => ({}));
+	return g;
+}
+const PortSuffix = "-port";
+function createNodes(column, elements, g) {
+	const graphNodes = new DefaultMap((key) => ({
+		id: `${column}-${key}`,
+		portId: `${column}-${key}`
+	}));
+	const tree = treeFromElements(elements);
+	for (const element of tree.sorted) {
+		const isCompound = tree.children(element).length > 0;
+		const fqn = element.id;
+		const id = `${column}-${fqn}`;
+		const portId = isCompound ? `${id}${PortSuffix}` : id;
+		graphNodes.set(fqn, {
+			id,
+			portId
+		});
+		g.setNode(id, {
+			column,
+			element,
+			isCompound,
+			portId,
+			inPorts: [],
+			outPorts: [],
+			width: Sizes.nodeWidth,
+			height: Sizes.nodeHeight
+		});
+		if (isCompound) {
+			g.setNode(portId, {
+				element,
+				portId,
+				isCompound,
+				inPorts: [],
+				outPorts: [],
+				width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+				height: Sizes.compound.labelHeight
+			});
+			g.setParent(portId, id);
+		}
+		const parent = tree.parent(element);
+		if (parent) g.setParent(id, `${column}-${parent.id}`);
+	}
+	return {
+		...tree,
+		byId: (id) => {
+			const element = tree.byId(id);
+			return {
+				element,
+				graph: graphNodes.get(element.id)
+			};
+		},
+		graphNodes
+	};
+}
+/**
+* Apply dagre layout to the graph
+* And return a function to get node bounds for xyflow
+*/
+function applyDagreLayout(g) {
+	dagre.layout(g, {});
+	return (nodeId) => {
+		const { x, y, width, height } = g.node(nodeId);
+		return {
+			position: {
+				x: x - Math.round(width / 2),
+				y: y - Math.round(height / 2)
+			},
+			width,
+			height
+		};
+	};
+}
+function layoutRelationshipDetails(data, scope) {
+	const g = createGraph();
+	const sources = createNodes("sources", data.sources, g);
+	const targets = createNodes("targets", data.targets, g);
+	const edges = Array.from(data.relationships).map((r) => {
+		const source = sources.byId(r.source.id).graph;
+		const target = targets.byId(r.target.id).graph;
+		const name = r.id;
+		g.node(source.id).outPorts.push(target.id);
+		g.node(target.id).inPorts.push(source.id);
+		g.setEdge(source.portId, target.portId, { ...Sizes.edgeLabel }, name);
+		return {
+			name,
+			source: source.id,
+			sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
+			target: target.id,
+			targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
+			relationship: r
+		};
+	});
+	const nodeIds = [...sources.graphNodes.values(), ...targets.graphNodes.values()];
+	for (const { id: nodeId } of nodeIds) {
+		const node = g.node(nodeId);
+		if (node.isCompound) continue;
+		const edgeCount = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
+		if (edgeCount > 3) node.height = node.height + (edgeCount - 4) * 14;
+	}
+	const edgeCount = g.edgeCount();
+	if (edgeCount > 5) for (const edge of g.edges()) g.setEdge(edge, {
+		...Sizes.edgeLabel,
+		width: edgeCount > 10 ? 800 : 400
+	});
+	const dagreBounds = applyDagreLayout(g);
+	const _calculatedNodeBounds = pipe(nodeIds, filter((n) => n.id === n.portId), mapToObj((n) => [n.id, dagreBounds(n.id)]));
+	function nodeBounds(nodeId) {
+		return _calculatedNodeBounds[nodeId] ??= pipe(g.children(nodeId) ?? [], filter((id) => !id.endsWith(PortSuffix)), map((id) => nodeBounds(id)), tap((bounds) => {
+			invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
+		}), reduce((acc, bounds) => {
+			return {
+				minY: Math.min(acc.minY, bounds.position.y),
+				maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
+			};
+		}, {
+			minY: Infinity,
+			maxY: -Infinity
+		}), ({ minY, maxY }) => {
+			const { position: { x }, width } = dagreBounds(nodeId);
+			minY = minY - Sizes.compound.paddingTop;
+			maxY = maxY + Sizes.compound.paddingBottom;
+			return {
+				position: {
+					x,
+					y: minY
+				},
+				width,
+				height: maxY - minY
+			};
+		});
+	}
+	function nodeLevel(nodeId) {
+		const parent = g.parent(nodeId);
+		if (parent) return nodeLevel(parent) + 1;
+		return 0;
+	}
+	function nodeDepth(nodeId) {
+		const children = g.children(nodeId) ?? [];
+		if (children.length === 0) return 0;
+		return 1 + Math.max(...children.map(nodeDepth));
+	}
+	const sortedPorts = (nodeId, type, ports) => {
+		return pipe(ports, map((port, index) => {
+			return {
+				port: nodeId + "_" + type + index,
+				topY: nodeBounds(port).position.y
+			};
+		}), sortBy(prop("topY")), map(prop("port")));
+	};
+	let minX = 0;
+	let minY = 0;
+	const nodes = nodeIds.map(({ id }) => {
+		const { element, inPorts, outPorts, column } = g.node(id);
+		let { position, width, height } = nodeBounds(id);
+		const parentId = g.parent(id);
+		const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
+		minX = Math.min(minX, position.x);
+		minY = Math.min(minY, position.y);
+		const navigateTo = scope ? ifind(element.scopedViews(), (v) => v.id !== scope.id)?.id ?? null : null;
+		const inheritFromNode = scope?.findNodeWithElement(element.id);
+		const scopedAncestor = scope && !inheritFromNode ? ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))?.id : null;
+		const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor));
+		return exact({
+			id,
+			parent: parentId ?? null,
+			x: position.x,
+			y: position.y,
+			title: element.title,
+			description: preferSummary(element.$element) ?? null,
+			technology: element.technology,
+			tags: [...element.tags],
+			links: null,
+			color: inheritFromNodeOrAncestor?.color ?? element.color,
+			shape: inheritFromNode?.shape ?? element.shape,
+			icon: inheritFromNode?.icon ?? element.icon ?? "none",
+			modelRef: element.id,
+			kind: element.kind,
+			level: nodeLevel(id),
+			labelBBox: {
+				x: position.x,
+				y: position.y,
+				width,
+				height
+			},
+			style: omit({
+				...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
+				...element.$element.style
+			}, [
+				"shape",
+				"color",
+				"icon"
+			]),
+			navigateTo,
+			...children.length > 0 && { depth: nodeDepth(id) },
+			children,
+			width,
+			height,
+			column,
+			ports: {
+				in: sortedPorts(id, "in", inPorts),
+				out: sortedPorts(id, "out", outPorts)
+			}
+		});
+	});
+	return {
+		bounds: {
+			x: Math.min(minX, 0),
+			y: Math.min(minY, 0),
+			width: g.graph().width ?? 100,
+			height: g.graph().height ?? 100
+		},
+		nodes,
+		edges: g.edges().reduce((acc, e) => {
+			const edge = g.edge(e);
+			const ename = e.name;
+			if (!ename) return acc;
+			const { name, source, target, relationship, sourceHandle, targetHandle } = find(edges, (e) => e.name === ename);
+			const label = relationship.title ?? "untitled";
+			const navigateTo = relationship.navigateTo?.id ?? null;
+			const description = preferSummary(relationship.$relationship) ?? null;
+			const technology = relationship.technology ?? null;
+			acc.push({
+				id: name,
+				source,
+				sourceHandle,
+				target,
+				targetHandle,
+				label,
+				color: relationship.color,
+				description,
+				...navigateTo && { navigateTo },
+				...technology && { technology },
+				points: edge.points.map((p) => [p.x, p.y]),
+				line: relationship.line,
+				relationId: relationship.id,
+				parent: null
+			});
+			return acc;
+		}, [])
+	};
+}
+
+//#endregion
+export { layoutRelationshipDetails };