@likec4/diagram 1.18.0 → 1.19.0

package/dist/overlays/edge-details/xyflow/CompoundNode.js

@@ -0,0 +1,76 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { compoundNodeBody, compoundNodeTitle } from "./styles.css.js";
+import { Text } from "../../../controls/Text.js";
+function CompoundNode({
+  data: {
+    element,
+    ports,
+    ...data
+  },
+  width = 200,
+  selectable = true
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: clsx([
+          compoundNodeBody,
+          "likec4-compound-node"
+        ]),
+        "data-compound-depth": 3,
+        "data-likec4-color": element.color,
+        animate: {
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed === true ? 0.4 : 0
+          }
+        },
+        ...selectable && {
+          whileHover: {
+            scale: 1.04,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 1
+          }
+        },
+        children: /* @__PURE__ */ jsx(Text, { className: compoundNodeTitle, maw: width - 20, children: element.title })
+      }
+    ),
+    ports.out.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${16 + 20 * i}px`
+        }
+      },
+      id
+    )),
+    ports.in.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "target",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${16 + 20 * i}px`
+        }
+      },
+      id
+    ))
+  ] });
+}
+export {
+  CompoundNode
+};

package/dist/overlays/edge-details/xyflow/ElementNode.d.ts

@@ -0,0 +1,5 @@
+import { NodeProps } from '@xyflow/react';
+import { SharedFlowTypes } from '../../shared/xyflow/_types';
+type ElementNodeProps = NodeProps<SharedFlowTypes.ElementNode>;
+export declare function ElementNode({ data: { element, ports, navigateTo, ...data }, selectable, width: w, height: h }: ElementNodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/edge-details/xyflow/ElementNode.js

@@ -0,0 +1,159 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ActionIcon, Box, Group } from "@mantine/core";
+import { IconZoomScan, IconTransform, IconFileSymlink } from "@tabler/icons-react";
+import { Handle, Position } from "@xyflow/react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { ElementShapeSvg } from "../../../xyflow/nodes/element/ElementShapeSvg.js";
+import { stopPropagation } from "../../../xyflow/utils.js";
+import { useOverlayDialog } from "../../OverlayContext.js";
+import { navigateBtn, elementNode, cssShapeSvg, elementNodeContent, elementNodeTitle, elementNodeDescription, navigateBtnBox } from "./styles.css.js";
+import { Text } from "../../../controls/Text.js";
+import { useDiagramState } from "../../../hooks/useDiagramState.js";
+const Action = ActionIcon.withProps({
+  className: "nodrag nopan " + navigateBtn,
+  radius: "md",
+  role: "button",
+  onDoubleClick: stopPropagation,
+  onPointerDownCapture: stopPropagation
+});
+function selector(s) {
+  return {
+    currentViewId: s.view.id,
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
+    onNavigateTo: s.onNavigateTo,
+    onOpenSource: s.onOpenSource
+  };
+}
+function ElementNode({
+  data: {
+    element,
+    ports,
+    navigateTo,
+    ...data
+  },
+  selectable = true,
+  width: w = 100,
+  height: h = 100
+}) {
+  const overlay = useOverlayDialog();
+  const {
+    currentViewId,
+    onNavigateTo,
+    onOpenSource,
+    enableRelationshipBrowser
+  } = useDiagramState(selector);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        className: clsx([
+          elementNode,
+          "likec4-element-node"
+        ]),
+        "data-likec4-color": element.color,
+        "data-likec4-shape": element.shape,
+        animate: {
+          opacity: data.dimmed ? 0.15 : 1,
+          transition: {
+            delay: data.dimmed === true ? 0.4 : 0
+          }
+        },
+        ...selectable && {
+          whileHover: {
+            scale: 1.045,
+            transition: {
+              delay: 0.15
+            }
+          },
+          whileTap: {
+            scale: 0.97
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: clsx(
+                cssShapeSvg
+              ),
+              viewBox: `0 0 ${w} ${h}`,
+              width: w,
+              height: h,
+              children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: element.shape, w, h })
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: elementNodeContent, children: [
+            /* @__PURE__ */ jsx(Text, { className: elementNodeTitle, lineClamp: 2, children: element.title }),
+            element.description && /* @__PURE__ */ jsx(Text, { className: elementNodeDescription, lineClamp: 4, children: element.description })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox, children: [
+            navigateTo && onNavigateTo && navigateTo !== currentViewId && /* @__PURE__ */ jsx(
+              Action,
+              {
+                onClick: (event) => {
+                  event.stopPropagation();
+                  overlay.close(() => onNavigateTo(navigateTo));
+                },
+                children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, style: { width: "75%" } })
+              }
+            ),
+            enableRelationshipBrowser && /* @__PURE__ */ jsx(
+              Action,
+              {
+                onClick: (event) => {
+                  event.stopPropagation();
+                  overlay.openOverlay({
+                    relationshipsOf: data.fqn
+                  });
+                },
+                children: /* @__PURE__ */ jsx(IconTransform, { stroke: 1.8, style: { width: "72%" } })
+              }
+            ),
+            onOpenSource && /* @__PURE__ */ jsx(
+              Action,
+              {
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onOpenSource({
+                    element: data.fqn
+                  });
+                },
+                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "72%" } })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    ports.out.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+        }
+      },
+      id
+    )),
+    ports.in.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "target",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+        }
+      },
+      id
+    ))
+  ] });
+}
+export {
+  ElementNode
+};

package/dist/overlays/edge-details/xyflow/RelationshipEdge.d.ts

@@ -0,0 +1,3 @@
+import { EdgeProps } from '@xyflow/react';
+import { EdgeDetailsFlowTypes } from '../_types';
+export declare function RelationshipEdge({ data, label, ...props }: EdgeProps<EdgeDetailsFlowTypes.Edge>): import("react/jsx-runtime").JSX.Element;

package/dist/overlays/edge-details/xyflow/RelationshipEdge.js

@@ -0,0 +1,84 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Stack, Text, Box, ActionIcon } from "@mantine/core";
+import { IconZoomScan } from "@tabler/icons-react";
+import { getBezierPath, BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
+import clsx from "clsx";
+import { useDiagramState } from "../../../hooks/useDiagramState.js";
+import { stopPropagation } from "../../../xyflow/utils.js";
+import { useOverlayDialog } from "../../OverlayContext.js";
+import { edgeContainer, edgeLabel, edgeLabelText, edgeLabelTechnology } from "../../shared/xyflow/RelationshipEdge.css.js";
+import { ZIndexes } from "../use-layouted-edge-details.js";
+function RelationshipEdge({
+  data,
+  label,
+  ...props
+}) {
+  const overlay = useOverlayDialog();
+  const onNavigateTo = useDiagramState((s) => s.onNavigateTo);
+  const [edgePath, labelX, labelY] = getBezierPath(props);
+  const navigateTo = data.navigateTo;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "g",
+      {
+        className: edgeContainer,
+        "data-edge-dimmed": data.dimmed,
+        "data-edge-hovered": data.hovered,
+        children: /* @__PURE__ */ jsx(
+          BaseEdge,
+          {
+            path: edgePath,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        gap: 2,
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+          maxWidth: Math.abs(props.targetX - props.sourceX - 40),
+          zIndex: ZIndexes.max
+        },
+        className: clsx([
+          edgeLabel,
+          "nodrag nopan"
+        ]),
+        "data-edge-dimmed": data.dimmed,
+        "data-edge-hovered": data.hovered,
+        children: [
+          label && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelText, lineClamp: 3, children: label }),
+          data.technology && /* @__PURE__ */ jsxs(Text, { component: "div", className: edgeLabelTechnology, children: [
+            "[ ",
+            data.technology,
+            " ]"
+          ] }),
+          navigateTo && onNavigateTo && /* @__PURE__ */ jsx(Box, { ta: "center", mt: 4, children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "default",
+              size: "sm",
+              radius: "sm",
+              onPointerDownCapture: stopPropagation,
+              onClick: (event) => {
+                event.stopPropagation();
+                overlay.close(() => {
+                  onNavigateTo(navigateTo);
+                });
+              },
+              role: "button",
+              onDoubleClick: stopPropagation,
+              children: /* @__PURE__ */ jsx(IconZoomScan, {})
+            }
+          ) })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  RelationshipEdge
+};

package/dist/overlays/edge-details/xyflow/styles.css.d.ts

@@ -0,0 +1,9 @@
+export declare const elementNode: string;
+export declare const elementNodeContent: string;
+export declare const elementNodeTitle: string;
+export declare const elementNodeDescription: string;
+export declare const compoundNodeBody: string;
+export declare const compoundNodeTitle: string;
+export declare const cssShapeSvg: string;
+export declare const navigateBtnBox: string;
+export declare const navigateBtn: string;

package/dist/overlays/edge-details/xyflow/styles.css.js

@@ -0,0 +1,21 @@
+/* empty css                          */
+var elementNode = "_144zcea0";
+var elementNodeContent = "_144zcea1";
+var elementNodeTitle = "_144zcea2";
+var elementNodeDescription = "_144zcea3";
+var compoundNodeBody = "_144zcea4";
+var compoundNodeTitle = "_144zcea5";
+var cssShapeSvg = "_144zcea6";
+var navigateBtnBox = "_144zcea7";
+var navigateBtn = "_144zcea8";
+export {
+  compoundNodeBody,
+  compoundNodeTitle,
+  cssShapeSvg,
+  elementNode,
+  elementNodeContent,
+  elementNodeDescription,
+  elementNodeTitle,
+  navigateBtn,
+  navigateBtnBox
+};

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

@@ -0,0 +1,16 @@
+export declare const cardBg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const dialog: string;
+export declare const card: string;
+export declare const cardHeader: string;
+export declare const title: string;
+export declare const elementIcon: string;
+export declare const viewButton: string;
+export declare const viewButtonTitle: string;
+export declare const tabsRoot: string;
+export declare const tabsList: string;
+export declare const tabsTab: string;
+export declare const tabsPanel: string;
+export declare const propertiesGrid: string;
+export declare const propertyLabel: string;
+export declare const elementLink: string;
+export declare const resizeHandle: string;

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

@@ -0,0 +1,33 @@
+/* empty css                                      */
+var dialog = "paikoy2";
+var card = "paikoy3";
+var cardHeader = "paikoy4";
+var title = "paikoy5";
+var elementIcon = "paikoy6";
+var viewButton = "paikoy9";
+var viewButtonTitle = "paikoya";
+var tabsRoot = "paikoyb";
+var tabsList = "paikoyc";
+var tabsTab = "paikoyd";
+var tabsPanel = "paikoye";
+var propertiesGrid = "paikoyf";
+var propertyLabel = "paikoyg";
+var elementLink = "paikoyh";
+var resizeHandle = "paikoyi";
+export {
+  card,
+  cardHeader,
+  dialog,
+  elementIcon,
+  elementLink,
+  propertiesGrid,
+  propertyLabel,
+  resizeHandle,
+  tabsList,
+  tabsPanel,
+  tabsRoot,
+  tabsTab,
+  title,
+  viewButton,
+  viewButtonTitle
+};

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

@@ -0,0 +1,7 @@
+import { Fqn } from '@likec4/core';
+import { MemoExoticComponent } from 'react';
+type ElementDetailsCardProps = {
+    fqn: Fqn;
+};
+export declare const ElementDetailsCard: MemoExoticComponent<({ fqn }: ElementDetailsCardProps) => import("react/jsx-runtime").JSX.Element>;
+export {};