@likec4/diagram 1.19.2 → 1.20.0

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -0,0 +1,307 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { nonNullable, isStepEdgeId } from "@likec4/core";
+import { useDebouncedEffect } from "@react-hookz/web";
+import clsx from "clsx";
+import { line, curveCatmullRomOpen } from "d3-shape";
+import { useState, useRef, useEffect } from "react";
+import { isTruthy, first, last } from "remeda";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { VectorImpl, vector } from "../../../utils/vector.js";
+import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
+import { controlDragging, controlPoint } from "./edges.css.js";
+import { NotePopover } from "./NotePopover.js";
+import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
+import { getNodeIntersectionFromCenterToPoint } from "./utils.js";
+import { customEdge } from "../../../base/primitives/customEdge.js";
+import { useXYStoreApi, useXYFlow, useXYInternalNode } from "../../../hooks/useXYFlow.js";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
+import { EdgePath } from "../../../base/primitives/edge/EdgePath.js";
+import { EdgeLabel } from "../../../base/primitives/edge/EdgeLabel.js";
+import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton.js";
+const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
+const RelationshipEdge = customEdge((props) => {
+  var _a;
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+  const xyflowStore = useXYStoreApi();
+  const xyflow = useXYFlow();
+  const diagram = useDiagram();
+  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeature(
+    "NavigateTo",
+    "EdgeEditing",
+    "RelationshipDetails"
+  );
+  const {
+    id,
+    source,
+    sourceX,
+    sourceY,
+    target,
+    targetX,
+    targetY,
+    data: {
+      id: edgeId,
+      navigateTo,
+      points,
+      active = false,
+      dimmed = false,
+      labelBBox,
+      labelXY,
+      ...data
+    }
+  } = props;
+  const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
+  const targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`);
+  const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
+  let controlPoints = data.controlPoints ?? bezierControlPoints(props.data);
+  let edgePath;
+  if (isModified) {
+    const sourceCenterPos = { x: sourceX, y: sourceY };
+    const targetCenterPos = { x: targetX, y: targetY };
+    const nodeMargin = 6;
+    const points2 = data.dir === "back" ? [
+      targetCenterPos,
+      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos, nodeMargin),
+      sourceCenterPos
+    ] : [
+      sourceCenterPos,
+      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos, nodeMargin),
+      ...controlPoints,
+      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+      targetCenterPos
+    ];
+    edgePath = nonNullable(curve(points2));
+  } else {
+    edgePath = bezierPath(points);
+  }
+  let labelX = (labelBBox == null ? void 0 : labelBBox.x) ?? 0, labelY = (labelBBox == null ? void 0 : labelBBox.y) ?? 0;
+  const [labelPos, setLabelPos] = useState({
+    x: (labelXY == null ? void 0 : labelXY.x) ?? labelX,
+    y: (labelXY == null ? void 0 : labelXY.y) ?? labelY
+  });
+  const svgPathRef = useRef(null);
+  useEffect(() => {
+    const path = svgPathRef.current;
+    if (!path) return;
+    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
+    const point = {
+      x: Math.round(dompoint.x),
+      y: Math.round(dompoint.y)
+    };
+    setLabelPos((current) => isSamePoint(current, point) ? current : point);
+  }, [edgePath]);
+  useDebouncedEffect(
+    () => {
+      if (!labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y) {
+        return;
+      }
+      xyflow.updateEdgeData(id, {
+        labelXY: {
+          x: labelPos.x,
+          y: labelPos.y
+        }
+      });
+    },
+    [labelPos],
+    50,
+    300
+  );
+  if (isModified || isControlPointDragging) {
+    labelX = labelPos.x;
+    labelY = labelPos.y;
+  }
+  const onLmbControlPointerDown = (index, e, domNode) => {
+    const { addSelectedEdges } = xyflowStore.getState();
+    addSelectedEdges([id]);
+    const wasCanceled = diagram.cancelSaveManualLayout();
+    e.stopPropagation();
+    let hasMoved = false;
+    let pointer = { x: e.clientX, y: e.clientY };
+    const onPointerMove = (e2) => {
+      const clientPoint = {
+        x: e2.clientX,
+        y: e2.clientY
+      };
+      if (!isSamePoint(pointer, clientPoint)) {
+        setIsControlPointDragging(true);
+        hasMoved = true;
+        pointer = clientPoint;
+        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
+        xyflow.updateEdgeData(id, (xyedge) => {
+          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
+          cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y)
+          };
+          return {
+            controlPoints: cp
+          };
+        });
+      }
+      e2.stopPropagation();
+    };
+    const onPointerUp = (e2) => {
+      domNode.removeEventListener("pointermove", onPointerMove, {
+        capture: true
+      });
+      if (hasMoved) {
+        e2.stopPropagation();
+      }
+      if (hasMoved || wasCanceled) {
+        diagram.scheduleSaveManualLayout();
+      }
+      setIsControlPointDragging(false);
+    };
+    domNode.addEventListener("pointermove", onPointerMove, {
+      capture: true
+    });
+    domNode.addEventListener("pointerup", onPointerUp, {
+      once: true,
+      capture: true
+    });
+  };
+  const onRmbControlPointerDown = (index, e, domNode) => {
+    if (controlPoints.length <= 1) {
+      return;
+    }
+    const onPointerUp = (e2) => {
+      const newControlPoints = controlPoints.slice();
+      newControlPoints.splice(index, 1);
+      e2.stopPropagation();
+      setTimeout(() => {
+        xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
+        diagram.scheduleSaveManualLayout();
+      }, 10);
+      domNode.removeEventListener("pointerup", onPointerUp, {
+        capture: true
+      });
+      e2.stopPropagation();
+    };
+    domNode.addEventListener("pointerup", onPointerUp, {
+      once: true,
+      capture: true
+    });
+    e.stopPropagation();
+  };
+  const onControlPointerDown = (index, e) => {
+    const { domNode } = xyflowStore.getState();
+    if (!domNode || e.pointerType !== "mouse") {
+      return;
+    }
+    switch (e.button) {
+      case 0:
+        onLmbControlPointerDown(index, e, domNode);
+        break;
+      case 2:
+        onRmbControlPointerDown(index, e, domNode);
+        break;
+    }
+  };
+  const onEdgePointerDown = (e) => {
+    const { domNode } = xyflowStore.getState();
+    if (!domNode || e.pointerType !== "mouse") {
+      return;
+    }
+    if (e.button !== 2) {
+      return;
+    }
+    xyflow.updateEdgeData(id, (edge) => {
+      var _a2;
+      const points2 = [
+        new VectorImpl(sourceX, sourceY),
+        ...controlPoints.map(vector) || [],
+        new VectorImpl(targetX, targetY)
+      ];
+      let pointer = { x: e.clientX, y: e.clientY };
+      const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }));
+      let insertionIndex = 0;
+      let minDistance = Infinity;
+      for (let i = 0; i < points2.length - 1; i++) {
+        const a = points2[i], b = points2[i + 1];
+        const fromCurrentToNext = b.sub(a);
+        const fromCurrentToNew = newPoint.sub(a);
+        const fromNextToNew = newPoint.sub(b);
+        if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
+          const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
+          if (distanceToEdge < minDistance) {
+            minDistance = distanceToEdge;
+            insertionIndex = i;
+          }
+        }
+      }
+      const newControlPoints = ((_a2 = edge.data.controlPoints) == null ? void 0 : _a2.slice()) || [];
+      newControlPoints.splice(insertionIndex, 0, newPoint);
+      return { controlPoints: newControlPoints };
+    });
+    diagram.scheduleSaveManualLayout();
+    e.stopPropagation();
+  };
+  let renderLabel;
+  if (!isControlPointDragging) {
+    const notes = props.data.notes;
+    if (notes && isStepEdgeId(props.id) && ((_a = diagram.getState().context.activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
+      renderLabel = (props2) => /* @__PURE__ */ jsx(NotePopover, { notes, children: /* @__PURE__ */ jsx("div", { ...props2 }) });
+    } else if (enableRelationshipDetails) {
+      renderLabel = (props2) => /* @__PURE__ */ jsx(
+        RelationshipsDropdownMenu,
+        {
+          disabled: !!dimmed,
+          source,
+          target,
+          edgeId,
+          children: /* @__PURE__ */ jsx("div", { ...props2 })
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
+    /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
+    enableEdgeEditing && /* @__PURE__ */ jsx(
+      "g",
+      {
+        onContextMenu: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            onPointerDown: (e) => onControlPointerDown(i, e),
+            className: controlPoint,
+            cx: p.x,
+            cy: p.y,
+            r: 3
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EdgeLabel,
+      {
+        edgeProps: props,
+        labelPosition: {
+          x: labelX,
+          y: labelY,
+          translate: isModified ? "translate(-50%, 0)" : void 0
+        },
+        ...renderLabel && { renderRoot: renderLabel },
+        children: !isControlPointDragging && enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+          EdgeActionButton,
+          {
+            ...props,
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigateTo(navigateTo);
+            }
+          }
+        )
+      }
+    )
+  ] });
+});
+export {
+  RelationshipEdge
+};

package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.css.js

@@ -1,8 +1,8 @@
 /* empty css                                             */
-var menuDropdown = "qcv9lq0";
-var menuItemRelationship = "qcv9lq1";
-var endpoint = "qcv9lq2";
-var title = "qcv9lq3";
+var menuDropdown = "_1g39cqs0";
+var menuItemRelationship = "_1g39cqs1";
+var endpoint = "_1g39cqs2";
+var title = "_1g39cqs3";
 export {
   endpoint,
   menuDropdown,

package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.d.ts

@@ -1,13 +1,13 @@
-import { LikeC4Model } from '@likec4/core';
+import { EdgeId } from '@likec4/core';
 import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
-import { DiagramFlowTypes } from '../types';
 import { TooltipProps } from '@mantine/core';
 export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export declare function RelationshipsDropdownMenu({ edge, disabled, likec4model, children }: PropsWithChildren<{
-    edge: DiagramFlowTypes.DiagramEdgeData['edge'];
+export declare function RelationshipsDropdownMenu({ edgeId, source, target, disabled, children, }: PropsWithChildren<{
+    edgeId: EdgeId;
+    source: string;
+    target: string;
     disabled?: boolean | undefined;
-    likec4model: LikeC4Model;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/{xyflow → likec4diagram/custom}/edges/RelationshipsDropdownMenu.js

@@ -1,15 +1,19 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { invariant, nameFromFqn } from "@likec4/core";
+import { DiagramNode, 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 { pipe, map, filter, isTruthy, partition } from "remeda";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { Link } from "../../ui/diagram-title/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";
+import { DiagramContext } from "../../state/machine.js";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { useEnabledFeature, IfEnabled } from "../../../context/DiagramFeatures.js";
+import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
   color: "gray",
@@ -22,43 +26,43 @@ const Tooltip = Tooltip$1.withProps({
   withinPortal: false
 });
 function RelationshipsDropdownMenu({
-  edge,
+  edgeId,
+  source,
+  target,
   disabled = false,
-  likec4model,
   children
 }) {
-  const {
-    openOverlay,
-    enableRelationshipBrowser
-  } = useDiagramState(pick(["openOverlay", "enableRelationshipBrowser"]));
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => ({
+    diagramEdge: DiagramContext.findDiagramEdge(ctx, edgeId),
+    sourceNode: DiagramContext.findDiagramNode(ctx, source),
+    targetNode: DiagramContext.findDiagramNode(ctx, target)
+  }));
+  const likec4model = useLikeC4Model(true);
+  const diagram = useDiagram();
   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 onClickOpenOverlay = useCallback((e) => {
+    e.stopPropagation();
+    diagram.openRelationshipDetails(edgeId);
+  }, [edgeId]);
+  if (!diagramEdge || !sourceNode || !targetNode) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
   const [direct, nested] = pipe(
-    edge.relations,
+    diagramEdge.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}`,
+          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
           e
         );
         return null;
       }
     }),
     filter(isTruthy),
-    partition((r) => r.source.id === edge.source && r.target.id === edge.target)
+    partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id)
   );
-  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(
@@ -67,9 +71,9 @@ function RelationshipsDropdownMenu({
         onClick: onClickOpenOverlay,
         component: Relationship,
         relationship,
-        sourceNode: sourceXYNode.data.element,
-        targetNode: targetXYNode.data.element,
-        edge
+        sourceNode,
+        targetNode,
+        edge: diagramEdge
       }
     )
   ] }, relationship.id);
@@ -82,12 +86,12 @@ function RelationshipsDropdownMenu({
       trigger: "click-hover",
       openDelay: 300,
       closeDelay: 450,
-      floatingStrategy: "fixed",
       closeOnClickOutside: true,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       closeOnEscape: true,
       closeOnItemClick: false,
       disabled,
+      position: "bottom-start",
       ...portalProps,
       children: [
         /* @__PURE__ */ jsx(MenuTarget, { children }),
@@ -108,7 +112,7 @@ function RelationshipsDropdownMenu({
                 /* @__PURE__ */ jsx(MenuLabel, { children: "resolved from nested" }),
                 nested.map(renderRelationship)
               ] }),
-              enableRelationshipBrowser && /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 5, right: 6, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 5, right: 6, children: /* @__PURE__ */ jsx(
                 ActionIcon,
                 {
                   size: 24,
@@ -133,26 +137,20 @@ const Relationship = forwardRef(({
   ...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 diagram = useDiagram();
+  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { onOpenSource } = useDiagramEventHandlers();
+  const viewId = diagram.currentView().id;
+  const sourceId = getShortId(r, r.source.id, sourceNode);
+  const targetId = getShortId(r, r.target.id, targetNode);
+  const navigateTo = enableNavigateTo && ((_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: [
+      (navigateTo || !!onOpenSource) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
         /* @__PURE__ */ jsx(Space, { w: "xs" }),
         navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
           ActionIcon,
@@ -163,15 +161,14 @@ const Relationship = forwardRef(({
             variant: "default",
             onPointerDownCapture: stopPropagation,
             onClick: (event) => {
-              var _a2, _b2;
               event.stopPropagation();
-              (_b2 = (_a2 = diagramApi.getState()).onNavigateTo) == null ? void 0 : _b2.call(_a2, navigateTo, event);
+              diagram.navigateTo(navigateTo);
             },
             role: "button",
             children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
           }
         ) }),
-        hasOnOpenSourceRelation && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
             className: clsx("nodrag nopan"),
@@ -180,16 +177,13 @@ const Relationship = forwardRef(({
             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
-              });
+              diagram.openSource({ relation: r.id });
             },
             role: "button",
             children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
           }
-        ) })
+        ) }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
@@ -205,6 +199,10 @@ const Relationship = forwardRef(({
     )
   ] });
 });
+function getShortId(r, actualEndpointId, diagramNode) {
+  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : DiagramNode.modelRef(diagramNode) || "";
+  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
+}
 export {
   RelationshipsDropdownMenu,
   Tooltip

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -0,0 +1,2 @@
+export declare const controlPoint: string;
+export declare const controlDragging: string;

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -0,0 +1,7 @@
+/* empty css                         */
+var controlPoint = "_1fw3wl00";
+var controlDragging = "_1fw3wl01";
+export {
+  controlDragging,
+  controlPoint
+};

package/dist/likec4diagram/custom/edges/utils.d.ts

@@ -0,0 +1,22 @@
+import { InternalNode, XYPosition, Position } from '@xyflow/react';
+import { VectorImpl } from '../../../utils';
+export declare function getNodeCenter(node: InternalNode): XYPosition;
+/**
+ * Helper function returns the intersection point
+ * of the line between the center of the intersectionNode and the target
+ *
+ * @param intersectionNode the node that is the center of the line
+ * @param target position of the target
+ * @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
+ * @returns coordinates of the intersection point
+ */
+export declare function getNodeIntersectionFromCenterToPoint(intersectionNode: InternalNode, target: XYPosition, nodeMargin?: number): VectorImpl;
+export declare function getPointPosition(node: InternalNode, intersectionPoint: XYPosition): readonly [number, number, Position];
+export declare function getEdgeParams(source: InternalNode, target: InternalNode): {
+    sx: number;
+    sy: number;
+    tx: number;
+    ty: number;
+    sourcePos: Position;
+    targetPos: Position;
+};

package/dist/likec4diagram/custom/edges/utils.js

@@ -0,0 +1,25 @@
+import "@xyflow/react";
+import { getNodeDimensions } from "@xyflow/system";
+import { VectorImpl, vector } from "../../../utils/vector.js";
+function getNodeCenter(node) {
+  const { width, height } = getNodeDimensions(node);
+  const { x, y } = node.internals.positionAbsolute;
+  return {
+    x: x + width / 2,
+    y: y + height / 2
+  };
+}
+function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
+  const nodeCenter = getNodeCenter(intersectionNode);
+  const { width, height } = getNodeDimensions(intersectionNode);
+  const v = new VectorImpl(target.x, target.y).sub(nodeCenter);
+  console.log(intersectionNode);
+  const xScale = (nodeMargin + (width || 0) / 2) / v.x;
+  const yScale = (nodeMargin + (height || 0) / 2) / v.y;
+  const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+  return vector(v).mul(scale).add(nodeCenter);
+}
+export {
+  getNodeCenter,
+  getNodeIntersectionFromCenterToPoint
+};

package/dist/likec4diagram/custom/index.d.ts

@@ -0,0 +1,57 @@
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Position, XYPosition } from '@xyflow/system';
+import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
+export { nodeTypes } from './nodes/nodeTypes';
+export declare const edgeTypes: {
+    relationship: NamedExoticComponent<{
+        source: string;
+        target: string;
+        style?: CSSProperties;
+        id: string;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        animated?: boolean;
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+        sourcePosition: Position;
+        targetPosition: Position;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        sourceHandleId?: string | null;
+        targetHandleId?: string | null;
+        markerStart?: string;
+        markerEnd?: string;
+        pathOptions?: any;
+        interactionWidth?: number;
+        data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../base").Base.Dimmed;
+        } & {
+            id: EdgeId;
+            label: string | null;
+            points: NonEmptyArray<Point>;
+            technology: string | undefined;
+            color: Color | undefined;
+            navigateTo: ViewId<string> | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            head: RelationshipArrowType | undefined;
+            tail: RelationshipArrowType | undefined;
+            line: RelationshipLineType | undefined;
+            notes: string | undefined;
+            labelBBox: BBox | null | undefined;
+            labelXY: XYPosition | null;
+            controlPoints: XYPosition[] | undefined | null;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../base").Base.Dimmed;
+        };
+    }>;
+};

package/dist/likec4diagram/custom/index.js

@@ -0,0 +1,7 @@
+import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+const edgeTypes = {
+  relationship: RelationshipEdge
+};
+export {
+  edgeTypes
+};