@likec4/diagram 1.59.3 → 1.60.0

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

@@ -1,195 +0,0 @@
-import "../../_virtual/_rolldown/runtime.js";
-import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
-import { useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
-import { useLikeC4ElementsTree } from "../../hooks/useLikeC4ElementsTree.js";
-import { SelectElement_css_exports, scrollArea } from "./SelectElement.css.js";
-import { IconChevronRight, IconSelector } from "@tabler/icons-react";
-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";
-//#region src/overlays/relationships-browser/SelectElement.tsx
-var 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
-	};
-};
-var SelectElement = memo(() => {
-	const browser = useRelationshipsBrowser();
-	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) => {
-						browser.changeScope(value);
-					},
-					data: [{
-						label: "Global",
-						value: "global"
-					}, {
-						label: /* @__PURE__ */ jsx("span", { children: "Current view" }),
-						value: "view",
-						disabled: !subjectExistsInScope
-					}]
-				})
-			}) })]
-		})]
-	});
-});
-//#endregion
-export { SelectElement };

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

@@ -1,64 +0,0 @@
-import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from '@likec4/core/types';
-import { FunctionComponent } from 'react';
-import { Simplify } from 'type-fest';
-import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../../base/types';
-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;
-        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.ts

@@ -1,113 +0,0 @@
-import { BBox, Fqn, ViewId } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
-import { ActorRef, SnapshotFrom, StateMachine, PromiseActorLogic, EventObject } from 'xstate';
-import { RelationshipsBrowserTypes } from './_types';
-import { LayoutRelationshipsViewResult } from './layout';
-type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.AnyNode, RelationshipsBrowserTypes.Edge>;
-type XYStoreState = ReactFlowState<RelationshipsBrowserTypes.AnyNode, RelationshipsBrowserTypes.Edge>;
-type XYStoreApi = {
-    getState: () => XYStoreState;
-    setState: (state: XYStoreState) => void;
-};
-export declare const layouter: PromiseActorLogic<{
-    xyedges: RelationshipsBrowserTypes.Edge[];
-    xynodes: RelationshipsBrowserTypes.Node[];
-}, {
-    subjectId: Fqn;
-    navigateFromNode: string | null;
-    xyflow: XYFLowInstance;
-    xystore: XYStoreApi;
-    update: LayoutRelationshipsViewResult;
-}, EventObject>;
-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 declare const relationshipsBrowserLogic: RelationshipsBrowserLogic;
-export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserLogic>;
-export interface RelationshipsBrowserActorRef extends ActorRef<RelationshipsBrowserSnapshot, Events> {
-}
-export type { Input as RelationshipsBrowserInput, };