graphics-debug 0.0.65 → 0.0.66

package/dist/lib/react.js

@@ -1,15 +1,19 @@
-import "../chunk-YWTEDOCO.js";
-import "../chunk-K5GFS6QZ.js";
-import "../chunk-K2IJQPPY.js";
+import "../chunk-XGME63R3.js";
+import "../chunk-TVUC4YPH.js";
+import "../chunk-B2WYIXWQ.js";
+import "../chunk-WFPC5ZH3.js";
 import {
   defaultColors,
   drawGraphicsToCanvas,
   getBounds
-} from "../chunk-ARYXS3GC.js";
+} from "../chunk-ZV4UNKKF.js";
 import "../chunk-NG6H63SM.js";
-import "../chunk-4LFM7XSX.js";
+import "../chunk-UD7LT2L3.js";
+import {
+  getArrowBoundingBox,
+  getArrowGeometry
+} from "../chunk-62J5EOWN.js";
 import "../chunk-ZGI74PYD.js";
-import "../chunk-TJJMMKHI.js";
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
 import {
@@ -17,9 +21,9 @@ import {
   scale,
   translate,
   inverse as inverse2,
-  applyToPoint as applyToPoint11
+  applyToPoint as applyToPoint12
 } from "transformation-matrix";
-import { useMemo as useMemo8, useState as useState6, useEffect as useEffect3, useCallback } from "react";
+import { useMemo as useMemo10, useState as useState7, useEffect as useEffect3, useCallback } from "react";
 import useMouseMatrixTransform from "use-mouse-matrix-transform";
 import { SuperGrid } from "react-supergrid";
 import useResizeObserver from "@react-hook/resize-observer";
@@ -399,6 +403,99 @@ var Text = ({
   );
 };
 
+// site/components/InteractiveGraphics/Arrow.tsx
+import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+import { useMemo, useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var Arrow = ({
+  arrow,
+  index,
+  interactiveState
+}) => {
+  const { realToScreen, onObjectClicked } = interactiveState;
+  const [isHovered, setIsHovered] = useState5(false);
+  const geometry = useMemo(() => getArrowGeometry(arrow), [arrow]);
+  const screenPoints = useMemo(() => {
+    return {
+      shaftStart: applyToPoint6(realToScreen, geometry.shaftStart),
+      shaftEnd: applyToPoint6(realToScreen, geometry.shaftEnd),
+      heads: geometry.heads.map((head) => ({
+        tip: applyToPoint6(realToScreen, head.tip),
+        base: applyToPoint6(realToScreen, head.base),
+        leftWing: applyToPoint6(realToScreen, head.leftWing),
+        rightWing: applyToPoint6(realToScreen, head.rightWing)
+      }))
+    };
+  }, [geometry, realToScreen]);
+  const scaleFactor = useMemo(() => Math.hypot(realToScreen.a, realToScreen.b), [
+    realToScreen.a,
+    realToScreen.b
+  ]);
+  const baseColor = arrow.color || defaultColors[index % defaultColors.length] || "black";
+  const displayColor = isHovered ? safeLighten(0.2, baseColor) : baseColor;
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const hoverThreshold = 10;
+    const segments = [
+      { from: screenPoints.shaftStart, to: screenPoints.shaftEnd },
+      ...screenPoints.heads.flatMap((head) => [
+        { from: head.base, to: head.leftWing },
+        { from: head.leftWing, to: head.tip },
+        { from: head.tip, to: head.rightWing },
+        { from: head.rightWing, to: head.base }
+      ])
+    ];
+    const isNear = segments.some(({ from, to }) => {
+      const distance = distToLineSegment(mouseX, mouseY, from.x, from.y, to.x, to.y);
+      return distance < hoverThreshold;
+    });
+    setIsHovered(isNear);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%"
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => setIsHovered(false),
+      onClick: isHovered ? (event) => {
+        event.stopPropagation();
+        onObjectClicked?.({ type: "arrow", index, object: arrow });
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx7(
+          "line",
+          {
+            x1: screenPoints.shaftStart.x,
+            y1: screenPoints.shaftStart.y,
+            x2: screenPoints.shaftEnd.x,
+            y2: screenPoints.shaftEnd.y,
+            stroke: displayColor,
+            strokeWidth: geometry.shaftWidth * (scaleFactor || 1),
+            strokeLinecap: "round",
+            pointerEvents: "stroke"
+          }
+        ),
+        screenPoints.heads.map((head, headIndex) => /* @__PURE__ */ jsx7(
+          "polygon",
+          {
+            points: `${head.tip.x},${head.tip.y} ${head.leftWing.x},${head.leftWing.y} ${head.rightWing.x},${head.rightWing.y}`,
+            fill: displayColor
+          },
+          headIndex
+        ))
+      ]
+    }
+  );
+};
+
 // site/utils/getGraphicsBounds.ts
 var getGraphicsBounds = (graphics) => {
   const bounds = {
@@ -436,6 +533,13 @@ var getGraphicsBounds = (graphics) => {
     bounds.maxX = Math.max(bounds.maxX, circle.center.x + circle.radius);
     bounds.maxY = Math.max(bounds.maxY, circle.center.y + circle.radius);
   }
+  for (const arrow of graphics.arrows ?? []) {
+    const arrowBounds = getArrowBoundingBox(arrow);
+    bounds.minX = Math.min(bounds.minX, arrowBounds.minX);
+    bounds.minY = Math.min(bounds.minY, arrowBounds.minY);
+    bounds.maxX = Math.max(bounds.maxX, arrowBounds.maxX);
+    bounds.maxY = Math.max(bounds.maxY, arrowBounds.maxY);
+  }
   for (const text of graphics.texts ?? []) {
     bounds.minX = Math.min(bounds.minX, text.x);
     bounds.minY = Math.min(bounds.minY, text.y);
@@ -449,18 +553,18 @@ var getGraphicsBounds = (graphics) => {
 var sortRectsByArea = (rects) => rects.slice().sort((a, b) => b.width * b.height - a.width * a.height);
 
 // site/components/InteractiveGraphics/hooks/useIsPointOnScreen.ts
-import { applyToPoint as applyToPoint7 } from "transformation-matrix";
-import { useMemo as useMemo2 } from "react";
+import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+import { useMemo as useMemo3 } from "react";
 
 // site/components/InteractiveGraphics/hooks/useDoesLineIntersectViewport.ts
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
-import { useMemo } from "react";
+import { applyToPoint as applyToPoint7 } from "transformation-matrix";
+import { useMemo as useMemo2 } from "react";
 var OFFSCREEN_MARGIN = 5;
 var useDoesLineIntersectViewport = (realToScreen, size) => {
-  return useMemo(() => {
+  return useMemo2(() => {
     return (p1, p2) => {
-      const sp1 = applyToPoint6(realToScreen, p1);
-      const sp2 = applyToPoint6(realToScreen, p2);
+      const sp1 = applyToPoint7(realToScreen, p1);
+      const sp2 = applyToPoint7(realToScreen, p2);
       const left = -OFFSCREEN_MARGIN;
       const right = size.width + OFFSCREEN_MARGIN;
       const top = -OFFSCREEN_MARGIN;
@@ -488,18 +592,18 @@ var useDoesLineIntersectViewport = (realToScreen, size) => {
 
 // site/components/InteractiveGraphics/hooks/useIsPointOnScreen.ts
 var useIsPointOnScreen = (realToScreen, size) => {
-  return useMemo2(() => {
+  return useMemo3(() => {
     return (point) => {
-      const screenPoint = applyToPoint7(realToScreen, point);
+      const screenPoint = applyToPoint8(realToScreen, point);
       return screenPoint.x >= -OFFSCREEN_MARGIN && screenPoint.x <= size.width + OFFSCREEN_MARGIN && screenPoint.y >= -OFFSCREEN_MARGIN && screenPoint.y <= size.height + OFFSCREEN_MARGIN;
     };
   }, [realToScreen, size]);
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterLines.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 var useFilterLines = (isPointOnScreen, doesLineIntersectViewport, filterLayerAndStep) => {
-  return useMemo3(() => {
+  return useMemo4(() => {
     return (line) => {
       if (!filterLayerAndStep(line)) return false;
       if (line.points.some((p) => isPointOnScreen(p))) {
@@ -524,9 +628,9 @@ var useFilterLines = (isPointOnScreen, doesLineIntersectViewport, filterLayerAnd
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterPoints.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var useFilterPoints = (isPointOnScreen, filterLayerAndStep) => {
-  return useMemo4(() => {
+  return useMemo5(() => {
     return (point) => {
       if (!filterLayerAndStep(point)) return false;
       return isPointOnScreen(point);
@@ -535,9 +639,9 @@ var useFilterPoints = (isPointOnScreen, filterLayerAndStep) => {
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterRects.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 var useFilterRects = (isPointOnScreen, doesLineIntersectViewport, filterLayerAndStep) => {
-  return useMemo5(() => {
+  return useMemo6(() => {
     return (rect) => {
       if (!filterLayerAndStep(rect)) return false;
       const { center, width, height } = rect;
@@ -556,17 +660,17 @@ var useFilterRects = (isPointOnScreen, doesLineIntersectViewport, filterLayerAnd
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterCircles.ts
-import { applyToPoint as applyToPoint8 } from "transformation-matrix";
-import { useMemo as useMemo6 } from "react";
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
+import { useMemo as useMemo7 } from "react";
 var useFilterCircles = (isPointOnScreen, filterLayerAndStep, realToScreen, size) => {
-  return useMemo6(() => {
+  return useMemo7(() => {
     return (circle) => {
       if (!filterLayerAndStep(circle)) return false;
       const { center, radius } = circle;
       if (isPointOnScreen(center) || isPointOnScreen({ x: center.x + radius, y: center.y }) || isPointOnScreen({ x: center.x - radius, y: center.y }) || isPointOnScreen({ x: center.x, y: center.y + radius }) || isPointOnScreen({ x: center.x, y: center.y - radius })) {
         return true;
       }
-      const screenCenter = applyToPoint8(realToScreen, center);
+      const screenCenter = applyToPoint9(realToScreen, center);
       const scale4 = Math.abs(realToScreen.a);
       const screenRadius = radius * scale4;
       const left = -OFFSCREEN_MARGIN;
@@ -595,9 +699,9 @@ var useFilterCircles = (isPointOnScreen, filterLayerAndStep, realToScreen, size)
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterTexts.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 var useFilterTexts = (isPointOnScreen, filterLayerAndStep) => {
-  return useMemo7(() => {
+  return useMemo8(() => {
     return (text) => {
       if (!filterLayerAndStep(text)) return false;
       return isPointOnScreen({ x: text.x, y: text.y });
@@ -605,16 +709,42 @@ var useFilterTexts = (isPointOnScreen, filterLayerAndStep) => {
   }, [isPointOnScreen, filterLayerAndStep]);
 };
 
+// site/components/InteractiveGraphics/hooks/useFilterArrows.ts
+import { useMemo as useMemo9 } from "react";
+var useFilterArrows = (isPointOnScreen, doesLineIntersectViewport) => {
+  return useMemo9(() => {
+    return (arrow) => {
+      const geometry = getArrowGeometry(arrow);
+      const { shaftStart, shaftEnd, heads } = geometry;
+      if (isPointOnScreen(shaftStart) || isPointOnScreen(shaftEnd) || heads.some(
+        (head) => isPointOnScreen(head.tip) || isPointOnScreen(head.leftWing) || isPointOnScreen(head.rightWing) || isPointOnScreen(head.base)
+      )) {
+        return true;
+      }
+      const segments = [
+        [shaftStart, shaftEnd],
+        ...heads.flatMap((head) => [
+          [head.base, head.leftWing],
+          [head.leftWing, head.tip],
+          [head.tip, head.rightWing],
+          [head.rightWing, head.base]
+        ])
+      ];
+      return segments.some(([p1, p2]) => doesLineIntersectViewport(p1, p2));
+    };
+  }, [isPointOnScreen, doesLineIntersectViewport]);
+};
+
 // site/components/DimensionOverlay.tsx
-import { useEffect, useRef, useState as useState5 } from "react";
-import { applyToPoint as applyToPoint9, identity, inverse } from "transformation-matrix";
-import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect, useRef, useState as useState6 } from "react";
+import { applyToPoint as applyToPoint10, identity, inverse } from "transformation-matrix";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var DimensionOverlay = ({ children, transform }) => {
   if (!transform) transform = identity();
-  const [dimensionToolVisible, setDimensionToolVisible] = useState5(false);
-  const [dimensionToolStretching, setDimensionToolStretching] = useState5(false);
-  const [dStart, setDStart] = useState5({ x: 0, y: 0 });
-  const [dEnd, setDEnd] = useState5({ x: 0, y: 0 });
+  const [dimensionToolVisible, setDimensionToolVisible] = useState6(false);
+  const [dimensionToolStretching, setDimensionToolStretching] = useState6(false);
+  const [dStart, setDStart] = useState6({ x: 0, y: 0 });
+  const [dEnd, setDEnd] = useState6({ x: 0, y: 0 });
   const mousePosRef = useRef({ x: 0, y: 0 });
   const containerRef = useRef(null);
   const container = containerRef.current;
@@ -661,8 +791,8 @@ var DimensionOverlay = ({ children, transform }) => {
     };
   };
   useEffect(bindKeys, [containerBounds?.width, containerBounds?.height]);
-  const screenDStart = applyToPoint9(transform, dStart);
-  const screenDEnd = applyToPoint9(transform, dEnd);
+  const screenDStart = applyToPoint10(transform, dStart);
+  const screenDEnd = applyToPoint10(transform, dEnd);
   const arrowScreenBounds = {
     left: Math.min(screenDStart.x, screenDEnd.x),
     right: Math.max(screenDStart.x, screenDEnd.x),
@@ -675,7 +805,7 @@ var DimensionOverlay = ({ children, transform }) => {
   };
   arrowScreenBounds.width = arrowScreenBounds.right - arrowScreenBounds.left;
   arrowScreenBounds.height = arrowScreenBounds.bottom - arrowScreenBounds.top;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: containerRef,
@@ -685,7 +815,7 @@ var DimensionOverlay = ({ children, transform }) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint9(inverse(transform), { x, y });
+        const rwPoint = applyToPoint10(inverse(transform), { x, y });
         mousePosRef.current.x = rwPoint.x;
         mousePosRef.current.y = rwPoint.y;
         if (dimensionToolStretching) {
@@ -706,8 +836,8 @@ var DimensionOverlay = ({ children, transform }) => {
       },
       children: [
         children,
-        dimensionToolVisible && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx7(
+        dimensionToolVisible && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -727,7 +857,7 @@ var DimensionOverlay = ({ children, transform }) => {
               children: Math.abs(dStart.x - dEnd.x).toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               style: {
@@ -745,7 +875,7 @@ var DimensionOverlay = ({ children, transform }) => {
                 fontFamily: "sans-serif",
                 zIndex: 30
               },
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 "div",
                 {
                   style: {
@@ -757,7 +887,7 @@ var DimensionOverlay = ({ children, transform }) => {
               )
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "svg",
             {
               style: {
@@ -771,7 +901,7 @@ var DimensionOverlay = ({ children, transform }) => {
               width: containerBounds?.width || "100%",
               height: containerBounds?.height || "100%",
               children: [
-                /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8("defs", { children: /* @__PURE__ */ jsx8(
                   "marker",
                   {
                     id: "head",
@@ -780,10 +910,10 @@ var DimensionOverlay = ({ children, transform }) => {
                     markerHeight: "4",
                     refX: "2",
                     refY: "2",
-                    children: /* @__PURE__ */ jsx7("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
+                    children: /* @__PURE__ */ jsx8("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -796,7 +926,7 @@ var DimensionOverlay = ({ children, transform }) => {
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -809,7 +939,7 @@ var DimensionOverlay = ({ children, transform }) => {
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "line",
                   {
                     x1: screenDEnd.x,
@@ -825,7 +955,7 @@ var DimensionOverlay = ({ children, transform }) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               style: {
@@ -843,13 +973,13 @@ var DimensionOverlay = ({ children, transform }) => {
                 ",",
                 dStart.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx7("br", {}),
+                /* @__PURE__ */ jsx8("br", {}),
                 "(",
                 dEnd.x.toFixed(2),
                 ",",
                 dEnd.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx7("br", {}),
+                /* @__PURE__ */ jsx8("br", {}),
                 "dist:",
                 " ",
                 Math.sqrt(
@@ -878,18 +1008,20 @@ function getMaxStep(graphics) {
   const maxRectStep = getMaxStepFromArray(graphics.rects);
   const maxCircleStep = getMaxStepFromArray(graphics.circles);
   const maxTextStep = getMaxStepFromArray(graphics.texts);
+  const maxArrowStep = getMaxStepFromArray(graphics.arrows);
   return Math.max(
     maxPointStep,
     maxLineStep,
     maxRectStep,
     maxCircleStep,
-    maxTextStep
+    maxTextStep,
+    maxArrowStep
   );
 }
 
 // site/components/InteractiveGraphics/ContextMenu.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var ContextMenu = ({
   x,
   y,
@@ -937,8 +1069,8 @@ var ContextMenu = ({
   const handleItemLeave = (e) => {
     e.currentTarget.style.backgroundColor = "";
   };
-  return /* @__PURE__ */ jsxs3("div", { ref: menuRef, style: menuStyle, children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs4("div", { ref: menuRef, style: menuStyle, children: [
+    /* @__PURE__ */ jsx9(
       "div",
       {
         style: menuItemStyle,
@@ -951,7 +1083,7 @@ var ContextMenu = ({
         children: "Save Camera Position"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         style: menuItemStyle,
@@ -964,7 +1096,7 @@ var ContextMenu = ({
         children: "Load Camera Position"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         style: menuItemStyle,
@@ -977,7 +1109,7 @@ var ContextMenu = ({
         children: "Clear Saved Camera Position"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         style: menuItemStyle,
@@ -990,7 +1122,7 @@ var ContextMenu = ({
         children: "Add Mark"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         style: menuItemStyle,
@@ -1007,11 +1139,11 @@ var ContextMenu = ({
 };
 
 // site/components/InteractiveGraphics/Marker.tsx
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var Marker = ({ marker, transform }) => {
-  const [screenX, screenY] = applyToPoint10(transform, [marker.x, marker.y]);
-  return /* @__PURE__ */ jsx9(
+  const [screenX, screenY] = applyToPoint11(transform, [marker.x, marker.y]);
+  return /* @__PURE__ */ jsx10(
     "svg",
     {
       style: {
@@ -1021,8 +1153,8 @@ var Marker = ({ marker, transform }) => {
         pointerEvents: "none",
         zIndex: 900
       },
-      children: /* @__PURE__ */ jsxs4("g", { transform: `translate(${screenX}, ${screenY})`, children: [
-        /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsxs5("g", { transform: `translate(${screenX}, ${screenY})`, children: [
+        /* @__PURE__ */ jsx10(
           "circle",
           {
             r: 7,
@@ -1031,35 +1163,36 @@ var Marker = ({ marker, transform }) => {
             strokeWidth: 2
           }
         ),
-        /* @__PURE__ */ jsx9("circle", { r: 2, fill: "rgba(255, 0, 0, 0.9)" })
+        /* @__PURE__ */ jsx10("circle", { r: 2, fill: "rgba(255, 0, 0, 0.9)" })
       ] })
     }
   );
 };
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var InteractiveGraphics = ({
   graphics,
   onObjectClicked,
   objectLimit
 }) => {
-  const [activeLayers, setActiveLayers] = useState6(null);
-  const [activeStep, setActiveStep] = useState6(null);
-  const [showLastStep, setShowLastStep] = useState6(true);
-  const [size, setSize] = useState6({ width: 600, height: 600 });
-  const [contextMenu, setContextMenu] = useState6(null);
-  const [markers, setMarkers] = useState6([]);
+  const [activeLayers, setActiveLayers] = useState7(null);
+  const [activeStep, setActiveStep] = useState7(null);
+  const [showLastStep, setShowLastStep] = useState7(true);
+  const [size, setSize] = useState7({ width: 600, height: 600 });
+  const [contextMenu, setContextMenu] = useState7(null);
+  const [markers, setMarkers] = useState7([]);
   const availableLayers = Array.from(
     /* @__PURE__ */ new Set([
       ...graphics.lines?.map((l) => l.layer).filter(Boolean) ?? [],
       ...graphics.rects?.map((r) => r.layer).filter(Boolean) ?? [],
       ...graphics.points?.map((p) => p.layer).filter(Boolean) ?? [],
-      ...graphics.texts?.map((t) => t.layer).filter(Boolean) ?? []
+      ...graphics.texts?.map((t) => t.layer).filter(Boolean) ?? [],
+      ...graphics.circles?.map((c) => c.layer).filter(Boolean) ?? []
     ])
   );
   const maxStep = getMaxStep(graphics);
-  const graphicsBoundsWithPadding = useMemo8(() => {
+  const graphicsBoundsWithPadding = useMemo10(() => {
     const actualBounds = getGraphicsBounds(graphics);
     const width = actualBounds.maxX - actualBounds.minX;
     const height = actualBounds.maxY - actualBounds.minY;
@@ -1076,18 +1209,21 @@ var InteractiveGraphics = ({
     return `saved-camera-position-${path}${search}`;
   }, []);
   const getDefaultTransform = useCallback(() => {
+    const width = Math.max(
+      graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX,
+      1
+    );
+    const height = Math.max(
+      graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY,
+      1
+    );
+    const scaleFactor = Math.min(
+      size.width / width,
+      size.height / height
+    );
     return compose(
       translate(size.width / 2, size.height / 2),
-      scale(
-        Math.min(
-          size.width / (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),
-          size.height / (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY)
-        ),
-        -Math.min(
-          size.width / (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),
-          size.height / (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY)
-        )
-      ),
+      scale(scaleFactor, -scaleFactor),
       translate(
         -(graphicsBoundsWithPadding.maxX + graphicsBoundsWithPadding.minX) / 2,
         -(graphicsBoundsWithPadding.maxY + graphicsBoundsWithPadding.minY) / 2
@@ -1199,7 +1335,7 @@ var InteractiveGraphics = ({
         const screenX = screenPoint.x - rect.left;
         const screenY = screenPoint.y - rect.top;
         const inverseTransform = inverse2(realToScreen);
-        const [realX, realY] = applyToPoint11(inverseTransform, [
+        const [realX, realY] = applyToPoint12(inverseTransform, [
           screenX,
           screenY
         ]);
@@ -1260,36 +1396,44 @@ var InteractiveGraphics = ({
     size
   );
   const filterTexts = useFilterTexts(isPointOnScreen, filterLayerAndStep);
+  const filterArrows = useFilterArrows(
+    isPointOnScreen,
+    doesLineIntersectViewport
+  );
   const filterAndLimit = (objects, filterFn) => {
     if (!objects) return [];
     const filtered = objects.map((obj, index) => ({ ...obj, originalIndex: index })).filter(filterFn);
     return objectLimit ? filtered.slice(-objectLimit) : filtered;
   };
-  const filteredLines = useMemo8(
+  const filteredLines = useMemo10(
     () => filterAndLimit(graphics.lines, filterLines),
     [graphics.lines, filterLines, objectLimit]
   );
-  const filteredRects = useMemo8(
+  const filteredRects = useMemo10(
     () => sortRectsByArea(filterAndLimit(graphics.rects, filterRects)),
     [graphics.rects, filterRects, objectLimit]
   );
-  const filteredPoints = useMemo8(
+  const filteredPoints = useMemo10(
     () => filterAndLimit(graphics.points, filterPoints),
     [graphics.points, filterPoints, objectLimit]
   );
-  const filteredCircles = useMemo8(
+  const filteredCircles = useMemo10(
     () => filterAndLimit(graphics.circles, filterCircles),
     [graphics.circles, filterCircles, objectLimit]
   );
-  const filteredTexts = useMemo8(
+  const filteredTexts = useMemo10(
     () => filterAndLimit(graphics.texts, filterTexts),
     [graphics.texts, filterTexts, objectLimit]
   );
-  const totalFilteredObjects = filteredLines.length + filteredRects.length + filteredPoints.length + filteredCircles.length + filteredTexts.length;
+  const filteredArrows = useMemo10(
+    () => filterAndLimit(graphics.arrows, filterArrows),
+    [graphics.arrows, filterArrows, objectLimit]
+  );
+  const totalFilteredObjects = filteredLines.length + filteredRects.length + filteredPoints.length + filteredCircles.length + filteredTexts.length + filteredArrows.length;
   const isLimitReached = objectLimit && totalFilteredObjects > objectLimit;
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    showToolbar && /* @__PURE__ */ jsxs5("div", { style: { margin: 8 }, children: [
-      availableLayers.length > 1 && /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    showToolbar && /* @__PURE__ */ jsxs6("div", { style: { margin: 8 }, children: [
+      availableLayers.length > 1 && /* @__PURE__ */ jsxs6(
         "select",
         {
           value: activeLayers ? activeLayers[0] : "",
@@ -1299,18 +1443,18 @@ var InteractiveGraphics = ({
           },
           style: { marginRight: 8 },
           children: [
-            /* @__PURE__ */ jsx10("option", { value: "", children: "All Layers" }),
-            availableLayers.map((layer) => /* @__PURE__ */ jsx10("option", { value: layer, children: layer }, layer))
+            /* @__PURE__ */ jsx11("option", { value: "", children: "All Layers" }),
+            availableLayers.map((layer) => /* @__PURE__ */ jsx11("option", { value: layer, children: layer }, layer))
           ]
         }
       ),
-      maxStep > 0 && /* @__PURE__ */ jsxs5(
+      maxStep > 0 && /* @__PURE__ */ jsxs6(
         "div",
         {
           style: { display: "inline-flex", alignItems: "center", gap: 8 },
           children: [
             "Step:",
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "input",
               {
                 type: "number",
@@ -1325,8 +1469,8 @@ var InteractiveGraphics = ({
                 disabled: activeStep === null
               }
             ),
-            /* @__PURE__ */ jsxs5("label", { children: [
-              /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsxs6("label", { children: [
+              /* @__PURE__ */ jsx11(
                 "input",
                 {
                   type: "checkbox",
@@ -1340,8 +1484,8 @@ var InteractiveGraphics = ({
               ),
               "Filter by step"
             ] }),
-            /* @__PURE__ */ jsxs5("label", { children: [
-              /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsxs6("label", { children: [
+              /* @__PURE__ */ jsx11(
                 "input",
                 {
                   type: "checkbox",
@@ -1355,7 +1499,7 @@ var InteractiveGraphics = ({
               ),
               "Show last step"
             ] }),
-            isLimitReached && /* @__PURE__ */ jsxs5("span", { style: { color: "red", fontSize: "12px" }, children: [
+            isLimitReached && /* @__PURE__ */ jsxs6("span", { style: { color: "red", fontSize: "12px" }, children: [
               "Display limited to ",
               objectLimit,
               " objects. Received:",
@@ -1367,7 +1511,7 @@ var InteractiveGraphics = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         ref,
@@ -1378,8 +1522,17 @@ var InteractiveGraphics = ({
         },
         onContextMenu: handleContextMenu,
         children: [
-          /* @__PURE__ */ jsxs5(DimensionOverlay, { transform: realToScreen, children: [
-            filteredLines.map((line) => /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsxs6(DimensionOverlay, { transform: realToScreen, children: [
+            filteredArrows.map((arrow) => /* @__PURE__ */ jsx11(
+              Arrow,
+              {
+                arrow,
+                index: arrow.originalIndex,
+                interactiveState
+              },
+              arrow.originalIndex
+            )),
+            filteredLines.map((line) => /* @__PURE__ */ jsx11(
               Line,
               {
                 line,
@@ -1388,7 +1541,7 @@ var InteractiveGraphics = ({
               },
               line.originalIndex
             )),
-            filteredRects.map((rect) => /* @__PURE__ */ jsx10(
+            filteredRects.map((rect) => /* @__PURE__ */ jsx11(
               Rect,
               {
                 rect,
@@ -1397,7 +1550,7 @@ var InteractiveGraphics = ({
               },
               rect.originalIndex
             )),
-            filteredPoints.map((point) => /* @__PURE__ */ jsx10(
+            filteredPoints.map((point) => /* @__PURE__ */ jsx11(
               Point,
               {
                 point,
@@ -1406,7 +1559,7 @@ var InteractiveGraphics = ({
               },
               point.originalIndex
             )),
-            filteredCircles.map((circle) => /* @__PURE__ */ jsx10(
+            filteredCircles.map((circle) => /* @__PURE__ */ jsx11(
               Circle,
               {
                 circle,
@@ -1415,7 +1568,7 @@ var InteractiveGraphics = ({
               },
               circle.originalIndex
             )),
-            filteredTexts.map((txt) => /* @__PURE__ */ jsx10(
+            filteredTexts.map((txt) => /* @__PURE__ */ jsx11(
               Text,
               {
                 textObj: txt,
@@ -1424,7 +1577,7 @@ var InteractiveGraphics = ({
               },
               txt.originalIndex
             )),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               SuperGrid,
               {
                 stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,
@@ -1434,7 +1587,7 @@ var InteractiveGraphics = ({
               }
             )
           ] }),
-          markers.map((marker, index) => /* @__PURE__ */ jsx10(
+          markers.map((marker, index) => /* @__PURE__ */ jsx11(
             Marker,
             {
               marker,
@@ -1443,7 +1596,7 @@ var InteractiveGraphics = ({
             },
             index
           )),
-          contextMenu && /* @__PURE__ */ jsx10(
+          contextMenu && /* @__PURE__ */ jsx11(
             ContextMenu,
             {
               x: contextMenu.x,
@@ -1463,7 +1616,7 @@ var InteractiveGraphics = ({
 };
 
 // site/components/InteractiveGraphicsCanvas.tsx
-import { useRef as useRef3, useEffect as useEffect4, useState as useState7 } from "react";
+import { useRef as useRef3, useEffect as useEffect4, useState as useState8 } from "react";
 import useMouseMatrixTransform2 from "use-mouse-matrix-transform";
 import { compose as compose2, scale as scale2, translate as translate2 } from "transformation-matrix";
 import useResizeObserver2 from "@react-hook/resize-observer";
@@ -1513,7 +1666,7 @@ function getGraphicsBoundsWithPadding(graphics) {
 }
 
 // site/components/InteractiveGraphicsCanvas.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function InteractiveGraphicsCanvas({
   graphics,
   showLabelsByDefault = true,
@@ -1523,10 +1676,10 @@ function InteractiveGraphicsCanvas({
 }) {
   const canvasRef = useRef3(null);
   const containerRef = useRef3(null);
-  const [size, setSize] = useState7({ width: 600, height: 600 });
-  const [activeStep, setActiveStep] = useState7(null);
-  const [showLabels, setShowLabels] = useState7(showLabelsByDefault);
-  const [showLastStep, setShowLastStep] = useState7(true);
+  const [size, setSize] = useState8({ width: 600, height: 600 });
+  const [activeStep, setActiveStep] = useState8(null);
+  const [showLabels, setShowLabels] = useState8(showLabelsByDefault);
+  const [showLastStep, setShowLastStep] = useState8(true);
   const maxStep = getMaxStep(graphics);
   const filteredGraphics = getGraphicsFilteredByStep(graphics, {
     activeStep,
@@ -1621,11 +1774,11 @@ function InteractiveGraphicsCanvas({
   useEffect4(() => {
     drawCanvas();
   }, [transform, size, filteredGraphics, showGrid, showLabels]);
-  return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
-    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ jsxs6("label", { children: [
-          /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs7("label", { children: [
+          /* @__PURE__ */ jsx12(
             "input",
             {
               type: "checkbox",
@@ -1638,7 +1791,7 @@ function InteractiveGraphicsCanvas({
           ),
           "Filter by step"
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "number",
@@ -1654,8 +1807,8 @@ function InteractiveGraphicsCanvas({
             style: { width: "60px" }
           }
         ),
-        /* @__PURE__ */ jsxs6("label", { children: [
-          /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs7("label", { children: [
+          /* @__PURE__ */ jsx12(
             "input",
             {
               type: "checkbox",
@@ -1670,8 +1823,8 @@ function InteractiveGraphicsCanvas({
           "Show last step"
         ] })
       ] }),
-      /* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs6("label", { children: [
-        /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs7("label", { children: [
+        /* @__PURE__ */ jsx12(
           "input",
           {
             type: "checkbox",
@@ -1685,7 +1838,7 @@ function InteractiveGraphicsCanvas({
         "Show labels"
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "div",
       {
         ref: (node) => {
@@ -1701,7 +1854,7 @@ function InteractiveGraphicsCanvas({
           border: "1px solid #ccc",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           "canvas",
           {
             ref: canvasRef,
@@ -1720,11 +1873,11 @@ function InteractiveGraphicsCanvas({
 }
 
 // site/components/CanvasGraphics/CanvasGraphics.tsx
-import React3, { useRef as useRef4, useEffect as useEffect5, useState as useState8 } from "react";
+import React3, { useRef as useRef4, useEffect as useEffect5, useState as useState9 } from "react";
 import useMouseMatrixTransform3 from "use-mouse-matrix-transform";
 import { compose as compose3, scale as scale3, translate as translate3 } from "transformation-matrix";
 import useResizeObserver3 from "@react-hook/resize-observer";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function TransformContainer({
   initialTransform,
   children,
@@ -1736,7 +1889,7 @@ function TransformContainer({
   useEffect5(() => {
     onTransformChange(transform);
   }, [transform, onTransformChange]);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref,
@@ -1759,8 +1912,8 @@ var CanvasGraphics = ({
 }) => {
   const canvasRef = useRef4(null);
   const containerRef = useRef4(null);
-  const [size, setSize] = useState8({ width, height });
-  const [currentTransform, setCurrentTransform] = useState8(null);
+  const [size, setSize] = useState9({ width, height });
+  const [currentTransform, setCurrentTransform] = useState9(null);
   const graphicsBoundsWithPadding = React3.useMemo(() => {
     const bounds = getBounds(graphics);
     const bWidth = bounds.maxX - bounds.minX;
@@ -1872,7 +2025,7 @@ var CanvasGraphics = ({
   useEffect5(() => {
     setCurrentTransform(computedInitialTransform);
   }, [computedInitialTransform]);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref: containerRef,
@@ -1883,16 +2036,16 @@ var CanvasGraphics = ({
         border: "1px solid #eee",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         TransformContainer,
         {
           initialTransform: computedInitialTransform,
           onTransformChange: handleTransformChange,
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13(
             DimensionOverlay,
             {
               transform: currentTransform || computedInitialTransform,
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 "canvas",
                 {
                   ref: canvasRef,