@likec4/diagram 1.26.2 → 1.27.0

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

@@ -1,19 +1,28 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ActionIcon, Group, Box } from "@mantine/core";
-import { useCallbackRef, useStateHistory } from "@mantine/hooks";
-import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from "@xyflow/react";
-import clsx from "clsx";
-import { shallowEqual } from "fast-equals";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
-import { useRef, memo, useEffect } from "react";
-import { BaseXYFlow } from "../../base/BaseXYFlow.js";
-import { useRelationshipsView } from "./-useRelationshipsView.js";
-import { ViewPadding } from "./const.js";
-import { edgeTypes } from "./custom/edgeTypes.js";
-import { nodeTypes } from "./custom/nodeTypes.js";
-import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
-import { SelectElement } from "./SelectElement.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { ActionIcon, Group } from '@mantine/core';
+import { useCallbackRef, useStateHistory } from '@mantine/hooks';
+import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
+import { shallowEqual } from 'fast-equals';
+import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
+import { useRef, memo, useEffect } from 'react';
+import { BaseXYFlow } from '../../base/BaseXYFlow.js';
+import { useRelationshipsView } from './-useRelationshipsView.js';
+import { ViewPadding } from './const.js';
+import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
+import { SelectElement } from './SelectElement.js';
+import { RelationshipEdge } from './custom/edgeTypes.js';
+import { EmptyNode, CompoundNode, ElementNode } from './custom/nodeTypes.js';
+
+const nodeTypes = {
+  element: ElementNode,
+  compound: CompoundNode,
+  empty: EmptyNode
+};
+const edgeTypes = {
+  relationship: RelationshipEdge
+};
 function RelationshipsBrowser({ actorRef }) {
   const initialRef = useRef(null);
   if (initialRef.current == null) {
@@ -43,28 +52,27 @@ const RelationshipsBrowserXYFlow = memo(() => {
   return /* @__PURE__ */ jsx(
     BaseXYFlow,
     {
-      id: `relationships-browser-${browser.actor.sessionId}`,
+      id: browser.rootElementId,
       nodes,
       edges,
-      className: clsx(isActive ? "initialized" : "not-initialized"),
+      className: cx(
+        isActive ? "initialized" : "not-initialized",
+        "relationships-browser"
+      ),
       nodeTypes,
       edgeTypes,
       fitView: false,
       fitViewPadding: ViewPadding,
       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((e) => {
-        e.stopPropagation();
         browser.send({ type: "xyflow.paneClick" });
       }),
       onDoubleClick: useCallbackRef((e) => {
-        e.stopPropagation();
         browser.send({ type: "xyflow.paneDblClick" });
       }),
       onViewportResize: useCallbackRef(() => {
@@ -77,10 +85,14 @@ const RelationshipsBrowserXYFlow = memo(() => {
         browser.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        browser.send({ type: "xyflow.edgeMouseEnter", edge });
+        if (!edge.data.hovered) {
+          browser.send({ type: "xyflow.edgeMouseEnter", edge });
+        }
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        browser.send({ type: "xyflow.edgeMouseLeave", edge });
+        if (edge.data.hovered) {
+          browser.send({ type: "xyflow.edgeMouseLeave", edge });
+        }
       }),
       onSelectionChange: useCallbackRef((params) => {
         browser.send({ type: "xyflow.selectionChange", ...params });
@@ -94,22 +106,26 @@ const RelationshipsBrowserXYFlow = memo(() => {
 });
 const selector2 = (state) => ({
   subjectId: state.context.subject,
-  closeable: state.context.closeable,
-  enableNavigationMenu: state.context.enableNavigationMenu
+  viewId: state.context.viewId,
+  scope: state.context.scope,
+  closeable: state.context.closeable
 });
 const RelationshipsBrowserInner = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
-    closeable,
-    enableNavigationMenu
+    viewId,
+    scope,
+    closeable
   } = useRelationshipsBrowserState(selector2);
   const store = useStoreApi();
   const instance = useReactFlow();
   useEffect(() => {
-    browser.send({ type: "xyflow.init", instance, store });
+    if (instance.viewportInitialized) {
+      browser.send({ type: "xyflow.init", instance, store });
+    }
   }, [store, instance, browser]);
-  const layouted = useRelationshipsView(subjectId);
+  const layouted = useRelationshipsView(subjectId, viewId, scope);
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
   useEffect(() => {
     if (historySubjectId !== subjectId) {
@@ -122,7 +138,7 @@ const RelationshipsBrowserInner = memo(() => {
     }
   }, [historySubjectId, browser]);
   useEffect(() => {
-    browser.send({ type: "update.view", layouted });
+    browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;
   const hasStepForward = current + 1 < history.length;
@@ -130,8 +146,6 @@ const RelationshipsBrowserInner = memo(() => {
     /* @__PURE__ */ jsx(
       TopLeftPanel,
       {
-        enableNavigationMenu,
-        subjectId,
         hasStepBack,
         hasStepForward,
         onStepBack: () => historyOps.back(),
@@ -153,80 +167,66 @@ const RelationshipsBrowserInner = memo(() => {
   ] });
 });
 const TopLeftPanel = ({
-  enableNavigationMenu,
-  subjectId,
   hasStepBack,
   hasStepForward,
   onStepBack,
   onStepForward
 }) => {
-  var _a;
-  const browser = useRelationshipsBrowser();
-  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: 0.05, transform: "translateX(-5px)" },
-        animate: { opacity: 1, transform: "translateX(0)" },
-        exit: {
-          opacity: 0.05,
-          transform: "translateX(-10px)"
-        },
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            color: "gray",
-            onClick: (e) => {
-              e.stopPropagation();
-              onStepBack();
-            },
-            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-          }
-        )
-      },
-      "back"
-    ),
-    hasStepForward && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        layout: true,
-        initial: { opacity: 0.05, transform: "translateX(5px)" },
-        animate: { opacity: 1, transform: "translateX(0)" },
-        exit: {
-          opacity: 0,
-          transform: "translateX(5px)"
+  return /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
+      hasStepBack && /* @__PURE__ */ jsx(
+        m.div,
+        {
+          layout: true,
+          initial: { opacity: 0.05, transform: "translateX(-5px)" },
+          animate: { opacity: 1, transform: "translateX(0)" },
+          exit: {
+            opacity: 0.05,
+            transform: "translateX(-10px)"
+          },
+          children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "default",
+              color: "gray",
+              onClick: (e) => {
+                e.stopPropagation();
+                onStepBack();
+              },
+              children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+            }
+          )
         },
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            color: "gray",
-            onClick: (e) => {
-              e.stopPropagation();
-              onStepForward();
-            },
-            children: /* @__PURE__ */ jsx(IconChevronRight, {})
-          }
-        )
-      },
-      "forward"
-    ),
-    enableNavigationMenu && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", ml: "sm", children: [
-      /* @__PURE__ */ jsx(Box, { fz: "xs", fw: "500", style: { whiteSpace: "nowrap", userSelect: "none" }, children: "Relationships of" }),
-      /* @__PURE__ */ jsx(
-        SelectElement,
+        "back"
+      ),
+      hasStepForward && /* @__PURE__ */ jsx(
+        m.div,
         {
-          subjectId,
-          onSelect: (id) => browser.navigateTo(id),
-          viewId: ((_a = browser.getState().scope) == null ? void 0 : _a.id) ?? "",
-          scope: "global"
-        }
+          layout: true,
+          initial: { opacity: 0.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();
+                onStepForward();
+              },
+              children: /* @__PURE__ */ jsx(IconChevronRight, {})
+            }
+          )
+        },
+        "forward"
       )
-    ] })
-  ] }) }) });
-};
-export {
-  RelationshipsBrowser
+    ] }),
+    /* @__PURE__ */ jsx(SelectElement, {})
+  ] }) });
 };
+
+export { RelationshipsBrowser, edgeTypes };

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

@@ -1,9 +1,22 @@
-/* empty css                                 */
-var node = "_9mmte0";
-var label = "_9mmte1";
-var scrollArea = "_9mmte2";
-export {
-  label,
-  node,
-  scrollArea
-};
+import { css } from '@likec4/styles/css';
+
+const node = css({
+  margin: 0
+});
+const label = css({
+  _hover: {
+    backgroundColor: "mantine.colors.gray[0]",
+    _dark: {
+      backgroundColor: "mantine.colors.defaultHover",
+      color: "mantine.colors.white"
+    }
+  }
+});
+const scrollArea = css({
+  maxHeight: [
+    "70vh",
+    "calc(100cqh - 70px)"
+  ]
+});
+
+export { label, node, scrollArea };

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

@@ -1,7 +1,2 @@
-import { Fqn, ViewId } from '@likec4/core';
-export declare const SelectElement: ({ subjectId, viewId, scope, onSelect, }: {
-    subjectId: Fqn;
-    viewId: ViewId;
-    scope: "global" | "view";
-    onSelect: (id: Fqn) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const SelectElement: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,22 +1,40 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ancestorsFqn } from "@likec4/core";
-import { useTree, useComputedColorScheme, Box, Popover, PopoverTarget, Button, PopoverDropdown, ScrollAreaAutosize, Tree, Group, ActionIcon, Text } from "@mantine/core";
-import { IconSelector, IconChevronRight } from "@tabler/icons-react";
-import { useRef, useEffect } from "react";
-import * as SelectElement_css from "./SelectElement.css.js";
-import { scrollArea } from "./SelectElement.css.js";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
-import { useLikeC4ElementsTree } from "../../likec4model/useLikeC4ElementsTree.js";
-const SelectElement = ({
-  subjectId,
-  viewId,
-  scope,
-  onSelect
-}) => {
+import { jsxs, Fragment, jsx } 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 { IconSelector, IconChevronRight } from '@tabler/icons-react';
+import { memo, useRef, useEffect } from 'react';
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
+import * as SelectElement_css from './SelectElement.css.js';
+import { scrollArea } from './SelectElement.css.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useLikeC4ElementsTree } from '../../likec4model/useLikeC4ElementsTree.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
+  };
+};
+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(true);
   const subject = model.findElement(subjectId);
-  const data = useLikeC4ElementsTree(scope === "view" ? viewId : void 0);
+  const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
   const tree = useTree({
     multiple: false
   });
@@ -26,108 +44,174 @@ const SelectElement = ({
     });
     tree.select(subjectId);
   }, [subjectId]);
-  const theme = useComputedColorScheme();
-  return /* @__PURE__ */ jsx(Box, { pos: "relative", children: /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "bottom-start",
-      shadow: "md",
-      keepMounted: false,
-      withinPortal: false,
-      closeOnClickOutside: true,
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      onOpen: () => {
-        setTimeout(() => {
-          var _a;
-          const item = (_a = viewport.current) == null ? void 0 : _a.querySelector(`[data-value="${subjectId}"]`);
-          item == null ? void 0 : item.scrollIntoView({ behavior: "instant", block: "nearest" });
-        }, 100);
-      },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "xs",
-            variant: "light",
-            color: theme === "light" ? "dark" : "gray",
-            fw: "500",
-            maw: 250,
-            style: { padding: "0.25rem 0.75rem" },
-            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
-            children: (subject == null ? void 0 : 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
+  return /* @__PURE__ */ jsxs(Group, { ref: root, gap: "xs", wrap: "nowrap", pos: "relative", children: [
+    enableSelectSubject && /* @__PURE__ */ jsxs(Fragment, { 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 ?? "???" })
               }
-            },
-            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"
+            ) }),
+            /* @__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"
                   },
-                  children: /* @__PURE__ */ jsx(
-                    IconChevronRight,
+                  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,
                     {
-                      stroke: 3.5,
+                      variant: "subtle",
+                      size: 18,
+                      c: "dimmed",
                       style: {
-                        transition: "transform 150ms ease",
-                        transform: `rotate(${expanded ? "90deg" : "0"})`,
-                        width: "80%"
-                      }
+                        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();
-                    onSelect(node.value);
-                    tree.select(node.value);
-                    tree.expand(node.value);
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    Text,
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Box,
                     {
-                      fz: "sm",
-                      fw: selected ? "600" : "400",
-                      truncate: "end",
-                      children: node.label
+                      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(Fragment, { 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"
             ] })
-          }
-        ) }) })
-      ]
-    }
-  ) });
-};
-export {
-  SelectElement
-};
+          ] }),
+          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
+                }
+              ]
+            }
+          )
+        }
+      ) })
+    ] })
+  ] });
+});
+
+export { SelectElement };