@likec4/diagram 1.58.0 → 1.59.0

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

@@ -1,8 +1,49 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { ZIndexes } from "../../base/const.js";
+import { readableText } from "../../utils/readableText.js";
 import { hasAtLeast, pick } from "remeda";
-import { GroupElementKind, Queue, invariant, nonNullable, whereOperatorAsPredicate } from "@likec4/core";
+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
@@ -17,6 +58,7 @@ function diagramToXY(opts) {
 	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);
@@ -64,27 +106,76 @@ function diagramToXY(opts) {
 				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 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 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,
@@ -106,49 +197,7 @@ function diagramToXY(opts) {
 			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,
@@ -174,6 +223,7 @@ function diagramToXY(opts) {
 				});
 		}
 	}
+	let stepnum = 1;
 	for (const edge of view.edges) {
 		const source = edge.source;
 		const target = edge.target;
@@ -187,6 +237,7 @@ function diagramToXY(opts) {
 			type: "relationship",
 			source: ns + source,
 			target: ns + target,
+			ariaLabel: edgeAriaLabel(edge, nodeById(source), nodeById(target)),
 			zIndex: ZIndexes.Edge,
 			hidden: !visiblePredicate(edge),
 			deletable,
@@ -207,7 +258,8 @@ function diagramToXY(opts) {
 				head: edge.head ?? "normal",
 				tail: edge.tail ?? "none",
 				astPath: edge.astPath,
-				drifts: edge.drifts ?? null
+				drifts: edge.drifts ?? null,
+				...isDynamic && isStepPath(edge.id) && { stepnum: stepnum++ }
 			},
 			interactionWidth: 20
 		});

package/dist/likec4diagram/xyflow-sequence/_types.d.ts

@@ -1,6 +1,14 @@
-import { DiagramEdge, DiagramNode, EdgeId } from '@likec4/core/types';
+import { BBox, DiagramEdge, DiagramNode, NodeId, StepPath, ViewId } from '@likec4/core/types';
+export type Spacing = number | Partial<{
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    x: number;
+    y: number;
+}>;
 export type Step = {
-    id: EdgeId;
+    id: StepPath;
     from: {
         column: number;
         row: number;
@@ -18,7 +26,7 @@ export type Step = {
     };
     isSelfLoop: boolean;
     isBack: boolean;
-    parallelPrefix: string | null;
+    parent: StepPath | null;
     offset: number;
     edge: DiagramEdge;
 };
@@ -28,8 +36,7 @@ export type Compound = {
     to: DiagramNode;
     nested: Compound[];
 };
-export type ParallelRect = {
-    parallelPrefix: string;
+export type Rect = {
     min: {
         column: number;
         row: number;
@@ -39,3 +46,46 @@ export type ParallelRect = {
         row: number;
     };
 };
+export type ParallelRect = Rect & {
+    parallelPrefix: string;
+};
+export interface SequenceActorStepPort {
+    id: string;
+    cx: number;
+    cy: number;
+    height: number;
+    type: 'target' | 'source';
+    position: 'left' | 'right' | 'top' | 'bottom';
+    hidden?: boolean;
+}
+export interface SequenceActor {
+    id: NodeId;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    ports: Array<SequenceActorStepPort>;
+}
+export interface SequenceCompound {
+    id: NodeId;
+    origin: NodeId;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+}
+export interface SequenceParallelArea {
+    parallelPrefix: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SequenceViewLayout {
+    id: ViewId;
+    actors: Array<SequenceActor>;
+    compounds: Array<SequenceCompound>;
+    parallelAreas: Array<SequenceParallelArea>;
+    bounds: BBox;
+}

package/dist/likec4diagram/xyflow-sequence/const.d.ts

@@ -1,13 +1,13 @@
-export declare const ACTOR_GAP = 60;
-export declare const COLUMN_GAP = 32;
-export declare const MIN_ROW_HEIGHT = 80;
-export declare const PORT_HEIGHT = 32;
+export declare const ACTOR_GAP = 80;
+export declare const COLUMN_GAP = 50;
+export declare const MIN_ROW_HEIGHT = 100;
+export declare const PORT_HEIGHT = 24;
 export declare const STEP_LABEL_MARGIN = 50;
 export declare const FIRST_STEP_OFFSET = 30;
 export declare const CONTINUOUS_OFFSET = 22;
 export declare const SeqZIndex: {
     compound: number;
-    parallel: number;
+    subflows: number;
     actor: number;
     step: number;
 };

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

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

package/dist/likec4diagram/xyflow-sequence/layouter.d.ts

@@ -1,15 +1,31 @@
-import { BBox, DiagramNode, NonEmptyArray } from '@likec4/core/types';
+import { BBox, DiagramNode, DynamicViewFlow, NonEmptyArray, StepPath } from '@likec4/core/types';
 import { Compound, Step } from './_types';
+import * as kiwi from '@lume/kiwi';
+export interface BBoxVars {
+    x1: kiwi.Expression | kiwi.Variable;
+    y1: kiwi.Expression | kiwi.Variable;
+    x2: kiwi.Expression | kiwi.Variable;
+    y2: kiwi.Expression | kiwi.Variable;
+}
+export declare const Strength: {
+    required: number;
+    strong: number;
+    medium: number;
+    soft: number;
+    weak: number;
+};
 export declare class SequenceViewLayouter {
     #private;
-    constructor({ actors, steps, compounds, }: {
+    constructor({ actors, steps, compounds, flow, collapsedFlows, }: {
         actors: NonEmptyArray<DiagramNode>;
         steps: Array<Step>;
         compounds: Array<Compound>;
+        flow: DynamicViewFlow;
+        collapsedFlows: StepPath[];
     });
-    getParallelBoxes(): Array<BBox & {
-        parallelPrefix: string;
-    }>;
+    getSubflowAreas(): Array<{
+        id: StepPath;
+    } & BBox>;
     getActorBox(actor: DiagramNode): BBox;
     getCompoundBoxes(): Array<BBox & {
         node: DiagramNode;
@@ -20,6 +36,7 @@ export declare class SequenceViewLayouter {
         cy: number;
         height: number;
     };
+    isStepCollapsed(step: Step): boolean;
     getViewBounds(): {
         x: number;
         y: number;
@@ -29,9 +46,16 @@ export declare class SequenceViewLayouter {
     private actorBox;
     private addActors;
     private addStep;
-    private addParallelRect;
+    /**
+     * Recursively adds a compound and its nested compounds to the layout.
+     * Also updates offsets of the actor boxes to accommodate the compound.
+     */
     private addCompound;
     private ensureRow;
+    private collapseRect;
+    private getRectBounds;
+    private wrapAroundRect;
+    private createSubflowAreas;
     private newVar;
     /**
      * Adds a required constraint: