@likec4/diagram 1.59.4 → 1.61.0

package/dist/likec4diagram/xyflow-sequence/sequence-view-to-xy.mjs

@@ -0,0 +1,288 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { SeqParallelAreaColor, SeqZIndex } from "./const.mjs";
+import { calcSequenceLayout } from "./sequence-view.mjs";
+import { entries, filter, first, identity, isArray, isEmptyish, isTruthy, map, pipe, piped } from "remeda";
+import { nonNullable } from "@likec4/core";
+import { DynamicViewFlow, NodeId as NodeId$1, dynamicViewFlow as dynamicViewFlow$1, hasProp as hasProp$1 } from "@likec4/core/types";
+
+// src/likec4diagram/xyflow-sequence/sequence-view-to-xy.ts
+const calcCollapsedFlows = piped(identity(), entries(), filter(([_, collapsed]) => collapsed), map(([flowId]) => flowId));
+/**
+* Converts a sequence layout to XY flow nodes and edges.
+* @param view The next dynamic view which contains the sequence layout.
+* @param currentViewId The ID of the current view (optional, used to exclude navigation to the current view)
+*/
+function sequenceLayoutToXY({ view, currentViewId, collapsedFlows }) {
+	const flow = hasProp$1(view, "flow") ? dynamicViewFlow$1(view) : void 0;
+	const layout = flow && !isEmptyish(collapsedFlows) ? calcSequenceLayout(view, flow, calcCollapsedFlows(collapsedFlows)) : view.sequenceLayout;
+	const ctx = {
+		view,
+		flow,
+		layout,
+		collapsedFlows,
+		subflowArea: (id) => layout.subflows.find((area) => area.id === id)
+	};
+	const { actors, steps, compounds, parallelAreas, subflows, bounds } = ctx.layout;
+	const xynodes = [];
+	const xyedges = [];
+	const getNode = (id) => {
+		return nonNullable(view.nodes.find((n) => n.id === id));
+	};
+	for (const compound of compounds) xynodes.push(toCompoundArea(compound, getNode(compound.origin), view));
+	if (isArray(subflows) && hasProp$1(ctx, "flow")) xynodes.push(...createSubflowNodes(ctx));
+	else for (const parallelArea of parallelAreas) xynodes.push(toSeqParallelArea(parallelArea, view));
+	for (const actor of actors) xynodes.push(toSeqActorNode(actor, getNode(actor.id), bounds, view));
+	let stepnum = 1;
+	for (const step of steps) {
+		const edge = view.edges.find((e) => e.id === step.id);
+		if (!edge) {
+			console.error(`Step Edge "${step.id}" not found`);
+			continue;
+		}
+		xyedges.push(toSeqStepEdge(step, edge, view.id, stepnum++, ctx));
+	}
+	return {
+		xynodes,
+		xyedges,
+		layout
+	};
+}
+/**
+* Shows a compound as a view group node
+*/
+function toCompoundArea({ id, x, y, width, height, depth }, node, view) {
+	return {
+		id,
+		type: "view-group",
+		data: {
+			id: node.id,
+			title: node.title,
+			color: node.color ?? "gray",
+			shape: node.shape,
+			style: node.style,
+			tags: node.tags,
+			x,
+			y,
+			viewId: view.id,
+			depth,
+			isViewGroup: true,
+			drifts: node.drifts ?? null,
+			viewLayoutDir: "LR",
+			notes: void 0
+		},
+		zIndex: SeqZIndex.compound,
+		position: {
+			x,
+			y
+		},
+		draggable: false,
+		selectable: false,
+		deletable: false,
+		focusable: false,
+		style: { pointerEvents: "none" },
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
+}
+function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
+	return {
+		id: `seq-parallel-${parallelPrefix}`,
+		type: "seq-parallel",
+		data: {
+			id: `seq-parallel-${parallelPrefix}`,
+			title: "PARALLEL",
+			technology: null,
+			color: SeqParallelAreaColor.default,
+			shape: "rectangle",
+			style: {},
+			tags: [],
+			x,
+			y,
+			level: 0,
+			icon: null,
+			width,
+			height,
+			description: null,
+			viewId: view.id,
+			parallelPrefix,
+			drifts: null,
+			viewLayoutDir: "LR",
+			notes: void 0
+		},
+		zIndex: SeqZIndex.subflows,
+		position: {
+			x,
+			y
+		},
+		draggable: false,
+		deletable: false,
+		selectable: false,
+		focusable: false,
+		style: { pointerEvents: "none" },
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
+}
+function toSeqActorNode({ id, x, y, width, height, ports }, actor, bounds, view) {
+	return {
+		id,
+		type: "seq-actor",
+		data: {
+			id: actor.id,
+			x,
+			y,
+			level: 0,
+			icon: actor.icon ?? null,
+			isMultiple: actor.style.multiple ?? false,
+			title: actor.title,
+			width,
+			height,
+			color: actor.color,
+			navigateTo: actor.navigateTo ?? null,
+			shape: actor.shape,
+			style: actor.style,
+			tags: actor.tags,
+			modelFqn: actor.modelRef ?? null,
+			technology: actor.technology ?? null,
+			description: actor.description ?? null,
+			viewHeight: bounds.height,
+			viewId: view.id,
+			notes: actor.notes,
+			ports,
+			drifts: actor.drifts ?? null,
+			viewLayoutDir: "LR"
+		},
+		deletable: false,
+		zIndex: SeqZIndex.actor,
+		position: {
+			x,
+			y
+		},
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
+}
+function toSeqStepEdge({ id, labelBBox, sourceHandle, targetHandle, hidden }, edge, currentViewId, stepnum, { flow }) {
+	let parent = flow?.parent(id);
+	return {
+		id,
+		type: "seq-step",
+		data: {
+			id,
+			label: edge.label,
+			technology: edge.technology,
+			notes: edge.notes ?? null,
+			navigateTo: edge.navigateTo !== currentViewId ? edge.navigateTo : null,
+			controlPoints: null,
+			labelBBox: {
+				x: 0,
+				y: 0,
+				width: labelBBox?.width ?? edge.labelBBox?.width ?? 32,
+				height: labelBBox?.height ?? edge.labelBBox?.height ?? 32
+			},
+			stepnum,
+			labelXY: null,
+			points: edge.points,
+			color: edge.color,
+			line: edge.line,
+			dir: "forward",
+			head: edge.head ?? "normal",
+			tail: edge.tail ?? "none",
+			astPath: edge.astPath,
+			drifts: edge.drifts ?? null,
+			parentFlow: parent ? {
+				id: parent.id,
+				type: parent._type
+			} : null
+		},
+		deletable: false,
+		focusable: false,
+		hidden: hidden ?? false,
+		zIndex: SeqZIndex.step,
+		interactionWidth: 50,
+		source: edge.source,
+		sourceHandle,
+		target: edge.target,
+		targetHandle
+	};
+}
+function createSubflowNodes(ctx) {
+	const nodes = [];
+	let lastLeftNode = void 0;
+	ctx.flow.walk({ subflow: ({ subflow, previous, parent: _parent }) => {
+		const area = ctx.subflowArea(subflow.id);
+		if (!area) return false;
+		const node = createSubflowNode(area, subflow, ctx);
+		if (!previous) node.data.isFirst = true;
+		nodes.push(node);
+		return {
+			next: ctx.flow.subflows(subflow),
+			onLeave: ({ lastVisited }) => {
+				const nd = ctx.flow.guards.isSubFlow(lastVisited) && nodes.find((n) => n.data.flowId === lastVisited.id);
+				if (nd) nd.data.isLast = true;
+				lastLeftNode = node;
+			}
+		};
+	} });
+	if (lastLeftNode) lastLeftNode.data.isLast = true;
+	return nodes;
+}
+function createSubflowNode(area, subflow, ctx) {
+	const { x, y, width, height } = area;
+	const id = NodeId$1(subflow.id);
+	const level = ctx.flow.level(subflow.id);
+	const flowData = ctx.flow.guards.isAltOrTry(subflow) ? composeAltTryData(area, subflow, ctx) : { flowType: subflow._type };
+	return {
+		id,
+		type: "seq-subflow",
+		data: {
+			id,
+			flowId: subflow.id,
+			title: subflow.title ?? "",
+			technology: null,
+			color: SeqParallelAreaColor.default,
+			shape: "rectangle",
+			style: {},
+			tags: [],
+			x,
+			y,
+			level,
+			icon: null,
+			width,
+			height,
+			description: null,
+			viewId: ctx.view.id,
+			drifts: null,
+			notes: void 0,
+			collapsed: ctx.collapsedFlows[subflow.id] ?? false,
+			...flowData
+		},
+		zIndex: SeqZIndex.subflows + level,
+		position: {
+			x,
+			y
+		},
+		draggable: false,
+		deletable: false,
+		focusable: false,
+		width,
+		initialWidth: width,
+		height,
+		initialHeight: height
+	};
+}
+function composeAltTryData(parent, subflow, { flow, subflowArea }) {
+	const firstBranch = pipe(flow.subflows(subflow), map(({ id }) => subflowArea(id)), filter(isTruthy), first());
+	return {
+		flowType: subflow._type,
+		headerHeight: firstBranch ? firstBranch.y - parent.y : 20
+	};
+}
+
+export { sequenceLayoutToXY };

package/dist/likec4diagram/xyflow-sequence/sequence-view.mjs

@@ -0,0 +1,145 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { SequenceViewLayouter } from "./layouter.mjs";
+import { buildCompounds } from "./utils.mjs";
+import { flat, groupByProp, hasAtLeast, map, mapValues, pipe, values } from "remeda";
+import { DefaultMap, invariant, nonNullable } from "@likec4/core/utils";
+import { parentFlow } from "@likec4/core/types";
+
+// src/likec4diagram/xyflow-sequence/sequence-view.ts
+function calcSequenceLayout(view, flow, collapsedFlows = []) {
+	const actorNodes = /* @__PURE__ */ new Set();
+	const getNode = (id) => nonNullable(view.nodes.find((n) => n.id === id));
+	const preparedSteps = [];
+	for (const edge of view.edges) {
+		const source = getNode(edge.source);
+		const target = getNode(edge.target);
+		if (source.children.length || target.children.length) {
+			console.error("Sequence view does not support nested actors");
+			continue;
+		}
+		actorNodes.add(source);
+		actorNodes.add(target);
+		preparedSteps.push({
+			edge,
+			source,
+			target
+		});
+	}
+	const actors = view.nodes.filter((n) => actorNodes.has(n));
+	invariant(hasAtLeast(actors, 1), "actors array must not be empty");
+	const actorPorts = new DefaultMap(() => []);
+	const steps = [];
+	let row = 0;
+	let prevStep;
+	for (const { edge, source, target } of preparedSteps) {
+		let sourceColumn = actors.indexOf(source);
+		let targetColumn = actors.indexOf(target);
+		const isSelfLoop = source === target;
+		const isBack = sourceColumn > targetColumn;
+		const parent = parentFlow(edge.id);
+		let isContinuing = false;
+		if (prevStep && prevStep.target == source && prevStep.parent === parent) isContinuing = prevStep.isSelfLoop !== isSelfLoop || prevStep.isBack === isBack;
+		if (!isContinuing && prevStep) row++;
+		const step = {
+			id: edge.id,
+			from: {
+				column: sourceColumn,
+				row
+			},
+			to: {
+				column: targetColumn,
+				row: isSelfLoop ? ++row : row
+			},
+			edge,
+			isSelfLoop,
+			isBack,
+			parent,
+			offset: isContinuing ? (prevStep?.offset ?? 0) + 22 : 0,
+			source,
+			target,
+			label: edge.labelBBox ? {
+				height: edge.labelBBox.height + 8 + (edge.navigateTo ? 20 : 0),
+				width: edge.labelBBox.width + 16,
+				text: edge.label
+			} : null
+		};
+		steps.push(step);
+		actorPorts.get(source).push({
+			step,
+			row,
+			type: "source",
+			position: isBack && !isSelfLoop ? "left" : "right"
+		});
+		actorPorts.get(target).push({
+			step,
+			row,
+			type: "target",
+			position: isBack || isSelfLoop ? "right" : "left"
+		});
+		prevStep = step;
+	}
+	const layout = new SequenceViewLayouter({
+		actors,
+		steps,
+		compounds: buildCompounds(actors, view.nodes),
+		flow,
+		collapsedFlows
+	});
+	const bounds = layout.getViewBounds();
+	const compounds = pipe(layout.getCompoundBoxes(), map(({ node, ...box }) => ({
+		...box,
+		id: node.id,
+		origin: node.id
+	})), groupByProp("id"), mapValues((boxes, id) => {
+		if (hasAtLeast(boxes, 2)) return map(boxes, (box, i) => ({
+			...box,
+			id: `${id}-${i + 1}`
+		}));
+		return boxes;
+	}), values(), flat());
+	return {
+		actors: actors.map((actor) => toSeqActor({
+			actor,
+			ports: actorPorts.get(actor),
+			layout
+		})),
+		compounds,
+		steps: map(steps, (s) => ({
+			id: s.id,
+			sourceHandle: s.id + "_source",
+			targetHandle: s.id + "_target",
+			...s.label && { labelBBox: {
+				width: s.label.width,
+				height: s.label.height
+			} },
+			hidden: layout.isStepCollapsed(s)
+		})),
+		parallelAreas: [],
+		subflows: layout.getSubflowAreas(),
+		bounds
+	};
+}
+function toSeqActor({ actor, ports, layout }) {
+	const { x, y, width, height } = layout.getActorBox(actor);
+	return {
+		id: actor.id,
+		x,
+		y,
+		width,
+		height,
+		ports: ports.map((p) => {
+			const bbox = layout.getPortCenter(p.step, p.type);
+			return {
+				id: `${p.step.id}_${p.type}`,
+				cx: bbox.cx - x,
+				cy: bbox.cy - y,
+				height: bbox.height,
+				type: p.type,
+				position: p.position,
+				hidden: layout.isStepCollapsed(p.step)
+			};
+		})
+	};
+}
+
+export { calcSequenceLayout };

package/dist/likec4diagram/xyflow-sequence/utils.mjs

@@ -0,0 +1,96 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { groupBy, mapValues, pipe, values } from "remeda";
+import { Stack, invariant, isAncestor } from "@likec4/core/utils";
+
+// src/likec4diagram/xyflow-sequence/utils.ts
+const paddingFromNumber = (spacing) => ({
+	left: spacing,
+	right: spacing,
+	top: spacing,
+	bottom: spacing
+});
+function normalizeSpacing(padding = 16) {
+	if (typeof padding === "number") return paddingFromNumber(padding);
+	return {
+		left: padding?.left ?? padding?.x ?? 0,
+		right: padding?.right ?? padding?.x ?? 0,
+		top: padding?.top ?? padding?.y ?? 0,
+		bottom: padding?.bottom ?? padding?.y ?? 0
+	};
+}
+function rectFromSteps(steps) {
+	invariant(steps.length > 0);
+	return steps.reduce((acc, step) => {
+		const columns = [step.from.column, step.to.column];
+		const rows = [step.from.row, step.to.row];
+		acc.min.column = Math.min(acc.min.column, ...columns);
+		acc.min.row = Math.min(acc.min.row, ...rows);
+		acc.max.column = Math.max(acc.max.column, ...columns);
+		acc.max.row = Math.max(acc.max.row, ...rows);
+		return acc;
+	}, {
+		min: {
+			column: Infinity,
+			row: Infinity
+		},
+		max: {
+			column: -Infinity,
+			row: -Infinity
+		}
+	});
+}
+/**
+* Builds a tree of compounds from actors and nodes.
+* @param actors the actors in the sequence view
+* @param nodes the nodes in likec4 diagram
+* @returns an array of compounds where each compound is a node in the sequence view
+* that is an ancestor of one of the actors
+*/
+function buildCompounds(actors, nodes) {
+	if (actors.length === 0 || actors.length === nodes.length) return [];
+	const getNode = (id) => nodes.find((n) => n.id === id);
+	function parentsLookup(node) {
+		const parent = node.parent && getNode(node.parent);
+		if (parent) return [parent, ...parentsLookup(parent)];
+		return [];
+	}
+	const stack = new Stack();
+	const result = [];
+	actors.forEach((actor) => {
+		const parents = parentsLookup(actor);
+		if (parents.length === 0) {
+			stack.clear();
+			return;
+		}
+		let head;
+		let parent = parents[0];
+		while (head = stack.peek()?.node) {
+			if (!parent || head.id === parent.id) {
+				parents.length = 0;
+				break;
+			}
+			if (!isAncestor(head.id, parent.id)) {
+				stack.pop();
+				continue;
+			}
+			break;
+		}
+		while (head = parents.pop()) {
+			let compound = stack.peek();
+			if (compound && (isAncestor(head.id, compound.node.id) || head.id === compound.node.id)) continue;
+			const parentAsCompound = {
+				node: head,
+				from: actor,
+				to: actor,
+				nested: []
+			};
+			if (!compound) result.push(parentAsCompound);
+			else compound.nested.push(parentAsCompound);
+			stack.push(parentAsCompound);
+		}
+		stack.forEach((c) => c.to = actor);
+	});
+	return result;
+}
+
+export { buildCompounds, normalizeSpacing, rectFromSteps };

package/dist/navigationpanel/ElementViewControls.mjs

@@ -0,0 +1,50 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useDiagram } from "../hooks/safeContext.mjs";
+import { css } from "@likec4/styles/css";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { SegmentedControl } from "@mantine/core";
+import * as m from "motion/react-m";
+
+// src/navigationpanel/ElementViewControls.tsx
+/**
+* Diagram/Graph segmented control for element views.
+*/
+const ElementViewModeSwitcher = forwardRef(({ value, disabled, onChange }, ref) => /* @__PURE__ */ jsx(m.div, {
+	ref,
+	layout: "position",
+	children: /* @__PURE__ */ jsx(SegmentedControl, {
+		size: "xs",
+		value,
+		disabled,
+		onChange: (variant) => {
+			invariant(variant === "diagram" || variant === "graph", "Invalid element view variant");
+			onChange(variant);
+		},
+		classNames: { label: css({ fontSize: "xxs" }) },
+		data: [{
+			value: "diagram",
+			label: "Diagram"
+		}, {
+			value: "graph",
+			label: "Graph"
+		}]
+	})
+}));
+/**
+* Renders the Diagram/Graph toggle for the current element view and switches the diagram's
+* display variant when the user picks a different mode.
+*/
+function ElementViewControls({ elementViewVariant, disabled = false }) {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementViewModeSwitcher, {
+		disabled,
+		value: elementViewVariant,
+		onChange: (mode) => {
+			diagram.switchElementViewVariant(mode);
+		}
+	});
+}
+
+export { ElementViewControls };

package/dist/navigationpanel/NavigationPanel.mjs

@@ -0,0 +1,95 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { NavigationPanel as NavigationPanel$1 } from "../components/NavigationPanel.mjs";
+import { selectDiagramContext, useDiagramSelector } from "../hooks/safeContext.mjs";
+import { useMantinePortalProps } from "../hooks/useMantinePortalProps.mjs";
+import { ComparePanel } from "./comparepanel/ComparePanel.mjs";
+import { EditorPanel } from "./editorpanel/EditorPanel.mjs";
+import { NavigationPanelActorContextProvider } from "./hooks.mjs";
+import { NavigationPanelControls } from "./NavigationPanelControls.mjs";
+import { NavigationPanelDropdown } from "./NavigationPanelDropdown.mjs";
+import { ActiveWalkthroughControls } from "./walkthrough/ActiveWalkthroughControls.mjs";
+import { WalkthroughPanel } from "./walkthrough/WalkthroughPanel.mjs";
+import { memo, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverTarget } from "@mantine/core";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { hasProp, isDynamicView } from "@likec4/core/types";
+import { VStack } from "@likec4/styles/jsx";
+import { getViewFolderPath } from "@likec4/core/model";
+import { hstack } from "@likec4/styles/patterns";
+import "motion/react-m";
+
+// src/navigationpanel/NavigationPanel.tsx
+const select = selectDiagramContext((s) => {
+	const isActiveWalkthrough = !!s.activeWalkthrough;
+	const viewFolder = getViewFolderPath(s.view.title ?? "") ?? "";
+	if (isDynamicView(s.view) && isActiveWalkthrough) {
+		const isSequenceView = s.dynamicViewVariant === "sequence";
+		return {
+			viewId: s.view.id,
+			viewFolder,
+			mode: isSequenceView && hasProp(s.view, "flow") ? "walkthrough-flow" : "walkthrough"
+		};
+	}
+	return {
+		viewId: s.view.id,
+		viewFolder,
+		mode: "default"
+	};
+});
+const stateHasActiveTag = (state) => state.hasTag("active");
+const NavigationPanel = memo(({ actorRef, isComparing }) => {
+	const opened = useSelector(actorRef, stateHasActiveTag);
+	const portalProps = useMantinePortalProps();
+	const { viewId, mode, viewFolder } = useDiagramSelector(select);
+	useEffect(() => {
+		actorRef.send({
+			type: "update.inputs",
+			inputs: {
+				viewId,
+				viewFolder
+			}
+		});
+	}, [
+		actorRef,
+		viewId,
+		viewFolder
+	]);
+	return /* @__PURE__ */ jsx(NavigationPanel$1.Root, { children: /* @__PURE__ */ jsx(NavigationPanelActorContextProvider, {
+		value: actorRef,
+		children: mode !== "walkthrough-flow" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+				propagate: true,
+				initial: false,
+				children: /* @__PURE__ */ jsxs(Popover, {
+					offset: { mainAxis: 4 },
+					opened,
+					position: "bottom-start",
+					trapFocus: opened,
+					keepMounted: false,
+					...portalProps,
+					clickOutsideEvents: [
+						"pointerdown",
+						"mousedown",
+						"click"
+					],
+					onDismiss: () => actorRef.send({ type: "dropdown.dismiss" }),
+					children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(NavigationPanel$1.Body, {
+						layout: "size",
+						layoutDependency: `mode-${mode}-viewId-${viewId}`,
+						"data-panel": "navigation",
+						onMouseLeave: () => actorRef.send({ type: "breadcrumbs.mouseLeave" }),
+						children: mode === "walkthrough" ? /* @__PURE__ */ jsx(ActiveWalkthroughControls, {}) : /* @__PURE__ */ jsx(NavigationPanelControls, {})
+					}) }), /* @__PURE__ */ jsx(NavigationPanelDropdown, {})]
+				})
+			}) }),
+			mode === "walkthrough" && /* @__PURE__ */ jsx(WalkthroughPanel, {}),
+			isComparing && /* @__PURE__ */ jsx(ComparePanel, {}),
+			/* @__PURE__ */ jsx(EditorPanel, {})
+		] })
+	}) });
+});
+NavigationPanel.displayName = "NavigationPanel";
+
+export { NavigationPanel };