@likec4/diagram 1.59.4 → 1.60.0

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

@@ -1,273 +0,0 @@
-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, 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-sequence/_types.d.ts

@@ -1,91 +0,0 @@
-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: StepPath;
-    from: {
-        column: number;
-        row: number;
-    };
-    to: {
-        column: number;
-        row: number;
-    };
-    source: DiagramNode;
-    target: DiagramNode;
-    label: null | {
-        height: number;
-        width: number;
-        text: string | null;
-    };
-    isSelfLoop: boolean;
-    isBack: boolean;
-    parent: StepPath | null;
-    offset: number;
-    edge: DiagramEdge;
-};
-export type Compound = {
-    node: DiagramNode;
-    from: DiagramNode;
-    to: DiagramNode;
-    nested: Compound[];
-};
-export type Rect = {
-    min: {
-        column: number;
-        row: number;
-    };
-    max: {
-        column: number;
-        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,17 +0,0 @@
-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;
-    subflows: number;
-    actor: number;
-    step: number;
-};
-export declare const SeqParallelAreaColor: {
-    default: "gray";
-    active: "amber";
-};

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

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

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

@@ -1,70 +0,0 @@
-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, flow, collapsedFlows, }: {
-        actors: NonEmptyArray<DiagramNode>;
-        steps: Array<Step>;
-        compounds: Array<Compound>;
-        flow: DynamicViewFlow;
-        collapsedFlows: StepPath[];
-    });
-    getSubflowAreas(): Array<{
-        id: StepPath;
-    } & BBox>;
-    getActorBox(actor: DiagramNode): BBox;
-    getCompoundBoxes(): Array<BBox & {
-        node: DiagramNode;
-        depth: number;
-    }>;
-    getPortCenter(step: Step, type: 'source' | 'target'): {
-        cx: number;
-        cy: number;
-        height: number;
-    };
-    isStepCollapsed(step: Step): boolean;
-    getViewBounds(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    private actorBox;
-    private addActors;
-    private addStep;
-    /**
-     * 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:
-     * Also adds a weak constraint == if the operator is <= or >=
-     */
-    private require;
-    /**
-     * Adds a constraint with medium strength by default
-     */
-    private constraint;
-    private put;
-}