@likec4/diagram 1.18.0 → 1.19.0

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -0,0 +1,11 @@
+/* empty css                                         */
+var fqn = "k4m020";
+var relationshipStat = "k4m021";
+var xyflow = "k4m022";
+var panelScope = "k4m023";
+export {
+  fqn,
+  panelScope,
+  relationshipStat,
+  xyflow
+};

package/dist/overlays/element-details/TabPanelRelationships.d.ts

@@ -0,0 +1,8 @@
+import { DiagramView, LikeC4Model } from '@likec4/core';
+type RelationshipsTabPanelProps = {
+    currentView: DiagramView;
+    node: LikeC4Model.Node;
+    element: LikeC4Model.Element;
+};
+export declare function TabPanelRelationships({ currentView, node, element }: RelationshipsTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { nameFromFqn } from "@likec4/core";
+import { Stack, Group, Box, ThemeIcon, Text, SegmentedControl, Button, Paper } from "@mantine/core";
+import { useId } from "@mantine/hooks";
+import { IconArrowRight, IconInfoCircle, IconExternalLink } from "@tabler/icons-react";
+import { Panel } from "@xyflow/react";
+import { LayoutGroup } from "framer-motion";
+import { useState } from "react";
+import { unique } from "remeda";
+import { useOverlayDialog } from "../OverlayContext.js";
+import { RelationshipsXYFlow } from "../relationships-of/RelationshipsXYFlow.js";
+import { useLayoutedRelationships } from "../relationships-of/use-layouted-relationships.js";
+import { fqn, xyflow, panelScope, relationshipStat } from "./TabPanelRelationships.css.js";
+import { useDiagramState } from "../../hooks/useDiagramState.js";
+function TabPanelRelationships({
+  currentView,
+  node,
+  element
+}) {
+  const layoutId = useId();
+  const enableRelationshipBrowser = useDiagramState((s) => s.enableRelationshipBrowser);
+  const overlay = useOverlayDialog();
+  const [scope, setScope] = useState("view");
+  const incoming = element.incoming().map((r) => r.id).toArray();
+  const outgoing = element.outgoing().map((r) => r.id).toArray();
+  const incomingInView = unique(node.incoming().flatMap((e) => e.$edge.relations).toArray());
+  const outgoingInView = unique(node.outgoing().flatMap((e) => e.$edge.relations).toArray());
+  const notIncludedRelations = [
+    ...incoming,
+    ...outgoing
+  ].filter((r) => !incomingInView.includes(r) && !outgoingInView.includes(r)).length;
+  const {
+    edges,
+    nodes,
+    bounds
+  } = useLayoutedRelationships(element.id, currentView, scope);
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", pos: "relative", w: "100%", h: "100%", children: [
+    incoming.length + outgoing.length > 0 && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Group, { gap: 8, mb: 4, wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          RelationshipsStat,
+          {
+            title: "incoming",
+            total: incoming.length,
+            included: incomingInView.length
+          }
+        ),
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", c: "dimmed", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } }) }),
+        /* @__PURE__ */ jsx(Text, { className: fqn, children: nameFromFqn(element.id) }),
+        /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", c: "dimmed", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: 16 } }) }),
+        /* @__PURE__ */ jsx(
+          RelationshipsStat,
+          {
+            title: "outgoing",
+            total: outgoing.length,
+            included: outgoingInView.length
+          }
+        )
+      ] }) }),
+      notIncludedRelations > 0 && /* @__PURE__ */ jsxs(
+        Group,
+        {
+          mt: "xs",
+          gap: 6,
+          c: "orange",
+          style: { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsx(IconInfoCircle, { style: { width: 14 } }),
+            /* @__PURE__ */ jsxs(Text, { fz: "sm", children: [
+              notIncludedRelations,
+              " relationship",
+              notIncludedRelations > 1 ? "s are" : " is",
+              " hidden"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: xyflow, children: /* @__PURE__ */ jsx(LayoutGroup, { id: layoutId, children: /* @__PURE__ */ jsxs(
+      RelationshipsXYFlow,
+      {
+        subjectId: element.id,
+        bounds,
+        nodes,
+        edges,
+        view: currentView,
+        elementsSelectable: false,
+        children: [
+          /* @__PURE__ */ jsx(Panel, { position: "top-left", className: panelScope, children: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              size: "xs",
+              withItemsBorders: false,
+              value: scope,
+              onChange: setScope,
+              data: [
+                { label: "Global", value: "global" },
+                { label: "View", value: "view" }
+              ]
+            }
+          ) }),
+          enableRelationshipBrowser && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "compact-sm",
+              variant: "default",
+              fz: "xs",
+              fw: 500,
+              rightSection: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: 16 } }),
+              onClick: (e) => {
+                e.stopPropagation();
+                overlay.close(() => {
+                  overlay.openOverlay({
+                    relationshipsOf: element.id
+                  });
+                });
+              },
+              children: "Open"
+            }
+          ) })
+        ]
+      }
+    ) }) })
+  ] });
+}
+function RelationshipsStat({
+  title,
+  total,
+  included
+}) {
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      withBorder: true,
+      shadow: "none",
+      className: relationshipStat,
+      px: "md",
+      py: "xs",
+      radius: "md",
+      mod: {
+        zero: total === 0,
+        missing: total !== included
+      },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: 4, align: "flex-end", children: [
+        /* @__PURE__ */ jsx(Text, { component: "div", c: total !== included ? "orange" : "dimmed", tt: "uppercase", fw: 600, fz: 10, lh: 1, children: title }),
+        /* @__PURE__ */ jsx(Text, { fw: 600, fz: "xl", component: "div", lh: 1, children: total !== included ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          included,
+          " / ",
+          total
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: total }) })
+      ] })
+    }
+  );
+}
+export {
+  TabPanelRelationships
+};

package/dist/overlays/element-details/TabPanelStructure.css.d.ts

@@ -0,0 +1,2 @@
+export declare const treeNodeLabel: string;
+export declare const elementLabel: string;

package/dist/overlays/element-details/TabPanelStructure.css.js

@@ -0,0 +1,7 @@
+/* empty css                                     */
+var treeNodeLabel = "_15ijd1w0";
+var elementLabel = "_15ijd1w1";
+export {
+  elementLabel,
+  treeNodeLabel
+};

package/dist/overlays/element-details/TabPanelStructure.d.ts

@@ -0,0 +1,25 @@
+import { LikeC4Model } from '@likec4/core';
+import { ReactNode } from 'react';
+interface ElementTreeNodeData {
+    label: ReactNode;
+    value: string;
+    element: LikeC4Model.Element;
+    type: 'ancestor' | 'current' | 'descedant';
+    children: TreeNodeData[];
+}
+export interface MessageNodeData {
+    label: ReactNode;
+    value: string;
+    type: 'message';
+    children: TreeNodeData[];
+}
+export type TreeNodeData = ElementTreeNodeData | MessageNodeData;
+type TabPanelStructureProps = {
+    element: LikeC4Model.Element;
+};
+export declare const ElementLabel: ({ element }: {
+    element: LikeC4Model.Element;
+    type: "ancestor" | "current" | "descedant";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function TabPanelStructure({ element }: TabPanelStructureProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/element-details/TabPanelStructure.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { useMemo, useEffect } from "react";
+import { treeNodeLabel, elementLabel } from "./TabPanelStructure.css.js";
+const ElementLabel = ({
+  element
+}) => /* @__PURE__ */ jsx(Box, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) });
+function TabPanelStructure({
+  element
+}) {
+  const tree = useTree({
+    multiple: false
+  });
+  const data = useMemo(() => {
+    let seq = 1;
+    const messageNode = (label) => ({
+      label,
+      value: `msg${seq++}`,
+      type: "message",
+      children: []
+    });
+    const current = {
+      label: /* @__PURE__ */ jsx(ElementLabel, { type: "current", element }),
+      value: element.id,
+      element,
+      type: "current",
+      children: [...element.children()].map((child) => ({
+        label: /* @__PURE__ */ jsx(ElementLabel, { type: "descedant", element: child }),
+        value: child.id,
+        element: child,
+        type: "descedant",
+        children: []
+      }))
+    };
+    if (current.children.length === 0) {
+      current.children.push(
+        messageNode(/* @__PURE__ */ jsx(Pill, { radius: "sm", children: "no nested" }))
+      );
+    }
+    let ancestor = element.ancestors().reduce((acc, parent) => ({
+      label: /* @__PURE__ */ jsx(ElementLabel, { type: "ancestor", element: parent }),
+      value: parent.id,
+      element: parent,
+      type: "ancestor",
+      children: [acc]
+    }), current);
+    return [
+      ancestor
+    ];
+  }, [element]);
+  useEffect(() => {
+    tree.expandAllNodes();
+  }, [data]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", title: "In development", icon: /* @__PURE__ */ jsx(IconInfoCircle, {}), children: [
+      "We need your feedback. Share your thoughts and ideas -",
+      " ",
+      /* @__PURE__ */ jsx(
+        Anchor,
+        {
+          fz: "sm",
+          fw: 500,
+          underline: "hover",
+          c: "orange",
+          href: "https://github.com/likec4/likec4/discussions/",
+          target: "_blank",
+          children: "GitHub discussions"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Tree,
+      {
+        levelOffset: "xl",
+        allowRangeSelection: false,
+        expandOnClick: false,
+        expandOnSpace: false,
+        classNames: {
+          label: treeNodeLabel
+        },
+        data,
+        tree
+      }
+    )
+  ] });
+}
+export {
+  ElementLabel,
+  TabPanelStructure
+};

package/dist/overlays/index.d.ts

@@ -0,0 +1 @@
+export { Overlays } from './Overlays';

package/dist/overlays/relationships-of/RelationshipsOverlay.d.ts

@@ -0,0 +1,5 @@
+import { Fqn } from '@likec4/core';
+import { NamedExoticComponent } from 'react';
+export declare const RelationshipsOverlay: NamedExoticComponent<{
+    subjectId: Fqn;
+}>;

package/dist/overlays/relationships-of/RelationshipsOverlay.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@likec4/core";
+import { Group, Button, Space, Box, SegmentedControl, Text } from "@mantine/core";
+import { useLocalStorage, useStateHistory } from "@mantine/hooks";
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { Panel } from "@xyflow/react";
+import { memo, useEffect } from "react";
+import { useDiagramState } from "../../hooks/useDiagramState.js";
+import { useOverlayDialog } from "../OverlayContext.js";
+import { RelationshipsXYFlow } from "./RelationshipsXYFlow.js";
+import { SelectElement } from "./SelectElement.js";
+import { useLayoutedRelationships } from "./use-layouted-relationships.js";
+const RelationshipsOverlay = memo(function RelationshipsOverlay2({ subjectId }) {
+  const view = useDiagramState((s) => s.view);
+  const [_scope, setScope] = useLocalStorage({
+    key: "likec4:scope-relationships-of",
+    getInitialValueInEffect: false,
+    defaultValue: "view"
+  });
+  const {
+    notIncludedRelations,
+    viewIncludesSubject,
+    edges,
+    nodes,
+    subject,
+    bounds
+  } = useLayoutedRelationships(subjectId, view, _scope);
+  const scope = viewIncludesSubject ? _scope : "global";
+  const showSubjectWarning = !viewIncludesSubject && _scope === "view";
+  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
+  const overlay = useOverlayDialog();
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      historyOps.set(subjectId);
+    }
+  }, [subjectId]);
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      overlay.openOverlay({
+        relationshipsOf: historySubjectId
+      });
+    }
+  }, [historySubjectId]);
+  return /* @__PURE__ */ jsx(
+    RelationshipsXYFlow,
+    {
+      nodes,
+      edges,
+      bounds,
+      view,
+      subjectId,
+      viewportPadding: 0.2,
+      onNodeClick: (e, node) => {
+        e.stopPropagation();
+        if (node.type === "empty") return;
+        overlay.openOverlay({
+          relationshipsOf: node.data.fqn
+        });
+      },
+      children: /* @__PURE__ */ jsx(Panel, { position: "top-center", children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { stroke: 3, size: 14 }),
+            color: "dimmed",
+            variant: "subtle",
+            style: {
+              visibility: current > 0 ? "visible" : "hidden",
+              padding: "0.25rem 0.75rem"
+            },
+            styles: {
+              label: {
+                fontWeight: 400
+              },
+              section: {
+                marginInlineEnd: 6
+              }
+            },
+            size: "sm",
+            onClick: (e) => {
+              e.stopPropagation();
+              historyOps.back();
+            },
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx(Space, { w: 2 }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", pos: "relative", wrap: "nowrap", flex: "1 0 auto", children: [
+          /* @__PURE__ */ jsx(Box, { fz: "sm", fw: "400", style: { whiteSpace: "nowrap", userSelect: "none" }, children: "Relationships of" }),
+          /* @__PURE__ */ jsx(Box, { flex: "1 0 auto", children: /* @__PURE__ */ jsx(
+            SelectElement,
+            {
+              scope,
+              subject: subject.$element,
+              onSelect: (fqn) => overlay.openOverlay({
+                relationshipsOf: fqn
+              }),
+              viewId: view.id
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              flex: "1 0 auto",
+              size: "xs",
+              withItemsBorders: false,
+              value: scope,
+              onChange: setScope,
+              data: [
+                { label: "Global", value: "global" },
+                { label: "Current view", value: "view", disabled: !viewIncludesSubject }
+              ]
+            }
+          ),
+          showSubjectWarning && /* @__PURE__ */ jsx(
+            Box,
+            {
+              pos: "absolute",
+              top: "calc(100% + .5rem)",
+              left: "50%",
+              w: "max-content",
+              style: {
+                transform: "translateX(-50%)",
+                textAlign: "center",
+                cursor: "pointer"
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                setScope("global");
+              },
+              children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "xs", c: "orange", component: "div", children: "Current view doesn't include this element, switched to Global" })
+            }
+          ),
+          viewIncludesSubject && scope === "view" && notIncludedRelations > 0 && /* @__PURE__ */ jsx(
+            Box,
+            {
+              pos: "absolute",
+              top: "calc(100% + .5rem)",
+              left: "50%",
+              w: "max-content",
+              style: {
+                transform: "translateX(-50%)",
+                textAlign: "center",
+                cursor: "pointer"
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                setScope("global");
+              },
+              children: /* @__PURE__ */ jsxs(Text, { fw: 500, size: "xs", c: "orange", component: "div", children: [
+                "View does not include ",
+                notIncludedRelations,
+                " ",
+                "relationship",
+                notIncludedRelations > 1 ? "s" : "",
+                ". Switch to Global to compare"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            rightSection: /* @__PURE__ */ jsx(IconArrowRight, { stroke: 3, size: 14 }),
+            color: "dimmed",
+            variant: "subtle",
+            style: {
+              visibility: current + 1 < history.length ? "visible" : "hidden",
+              padding: "0.25rem 0.75rem"
+            },
+            styles: {
+              label: {
+                fontWeight: 400
+              },
+              section: {
+                marginInlineStart: 4
+              }
+            },
+            size: "sm",
+            onClick: (e) => {
+              e.stopPropagation();
+              historyOps.forward();
+            },
+            children: "Forward"
+          }
+        )
+      ] }) })
+    }
+  );
+});
+export {
+  RelationshipsOverlay
+};

package/dist/overlays/relationships-of/RelationshipsXYFlow.d.ts

@@ -0,0 +1,19 @@
+import { DiagramView, Fqn } from '@likec4/core';
+import { ReactFlowProps } from '@xyflow/react';
+import { PropsWithChildren } from 'react';
+import { RelationshipsOfFlowTypes } from './_types';
+type RelationshipsXYFlowProps = PropsWithChildren<{
+    subjectId: Fqn;
+    view: DiagramView;
+    nodes: RelationshipsOfFlowTypes.Node[];
+    edges: RelationshipsOfFlowTypes.Edge[];
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    viewportPadding?: number | undefined;
+}> & Pick<ReactFlowProps<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>, 'onNodeClick' | 'elementsSelectable' | 'maxZoom' | 'minZoom'>;
+export declare function RelationshipsXYFlow(props: RelationshipsXYFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};