@likec4/diagram 1.59.4 → 1.61.0

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -1,45 +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 { IconFileSymlink, IconTransform, IconZoomScan } from "@tabler/icons-react";
-import { jsx } from "react/jsx-runtime";
-//#region src/overlays/relationship-details/custom/ElementActions.tsx
-var ElementActions = (props) => {
-	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
-	const diagram = useDiagram();
-	const currentViewId = useCurrentViewId();
-	const buttons = [];
-	const { navigateTo, fqn } = props.data;
-	if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
-		key: "navigate",
-		icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.navigateTo(navigateTo);
-		}
-	});
-	if (fqn) buttons.push({
-		key: "relationships",
-		icon: /* @__PURE__ */ jsx(IconTransform, {}),
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.openRelationshipsBrowser(fqn);
-		}
-	});
-	if (fqn && enableVscode) buttons.push({
-		key: "goToSource",
-		icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.openSource({ element: fqn });
-		}
-	});
-	return /* @__PURE__ */ jsx(ElementActionButtons, {
-		buttons,
-		...props
-	});
-};
-//#endregion
-export { ElementActions };

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

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

package/dist/overlays/relationship-details/custom/edgeTypes.js

@@ -1,45 +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 { jsx, jsxs } from "react/jsx-runtime";
-import { getBezierPath } from "@xyflow/system";
-//#region src/overlays/relationship-details/custom/edgeTypes.tsx
-var RelationshipEdge = memoEdge((props) => {
-	const { enableNavigateTo } = useEnabledFeatures();
-	const { data: { navigateTo } } = props;
-	const [svgPath, labelX, labelY] = getBezierPath(props);
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsxs(EdgeContainer, {
-		...props,
-		children: [/* @__PURE__ */ jsx(EdgePath, {
-			edgeProps: props,
-			svgPath
-		}), /* @__PURE__ */ jsx(EdgeLabelContainer, {
-			edgeProps: props,
-			labelPosition: {
-				x: labelX,
-				y: labelY,
-				translate: "translate(-50%, 0)"
-			},
-			style: { maxWidth: Math.abs(props.targetX - props.sourceX - 100) },
-			children: /* @__PURE__ */ jsx(EdgeLabel, {
-				edgeProps: props,
-				children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
-					...props,
-					onClick: (e) => {
-						e.stopPropagation();
-						diagram.navigateTo(navigateTo);
-					}
-				})
-			})
-		})]
-	});
-});
-//#endregion
-export { RelationshipEdge };

package/dist/overlays/relationship-details/custom/index.d.ts

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

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

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

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -1,99 +0,0 @@
-import "../../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../../../hooks/useCallbackRef.js";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/safeContext.js";
-import { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.js";
-import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.js";
-import { ElementData } from "../../../base-primitives/element/ElementData.js";
-import { ElementDetailsButton } from "../../../base-primitives/element/ElementDetailsButton.js";
-import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
-import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.js";
-import { ElementActions } from "./ElementActions.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Handle } from "@xyflow/react";
-import { Position as Position$1 } from "@xyflow/system";
-//#region src/overlays/relationship-details/custom/nodeTypes.tsx
-function ElementTags(props) {
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsx(ElementTags$1, {
-		onTagClick: useCallbackRef((tag) => {
-			diagram.openSearch(tag);
-		}),
-		...props
-	});
-}
-var ElementDetailsButtonWithHandler = (props) => {
-	const diagram = useDiagram();
-	return /* @__PURE__ */ jsx(ElementDetailsButton, {
-		...props,
-		onClick: (e) => {
-			e.stopPropagation();
-			diagram.openElementDetails(props.data.fqn);
-		}
-	});
-};
-function ElementNode(props) {
-	const { enableElementTags } = useEnabledFeatures();
-	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
-		nodeProps: props,
-		children: [
-			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, { ...props }),
-			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
-			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-			/* @__PURE__ */ jsx(ElementActions, { ...props }),
-			/* @__PURE__ */ jsx(ElementPorts, { ...props })
-		]
-	});
-}
-function CompoundNode(props) {
-	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		nodeProps: props,
-		children: [
-			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-			/* @__PURE__ */ jsx(CompoundPorts, { ...props })
-		]
-	});
-}
-function ElementPorts({ data: { ports, height: h } }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
-		id,
-		type: "target",
-		position: Position$1.Left,
-		style: {
-			visibility: "hidden",
-			top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
-		}
-	}, id)), ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
-		id,
-		type: "source",
-		position: Position$1.Right,
-		style: {
-			visibility: "hidden",
-			top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
-		}
-	}, id))] });
-}
-function CompoundPorts({ data }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [data.ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
-		id,
-		type: "target",
-		position: Position$1.Left,
-		style: {
-			visibility: "hidden",
-			top: `${20 * (i + 1)}px`
-		}
-	}, id)), data.ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
-		id,
-		type: "source",
-		position: Position$1.Right,
-		style: {
-			visibility: "hidden",
-			top: `${20 * (i + 1)}px`
-		}
-	}, id))] });
-}
-//#endregion
-export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

package/dist/overlays/relationship-details/custom/styles.css.d.ts

@@ -1 +0,0 @@
-export declare const emptyNode: string;

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

@@ -1,40 +0,0 @@
-import { EdgeId, Fqn, ViewId, BBox } from '@likec4/core';
-import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
-import { Context } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions, ReactFlowStore, ReactFlowActions } from '@xyflow/react';
-export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
-export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
-export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export declare function useRelationshipDetails(): {
-    actor: RelationshipDetailsActorRef;
-    readonly rootElementId: string;
-    getState: () => Readonly<{
-        subject: {
-            edgeId: EdgeId;
-            source?: never;
-            target?: never;
-        } | {
-            source: Fqn;
-            target: Fqn;
-            edgeId?: never;
-        };
-        viewId: ViewId;
-        xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.AnyNode, import("./_types").RelationshipDetailsTypes.Edge> & ViewportHelperFunctions & {
-            viewportInitialized: boolean;
-        }) | null;
-        xystore: {
-            getState: () => ReactFlowStore<import("./_types").RelationshipDetailsTypes.AnyNode, import("./_types").RelationshipDetailsTypes.Edge> & ReactFlowActions<import("./_types").RelationshipDetailsTypes.AnyNode, import("./_types").RelationshipDetailsTypes.Edge>;
-        } | null;
-        initialized: {
-            xydata: boolean;
-            xyflow: boolean;
-        };
-        xynodes: import("./_types").RelationshipDetailsTypes.Node[];
-        xyedges: import("./_types").RelationshipDetailsTypes.Edge[];
-        bounds: BBox;
-    }>;
-    send: (event: Events) => void;
-    navigateTo: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => void;
-    fitDiagram: () => void;
-    close: () => void;
-};

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

@@ -1,52 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useCallbackRef } from "../../hooks/useCallbackRef.js";
-import { createContext, useContext, useMemo } from "react";
-import { shallowEqual } from "fast-equals";
-import { nonNullable } from "@likec4/core";
-import { useSelector } from "@xstate/react";
-//#region src/overlays/relationship-details/hooks.ts
-var RelationshipDetailsActorContext = createContext(null);
-function useRelationshipDetailsActor() {
-	return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
-}
-function useRelationshipDetailsState(selector, compare = shallowEqual) {
-	const select = useCallbackRef(selector);
-	const actor = useRelationshipDetailsActor();
-	return useSelector(actor, select, compare);
-}
-function useRelationshipDetails() {
-	const actor = useRelationshipDetailsActor();
-	return useMemo(() => ({
-		actor,
-		get rootElementId() {
-			return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
-		},
-		getState: () => actor.getSnapshot().context,
-		send: actor.send,
-		navigateTo: (...params) => {
-			if (params.length === 1) actor.send({
-				type: "navigate.to",
-				params: { edgeId: params[0] }
-			});
-			else actor.send({
-				type: "navigate.to",
-				params: {
-					source: params[0],
-					target: params[1]
-				}
-			});
-		},
-		fitDiagram: () => {
-			actor.send({ type: "fitDiagram" });
-		},
-		close: () => {
-			if (actor._parent) actor._parent?.send({
-				type: "close",
-				actorId: actor.id
-			});
-			else actor.send({ type: "close" });
-		}
-	}), [actor]);
-}
-//#endregion
-export { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState };

package/dist/overlays/relationship-details/layout-to-xyflow.d.ts

@@ -1,12 +0,0 @@
-import { RelationshipDetailsTypes } from './_types';
-import { LayoutResult } from './layout';
-export declare function layoutResultToXYFlow(layout: LayoutResult): {
-    xynodes: RelationshipDetailsTypes.Node[];
-    xyedges: RelationshipDetailsTypes.Edge[];
-    bounds: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-};

package/dist/overlays/relationship-details/layout-to-xyflow.js

@@ -1,122 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { ZIndexes } from "../../base/const.js";
-import { hasAtLeast } from "remeda";
-import { Queue, nonNullable } from "@likec4/core";
-//#region src/overlays/relationship-details/layout-to-xyflow.ts
-function layoutResultToXYFlow(layout) {
-	const xynodes = [];
-	const xyedges = [];
-	const nodeLookup = /* @__PURE__ */ new Map();
-	const queue = Queue.from(layout.nodes.reduce((acc, node) => {
-		nodeLookup.set(node.id, node);
-		if (!node.parent) acc.push({
-			node,
-			parent: null
-		});
-		return acc;
-	}, []));
-	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);
-		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 id = node.id;
-		const base = {
-			id,
-			draggable: false,
-			deletable: false,
-			position,
-			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-			style: {
-				width: node.width,
-				height: node.height
-			},
-			initialWidth: node.width,
-			initialHeight: node.height,
-			...parent && { parentId: parent.id }
-		};
-		const fqn = node.modelRef;
-		const navigateTo = { navigateTo: node.navigateTo ?? null };
-		switch (true) {
-			case isCompound:
-				xynodes.push({
-					...base,
-					type: "compound",
-					data: {
-						id,
-						column: node.column,
-						title: node.title,
-						color: node.color,
-						style: node.style,
-						depth: node.depth ?? 0,
-						icon: node.icon ?? "none",
-						ports: node.ports,
-						fqn,
-						...navigateTo
-					}
-				});
-				break;
-			default: xynodes.push({
-				...base,
-				type: "element",
-				data: {
-					id,
-					column: node.column,
-					fqn,
-					title: node.title,
-					technology: node.technology,
-					description: node.description ?? null,
-					height: node.height,
-					width: node.width,
-					color: node.color,
-					shape: node.shape,
-					icon: node.icon ?? "none",
-					ports: node.ports,
-					style: node.style,
-					tags: node.tags,
-					...navigateTo
-				}
-			});
-		}
-	}
-	for (const { source, target, relationId, label, technology, description, navigateTo = null, color = "gray", line = "dashed", ...edge } of layout.edges) {
-		const id = edge.id;
-		xyedges.push({
-			id,
-			type: "relationship",
-			source,
-			target,
-			sourceHandle: edge.sourceHandle,
-			targetHandle: edge.targetHandle,
-			deletable: false,
-			data: {
-				relationId,
-				label,
-				color,
-				navigateTo,
-				line,
-				description: description ?? null,
-				...technology && { technology }
-			}
-		});
-	}
-	return {
-		xynodes,
-		xyedges,
-		bounds: layout.bounds
-	};
-}
-//#endregion
-export { layoutResultToXYFlow };

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

@@ -1,25 +0,0 @@
-import { AnyAux, DiagramEdge, DiagramNode, DiagramView, Fqn, MarkdownOrString, RelationId } from '@likec4/core/types';
-import { LikeC4ViewModel } from '@likec4/core/model';
-import { Except } from 'type-fest';
-import { RelationshipDetailsTypes } from './_types';
-import { RelationshipDetailsViewData } from './compute';
-export type LayoutResult = {
-    nodes: LayoutResult.Node[];
-    edges: LayoutResult.Edge[];
-    bounds: DiagramView['bounds'];
-};
-export declare namespace LayoutResult {
-    type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
-        description: MarkdownOrString | null;
-        modelRef: Fqn;
-        column: RelationshipDetailsTypes.Column;
-        ports: RelationshipDetailsTypes.Ports;
-    };
-    type Edge = Except<DiagramEdge, 'relations' | 'description'> & {
-        relationId: RelationId;
-        sourceHandle: string;
-        targetHandle: string;
-        description: MarkdownOrString | null;
-    };
-}
-export declare function layoutRelationshipDetails(data: RelationshipDetailsViewData, scope: LikeC4ViewModel<AnyAux> | null): LayoutResult;