@likec4/diagram 1.59.4 → 1.61.0

package/dist/overlays/relationships-browser/SelectElement.mjs

@@ -0,0 +1,201 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconSelector from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.mjs";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.mjs";
+import { useLikeC4ElementsTree } from "../../hooks/useLikeC4ElementsTree.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
+import { SelectElement_css_exports, scrollArea } from "./SelectElement.css.mjs";
+import { memo, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ancestorsFqn } from "@likec4/core";
+import { ActionIcon, Box, Button, Group, Popover, PopoverDropdown, PopoverTarget, ScrollAreaAutosize, SegmentedControl, Text, Tooltip, Tree, useTree } from "@mantine/core";
+
+// src/overlays/relationships-browser/SelectElement.tsx
+const selector2 = (state) => {
+	const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;
+	return {
+		subjectId: state.context.subject,
+		viewId: state.context.viewId,
+		scope: state.context.scope,
+		subjectExistsInScope,
+		enableSelectSubject: state.context.enableSelectSubject,
+		enableChangeScope: state.context.enableChangeScope
+	};
+};
+const SelectElement = memo(() => {
+	const browser = useRelationshipsBrowser();
+	const { onRelationshipBrowserScopeChange } = useDiagramEventHandlers();
+	const { subjectId, viewId, scope, subjectExistsInScope, enableSelectSubject, enableChangeScope } = useRelationshipsBrowserState(selector2);
+	const root = useRef(null);
+	const viewport = useRef(null);
+	const subject = useLikeC4Model().findElement(subjectId);
+	const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
+	const tree = useTree({ multiple: false });
+	useEffect(() => {
+		ancestorsFqn(subjectId).reverse().forEach((id) => {
+			tree.expand(id);
+		});
+		tree.select(subjectId);
+	}, [subjectId]);
+	return /* @__PURE__ */ jsxs(Group, {
+		ref: root,
+		gap: "xs",
+		pos: "relative",
+		children: [enableSelectSubject && /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(Box, {
+				fz: "xs",
+				fw: "500",
+				style: {
+					whiteSpace: "nowrap",
+					userSelect: "none"
+				},
+				children: "Relationships of"
+			}), /* @__PURE__ */ jsx(Box, {
+				pos: "relative",
+				children: /* @__PURE__ */ jsxs(Popover, {
+					position: "bottom-start",
+					shadow: "md",
+					keepMounted: false,
+					withinPortal: false,
+					closeOnClickOutside: true,
+					clickOutsideEvents: [
+						"pointerdown",
+						"mousedown",
+						"click"
+					],
+					offset: 4,
+					onOpen: () => {
+						setTimeout(() => {
+							(viewport.current?.querySelector(`[data-value="${subjectId}"]`))?.scrollIntoView({
+								behavior: "instant",
+								block: "nearest"
+							});
+						}, 100);
+					},
+					children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "default",
+						maw: 250,
+						rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+						children: /* @__PURE__ */ jsx(Text, {
+							fz: "xs",
+							fw: "500",
+							truncate: true,
+							children: subject?.title ?? "???"
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+						p: 0,
+						miw: 250,
+						maw: 400,
+						children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+							scrollbars: "y",
+							type: "never",
+							viewportRef: viewport,
+							className: scrollArea,
+							children: /* @__PURE__ */ jsx(Tree, {
+								allowRangeSelection: false,
+								selectOnClick: false,
+								tree,
+								data,
+								classNames: SelectElement_css_exports,
+								levelOffset: 8,
+								styles: {
+									root: {
+										maxWidth: 400,
+										overflow: "hidden"
+									},
+									label: {
+										paddingTop: 5,
+										paddingBottom: 6
+									}
+								},
+								renderNode: ({ node, selected, expanded, elementProps }) => /* @__PURE__ */ jsxs(Group, {
+									gap: 2,
+									wrap: "nowrap",
+									...elementProps,
+									py: "3",
+									children: [/* @__PURE__ */ jsx(ActionIcon, {
+										variant: "subtle",
+										size: 18,
+										c: "dimmed",
+										style: { visibility: node.hasChildren ? "visible" : "hidden" },
+										children: /* @__PURE__ */ jsx(IconChevronRight, {
+											stroke: 3.5,
+											style: {
+												transition: "transform 150ms ease",
+												transform: `rotate(${expanded ? "90deg" : "0"})`,
+												width: "80%"
+											}
+										})
+									}), /* @__PURE__ */ jsx(Box, {
+										flex: "1 1 100%",
+										w: "100%",
+										onClick: (e) => {
+											e.stopPropagation();
+											tree.select(node.value);
+											tree.expand(node.value);
+											browser.navigateTo(node.value);
+										},
+										children: /* @__PURE__ */ jsx(Text, {
+											fz: "sm",
+											fw: selected ? "600" : "400",
+											truncate: "end",
+											children: node.label
+										})
+									})]
+								})
+							})
+						})
+					})]
+				})
+			})]
+		}), enableChangeScope && /* @__PURE__ */ jsxs(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: [enableSelectSubject && /* @__PURE__ */ jsx(Box, {
+				fz: "xs",
+				fw: "500",
+				...!subjectExistsInScope && { c: "dimmed" },
+				style: {
+					whiteSpace: "nowrap",
+					userSelect: "none"
+				},
+				children: "Scope"
+			}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+				color: "orange",
+				label: /* @__PURE__ */ jsxs(Fragment$1, { children: ["This element does not exist in the current view", scope === "view" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("br", {}), "Scope is set to global"] })] }),
+				position: "bottom-start",
+				disabled: subjectExistsInScope,
+				portalProps: { target: root.current },
+				children: /* @__PURE__ */ jsx(SegmentedControl, {
+					flex: "1 0 auto",
+					size: "xs",
+					withItemsBorders: false,
+					value: scope,
+					styles: { label: {
+						paddingLeft: 8,
+						paddingRight: 8
+					} },
+					onChange: (value) => {
+						const nextScope = value;
+						browser.changeScope(nextScope);
+						onRelationshipBrowserScopeChange?.(nextScope);
+					},
+					data: [{
+						label: "Global",
+						value: "global"
+					}, {
+						label: /* @__PURE__ */ jsx("span", { children: "Current view" }),
+						value: "view",
+						disabled: !subjectExistsInScope
+					}]
+				})
+			}) })]
+		})]
+	});
+});
+
+export { SelectElement };

package/dist/overlays/relationships-browser/_types.d.mts

@@ -0,0 +1,67 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from "../../base/types.mjs";
+import { FunctionComponent } from "react";
+import { BBox, Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
+import { Simplify } from "type-fest";
+export declare namespace RelationshipsBrowserTypes {
+  type Column = 'incomers' | 'subjects' | 'outgoers';
+  /**
+   * The node's incoming and outgoing ports
+   */
+  type Ports = {
+    in: string[];
+    out: string[];
+  };
+  type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
+    column: Column;
+    fqn: Fqn;
+    icon: string | null;
+    ports: Ports;
+    existsInCurrentView: boolean;
+  }>;
+  type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style'>> & {
+    column: Column;
+    fqn: Fqn;
+    depth: number;
+    icon: IconUrl;
+    ports: Ports;
+    existsInCurrentView: boolean;
+  }>;
+  type EmptyNodeData = BaseNodeData & {
+    column: Column;
+  };
+  type ElementNode = BaseNode<ElementNodeData, 'element'>;
+  type CompoundNode = BaseNode<CompoundNodeData, 'compound'>;
+  type EmptyNode = BaseNode<EmptyNodeData, 'empty'>;
+  type AnyNode = ElementNode | CompoundNode | EmptyNode;
+  type NodeType = AnyNode['type'];
+  type Node<T extends NodeType = NodeType> = Extract<AnyNode, {
+    type: T;
+  }>;
+  type NodeProps<T extends NodeType = NodeType> = BaseNodeProps<Node<T>>;
+  type NodeData = ExclusiveUnion<{
+    ElementNodeData: ElementNodeData;
+    CompoundNodeData: CompoundNodeData;
+    EmptyNodeData: EmptyNodeData;
+  }>;
+  type NodeRenderer<T extends NodeType = NodeType> = FunctionComponent<NodeProps<T>>;
+  type NodeRenderers = { [T in NodeType]: NodeRenderer<T>; };
+  type EdgeData = Simplify<BaseEdgeData & {
+    sourceFqn: Fqn;
+    targetFqn: Fqn;
+    relations: NonEmptyArray<RelationId>;
+    color: Color;
+    label: string | null;
+    /**
+     * Label box placed by the layout, the edge goes through it
+     */
+    labelBBox: BBox | null;
+    navigateTo: ViewId | null;
+    line: RelationshipLineType;
+    head?: RelationshipArrowType;
+    tail?: RelationshipArrowType;
+    existsInCurrentView: boolean;
+  }>;
+  type Edge = BaseEdge<EdgeData, 'relationship'>;
+  type EdgeProps = BaseEdgeProps<Edge>;
+}

package/dist/overlays/relationships-browser/actor.d.mts

@@ -0,0 +1,101 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipsBrowserTypes } from "./_types.mjs";
+import { LayoutRelationshipsViewResult } from "./layout.mjs";
+import { EdgeChange, NodeChange, ReactFlowInstance, ReactFlowState } from "@xyflow/react";
+import { BBox, Fqn, ViewId } from "@likec4/core";
+import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
+type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.AnyNode, RelationshipsBrowserTypes.Edge>;
+type XYStoreState = ReactFlowState<RelationshipsBrowserTypes.AnyNode, RelationshipsBrowserTypes.Edge>;
+type XYStoreApi = {
+  getState: () => XYStoreState;
+  setState: (state: XYStoreState) => void;
+};
+export type Input = {
+  subject: Fqn;
+  viewId: ViewId | null;
+  scope: 'global' | 'view';
+  closeable?: boolean;
+  enableSelectSubject?: boolean;
+  enableChangeScope?: boolean;
+};
+export interface Context {
+  subject: Fqn;
+  viewId: ViewId | null;
+  scope: 'global' | 'view';
+  closeable: boolean;
+  enableSelectSubject: boolean;
+  enableChangeScope: boolean;
+  xyflow: XYFLowInstance | null;
+  xystore: XYStoreApi | null;
+  layouted: LayoutRelationshipsViewResult | null;
+  navigateFromNode: string | null;
+  xynodes: RelationshipsBrowserTypes.Node[];
+  xyedges: RelationshipsBrowserTypes.Edge[];
+}
+export type Events = {
+  type: 'xyflow.init';
+  instance: XYFLowInstance;
+  store: XYStoreApi;
+} | {
+  type: 'xyflow.nodeClick';
+  node: RelationshipsBrowserTypes.Node;
+} | {
+  type: 'xyflow.edgeClick';
+  edge: RelationshipsBrowserTypes.Edge;
+} | {
+  type: 'xyflow.applyNodeChanges';
+  changes: NodeChange<RelationshipsBrowserTypes.Node>[];
+} | {
+  type: 'xyflow.applyEdgeChanges';
+  changes: EdgeChange<RelationshipsBrowserTypes.Edge>[];
+} | {
+  type: 'xyflow.paneClick';
+} | {
+  type: 'xyflow.paneDblClick';
+} | {
+  type: 'xyflow.resized';
+} | {
+  type: 'xyflow.edgeMouseEnter';
+  edge: RelationshipsBrowserTypes.Edge;
+} | {
+  type: 'xyflow.edgeMouseLeave';
+  edge: RelationshipsBrowserTypes.Edge;
+} | {
+  type: 'xyflow.selectionChange';
+  nodes: RelationshipsBrowserTypes.Node[];
+  edges: RelationshipsBrowserTypes.Edge[];
+} | {
+  type: 'dim.nonhovered.edges';
+} | {
+  type: 'undim.edges';
+} | {
+  type: 'xyflow.updateNodeInternals';
+} | {
+  type: 'xyflow.unmount';
+} | {
+  type: 'fitDiagram';
+  duration?: number;
+  bounds?: BBox;
+} | {
+  type: 'navigate.to';
+  subject: Fqn;
+  fromNode?: string | undefined;
+  viewId?: ViewId | undefined;
+} | {
+  type: 'update.xydata';
+  xynodes: RelationshipsBrowserTypes.Node[];
+  xyedges: RelationshipsBrowserTypes.Edge[];
+} | {
+  type: 'change.scope';
+  scope: 'global' | 'view';
+} | {
+  type: 'update.view';
+  layouted: LayoutRelationshipsViewResult;
+} | {
+  type: 'close';
+};
+type Tags = 'active';
+export interface RelationshipsBrowserLogic extends StateMachine<Context, Events, {}, any, any, any, any, any, Tags, Input, any, any, any, any> {}
+export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserLogic>;
+export interface RelationshipsBrowserActorRef extends ActorRef<RelationshipsBrowserSnapshot, Events> {}
+export type { Input as RelationshipsBrowserInput };