@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,22 +1,19 @@
-import { css } from '@likec4/styles/css';
-
-const node = css({
-  margin: "0"
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { css } from "@likec4/styles/css";
+//#region src/overlays/relationships-browser/SelectElement.css.ts
+var SelectElement_css_exports = /* @__PURE__ */ __exportAll({
+	label: () => label,
+	node: () => node,
+	scrollArea: () => scrollArea
 });
-const label = css({
-  _hover: {
-    backgroundColor: "mantine.colors.gray[0]",
-    _dark: {
-      backgroundColor: "default.hover",
-      color: "white"
-    }
-  }
-});
-const scrollArea = css({
-  maxHeight: [
-    "70vh",
-    "calc(100cqh - 70px)"
-  ]
-});
-
-export { label, node, scrollArea };
+var node = css({ margin: "0" });
+var label = css({ _hover: {
+	backgroundColor: "mantine.colors.gray[0]",
+	_dark: {
+		backgroundColor: "default.hover",
+		color: "white"
+	}
+} });
+var scrollArea = css({ maxHeight: ["70vh", "calc(100cqh - 70px)"] });
+//#endregion
+export { SelectElement_css_exports, scrollArea };

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

@@ -1,221 +1,195 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ancestorsFqn } from '@likec4/core';
-import { useTree, Group, Box, Popover, PopoverTarget, Button, Text, PopoverDropdown, ScrollAreaAutosize, Tree, ActionIcon, Tooltip, SegmentedControl } from '@mantine/core';
-import { memo, useRef, useEffect } from 'react';
-import { useLikeC4ElementsTree } from '../../hooks/useLikeC4ElementsTree.js';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
-import * as SelectElement_css from './SelectElement.css.js';
-import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
-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
-  };
+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
+	};
 };
-const setHoveredNode = () => {
-};
-const SelectElement = memo(() => {
-  const browser = useRelationshipsBrowser();
-  const {
-    subjectId,
-    viewId,
-    scope,
-    subjectExistsInScope,
-    enableSelectSubject,
-    enableChangeScope
-  } = useRelationshipsBrowserState(selector2);
-  const root = useRef(null);
-  const viewport = useRef(null);
-  const model = useLikeC4Model();
-  const subject = model.findElement(subjectId);
-  const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
-  const tree = useTree({
-    multiple: false
-  });
-  tree.setHoveredNode = setHoveredNode;
-  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(() => {
-              const item = viewport.current?.querySelector(`[data-value="${subjectId}"]`);
-              item?.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,
-                levelOffset: 8,
-                styles: {
-                  root: {
-                    maxWidth: 400,
-                    overflow: "hidden"
-                  },
-                  label: {
-                    paddingTop: 5,
-                    paddingBottom: 6
-                  }
-                },
-                renderNode: ({ node, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsxs(Group, { gap: 2, wrap: "nowrap", ...elementProps, py: "3", children: [
-                  /* @__PURE__ */ jsx(
-                    ActionIcon,
-                    {
-                      variant: "subtle",
-                      size: 18,
-                      c: "dimmed",
-                      style: {
-                        visibility: 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, { children: [
-            "This element does not exist in the current view",
-            scope === "view" && /* @__PURE__ */ jsxs(Fragment, { 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
-                }
-              ]
-            }
-          )
-        }
-      ) })
-    ] })
-  ] });
+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 };