@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,314 +1,285 @@
-import { treeFromElements } from '@likec4/core/compute-view';
-import { exact, preferSummary } from '@likec4/core/types';
-import dagre from '@dagrejs/dagre';
-import { ifind, DefaultMap, invariant } from '@likec4/core/utils';
-import { pipe, filter, mapToObj, omit, find, map, tap, reduce, sortBy, prop } from 'remeda';
-
-const Sizes = {
-  dagre: {
-    ranksep: 60,
-    nodesep: 35,
-    edgesep: 25
-  },
-  edgeLabel: {
-    width: 220,
-    height: 55
-    // minlen: 1,
-  },
-  nodeWidth: 330,
-  nodeHeight: 180,
-  compound: {
-    labelHeight: 2,
-    paddingTop: 50,
-    paddingBottom: 32
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { filter, find, map, mapToObj, omit, pipe, prop, reduce, sortBy, tap } from "remeda";
+import { DefaultMap, ifind, invariant } from "@likec4/core/utils";
+import { treeFromElements } from "@likec4/core/compute-view";
+import dagre from "@dagrejs/dagre";
+import { exact, preferSummary } from "@likec4/core/types";
+//#region src/overlays/relationship-details/layout.ts
+/**
+* All constants related to the layout
+*/
+var 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 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";
+var 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);
-      const graph = graphNodes.get(element.id);
-      return {
-        element,
-        graph
-      };
-    },
-    graphNodes
-  };
+	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, {
-    // disableOptimalOrderHeuristic: true,
-  });
-  return (nodeId) => {
-    const node = g.node(nodeId);
-    const { x, y, width, height } = node;
-    return {
-      position: {
-        x: x - Math.round(width / 2),
-        y: y - Math.round(height / 2)
-      },
-      width,
-      height
-    };
-  };
+	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), 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 edgeCount2 = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
-    if (edgeCount2 > 3) {
-      node.height = node.height + (edgeCount2 - 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,
-    // Compound nodes have different portId
-    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: minY2, maxY }) => {
-        const {
-          position: { x },
-          width
-        } = dagreBounds(nodeId);
-        minY2 = minY2 - Sizes.compound.paddingTop;
-        maxY = maxY + Sizes.compound.paddingBottom;
-        return {
-          position: {
-            x,
-            y: minY2
-          },
-          width,
-          height: maxY - minY2
-        };
-      }
-    );
-  }
-  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, (e2) => e2.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;
-    }, [])
-  };
+	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 };