graphics-debug 0.0.88 → 0.0.89

package/dist/lib/react.js

@@ -23,7 +23,7 @@ import {
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
 import useResizeObserver from "@react-hook/resize-observer";
-import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo12, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo13, useState as useState7 } from "react";
 import { SuperGrid } from "react-supergrid";
 
 // site/utils/getGraphicsBounds.ts
@@ -958,12 +958,14 @@ var InfiniteLine = ({
 
 // site/components/InteractiveGraphics/Line.tsx
 import { applyToPoint as applyToPoint5 } from "transformation-matrix";
-import { useRef as useRef3, useState as useState4 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var Line = ({
   line,
   index,
-  interactiveState
+  interactiveState,
+  size,
+  mousePosition
 }) => {
   const { activeLayers, activeStep, realToScreen, onObjectClicked } = interactiveState;
   const {
@@ -974,63 +976,42 @@ var Line = ({
     strokeWidth = 1 / realToScreen.a,
     strokeDash
   } = line;
-  const [isHovered, setIsHovered] = useState4(false);
-  const [mousePos, setMousePos] = useState4({ x: 0, y: 0 });
-  const svgRef = useRef3(null);
   const screenPoints = points.map((p) => applyToPoint5(realToScreen, p));
-  const xs = screenPoints.map((p) => p.x);
-  const ys = screenPoints.map((p) => p.y);
-  const minX = Math.min(...xs);
-  const maxX = Math.max(...xs);
-  const minY = Math.min(...ys);
-  const maxY = Math.max(...ys);
-  const hoverThreshold = 10;
-  const screenStrokeWidth = strokeWidth * realToScreen.a;
-  const padding = Math.max(hoverThreshold + 4, screenStrokeWidth / 2 + 2);
-  const svgLeft = minX - padding;
-  const svgTop = minY - padding;
-  const svgWidth = Math.max(maxX - minX, 0) + padding * 2;
-  const svgHeight = Math.max(maxY - minY, 0) + padding * 2;
-  const localPoints = screenPoints.map((p) => ({
-    x: p.x - svgLeft,
-    y: p.y - svgTop
-  }));
-  const handleMouseMove = (e) => {
-    const rect = svgRef.current?.getBoundingClientRect() ?? e.currentTarget.ownerSVGElement?.getBoundingClientRect();
-    if (!rect) return;
-    const localX = e.clientX - rect.left;
-    const localY = e.clientY - rect.top;
-    const mouseX = localX + svgLeft;
-    const mouseY = localY + svgTop;
-    setMousePos({ x: localX, y: localY });
-    let isNearLine = false;
+  const screenStrokeWidth = strokeWidth * Math.abs(realToScreen.a);
+  const hoverPadding = 3;
+  const minHoverRadius = 6;
+  const hoverRadius = Math.max(
+    screenStrokeWidth / 2 + hoverPadding,
+    minHoverRadius
+  );
+  const hitStrokeWidth = hoverRadius * 2;
+  const isHovered = useMemo3(() => {
+    if (!mousePosition) return false;
     for (let i = 0; i < screenPoints.length - 1; i++) {
       const dist = distToLineSegment(
-        mouseX,
-        mouseY,
+        mousePosition.x,
+        mousePosition.y,
         screenPoints[i].x,
         screenPoints[i].y,
         screenPoints[i + 1].x,
         screenPoints[i + 1].y
       );
-      if (dist < hoverThreshold) {
-        isNearLine = true;
-        break;
+      if (dist <= hoverRadius) {
+        return true;
       }
     }
-    setIsHovered(isNearLine);
-  };
+    return false;
+  }, [hoverRadius, mousePosition, screenPoints]);
   const baseColor = strokeColor ?? defaultColors[index % defaultColors.length];
   return /* @__PURE__ */ jsxs5(
     "svg",
     {
-      ref: svgRef,
       style: {
         position: "absolute",
-        top: svgTop,
-        left: svgLeft,
-        width: svgWidth,
-        height: svgHeight,
+        top: 0,
+        left: 0,
+        width: size.width,
+        height: size.height,
         overflow: "visible",
         pointerEvents: "none"
       },
@@ -1038,14 +1019,13 @@ var Line = ({
         /* @__PURE__ */ jsx7(
           "polyline",
           {
-            points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
+            points: screenPoints.map((p) => `${p.x},${p.y}`).join(" "),
             stroke: "transparent",
             fill: "none",
-            strokeWidth: strokeWidth * realToScreen.a + hoverThreshold * 2,
+            strokeWidth: hitStrokeWidth,
             strokeLinecap: "round",
+            strokeLinejoin: "round",
             pointerEvents: "stroke",
-            onMouseMove: handleMouseMove,
-            onMouseLeave: () => setIsHovered(false),
             onClick: isHovered ? () => onObjectClicked?.({
               type: "line",
               index,
@@ -1056,20 +1036,21 @@ var Line = ({
         /* @__PURE__ */ jsx7(
           "polyline",
           {
-            points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
+            points: screenPoints.map((p) => `${p.x},${p.y}`).join(" "),
             stroke: isHovered ? safeLighten(0.2, baseColor) : baseColor,
             fill: "none",
-            strokeWidth: strokeWidth * realToScreen.a,
-            strokeDasharray: !strokeDash ? void 0 : typeof strokeDash === "string" ? strokeDash : `${strokeDash[0] * realToScreen.a}, ${strokeDash[1] * realToScreen.a}`,
+            strokeWidth: screenStrokeWidth,
+            strokeDasharray: !strokeDash ? void 0 : typeof strokeDash === "string" ? strokeDash : `${strokeDash[0] * Math.abs(realToScreen.a)}, ${strokeDash[1] * Math.abs(realToScreen.a)}`,
             strokeLinecap: "round",
+            strokeLinejoin: "round",
             pointerEvents: "none"
           }
         ),
         isHovered && line.label && /* @__PURE__ */ jsx7(
           "foreignObject",
           {
-            x: mousePos.x,
-            y: mousePos.y - 40,
+            x: mousePosition?.x ?? 0,
+            y: (mousePosition?.y ?? 0) - 40,
             width: 300,
             height: 40,
             children: /* @__PURE__ */ jsx7(Tooltip, { text: line.label })
@@ -1113,7 +1094,7 @@ var Marker = ({ marker, transform }) => {
 
 // site/components/InteractiveGraphics/Point.tsx
 import { applyToPoint as applyToPoint7 } from "transformation-matrix";
-import { useState as useState5 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Point = ({
   point,
@@ -1122,7 +1103,7 @@ var Point = ({
 }) => {
   const { color, label, layer, step } = point;
   const { activeLayers, activeStep, realToScreen, onObjectClicked } = interactiveState;
-  const [isHovered, setIsHovered] = useState5(false);
+  const [isHovered, setIsHovered] = useState4(false);
   const screenPoint = applyToPoint7(realToScreen, point);
   const size = 10;
   return /* @__PURE__ */ jsx9(
@@ -1173,7 +1154,7 @@ var Point = ({
 };
 
 // site/components/InteractiveGraphics/Polygon.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 import { applyToPoint as applyToPoint8 } from "transformation-matrix";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var Polygon = ({
@@ -1183,7 +1164,7 @@ var Polygon = ({
 }) => {
   const { points, fill, stroke, strokeWidth } = polygon;
   const { realToScreen, onObjectClicked } = interactiveState;
-  const [isHovered, setIsHovered] = useState6(false);
+  const [isHovered, setIsHovered] = useState5(false);
   if (!points || points.length === 0) return null;
   const screenPoints = points.map((p) => applyToPoint8(realToScreen, p));
   const xs = screenPoints.map((p) => p.x);
@@ -1258,7 +1239,7 @@ var Polygon = ({
 
 // site/components/InteractiveGraphics/Rect.tsx
 import { applyToPoint as applyToPoint9 } from "transformation-matrix";
-import { useState as useState7 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var Rect = ({
   rect,
@@ -1268,7 +1249,7 @@ var Rect = ({
   const defaultColor = defaultColors[index % defaultColors.length];
   let { center, width, height, fill, stroke, layer, step } = rect;
   const { activeLayers, activeStep, realToScreen, onObjectClicked } = interactiveState;
-  const [isHovered, setIsHovered] = useState7(false);
+  const [isHovered, setIsHovered] = useState6(false);
   const screenCenter = applyToPoint9(realToScreen, center);
   const screenWidth = width * realToScreen.a;
   const screenHeight = height * Math.abs(realToScreen.d);
@@ -1360,14 +1341,14 @@ var Text = ({
 
 // site/components/InteractiveGraphics/hooks/useIsPointOnScreen.ts
 import { applyToPoint as applyToPoint12 } from "transformation-matrix";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // site/components/InteractiveGraphics/hooks/useDoesLineIntersectViewport.ts
 import { applyToPoint as applyToPoint11 } from "transformation-matrix";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 var OFFSCREEN_MARGIN = 5;
 var useDoesLineIntersectViewport = (realToScreen, size) => {
-  return useMemo3(() => {
+  return useMemo4(() => {
     return (p1, p2) => {
       const sp1 = applyToPoint11(realToScreen, p1);
       const sp2 = applyToPoint11(realToScreen, p2);
@@ -1398,7 +1379,7 @@ var useDoesLineIntersectViewport = (realToScreen, size) => {
 
 // site/components/InteractiveGraphics/hooks/useIsPointOnScreen.ts
 var useIsPointOnScreen = (realToScreen, size) => {
-  return useMemo4(() => {
+  return useMemo5(() => {
     return (point) => {
       const screenPoint = applyToPoint12(realToScreen, point);
       return screenPoint.x >= -OFFSCREEN_MARGIN && screenPoint.x <= size.width + OFFSCREEN_MARGIN && screenPoint.y >= -OFFSCREEN_MARGIN && screenPoint.y <= size.height + OFFSCREEN_MARGIN;
@@ -1407,13 +1388,13 @@ var useIsPointOnScreen = (realToScreen, size) => {
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterLines.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 var useFilterLines = ({
   isPointOnScreen,
   doesLineIntersectViewport,
   filterLayerAndStep
 }) => {
-  return useMemo5(() => {
+  return useMemo6(() => {
     return (line) => {
       if (!filterLayerAndStep(line)) return false;
       if (line.points.some((p) => isPointOnScreen(p))) {
@@ -1438,12 +1419,12 @@ var useFilterLines = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterPoints.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 var useFilterPoints = ({
   isPointOnScreen,
   filterLayerAndStep
 }) => {
-  return useMemo6(() => {
+  return useMemo7(() => {
     return (point) => {
       if (!filterLayerAndStep(point)) return false;
       return isPointOnScreen(point);
@@ -1452,13 +1433,13 @@ var useFilterPoints = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterRects.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 var useFilterRects = ({
   isPointOnScreen,
   doesLineIntersectViewport,
   filterLayerAndStep
 }) => {
-  return useMemo7(() => {
+  return useMemo8(() => {
     return (rect) => {
       if (!filterLayerAndStep(rect)) return false;
       const { center, width, height } = rect;
@@ -1477,7 +1458,7 @@ var useFilterRects = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterCircles.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 var useFilterCircles = ({
   isPointOnScreen,
@@ -1485,7 +1466,7 @@ var useFilterCircles = ({
   realToScreen,
   size
 }) => {
-  return useMemo8(() => {
+  return useMemo9(() => {
     return (circle) => {
       if (!filterLayerAndStep(circle)) return false;
       const { center, radius } = circle;
@@ -1521,12 +1502,12 @@ var useFilterCircles = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterTexts.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 var useFilterTexts = ({
   isPointOnScreen,
   filterLayerAndStep
 }) => {
-  return useMemo9(() => {
+  return useMemo10(() => {
     return (text) => {
       if (!filterLayerAndStep(text)) return false;
       return isPointOnScreen({ x: text.x, y: text.y });
@@ -1535,12 +1516,12 @@ var useFilterTexts = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterArrows.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 var useFilterArrows = ({
   isPointOnScreen,
   doesLineIntersectViewport
 }) => {
-  return useMemo10(() => {
+  return useMemo11(() => {
     return (arrow) => {
       const geometry = getArrowGeometry(arrow);
       const { shaftStart, shaftEnd, heads } = geometry;
@@ -1564,13 +1545,13 @@ var useFilterArrows = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterPolygons.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 var useFilterPolygons = ({
   isPointOnScreen,
   doesLineIntersectViewport,
   filterLayerAndStep
 }) => {
-  return useMemo11(() => {
+  return useMemo12(() => {
     return (polygon) => {
       if (!filterLayerAndStep(polygon)) return false;
       if (!polygon.points || polygon.points.length === 0) return false;
@@ -1595,12 +1576,13 @@ var InteractiveGraphics = ({
   objectLimit,
   height = 600
 }) => {
-  const [activeLayers, setActiveLayers] = useState8(null);
-  const [activeStep, setActiveStep] = useState8(null);
-  const [showLastStep, setShowLastStep] = useState8(true);
-  const [size, setSize] = useState8({ width: 600, height });
-  const [contextMenu, setContextMenu] = useState8(null);
-  const [markers, setMarkers] = useState8([]);
+  const [activeLayers, setActiveLayers] = useState7(null);
+  const [activeStep, setActiveStep] = useState7(null);
+  const [showLastStep, setShowLastStep] = useState7(true);
+  const [size, setSize] = useState7({ width: 600, height });
+  const [contextMenu, setContextMenu] = useState7(null);
+  const [markers, setMarkers] = useState7([]);
+  const [mousePosition, setMousePosition] = useState7(null);
   const availableLayers = Array.from(
     /* @__PURE__ */ new Set([
       ...graphics.lines?.map((l) => l.layer).filter(Boolean) ?? [],
@@ -1613,7 +1595,7 @@ var InteractiveGraphics = ({
     ])
   );
   const maxStep = getMaxStep(graphics);
-  const graphicsBoundsWithPadding = useMemo12(() => {
+  const graphicsBoundsWithPadding = useMemo13(() => {
     const actualBounds = getGraphicsBounds(graphics);
     const width = actualBounds.maxX - actualBounds.minX;
     const height2 = actualBounds.maxY - actualBounds.minY;
@@ -1834,37 +1816,37 @@ var InteractiveGraphics = ({
     const filtered = objects.map((obj, index) => ({ ...obj, originalIndex: index })).filter(filterFn);
     return objectLimit ? filtered.slice(-objectLimit) : filtered;
   };
-  const filteredLines = useMemo12(
+  const filteredLines = useMemo13(
     () => filterAndLimit(graphics.lines, filterLines).sort(
       (a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0) || a.originalIndex - b.originalIndex
     ),
     [graphics.lines, filterLines, objectLimit]
   );
-  const filteredInfiniteLines = useMemo12(
+  const filteredInfiniteLines = useMemo13(
     () => filterAndLimit(graphics.infiniteLines, filterLayerAndStep),
     [graphics.infiniteLines, filterLayerAndStep, objectLimit]
   );
-  const filteredRects = useMemo12(
+  const filteredRects = useMemo13(
     () => sortRectsByArea(filterAndLimit(graphics.rects, filterRects)),
     [graphics.rects, filterRects, objectLimit]
   );
-  const filteredPolygons = useMemo12(
+  const filteredPolygons = useMemo13(
     () => filterAndLimit(graphics.polygons, filterPolygons),
     [graphics.polygons, filterPolygons, objectLimit]
   );
-  const filteredPoints = useMemo12(
+  const filteredPoints = useMemo13(
     () => filterAndLimit(graphics.points, filterPoints),
     [graphics.points, filterPoints, objectLimit]
   );
-  const filteredCircles = useMemo12(
+  const filteredCircles = useMemo13(
     () => filterAndLimit(graphics.circles, filterCircles),
     [graphics.circles, filterCircles, objectLimit]
   );
-  const filteredTexts = useMemo12(
+  const filteredTexts = useMemo13(
     () => filterAndLimit(graphics.texts, filterTexts),
     [graphics.texts, filterTexts, objectLimit]
   );
-  const filteredArrows = useMemo12(
+  const filteredArrows = useMemo13(
     () => filterAndLimit(graphics.arrows, filterArrows),
     [graphics.arrows, filterArrows, objectLimit]
   );
@@ -1959,6 +1941,15 @@ var InteractiveGraphics = ({
           height,
           overflow: "hidden"
         },
+        onMouseMove: (event) => {
+          const rect = ref.current?.getBoundingClientRect();
+          if (!rect) return;
+          setMousePosition({
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+          });
+        },
+        onMouseLeave: () => setMousePosition(null),
         onContextMenu: handleContextMenu,
         children: [
           /* @__PURE__ */ jsxs8(DimensionOverlay, { transform: realToScreen, children: [
@@ -1986,7 +1977,9 @@ var InteractiveGraphics = ({
               {
                 line,
                 index: line.originalIndex,
-                interactiveState
+                interactiveState,
+                size,
+                mousePosition
               },
               line.originalIndex
             )),
@@ -2074,7 +2067,7 @@ var InteractiveGraphics = ({
 };
 
 // site/components/InteractiveGraphicsCanvas.tsx
-import { useRef as useRef4, useEffect as useEffect4, useState as useState9 } 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";
@@ -2138,12 +2131,12 @@ function InteractiveGraphicsCanvas({
   height = 500,
   width = "100%"
 }) {
-  const canvasRef = useRef4(null);
-  const containerRef = useRef4(null);
-  const [size, setSize] = useState9({ width: 600, height: 600 });
-  const [activeStep, setActiveStep] = useState9(null);
-  const [showLabels, setShowLabels] = useState9(showLabelsByDefault);
-  const [showLastStep, setShowLastStep] = useState9(true);
+  const canvasRef = useRef3(null);
+  const containerRef = useRef3(null);
+  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,
@@ -2337,7 +2330,7 @@ function InteractiveGraphicsCanvas({
 }
 
 // site/components/CanvasGraphics/CanvasGraphics.tsx
-import React2, { useRef as useRef5, useEffect as useEffect5, useState as useState10 } from "react";
+import React2, { 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";
@@ -2374,10 +2367,10 @@ var CanvasGraphics = ({
   disableLabels = false,
   initialTransform
 }) => {
-  const canvasRef = useRef5(null);
-  const containerRef = useRef5(null);
-  const [size, setSize] = useState10({ width, height });
-  const [currentTransform, setCurrentTransform] = useState10(null);
+  const canvasRef = useRef4(null);
+  const containerRef = useRef4(null);
+  const [size, setSize] = useState9({ width, height });
+  const [currentTransform, setCurrentTransform] = useState9(null);
   const graphicsBoundsWithPadding = React2.useMemo(() => {
     const bounds = getBounds(graphics);
     const bWidth = bounds.maxX - bounds.minX;