graphics-debug 0.0.84 → 0.0.85

package/dist/lib/react.js

@@ -1,19 +1,20 @@
-import "../chunk-HPNVGPHJ.js";
+import "../chunk-5O6JHGHI.js";
 import "../chunk-OB4CGOL3.js";
-import "../chunk-MYMDOAQN.js";
+import "../chunk-PEHHGMS7.js";
 import "../chunk-K37Y2KHE.js";
 import "../chunk-7236NVI2.js";
 import {
   defaultColors,
   drawGraphicsToCanvas,
   getBounds
-} from "../chunk-AKONCUCE.js";
+} from "../chunk-ME47RV6O.js";
 import "../chunk-NG6H63SM.js";
-import "../chunk-ZWAXHWX2.js";
+import "../chunk-TBTTAU4R.js";
 import {
   getArrowBoundingBox,
-  getArrowGeometry
-} from "../chunk-IOVKI3ZO.js";
+  getArrowGeometry,
+  getInlineLabelLayout
+} from "../chunk-PCHDJSKZ.js";
 import "../chunk-ZGI74PYD.js";
 import {
   clipInfiniteLineToBounds,
@@ -494,19 +495,8 @@ var DimensionOverlay = ({ children, transform }) => {
 };
 
 // site/components/InteractiveGraphics/Arrow.tsx
-import { applyToPoint as applyToPoint2 } from "transformation-matrix";
 import { useMemo as useMemo2, useState as useState2 } from "react";
 
-// site/utils/safeLighten.ts
-import { lighten } from "polished";
-var safeLighten = (amount, color) => {
-  try {
-    return lighten(amount, color);
-  } catch (e) {
-    return color;
-  }
-};
-
 // site/utils/distToLineSegment.ts
 var distToLineSegment = (px, py, x1, y1, x2, y2) => {
   const A = px - x1;
@@ -534,7 +524,18 @@ var distToLineSegment = (px, py, x1, y1, x2, y2) => {
   return Math.sqrt(dx * dx + dy * dy);
 };
 
+// site/utils/safeLighten.ts
+import { lighten } from "polished";
+var safeLighten = (amount, color) => {
+  try {
+    return lighten(amount, color);
+  } catch (e) {
+    return color;
+  }
+};
+
 // site/components/InteractiveGraphics/Arrow.tsx
+import { applyToPoint as applyToPoint2 } from "transformation-matrix";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Arrow = ({
   arrow,
@@ -557,6 +558,27 @@ var Arrow = ({
     };
   }, [geometry, realToScreen]);
   const scaleFactor = Math.abs(realToScreen.a);
+  const fontSize = 12;
+  const strokeWidth = geometry.shaftWidth * (scaleFactor || 1);
+  const alongSeparation = fontSize * 0.6;
+  const inlineLabelLayout = useMemo2(
+    () => getInlineLabelLayout(screenPoints.shaftStart, screenPoints.shaftEnd, {
+      fontSize,
+      strokeWidth,
+      normalPadding: 6,
+      alongOffset: arrow.label ? alongSeparation : 0
+    }),
+    [screenPoints, fontSize, strokeWidth, arrow.label, alongSeparation]
+  );
+  const labelLayout = useMemo2(
+    () => getInlineLabelLayout(screenPoints.shaftStart, screenPoints.shaftEnd, {
+      fontSize,
+      strokeWidth,
+      normalPadding: 12,
+      alongOffset: arrow.inlineLabel ? -alongSeparation : 0
+    }),
+    [screenPoints, fontSize, strokeWidth, arrow.inlineLabel, alongSeparation]
+  );
   const baseColor = arrow.color || defaultColors[index % defaultColors.length] || "black";
   const displayColor = isHovered ? safeLighten(0.2, baseColor) : baseColor;
   const handleMouseMove = (e) => {
@@ -611,7 +633,7 @@ var Arrow = ({
             x2: screenPoints.shaftEnd.x,
             y2: screenPoints.shaftEnd.y,
             stroke: displayColor,
-            strokeWidth: geometry.shaftWidth * (scaleFactor || 1),
+            strokeWidth,
             strokeLinecap: "round",
             pointerEvents: "stroke"
           }
@@ -623,7 +645,36 @@ var Arrow = ({
             fill: displayColor
           },
           headIndex
-        ))
+        )),
+        arrow.label && /* @__PURE__ */ jsx2(
+          "text",
+          {
+            x: labelLayout.x,
+            y: labelLayout.y,
+            fill: displayColor,
+            fontSize,
+            fontFamily: "sans-serif",
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            pointerEvents: "none",
+            children: arrow.label
+          }
+        ),
+        arrow.inlineLabel && /* @__PURE__ */ jsx2(
+          "text",
+          {
+            x: inlineLabelLayout.x,
+            y: inlineLabelLayout.y,
+            fill: displayColor,
+            fontSize,
+            fontFamily: "sans-serif",
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            transform: `rotate(${inlineLabelLayout.angleDegrees} ${inlineLabelLayout.x} ${inlineLabelLayout.y})`,
+            pointerEvents: "none",
+            children: arrow.inlineLabel
+          }
+        )
       ]
     }
   );