@likec4/diagram 1.59.3 → 1.60.0

package/dist/overlays/relationships-browser/actor.js

@@ -1,376 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { getNodeCenter } from "../../utils/xyflow.js";
-import { Base } from "../../base/Base.js";
-import { MinZoom, ZIndexes } from "../../base/const.js";
-import { updateEdges } from "../../base/updateEdges.js";
-import { updateNodes } from "../../base/updateNodes.js";
-import { typedSystem } from "../../likec4diagram/state/utils.js";
-import { ViewPadding } from "./const.js";
-import { viewToNodesEdge } from "./useViewToNodesEdges.js";
-import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
-import { hasAtLeast, isNullish, omit } from "remeda";
-import { delay, invariant, nonNullable } from "@likec4/core/utils";
-import { getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
-import { assertEvent, assign, cancel, enqueueActions, fromPromise, raise, setup } from "xstate";
-//#region src/overlays/relationships-browser/actor.ts
-/**
-* Root node in 'subjects' column
-*/
-var findRootSubject = (nodes) => nodes.find((n) => n.data.column === "subjects" && isNullish(n.parentId));
-var layouter = fromPromise(async ({ input, self, signal }) => {
-	const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
-	let { nodes: currentNodes, width, height } = xystore.getState();
-	const next = viewToNodesEdge(update);
-	const updateXYData = () => {
-		const { nodes, edges } = xystore.getState();
-		return {
-			xynodes: updateNodes(nodes, next.xynodes),
-			xyedges: updateEdges(edges, next.xyedges)
-		};
-	};
-	const parent = nonNullable(self._parent);
-	let zoom = xyflow.getZoom();
-	const maxZoom = Math.max(zoom, 1);
-	const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
-	const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
-	const currentSubjectNode = findRootSubject(currentNodes);
-	const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
-	if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-		await xyflow.setViewport(nextviewport);
-		return updateXYData();
-	}
-	const nextSubjectCenter = {
-		x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
-		y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
-	};
-	const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
-	const currentSubjectCenter = getNodeCenter(currentSubjectInternalNode);
-	const nested = /* @__PURE__ */ new Set();
-	currentNodes.forEach((n) => {
-		if (n.id === existingNode.id) return;
-		if (n.data.column === "subjects") {
-			nested.add(n.id);
-			return;
-		}
-		if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
-	});
-	currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
-		if (nested.has(n.id)) return [];
-		if (n.id !== existingNode.id) return {
-			...n,
-			data: {
-				...n.data,
-				dimmed: n.data.column === "subjects" ? "immediate" : true
-			}
-		};
-		return {
-			...omit(n, ["parentId"]),
-			position: {
-				x: currentSubjectCenter.x - n.initialWidth / 2,
-				y: currentSubjectCenter.y - n.initialHeight / 2
-			},
-			zIndex: ZIndexes.Max,
-			hidden: false,
-			data: {
-				...n.data,
-				dimmed: false
-			}
-		};
-	}));
-	parent.send({
-		type: "update.xydata",
-		xynodes: currentNodes,
-		xyedges: []
-	});
-	await delay(120);
-	next.xynodes = next.xynodes.map(Base.setDimmed(false));
-	if (signal.aborted) return updateXYData();
-	const duration = 300;
-	xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
-		zoom,
-		duration,
-		interpolate: "smooth"
-	});
-	await delay(duration);
-	await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
-	return updateXYData();
-});
-var machine = setup({
-	types: {
-		context: {},
-		tags: "",
-		children: {},
-		input: {},
-		events: {}
-	},
-	actors: { layouter },
-	guards: {
-		hasViewId: ({ context }) => context.viewId !== null,
-		isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
-		anotherSubject: ({ context, event }) => {
-			if (event.type === "update.view") return context.layouted?.subject !== event.layouted.subject;
-			return false;
-		}
-	}
-});
-var xyflowInit = () => machine.assign(({ event }) => {
-	assertEvent(event, "xyflow.init");
-	return {
-		xyflow: event.instance,
-		xystore: event.store
-	};
-});
-var updateView = () => machine.assign(({ event }) => {
-	assertEvent(event, "update.view");
-	return {
-		layouted: event.layouted,
-		...viewToNodesEdge(event.layouted)
-	};
-});
-var xyflowUpdateNodeInternals = () => machine.createAction(({ context }) => {
-	invariant(context.xystore, "xystore is not initialized");
-	const { domNode, updateNodeInternals } = context.xystore.getState();
-	const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
-	if (nodeIds.size === 0 || !domNode) return;
-	const updates = /* @__PURE__ */ new Map();
-	const domNodes = domNode.querySelectorAll(".react-flow__node");
-	for (const nodeElement of domNodes) {
-		const nodeId = nodeElement.getAttribute("data-id");
-		if (nodeId && nodeIds.has(nodeId)) updates.set(nodeId, {
-			id: nodeId,
-			nodeElement,
-			force: true
-		});
-	}
-	updateNodeInternals(updates, { triggerFitView: false });
-});
-var xyflowFitDiagram = (params) => machine.createAction(({ context, event }) => {
-	params ??= event.type === "fitDiagram" ? event : {};
-	let { duration, bounds } = params ?? {};
-	duration ??= 450;
-	const { xyflow, xystore } = context;
-	invariant(xyflow, "xyflow is not initialized");
-	invariant(xystore, "xystore is not initialized");
-	bounds ??= context.layouted?.bounds;
-	const maxZoom = Math.max(xyflow.getZoom(), 1);
-	if (bounds) {
-		const { width, height } = xystore.getState();
-		const viewport = getViewportForBounds$1(bounds, width, height, MinZoom, maxZoom, ViewPadding);
-		xyflow.setViewport(viewport, duration > 0 ? {
-			duration,
-			interpolate: "smooth"
-		} : void 0).catch(console.error);
-	} else xyflow.fitView({
-		minZoom: MinZoom,
-		maxZoom,
-		padding: ViewPadding,
-		...duration > 0 && {
-			duration,
-			interpolate: "smooth"
-		}
-	}).catch(console.error);
-});
-var xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
-	assertEvent(event, "xyflow.applyNodeChanges");
-	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
-});
-var xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
-	assertEvent(event, "xyflow.applyEdgeChanges");
-	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
-});
-var openRelationshipSource = () => machine.enqueueActions(({ system, event }) => {
-	if (event.type !== "xyflow.edgeClick") return;
-	const diagramActor = typedSystem(system).diagramActorRef;
-	const relations = event.edge.data.relations;
-	if (hasAtLeast(relations, 1)) diagramActor.send({
-		type: "open.source",
-		relation: relations[0]
-	});
-});
-var dispose = () => machine.assign({
-	xyflow: null,
-	layouted: null,
-	xystore: null,
-	xyedges: [],
-	xynodes: []
-});
-var relationshipsBrowserLogic = machine.createMachine({
-	id: "relationships-browser",
-	context: ({ input }) => ({
-		subject: input.subject,
-		viewId: input.viewId,
-		scope: input.viewId ? input.scope : "global",
-		closeable: input.closeable ?? true,
-		enableSelectSubject: input.enableSelectSubject ?? true,
-		enableChangeScope: input.enableChangeScope ?? true,
-		xyflow: null,
-		xystore: null,
-		layouted: null,
-		navigateFromNode: null,
-		xynodes: [],
-		xyedges: []
-	}),
-	initial: "initializing",
-	on: {
-		"xyflow.applyNodeChanges": { actions: xyflowApplyNodeChanges() },
-		"xyflow.applyEdgeChanges": { actions: xyflowApplyEdgeChanges() }
-	},
-	states: {
-		initializing: { on: {
-			"xyflow.init": {
-				actions: xyflowInit(),
-				target: "isReady"
-			},
-			"update.view": {
-				actions: updateView(),
-				target: "isReady"
-			},
-			"stop": "closed",
-			"close": "closed"
-		} },
-		"isReady": { always: [{
-			guard: "isReady",
-			actions: [xyflowFitDiagram({ duration: 0 }), raise({ type: "xyflow.updateNodeInternals" }, { delay: 150 })],
-			target: "active"
-		}, { target: "initializing" }] },
-		"active": {
-			initial: "idle",
-			tags: ["active"],
-			on: {
-				"xyflow.nodeClick": { actions: enqueueActions(({ event, enqueue }) => {
-					if ("fqn" in event.node.data) {
-						const fqn = event.node.data.fqn;
-						enqueue.raise({
-							type: "navigate.to",
-							subject: fqn,
-							fromNode: event.node.id
-						});
-					}
-				}) },
-				"xyflow.edgeClick": [{
-					guard: "hasViewId",
-					actions: enqueueActions(({ event, context, system, enqueue }) => {
-						if (event.edge.selected || event.edge.data.relations.length > 1) enqueue.sendTo(typedSystem(system).overlaysActorRef, {
-							type: "open.relationshipDetails",
-							viewId: context.viewId,
-							source: event.edge.data.sourceFqn,
-							target: event.edge.data.targetFqn
-						});
-						else enqueue(openRelationshipSource());
-					})
-				}, { actions: openRelationshipSource() }],
-				"navigate.to": { actions: [assign({
-					subject: ({ event }) => event.subject,
-					viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
-					navigateFromNode: ({ event }) => event.fromNode ?? null
-				})] },
-				"xyflow.paneDblClick": { actions: xyflowFitDiagram() },
-				"update.view": {
-					actions: updateView(),
-					target: ".layouting"
-				},
-				"change.scope": { actions: assign({ scope: ({ event }) => event.scope }) },
-				"xyflow.updateNodeInternals": { actions: xyflowUpdateNodeInternals() },
-				"fitDiagram": { actions: xyflowFitDiagram() },
-				"xyflow.resized": { actions: [cancel("fitDiagram"), raise({ type: "fitDiagram" }, {
-					id: "fitDiagram",
-					delay: 300
-				})] },
-				"xyflow.init": { actions: xyflowInit() },
-				"xyflow.unmount": { target: "initializing" },
-				"close": "closed"
-			},
-			states: {
-				"idle": { on: {
-					"xyflow.edgeMouseEnter": { actions: [
-						assign({ xyedges: ({ context, event }) => {
-							const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
-							return context.xyedges.map((edge) => {
-								if (edge.id === event.edge.id) return Base.setData(edge, {
-									hovered: true,
-									dimmed: false
-								});
-								return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
-							});
-						} }),
-						cancel("undim.edges"),
-						cancel("dim.nonhovered.edges"),
-						raise({ type: "dim.nonhovered.edges" }, {
-							id: "dim.nonhovered.edges",
-							delay: 200
-						})
-					] },
-					"xyflow.edgeMouseLeave": { actions: [
-						assign({ xyedges: ({ context, event }) => {
-							return context.xyedges.map((edge) => {
-								if (edge.id === event.edge.id) return Base.setHovered(edge, false);
-								return edge;
-							});
-						} }),
-						cancel("dim.nonhovered.edges"),
-						raise({ type: "undim.edges" }, {
-							id: "undim.edges",
-							delay: 400
-						})
-					] },
-					"dim.nonhovered.edges": { actions: assign({ xyedges: ({ context }) => context.xyedges.map((edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)) }) },
-					"undim.edges": { actions: assign({ xyedges: ({ context }) => {
-						return context.xyedges.map(Base.setDimmed(false));
-					} }) },
-					"xyflow.selectionChange": { actions: enqueueActions(({ event, context, enqueue }) => {
-						if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) enqueue.raise({ type: "undim.edges" });
-					}) }
-				} },
-				"layouting": {
-					invoke: {
-						id: "layouter",
-						src: "layouter",
-						input: ({ context }) => {
-							return {
-								subjectId: context.subject,
-								navigateFromNode: context.navigateFromNode,
-								xyflow: nonNullable(context.xyflow),
-								xystore: nonNullable(context.xystore),
-								update: nonNullable(context.layouted)
-							};
-						},
-						onDone: {
-							target: "idle",
-							actions: enqueueActions(({ enqueue, event }) => {
-								enqueue.assign({
-									xynodes: event.output.xynodes,
-									xyedges: event.output.xyedges,
-									navigateFromNode: null
-								});
-								enqueue.raise({
-									type: "fitDiagram",
-									duration: 200
-								}, {
-									id: "fitDiagram",
-									delay: 50
-								});
-								for (let i = 1; i < 8; i++) enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 120 + i * 75 });
-							})
-						}
-					},
-					on: {
-						"update.xydata": { actions: assign({
-							xynodes: ({ event }) => event.xynodes,
-							xyedges: ({ event }) => event.xyedges
-						}) },
-						"xyflow.applyEdgeChanges": {},
-						"xyflow.applyNodeChanges": {}
-					}
-				}
-			}
-		},
-		closed: {
-			id: "closed",
-			type: "final",
-			entry: dispose()
-		}
-	},
-	exit: dispose()
-});
-//#endregion
-export { layouter, relationshipsBrowserLogic };

package/dist/overlays/relationships-browser/const.d.ts

@@ -1,6 +0,0 @@
-export declare const ViewPadding: {
-    readonly top: "40px";
-    readonly bottom: "22px";
-    readonly left: "22px";
-    readonly right: "22px";
-};

package/dist/overlays/relationships-browser/const.js

@@ -1,9 +0,0 @@
-//#region src/overlays/relationships-browser/const.ts
-var ViewPadding = {
-	top: "40px",
-	bottom: "22px",
-	left: "22px",
-	right: "22px"
-};
-//#endregion
-export { ViewPadding };

package/dist/overlays/relationships-browser/custom/ElementActions.d.ts

@@ -1,2 +0,0 @@
-import { RelationshipsBrowserTypes as Types } from '../_types';
-export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react").JSX.Element;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -1,63 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { useCurrentViewId } from "../../../hooks/useCurrentView.js";
-import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.js";
-import { useRelationshipsBrowser, useRelationshipsBrowserState } from "../hooks.js";
-import { IconFileSymlink, IconTransform, IconZoomScan } from "@tabler/icons-react";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/overlays/relationships-browser/custom/ElementActions.tsx
-var selectSubject = (state) => state.context.subject;
-var ElementActions = (props) => {
-	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
-	const diagram = useDiagram();
-	const currentViewId = useCurrentViewId();
-	const browser = useRelationshipsBrowser();
-	const subject = useRelationshipsBrowserState(selectSubject);
-	const { navigateTo, fqn } = props.data;
-	const buttons = useMemo(() => {
-		const buttons = [];
-		if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
-			key: "navigate",
-			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.navigateTo(navigateTo);
-			}
-		});
-		if (fqn !== subject) buttons.push({
-			key: "relationships",
-			icon: /* @__PURE__ */ jsx(IconTransform, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				browser.navigateTo(fqn, props.id);
-			}
-		});
-		if (enableVscode) buttons.push({
-			key: "goToSource",
-			icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.openSource({ element: fqn });
-			}
-		});
-		return buttons;
-	}, [
-		navigateTo,
-		enableNavigateTo,
-		currentViewId,
-		fqn,
-		subject,
-		enableVscode,
-		diagram,
-		browser,
-		props.id
-	]);
-	return /* @__PURE__ */ jsx(ElementActionButtons, {
-		buttons,
-		...props
-	});
-};
-//#endregion
-export { ElementActions };

package/dist/overlays/relationships-browser/custom/EmptyNode.d.ts

@@ -1,2 +0,0 @@
-import { RelationshipsBrowserTypes } from '../_types';
-export declare function EmptyNode({ data: { column, }, }: RelationshipsBrowserTypes.NodeProps<'empty'>): import("react").JSX.Element;

package/dist/overlays/relationships-browser/custom/EmptyNode.js

@@ -1,27 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
-//#region src/overlays/relationships-browser/custom/EmptyNode.tsx
-function EmptyNode({ data: { column } }) {
-	return /* @__PURE__ */ jsx(Box$1, {
-		css: {
-			width: "100%",
-			height: "100%",
-			border: `3px dashed`,
-			borderColor: `default.border`,
-			borderRadius: "md",
-			display: "flex",
-			justifyContent: "center",
-			alignItems: "center"
-		},
-		children: /* @__PURE__ */ jsxs(Text, {
-			c: "dimmed",
-			fz: "lg",
-			fw: 500,
-			children: ["No ", column === "incomers" ? "incoming" : "outgoing"]
-		})
-	});
-}
-//#endregion
-export { EmptyNode };

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,3 +0,0 @@
-import { RelationshipsBrowserTypes } from '../_types';
-import { FunctionComponent } from 'react';
-export declare const RelationshipEdge: FunctionComponent<RelationshipsBrowserTypes.EdgeProps>;

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -1,68 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { EdgeActionButton } from "../../../base-primitives/edge/EdgeActionButton.js";
-import { EdgeContainer } from "../../../base-primitives/edge/EdgeContainer.js";
-import { EdgeLabel } from "../../../base-primitives/edge/EdgeLabel.js";
-import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelContainer.js";
-import { EdgePath } from "../../../base-primitives/edge/EdgePath.js";
-import { memoEdge } from "../../../base-primitives/memoEdge.js";
-import { useRelationshipsBrowser } from "../hooks.js";
-import { css } from "@likec4/styles/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip } from "@mantine/core";
-import { getBezierPath } from "@xyflow/system";
-//#region src/overlays/relationships-browser/custom/edgeTypes.tsx
-var RelationshipEdge = memoEdge((props) => {
-	const browser = useRelationshipsBrowser();
-	const { enableNavigateTo } = useEnabledFeatures();
-	const { data: { navigateTo, relations, existsInCurrentView } } = props;
-	const [svgPath, labelX, labelY] = getBezierPath(props);
-	const diagram = useDiagram();
-	const markOrange = relations.length > 1 || !existsInCurrentView;
-	const edgeProps = markOrange ? {
-		...props,
-		data: {
-			...props.data,
-			color: "amber"
-		}
-	} : props;
-	let label = /* @__PURE__ */ jsx(EdgeLabel, {
-		edgeProps,
-		className: css({ transition: "fast" }),
-		children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
-			...props,
-			onClick: (e) => {
-				e.stopPropagation();
-				diagram.navigateTo(navigateTo);
-			}
-		})
-	});
-	if (!existsInCurrentView) label = /* @__PURE__ */ jsx(Tooltip, {
-		color: "orange",
-		c: "black",
-		label: "This relationship is not included in the current view",
-		portalProps: { target: `#${browser.rootElementId}` },
-		openDelay: 800,
-		children: label
-	});
-	return /* @__PURE__ */ jsxs(EdgeContainer, {
-		...edgeProps,
-		children: [/* @__PURE__ */ jsx(EdgePath, {
-			edgeProps,
-			svgPath,
-			...markOrange && { strokeWidth: 5 }
-		}), /* @__PURE__ */ jsx(EdgeLabelContainer, {
-			edgeProps,
-			labelPosition: {
-				x: labelX,
-				y: labelY,
-				translate: "translate(-50%, 0)"
-			},
-			style: { maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250) },
-			children: label
-		})]
-	});
-});
-//#endregion
-export { RelationshipEdge };

package/dist/overlays/relationships-browser/custom/index.d.ts

@@ -1,3 +0,0 @@
-export { RelationshipEdge } from './edgeTypes';
-export { EmptyNode } from './EmptyNode';
-export { CompoundNode, ElementNode } from './nodeTypes';

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -1,9 +0,0 @@
-import { BaseNodePropsWithData } from '../../../base';
-import { RelationshipsBrowserTypes } from '../_types';
-export declare function ElementNode(props: RelationshipsBrowserTypes.NodeProps<'element'>): import("react").JSX.Element;
-export declare function CompoundNode(props: RelationshipsBrowserTypes.NodeProps<'compound'>): import("react").JSX.Element;
-type ElementPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react").JSX.Element;
-type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
-export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react").JSX.Element;
-export {};