@likec4/diagram 1.18.0 → 1.19.1

package/dist/xyflow/edges/RelationshipsDropdownMenu.js

@@ -0,0 +1,211 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { invariant, nameFromFqn } from "@likec4/core";
+import { Tooltip as Tooltip$1, Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, Stack, Group, Text, TooltipGroup, Space, MenuItem } from "@mantine/core";
+import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@tabler/icons-react";
+import clsx from "clsx";
+import { useCallback, forwardRef, Fragment as Fragment$1 } from "react";
+import { pick, pipe, map, filter, isTruthy, partition } from "remeda";
+import { Link } from "../../ui/Link.js";
+import { menuDropdown, menuItemRelationship, endpoint, title } from "./RelationshipsDropdownMenu.css.js";
+import { useXYNodesData } from "../../hooks/useXYFlow.js";
+import { useDiagramState, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+const stopPropagation = (e) => e.stopPropagation();
+const Tooltip = Tooltip$1.withProps({
+  color: "gray",
+  fz: "xs",
+  openDelay: 300,
+  closeDelay: 150,
+  label: "",
+  children: null,
+  offset: 8,
+  withinPortal: false
+});
+function RelationshipsDropdownMenu({
+  edge,
+  disabled = false,
+  likec4model,
+  children
+}) {
+  const {
+    openOverlay,
+    enableRelationshipBrowser
+  } = useDiagramState(pick(["openOverlay", "enableRelationshipBrowser"]));
+  const portalProps = useMantinePortalProps();
+  const [sourceXYNode, targetXYNode] = useXYNodesData([edge.source, edge.target]);
+  invariant(sourceXYNode, `Source XYNode ${edge.source} not found for edge ${edge.id}`);
+  invariant(targetXYNode, `Target XYNode ${edge.target} not found for edge ${edge.id}`);
+  const [direct, nested] = pipe(
+    edge.relations,
+    map((id) => {
+      try {
+        return likec4model.relationship(id);
+      } catch (e) {
+        console.error(
+          `View is cached and likec4model missing relationship ${id} from ${edge.source} -> ${edge.target}`,
+          e
+        );
+        return null;
+      }
+    }),
+    filter(isTruthy),
+    partition((r) => r.source.id === edge.source && r.target.id === edge.target)
+  );
+  const onClickOpenOverlay = useCallback((e) => {
+    e.stopPropagation();
+    if (enableRelationshipBrowser) {
+      openOverlay({
+        edgeDetails: edge.id
+      });
+    }
+  }, [edge.id, openOverlay, enableRelationshipBrowser]);
+  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    index > 0 && /* @__PURE__ */ jsx(MenuDivider, { opacity: 0.65 }),
+    /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        onClick: onClickOpenOverlay,
+        component: Relationship,
+        relationship,
+        sourceNode: sourceXYNode.data.element,
+        targetNode: targetXYNode.data.element,
+        edge
+      }
+    )
+  ] }, relationship.id);
+  if (direct.length + nested.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      trigger: "click-hover",
+      openDelay: 300,
+      closeDelay: 450,
+      floatingStrategy: "fixed",
+      closeOnClickOutside: true,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      closeOnEscape: true,
+      closeOnItemClick: false,
+      disabled,
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(MenuTarget, { children }),
+        /* @__PURE__ */ jsxs(
+          MenuDropdown,
+          {
+            className: menuDropdown,
+            onPointerDownCapture: stopPropagation,
+            onPointerDown: stopPropagation,
+            onClick: stopPropagation,
+            children: [
+              direct.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(MenuLabel, { children: "direct relationships" }),
+                direct.map(renderRelationship)
+              ] }),
+              nested.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                direct.length > 0 && /* @__PURE__ */ jsx(MenuDivider, {}),
+                /* @__PURE__ */ jsx(MenuLabel, { children: "resolved from nested" }),
+                nested.map(renderRelationship)
+              ] }),
+              enableRelationshipBrowser && /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 5, right: 6, children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  size: 24,
+                  variant: "subtle",
+                  onClick: onClickOpenOverlay,
+                  children: /* @__PURE__ */ jsx(IconInfoCircle, { style: { width: "70%" } })
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const Relationship = forwardRef(({
+  className,
+  relationship: r,
+  edge,
+  sourceNode,
+  targetNode,
+  ...props
+}, ref) => {
+  var _a, _b;
+  const diagramApi = useDiagramStoreApi();
+  const {
+    viewId,
+    hasOnOpenSourceRelation,
+    hasOnNavigateTo
+  } = useDiagramState((s) => ({
+    viewId: s.view.id,
+    hasOnOpenSourceRelation: !!s.onOpenSource,
+    hasOnNavigateTo: !!s.onNavigateTo
+  }));
+  const sourceId = nameFromFqn(edge.source) + r.source.id.slice(edge.source.length);
+  const targetId = nameFromFqn(edge.target) + r.target.id.slice(edge.target.length);
+  const navigateTo = hasOnNavigateTo && ((_a = r.navigateTo) == null ? void 0 : _a.id) !== viewId ? (_b = r.navigateTo) == null ? void 0 : _b.id : void 0;
+  const links = r.links;
+  return /* @__PURE__ */ jsxs(Stack, { ref, className: clsx(menuItemRelationship, className), ...props, children: [
+    /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Text, { component: "div", className: endpoint, "data-likec4-color": sourceNode.color, children: sourceId }),
+      /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: 11 }),
+      /* @__PURE__ */ jsx(Text, { component: "div", className: endpoint, "data-likec4-color": targetNode.color, children: targetId }),
+      (navigateTo || hasOnOpenSourceRelation) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
+        /* @__PURE__ */ jsx(Space, { w: "xs" }),
+        navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            className: clsx("nodrag nopan"),
+            size: "sm",
+            radius: "sm",
+            variant: "default",
+            onPointerDownCapture: stopPropagation,
+            onClick: (event) => {
+              var _a2, _b2;
+              event.stopPropagation();
+              (_b2 = (_a2 = diagramApi.getState()).onNavigateTo) == null ? void 0 : _b2.call(_a2, navigateTo, event);
+            },
+            role: "button",
+            children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
+          }
+        ) }),
+        hasOnOpenSourceRelation && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            className: clsx("nodrag nopan"),
+            size: "sm",
+            radius: "sm",
+            variant: "default",
+            onPointerDownCapture: stopPropagation,
+            onClick: (event) => {
+              var _a2, _b2;
+              event.stopPropagation();
+              (_b2 = (_a2 = diagramApi.getState()).onOpenSource) == null ? void 0 : _b2.call(_a2, {
+                relation: r.id
+              });
+            },
+            role: "button",
+            children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+    r.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: r.description }),
+    links.length > 0 && /* @__PURE__ */ jsx(
+      Stack,
+      {
+        gap: 3,
+        justify: "stretch",
+        align: "stretch",
+        children: links.map((link) => /* @__PURE__ */ jsx(Link, { link }, link.url))
+      }
+    )
+  ] });
+});
+export {
+  RelationshipsDropdownMenu,
+  Tooltip
+};

package/dist/xyflow/edges/edges.css.d.ts

@@ -0,0 +1,17 @@
+export declare const container: string;
+export declare const dimmed: string;
+export declare const edgePathBg: string;
+export declare const markerContext: string;
+export declare const controlPoint: string;
+export declare const controlDragging: string;
+export declare const cssEdgePath: string;
+export declare const stepEdgeNumber: string;
+export declare const varLabelX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const varLabelY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const edgeLabel: string;
+export declare const edgeLabelText: string;
+export declare const edgeLabelTechnology: string;
+export declare const edgeNoteCloseButton: string;
+export declare const edgeNoteText: string;
+export declare const cssNavigateBtn: string;
+export declare const cssNavigateBtnIcon: string;

package/dist/xyflow/edges/edges.css.js

@@ -0,0 +1,37 @@
+/* empty css                         */
+var container = "bexn7q1";
+var dimmed = "bexn7q2";
+var edgePathBg = "bexn7q3";
+var markerContext = "bexn7q4";
+var controlPoint = "bexn7q5";
+var controlDragging = "bexn7q6";
+var cssEdgePath = "bexn7q8";
+var stepEdgeNumber = "bexn7q9";
+var varLabelX = "var(--bexn7qa)";
+var varLabelY = "var(--bexn7qb)";
+var edgeLabel = "bexn7qd";
+var edgeLabelText = "bexn7qe";
+var edgeLabelTechnology = "bexn7qf";
+var edgeNoteCloseButton = "bexn7qg";
+var edgeNoteText = "bexn7qh";
+var cssNavigateBtn = "bexn7qi";
+var cssNavigateBtnIcon = "bexn7qj";
+export {
+  container,
+  controlDragging,
+  controlPoint,
+  cssEdgePath,
+  cssNavigateBtn,
+  cssNavigateBtnIcon,
+  dimmed,
+  edgeLabel,
+  edgeLabelTechnology,
+  edgeLabelText,
+  edgeNoteCloseButton,
+  edgeNoteText,
+  edgePathBg,
+  markerContext,
+  stepEdgeNumber,
+  varLabelX,
+  varLabelY
+};

package/dist/xyflow/edges/utils.d.ts

@@ -0,0 +1,16 @@
+import { Position, XYPosition } from '@xyflow/react';
+import { DiagramFlowTypes } from '../types';
+export declare function getNodeCenter(node: DiagramFlowTypes.InternalNode): XYPosition;
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: DiagramFlowTypes.InternalNode, { x: x1, y: y1 }: XYPosition): {
+    x: number;
+    y: number;
+};
+export declare function getPointPosition(node: DiagramFlowTypes.InternalNode, intersectionPoint: XYPosition): readonly [number, number, Position];
+export declare function getEdgeParams(source: DiagramFlowTypes.InternalNode, target: DiagramFlowTypes.InternalNode): {
+    sx: number;
+    sy: number;
+    tx: number;
+    ty: number;
+    sourcePos: Position;
+    targetPos: Position;
+};

package/dist/xyflow/edges/utils.js

@@ -0,0 +1,24 @@
+import "@xyflow/react";
+import { getNodeDimensions } from "@xyflow/system";
+function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight
+  } = getNodeDimensions(intersectionNode);
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute;
+  const w = intersectionNodeWidth / 2;
+  const h = intersectionNodeHeight / 2;
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+  return { x, y };
+}
+export {
+  getNodeIntersectionFromCenterToPoint
+};