@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/overlaysActor.js

@@ -1,229 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { relationshipsBrowserLogic } from "./relationships-browser/actor.js";
-import { elementDetailsLogic } from "./element-details/actor.js";
-import { relationshipDetailsLogic } from "./relationship-details/actor.js";
-import { isString, last, reverse } from "remeda";
-import { getHotkeyHandler } from "@mantine/hooks";
-import { assertEvent, fromCallback, setup } from "xstate";
-//#region src/overlays/overlaysActor.ts
-var hotkeyLogic = fromCallback(({ sendBack }) => {
-	const handler = getHotkeyHandler([[
-		"Escape",
-		(event) => {
-			event.stopPropagation();
-			sendBack({ type: "close" });
-		},
-		{ preventDefault: true }
-	]]);
-	document.body.addEventListener("keydown", handler, { capture: true });
-	return () => {
-		document.body.removeEventListener("keydown", handler, { capture: true });
-	};
-});
-var machine = setup({
-	types: {
-		context: {},
-		events: {},
-		emitted: {},
-		children: {}
-	},
-	actors: {
-		relationshipDetails: relationshipDetailsLogic,
-		elementDetails: elementDetailsLogic,
-		relationshipsBrowser: relationshipsBrowserLogic,
-		hotkey: hotkeyLogic
-	},
-	guards: {
-		"has overlays?": ({ context }) => context.overlays.length > 0,
-		"close specific overlay?": ({ event }) => {
-			return event.type === "close" && isString(event.actorId);
-		},
-		"last: is relationshipDetails?": ({ context }) => {
-			return last(context.overlays)?.type === "relationshipDetails";
-		},
-		"last: is relationshipsBrowser?": ({ context }) => {
-			return last(context.overlays)?.type === "relationshipsBrowser";
-		}
-	}
-});
-var emitOpened = (overlay) => machine.emit({
-	type: "opened",
-	overlay: overlay.split("-")[0]
-});
-var emitClosed = (overlay) => machine.emit({
-	type: "closed",
-	overlay: overlay.split("-")[0]
-});
-var emitIdle = () => machine.emit({ type: "idle" });
-var closeLastOverlay = () => machine.enqueueActions(({ context, enqueue }) => {
-	if (context.overlays.length === 0) return;
-	const lastOverlay = last(context.overlays)?.id;
-	if (!lastOverlay) return;
-	enqueue.sendTo(lastOverlay, { type: "close" });
-	enqueue.stopChild(lastOverlay);
-	enqueue.assign({ overlays: context.overlays.filter((o) => o.id !== lastOverlay) });
-	enqueue(emitClosed(lastOverlay));
-});
-var closeSpecificOverlay = () => machine.enqueueActions(({ context, enqueue, event }) => {
-	assertEvent(event, "close");
-	const actorId = event.actorId;
-	if (!isString(actorId)) return;
-	const toClose = context.overlays.find((o) => o.id === actorId)?.id;
-	if (toClose) {
-		enqueue.sendTo(toClose, { type: "close" });
-		enqueue.stopChild(toClose);
-		enqueue.assign({ overlays: context.overlays.filter((o) => o.id !== toClose) });
-		enqueue(emitClosed(toClose));
-	}
-});
-var closeAllOverlays = () => machine.enqueueActions(({ context, enqueue }) => {
-	for (const { id } of reverse(context.overlays)) {
-		enqueue.sendTo(id, { type: "close" });
-		enqueue.stopChild(id);
-		enqueue(emitClosed(id));
-	}
-	enqueue.assign({ overlays: [] });
-});
-var openElementDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
-	assertEvent(event, "open.elementDetails");
-	if (context.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject)) return;
-	const id = `elementDetails-${context.seq}`;
-	enqueue.spawnChild("elementDetails", {
-		id,
-		input: event,
-		syncSnapshot: true
-	});
-	enqueue.assign({
-		seq: context.seq + 1,
-		overlays: [...context.overlays, {
-			id,
-			type: "elementDetails",
-			subject: event.subject
-		}]
-	});
-	enqueue(emitOpened(id));
-});
-var openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
-	assertEvent(event, "open.relationshipDetails");
-	const currentOverlay = last(context.overlays);
-	if (currentOverlay?.type === "relationshipDetails") {
-		enqueue.sendTo(currentOverlay.id, {
-			...event,
-			type: "navigate.to"
-		});
-		return;
-	}
-	const id = `relationshipDetails-${context.seq}`;
-	enqueue.spawnChild("relationshipDetails", {
-		id,
-		input: event,
-		syncSnapshot: true
-	});
-	enqueue.assign({
-		seq: context.seq + 1,
-		overlays: [...context.overlays, {
-			id,
-			type: "relationshipDetails"
-		}]
-	});
-	enqueue(emitOpened(id));
-});
-var openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueue, event }) => {
-	assertEvent(event, "open.relationshipsBrowser");
-	const currentOverlay = last(context.overlays);
-	if (currentOverlay?.type === "relationshipsBrowser") {
-		enqueue.sendTo(currentOverlay.id, {
-			type: "navigate.to",
-			subject: event.subject,
-			viewId: event.viewId
-		});
-		enqueue.sendTo(currentOverlay.id, {
-			type: "change.scope",
-			scope: event.viewId ? event.scope : "global"
-		});
-		return;
-	}
-	const id = `relationshipsBrowser-${context.seq}`;
-	enqueue.spawnChild("relationshipsBrowser", {
-		id,
-		input: event,
-		syncSnapshot: true
-	});
-	enqueue.assign({
-		seq: context.seq + 1,
-		overlays: [...context.overlays, {
-			id,
-			type: "relationshipsBrowser",
-			subject: event.subject
-		}]
-	});
-	enqueue(emitOpened(id));
-});
-var openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
-	assertEvent(event, [
-		"open.elementDetails",
-		"open.relationshipDetails",
-		"open.relationshipsBrowser"
-	]);
-	switch (event.type) {
-		case "open.elementDetails":
-			enqueue(openElementDetails());
-			break;
-		case "open.relationshipDetails":
-			enqueue(openRelationshipDetails());
-			break;
-		case "open.relationshipsBrowser": enqueue(openRelationshipsBrowser());
-	}
-});
-var listenToEsc = () => machine.spawnChild("hotkey", { id: "hotkey" });
-var stopListeningToEsc = () => machine.stopChild("hotkey");
-var overlaysActorLogic = machine.createMachine({
-	id: "overlays",
-	context: () => ({
-		seq: 1,
-		overlays: []
-	}),
-	initial: "idle",
-	on: { "close.all": {
-		actions: closeAllOverlays(),
-		target: "#idle"
-	} },
-	states: {
-		idle: {
-			id: "idle",
-			entry: [emitIdle()],
-			on: { "open.*": {
-				actions: openOverlay(),
-				target: "opened"
-			} }
-		},
-		opened: {
-			entry: listenToEsc(),
-			exit: stopListeningToEsc(),
-			initial: "hasOverlays",
-			states: {
-				hasOverlays: { on: {
-					"open.*": { actions: openOverlay() },
-					"close": [{
-						guard: "close specific overlay?",
-						actions: closeSpecificOverlay(),
-						target: "decide"
-					}, {
-						actions: closeLastOverlay(),
-						target: "decide"
-					}]
-				} },
-				decide: { always: [{
-					guard: "has overlays?",
-					target: "hasOverlays"
-				}, { target: "#idle" }] }
-			}
-		},
-		final: {
-			entry: [closeAllOverlays(), stopListeningToEsc()],
-			type: "final"
-		}
-	}
-});
-//#endregion
-export { overlaysActorLogic };

package/dist/overlays/relationship-details/RelationshipDetails.d.ts

@@ -1,5 +0,0 @@
-import { RelationshipDetailsActorRef } from './actor';
-export type RelationshipDetailsProps = {
-    actorRef: RelationshipDetailsActorRef;
-};
-export declare function RelationshipDetails({ actorRef }: RelationshipDetailsProps): import("react").JSX.Element;

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -1,282 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { BaseXYFlow } from "../../base/BaseXYFlow.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from "./compute.js";
-import { RelationshipEdge } from "./custom/edgeTypes.js";
-import { CompoundNode, ElementNode } from "./custom/nodeTypes.js";
-import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState } from "./hooks.js";
-import { layoutRelationshipDetails } from "./layout.js";
-import { SelectEdge } from "./SelectEdge.js";
-import { cx } from "@likec4/styles/css";
-import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
-import { memo, useEffect, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from "@xyflow/react";
-import { deepEqual } from "fast-equals";
-import { find, isTruthy } from "remeda";
-import { invariant, isAncestor, nonNullable } from "@likec4/core";
-import { ActionIcon, Group } from "@mantine/core";
-import { AnimatePresence, LayoutGroup, m } from "motion/react";
-import { useSelector } from "@xstate/react";
-import { useCallbackRef, useStateHistory } from "@mantine/hooks";
-//#region src/overlays/relationship-details/RelationshipDetails.tsx
-var nodeTypes = {
-	element: ElementNode,
-	compound: CompoundNode
-};
-var edgeTypes = { relationship: RelationshipEdge };
-function RelationshipDetails({ actorRef }) {
-	const initialRef = useRef(null);
-	if (initialRef.current == null) initialRef.current = {
-		defaultNodes: [],
-		defaultEdges: []
-	};
-	return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, {
-		value: actorRef,
-		children: /* @__PURE__ */ jsx(ReactFlowProvider, {
-			...initialRef.current,
-			children: /* @__PURE__ */ jsx(LayoutGroup, {
-				id: actorRef.sessionId,
-				inherit: false,
-				children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(RelationshipDetailsInner, {}, "xyflow"), /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {}, "sync")] })
-			})
-		})
-	});
-}
-var selectSubject = (state) => ({
-	...state.context.subject,
-	viewId: state.context.viewId
-});
-var SyncRelationshipDetailsXYFlow = memo(() => {
-	const actor = useRelationshipDetailsActor();
-	const subject = useSelector(actor, selectSubject, deepEqual);
-	const likec4model = useLikeC4Model();
-	const view = likec4model.findView(subject.viewId) ?? null;
-	const data = useMemo(() => {
-		let data;
-		if ("edgeId" in subject && isTruthy(subject.edgeId)) {
-			invariant(view, `view ${subject.viewId} not found`);
-			const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
-			data = computeEdgeDetailsViewData([edge.id], view);
-		} else if (!!subject.source && !!subject.target) data = computeRelationshipDetailsViewData({
-			source: likec4model.element(subject.source),
-			target: likec4model.element(subject.target)
-		});
-		else return null;
-		return layoutRelationshipDetails(data, view);
-	}, [
-		subject,
-		view,
-		likec4model
-	]);
-	const store = useStoreApi();
-	const instance = useReactFlow();
-	useEffect(() => {
-		if (instance.viewportInitialized) actor.send({
-			type: "xyflow.init",
-			instance,
-			store
-		});
-	}, [
-		store,
-		instance.viewportInitialized,
-		actor
-	]);
-	useEffect(() => {
-		if (data !== null) actor.send({
-			type: "update.layoutData",
-			data
-		});
-	}, [data, actor]);
-	return null;
-});
-var selector = ({ context }) => ({
-	initialized: context.initialized.xydata && context.initialized.xyflow,
-	nodes: context.xynodes,
-	edges: context.xyedges
-});
-var RelationshipDetailsInner = memo(() => {
-	const browser = useRelationshipDetails();
-	const { initialized, nodes, edges } = useRelationshipDetailsState(selector, deepEqual);
-	return /* @__PURE__ */ jsxs(BaseXYFlow, {
-		id: browser.rootElementId,
-		nodes,
-		edges,
-		className: cx(initialized ? "initialized" : "not-initialized", "likec4-relationship-details"),
-		nodeTypes,
-		edgeTypes,
-		onNodesChange: useCallbackRef((changes) => {
-			browser.send({
-				type: "xyflow.applyNodeChanges",
-				changes
-			});
-		}),
-		onEdgesChange: useCallbackRef((changes) => {
-			browser.send({
-				type: "xyflow.applyEdgeChanges",
-				changes
-			});
-		}),
-		fitViewPadding: .05,
-		onNodeClick: useCallbackRef((e, node) => {
-			e.stopPropagation();
-			browser.send({
-				type: "xyflow.nodeClick",
-				node
-			});
-		}),
-		onEdgeClick: useCallbackRef((e, edge) => {
-			e.stopPropagation();
-			browser.send({
-				type: "xyflow.edgeClick",
-				edge
-			});
-		}),
-		onPaneClick: useCallbackRef(() => {
-			browser.send({ type: "xyflow.paneClick" });
-		}),
-		onDoubleClick: useCallbackRef(() => {
-			browser.send({ type: "xyflow.paneDblClick" });
-		}),
-		onViewportResize: useCallbackRef(() => {
-			browser.send({ type: "xyflow.resized" });
-		}),
-		onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-			if (!edge.data.hovered) browser.send({
-				type: "xyflow.edgeMouseEnter",
-				edge
-			});
-		}),
-		onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-			if (edge.data.hovered) browser.send({
-				type: "xyflow.edgeMouseLeave",
-				edge
-			});
-		}),
-		onSelectionChange: useCallbackRef((params) => {
-			browser.send({
-				type: "xyflow.selectionChange",
-				...params
-			});
-		}),
-		nodesDraggable: false,
-		nodesSelectable: true,
-		fitView: false,
-		pannable: true,
-		zoomable: true,
-		children: [/* @__PURE__ */ jsx(TopLeftPanel, {}), /* @__PURE__ */ jsx(Panel, {
-			position: "top-right",
-			children: /* @__PURE__ */ jsx(ActionIcon, {
-				variant: "default",
-				color: "gray",
-				onClick: (e) => {
-					e.stopPropagation();
-					browser.close();
-				},
-				children: /* @__PURE__ */ jsx(IconX, {})
-			})
-		})]
-	});
-});
-var topLeftPanelselector = ({ context }) => ({
-	subject: context.subject,
-	viewId: context.viewId
-});
-var TopLeftPanel = memo(() => {
-	const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
-	const view = useLikeC4Model().findView(viewId);
-	if (!view || !view.isDiagram()) return null;
-	const edges = [...view.edges()];
-	let edge = "edgeId" in subject && isTruthy(subject.edgeId) ? edges.find((e) => e.id === subject.edgeId) : find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) || find(edges, (e) => {
-		return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "__", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "__", subject.target ?? "__"));
-	});
-	if (!edge) return null;
-	return /* @__PURE__ */ jsx(TopLeftPanelInner, {
-		edge: edge.$edge,
-		view: view.$view
-	});
-});
-var TopLeftPanelInner = ({ edge, view }) => {
-	const browser = useRelationshipDetails();
-	const edgeId = edge.id;
-	const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
-	useEffect(() => {
-		if (historyEdgeId !== edgeId) historyOps.set(edgeId);
-	}, [edgeId]);
-	useEffect(() => {
-		if (historyEdgeId !== edgeId) browser.navigateTo(historyEdgeId);
-	}, [historyEdgeId]);
-	const hasStepBack = current > 0;
-	const hasStepForward = current + 1 < history.length;
-	return /* @__PURE__ */ jsx(Panel, {
-		position: "top-left",
-		children: /* @__PURE__ */ jsx(Group, {
-			gap: 4,
-			wrap: "nowrap",
-			children: /* @__PURE__ */ jsxs(AnimatePresence, {
-				mode: "popLayout",
-				children: [
-					hasStepBack && /* @__PURE__ */ jsx(m.div, {
-						layout: true,
-						initial: {
-							opacity: .05,
-							transform: "translateX(-5px)"
-						},
-						animate: {
-							opacity: 1,
-							transform: "translateX(0)"
-						},
-						exit: {
-							opacity: .05,
-							transform: "translateX(-10px)"
-						},
-						children: /* @__PURE__ */ jsx(ActionIcon, {
-							variant: "default",
-							color: "gray",
-							onClick: (e) => {
-								e.stopPropagation();
-								historyOps.back();
-							},
-							children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-						})
-					}, "back"),
-					hasStepForward && /* @__PURE__ */ jsx(m.div, {
-						layout: true,
-						initial: {
-							opacity: .05,
-							transform: "translateX(5px)"
-						},
-						animate: {
-							opacity: 1,
-							transform: "translateX(0)"
-						},
-						exit: {
-							opacity: 0,
-							transform: "translateX(5px)"
-						},
-						children: /* @__PURE__ */ jsx(ActionIcon, {
-							variant: "default",
-							color: "gray",
-							onClick: (e) => {
-								e.stopPropagation();
-								historyOps.forward();
-							},
-							children: /* @__PURE__ */ jsx(IconChevronRight, {})
-						})
-					}, "forward"),
-					/* @__PURE__ */ jsx(Group, {
-						gap: "xs",
-						wrap: "nowrap",
-						ml: "sm",
-						children: /* @__PURE__ */ jsx(SelectEdge, {
-							edge,
-							view
-						})
-					})
-				]
-			})
-		})
-	});
-};
-//#endregion
-export { RelationshipDetails };

package/dist/overlays/relationship-details/SelectEdge.css.d.ts

@@ -1,8 +0,0 @@
-export declare const edgeSource: string;
-export declare const edgeArrow: string;
-export declare const edgeTarget: string;
-export declare const edgeLabel: string;
-export declare const edgeRow: string;
-export declare const edgeGrid: string;
-export declare const edgeDataGrid: string;
-export declare const scrollArea: string;

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -1,75 +0,0 @@
-import { css, cx } from "@likec4/styles/css";
-//#region src/overlays/relationship-details/SelectEdge.css.ts
-var edgeEnpoint = css.raw({
-	display: "inline-flex",
-	alignItems: "center",
-	padding: "[6px 2px 0 2px]",
-	"& .mantine-Text-root": {
-		color: "text/90",
-		fontSize: "xs",
-		fontWeight: "medium",
-		lineHeight: "xs"
-	}
-});
-var edgeSource = css({
-	paddingLeft: "1",
-	gridColumn: 1
-}, edgeEnpoint);
-var edgeArrow = css({ gridColumn: 2 }, edgeEnpoint);
-var edgeTarget = css({
-	gridColumn: 3,
-	paddingRight: "1"
-}, edgeEnpoint);
-var edgeLabelclass = "likec4-edge-label";
-var edgeLabel = cx(edgeLabelclass, css({
-	display: "grid",
-	gridColumnStart: 1,
-	gridColumnEnd: 4,
-	borderBottomWidth: "default",
-	borderBottomStyle: "solid",
-	borderBottomColor: "border.default",
-	marginBottom: "0",
-	padding: "[0 4px 5px 4px]",
-	width: "100%",
-	"& .mantine-Text-root": {
-		fontSize: "xxs",
-		fontWeight: "normal",
-		lineHeight: "xs",
-		color: "text.dimmed"
-	}
-}));
-var edgeRow = css({
-	display: "contents",
-	[`&:last-child .${edgeLabelclass}`]: {
-		borderBottom: "none",
-		marginBottom: "0"
-	},
-	"& > *": {
-		transitionProperty: "common",
-		transition: "medium"
-	},
-	"&:is(:hover, [data-selected=true]) > *": {
-		transitionProperty: "common",
-		transition: "medium",
-		cursor: "pointer",
-		backgroundColor: "surface.hover"
-	}
-});
-var edgeGrid = css({
-	display: "grid",
-	gridTemplateColumns: "1fr 30px 1fr",
-	gridAutoRows: "[min-content max-content]",
-	gap: "0",
-	alignItems: "stretch"
-});
-css({
-	display: "grid",
-	gridTemplateColumns: "min-content 1fr",
-	gridAutoRows: "[min-content max-content]",
-	gap: "[10px 12px]",
-	alignItems: "baseline",
-	justifyItems: "start"
-});
-var scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
-//#endregion
-export { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea };

package/dist/overlays/relationship-details/SelectEdge.d.ts

@@ -1,5 +0,0 @@
-import { DiagramEdge, DiagramView } from '@likec4/core';
-export declare const SelectEdge: ({ edge, view, }: {
-    edge: DiagramEdge;
-    view: DiagramView;
-}) => import("react").JSX.Element | null;