@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,230 +1,219 @@
-import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, invariant } from '@likec4/core';
-import { pick, hasAtLeast } from 'remeda';
-import { ZIndexes } from '../../base/const.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { ZIndexes } from "../../base/const.js";
+import { hasAtLeast, pick } from "remeda";
+import { GroupElementKind, Queue, invariant, nonNullable, whereOperatorAsPredicate } from "@likec4/core";
+//#region src/likec4diagram/xyflow-diagram/diagram-view.ts
+/**
+* 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 = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
-  const viewLayoutDir = view.autoLayout?.direction ?? "TB";
-  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 id = ns + node.id;
-    const base = {
-      id,
-      deletable: false,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      style: {
-        width: node.width,
-        height: node.height
-      },
-      initialWidth: node.width,
-      initialHeight: node.height,
-      hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
-      ...parent && {
-        parentId: ns + parent.id
-      }
-    };
-    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
-    };
-    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
-    };
-    if (node.kind === GroupElementKind) {
-      xynodes.push({
-        ...base,
-        type: "view-group",
-        data: {
-          isViewGroup: true,
-          ...compoundData
-        }
-      });
-      continue;
-    }
-    const modelFqn = node.modelRef ?? null;
-    const deploymentFqn = node.deploymentRef ?? null;
-    if (!modelFqn && !deploymentFqn) {
-      console.error("Invalid node", node);
-      throw new Error("Element should have either modelRef or deploymentRef");
-    }
-    const navigateTo = { navigateTo: node.navigateTo ?? null };
-    switch (true) {
-      case (isCompound && !!deploymentFqn): {
-        xynodes.push(
-          {
-            ...base,
-            type: "compound-deployment",
-            data: {
-              ...compoundData,
-              ...navigateTo,
-              deploymentFqn,
-              modelFqn
-            }
-          }
-        );
-        break;
-      }
-      case isCompound: {
-        invariant(!!modelFqn, "ModelRef expected");
-        xynodes.push(
-          {
-            ...base,
-            type: "compound-element",
-            data: {
-              ...compoundData,
-              ...navigateTo,
-              modelFqn
-            }
-          }
-        );
-        break;
-      }
-      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
-            }
-          }
-        );
-      }
-    }
-  }
-  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,
-      zIndex: ZIndexes.Edge,
-      hidden: !visiblePredicate(edge),
-      deletable: false,
-      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,
-        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
-      },
-      interactionWidth: 20
-    });
-  }
-  return {
-    xynodes,
-    xyedges
-  };
+	const { view } = opts;
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const viewLayoutDir = view.autoLayout?.direction ?? "TB";
+	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: false,
+			position,
+			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+			style: {
+				width: node.width,
+				height: node.height
+			},
+			initialWidth: node.width,
+			initialHeight: node.height,
+			hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
+			...parent && { parentId: ns + parent.id }
+		};
+		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
+		};
+		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
+		};
+		if (node.kind === GroupElementKind) {
+			xynodes.push({
+				...base,
+				type: "view-group",
+				data: {
+					isViewGroup: true,
+					...compoundData
+				}
+			});
+			continue;
+		}
+		const modelFqn = node.modelRef ?? null;
+		const deploymentFqn = node.deploymentRef ?? null;
+		if (!modelFqn && !deploymentFqn) {
+			console.error("Invalid node", node);
+			throw new Error("Element should have either modelRef or deploymentRef");
+		}
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		switch (true) {
+			case isCompound && !!deploymentFqn:
+				xynodes.push({
+					...base,
+					type: "compound-deployment",
+					data: {
+						...compoundData,
+						...navigateTo,
+						deploymentFqn,
+						modelFqn
+					}
+				});
+				break;
+			case isCompound:
+				invariant(!!modelFqn, "ModelRef expected");
+				xynodes.push({
+					...base,
+					type: "compound-element",
+					data: {
+						...compoundData,
+						...navigateTo,
+						modelFqn
+					}
+				});
+				break;
+			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
+					}
+				});
+		}
+	}
+	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,
+			zIndex: ZIndexes.Edge,
+			hidden: !visiblePredicate(edge),
+			deletable: false,
+			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,
+				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
+			},
+			interactionWidth: 20
+		});
+	}
+	return {
+		xynodes,
+		xyedges
+	};
 }
-
+//#endregion
 export { diagramToXY };

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

@@ -1,9 +1,13 @@
-const SeqZIndex = {
-  parallel: 1,
-  actor: 10};
-const SeqParallelAreaColor = {
-  default: "gray",
-  active: "amber"
+//#region src/likec4diagram/xyflow-sequence/const.ts
+var SeqZIndex = {
+	compound: 0,
+	parallel: 1,
+	actor: 10,
+	step: 20
 };
-
+var SeqParallelAreaColor = {
+	default: "gray",
+	active: "amber"
+};
+//#endregion
 export { SeqParallelAreaColor, SeqZIndex };