graphics-debug 0.0.13 → 0.0.15

package/dist/lib/react.js

@@ -4,7 +4,7 @@ import {
   scale,
   translate
 } from "transformation-matrix";
-import { useMemo, useState as useState4 } from "react";
+import { useMemo, useState as useState5 } from "react";
 import useMouseMatrixTransform from "use-mouse-matrix-transform";
 import { SuperGrid } from "react-supergrid";
 import useResizeObserver from "@react-hook/resize-observer";
@@ -164,8 +164,6 @@ var Line = ({
         position: "absolute",
         top: 0,
         left: 0,
-        right: 0,
-        bottom: 0,
         width: "100%",
         height: "100%"
       },
@@ -177,6 +175,7 @@ var Line = ({
           {
             points: screenPoints.map((p) => `${p.x},${p.y}`).join(" "),
             stroke: isHovered ? safeLighten(0.2, baseColor) : baseColor,
+            fill: "none",
             strokeWidth: strokeWidth * realToScreen.a
           }
         ),
@@ -306,6 +305,60 @@ var Rect = ({
   );
 };
 
+// site/components/InteractiveGraphics/Circle.tsx
+import { applyToPoint as applyToPoint4 } from "transformation-matrix";
+import { useState as useState4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Circle = ({
+  circle,
+  interactiveState,
+  index
+}) => {
+  const defaultColor = defaultColors[index % defaultColors.length];
+  let { center, radius, fill, stroke, layer, step, label } = circle;
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const [isHovered, setIsHovered] = useState4(false);
+  const screenCenter = applyToPoint4(realToScreen, center);
+  const screenRadius = radius * realToScreen.a;
+  let backgroundColor = fill || defaultColor;
+  if (isHovered) {
+    backgroundColor = safeLighten(0.2, backgroundColor);
+    stroke = stroke ? safeLighten(0.2, stroke) : stroke;
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: screenCenter.x - screenRadius,
+        top: screenCenter.y - screenRadius,
+        width: screenRadius * 2,
+        height: screenRadius * 2,
+        borderRadius: "50%",
+        backgroundColor,
+        border: stroke ? `2px solid ${stroke}` : "none",
+        cursor: "pointer",
+        transition: "border-color 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: isHovered && label && /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginBottom: 8
+          },
+          children: /* @__PURE__ */ jsx5(Tooltip, { text: label })
+        }
+      )
+    }
+  );
+};
+
 // site/utils/getGraphicsBounds.ts
 var getGraphicsBounds = (graphics) => {
   const bounds = {
@@ -341,13 +394,13 @@ var getGraphicsBounds = (graphics) => {
 };
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var InteractiveGraphics = ({
   graphics
 }) => {
-  const [activeLayers, setActiveLayers] = useState4(null);
-  const [activeStep, setActiveStep] = useState4(null);
-  const [size, setSize] = useState4({ width: 600, height: 600 });
+  const [activeLayers, setActiveLayers] = useState5(null);
+  const [activeStep, setActiveStep] = useState5(null);
+  const [size, setSize] = useState5({ width: 600, height: 600 });
   const availableLayers = Array.from(
     /* @__PURE__ */ new Set([
       ...graphics.lines?.map((l) => l.layer).filter(Boolean) ?? [],
@@ -422,8 +475,8 @@ var InteractiveGraphics = ({
           },
           style: { marginRight: 8 },
           children: [
-            /* @__PURE__ */ jsx5("option", { value: "", children: "All Layers" }),
-            availableLayers.map((layer) => /* @__PURE__ */ jsx5("option", { value: layer, children: layer }, layer))
+            /* @__PURE__ */ jsx6("option", { value: "", children: "All Layers" }),
+            availableLayers.map((layer) => /* @__PURE__ */ jsx6("option", { value: layer, children: layer }, layer))
           ]
         }
       ),
@@ -433,7 +486,7 @@ var InteractiveGraphics = ({
           style: { display: "inline-flex", alignItems: "center", gap: 8 },
           children: [
             "Step:",
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "input",
               {
                 type: "number",
@@ -448,7 +501,7 @@ var InteractiveGraphics = ({
               }
             ),
             /* @__PURE__ */ jsxs2("label", { children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "checkbox",
@@ -475,7 +528,7 @@ var InteractiveGraphics = ({
           overflow: "hidden"
         },
         children: [
-          graphics.lines?.filter(filterLayerAndStep)?.map((l, i) => /* @__PURE__ */ jsx5(
+          graphics.lines?.filter(filterLayerAndStep)?.map((l, i) => /* @__PURE__ */ jsx6(
             Line,
             {
               line: l,
@@ -484,7 +537,7 @@ var InteractiveGraphics = ({
             },
             i
           )),
-          graphics.rects?.filter(filterLayerAndStep)?.map((r, i) => /* @__PURE__ */ jsx5(
+          graphics.rects?.filter(filterLayerAndStep)?.map((r, i) => /* @__PURE__ */ jsx6(
             Rect,
             {
               rect: r,
@@ -493,7 +546,7 @@ var InteractiveGraphics = ({
             },
             i
           )),
-          graphics.points?.filter(filterLayerAndStep)?.map((p, i) => /* @__PURE__ */ jsx5(
+          graphics.points?.filter(filterLayerAndStep)?.map((p, i) => /* @__PURE__ */ jsx6(
             Point,
             {
               point: p,
@@ -502,7 +555,8 @@ var InteractiveGraphics = ({
             },
             i
           )),
-          /* @__PURE__ */ jsx5(
+          graphics.circles?.filter(filterLayerAndStep)?.map((c, i) => /* @__PURE__ */ jsx6(Circle, { circle: c, index: i, interactiveState }, i)),
+          /* @__PURE__ */ jsx6(
             SuperGrid,
             {
               stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,

package/dist/lib/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../site/components/InteractiveGraphics/InteractiveGraphics.tsx","../../site/components/InteractiveGraphics/Line.tsx","../../site/components/InteractiveGraphics/Tooltip.tsx","../../site/utils/distToLineSegment.ts","../../site/components/InteractiveGraphics/defaultColors.ts","../../site/utils/safeLighten.ts","../../site/components/InteractiveGraphics/Point.tsx","../../site/components/InteractiveGraphics/Rect.tsx","../../site/utils/getGraphicsBounds.ts"],"sourcesContent":["import {\n  compose,\n  type Matrix,\n  applyToPoint,\n  scale,\n  translate,\n} from \"transformation-matrix\"\nimport { GraphicsObject } from \"../../../lib\"\nimport { useMemo, useState } from \"react\"\nimport useMouseMatrixTransform from \"use-mouse-matrix-transform\"\nimport { InteractiveState } from \"./InteractiveState\"\nimport { SuperGrid } from \"react-supergrid\"\nimport useResizeObserver from \"@react-hook/resize-observer\"\nimport { Line } from \"./Line\"\nimport { Point } from \"./Point\"\nimport { Rect } from \"./Rect\"\nimport { getGraphicsBounds } from \"site/utils/getGraphicsBounds\"\n\nexport const InteractiveGraphics = ({\n  graphics,\n}: { graphics: GraphicsObject }) => {\n  const [activeLayers, setActiveLayers] = useState<string[] | null>(null)\n  const [activeStep, setActiveStep] = useState<number | null>(null)\n  const [size, setSize] = useState({ width: 600, height: 600 })\n  const availableLayers: string[] = Array.from(\n    new Set([\n      ...(graphics.lines?.map((l) => l.layer!).filter(Boolean) ?? []),\n      ...(graphics.rects?.map((r) => r.layer!).filter(Boolean) ?? []),\n      ...(graphics.points?.map((p) => p.layer!).filter(Boolean) ?? []),\n    ]),\n  )\n  const maxStep = Math.max(\n    0,\n    ...(graphics.lines?.map((l) => l.step!).filter(Boolean) ?? []),\n    ...(graphics.rects?.map((r) => r.step!).filter(Boolean) ?? []),\n    ...(graphics.points?.map((p) => p.step!).filter(Boolean) ?? []),\n  )\n\n  const graphicsBoundsWithPadding = useMemo(() => {\n    const actualBounds = getGraphicsBounds(graphics)\n    const width = actualBounds.maxX - actualBounds.minX\n    const height = actualBounds.maxY - actualBounds.minY\n    return {\n      minX: actualBounds.minX - width / 10,\n      minY: actualBounds.minY - height / 10,\n      maxX: actualBounds.maxX + width / 10,\n      maxY: actualBounds.maxY + height / 10,\n    }\n  }, [graphics])\n\n  const { transform: realToScreen, ref } = useMouseMatrixTransform({\n    initialTransform: compose(\n      translate(size.width / 2, size.height / 2),\n      scale(\n        Math.min(\n          size.width /\n            (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),\n          size.height /\n            (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY),\n        ),\n        -Math.min(\n          size.width /\n            (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),\n          size.height /\n            (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY),\n        ),\n      ),\n      translate(\n        -(graphicsBoundsWithPadding.maxX + graphicsBoundsWithPadding.minX) / 2,\n        -(graphicsBoundsWithPadding.maxY + graphicsBoundsWithPadding.minY) / 2,\n      ),\n    ),\n  })\n\n  useResizeObserver(ref, (entry: ResizeObserverEntry) => {\n    setSize({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    })\n  })\n\n  const interactiveState: InteractiveState = {\n    activeLayers: activeLayers,\n    activeStep: activeStep,\n    realToScreen: realToScreen,\n  }\n\n  const showToolbar = availableLayers.length > 1 || maxStep > 0\n\n  const filterLayerAndStep = (obj: { layer?: string; step?: number }) => {\n    if (activeLayers && obj.layer && !activeLayers.includes(obj.layer))\n      return false\n    if (\n      activeStep !== null &&\n      obj.step !== undefined &&\n      obj.step !== activeStep\n    )\n      return false\n    return true\n  }\n\n  return (\n    <div>\n      {showToolbar && (\n        <div style={{ margin: 8 }}>\n          {availableLayers.length > 1 && (\n            <select\n              value={activeLayers ? activeLayers[0] : \"\"}\n              onChange={(e) => {\n                const value = e.target.value\n                setActiveLayers(value === \"\" ? null : [value])\n              }}\n              style={{ marginRight: 8 }}\n            >\n              <option value=\"\">All Layers</option>\n              {availableLayers.map((layer) => (\n                <option key={layer} value={layer}>\n                  {layer}\n                </option>\n              ))}\n            </select>\n          )}\n\n          {maxStep > 0 && (\n            <div\n              style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8 }}\n            >\n              Step:\n              <input\n                type=\"number\"\n                min={0}\n                max={maxStep}\n                value={activeStep ?? 0}\n                onChange={(e) => {\n                  const value = parseInt(e.target.value)\n                  setActiveStep(Number.isNaN(value) ? null : value)\n                }}\n                disabled={activeStep === null}\n              />\n              <label>\n                <input\n                  type=\"checkbox\"\n                  style={{ marginRight: 4 }}\n                  checked={activeStep !== null}\n                  onChange={(e) => {\n                    setActiveStep(e.target.checked ? 0 : null)\n                  }}\n                />\n                Filter by step\n              </label>\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        ref={ref}\n        style={{\n          position: \"relative\",\n          height: 600,\n          overflow: \"hidden\",\n        }}\n      >\n        {graphics.lines?.filter(filterLayerAndStep)?.map((l, i) => (\n          <Line\n            key={i}\n            line={l}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.rects?.filter(filterLayerAndStep)?.map((r, i) => (\n          <Rect\n            key={i}\n            rect={r}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.points?.filter(filterLayerAndStep)?.map((p, i) => (\n          <Point\n            key={i}\n            point={p}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        <SuperGrid\n          stringifyCoord={(x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`}\n          width={size.width}\n          height={size.height}\n          transform={realToScreen}\n        />\n      </div>\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { distToLineSegment } from \"site/utils/distToLineSegment\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Line = ({\n  line,\n  index,\n  interactiveState,\n}: { line: Types.Line; index: number; interactiveState: InteractiveState }) => {\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const {\n    points,\n    layer,\n    step,\n    strokeColor,\n    strokeWidth = 1 / realToScreen.a,\n  } = line\n  const [isHovered, setIsHovered] = useState(false)\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })\n\n  const screenPoints = points.map((p) => applyToPoint(realToScreen, p))\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    const rect = e.currentTarget.getBoundingClientRect()\n    const mouseX = e.clientX - rect.left\n    const mouseY = e.clientY - rect.top\n    const hoverThreshold = 10 // pixels\n\n    setMousePos({ x: mouseX, y: mouseY })\n\n    // Check distance to each line segment\n    let isNearLine = false\n    for (let i = 0; i < screenPoints.length - 1; i++) {\n      const dist = distToLineSegment(\n        mouseX,\n        mouseY,\n        screenPoints[i].x,\n        screenPoints[i].y,\n        screenPoints[i + 1].x,\n        screenPoints[i + 1].y,\n      )\n      if (dist < hoverThreshold) {\n        isNearLine = true\n        break\n      }\n    }\n\n    setIsHovered(isNearLine)\n  }\n\n  const baseColor = strokeColor ?? defaultColors[index % defaultColors.length]\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: \"100%\",\n        height: \"100%\",\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <polyline\n        points={screenPoints.map((p) => `${p.x},${p.y}`).join(\" \")}\n        stroke={isHovered ? safeLighten(0.2, baseColor) : baseColor}\n        strokeWidth={strokeWidth * realToScreen.a}\n      />\n      {isHovered && line.label && (\n        <foreignObject\n          x={mousePos.x}\n          y={mousePos.y - 40}\n          width={300}\n          height={40}\n        >\n          <Tooltip text={line.label} />\n        </foreignObject>\n      )}\n    </svg>\n  )\n}\n","export const Tooltip = ({ text }: { text: string }) => {\n  return (\n    <div\n      style={{\n        background: \"white\",\n        border: \"1px solid #ccc\",\n        boxShadow: \"0 0 10px 0 rgba(0, 0, 0, 0.1)\",\n        borderRadius: \"4px\",\n        padding: \"4px 8px\",\n        fontSize: \"12px\",\n        minWidth: \"150px\",\n        maxWidth: \"300px\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"pre-wrap\",\n        zIndex: 100,\n      }}\n    >\n      {text}\n    </div>\n  )\n}\n","// Calculate distance from point to line segment\nexport const distToLineSegment = (\n  px: number,\n  py: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n) => {\n  const A = px - x1\n  const B = py - y1\n  const C = x2 - x1\n  const D = y2 - y1\n\n  const dot = A * C + B * D\n  const lenSq = C * C + D * D\n  let param = -1\n\n  if (lenSq !== 0) param = dot / lenSq\n\n  let xx = 0\n  let yy = 0\n\n  if (param < 0) {\n    xx = x1\n    yy = y1\n  } else if (param > 1) {\n    xx = x2\n    yy = y2\n  } else {\n    xx = x1 + param * C\n    yy = y1 + param * D\n  }\n\n  const dx = px - xx\n  const dy = py - yy\n  return Math.sqrt(dx * dx + dy * dy)\n}\n","// These are default colors if no color is provided\n// colors are made based on the index of the item in the array\n\nexport const defaultColors = [\n  \"rgba(239, 68, 68, 0.8)\", // red-300\n  \"rgba(249, 115, 22, 0.8)\", // orange-300\n  \"rgba(245, 158, 11, 0.8)\", // amber-300\n  \"rgba(234, 179, 8, 0.8)\", // yellow-300\n  \"rgba(132, 204, 22, 0.8)\", // lime-300\n  \"rgba(34, 197, 94, 0.8)\", // green-300\n  \"rgba(16, 185, 129, 0.8)\", // emerald-300\n  \"rgba(20, 184, 166, 0.8)\", // teal-300\n  \"rgba(6, 182, 212, 0.8)\", // cyan-300\n  \"rgba(14, 165, 233, 0.8)\", // sky-300\n  \"rgba(59, 130, 246, 0.8)\", // blue-300\n  \"rgba(99, 102, 241, 0.8)\", // indigo-300\n  \"rgba(139, 92, 246, 0.8)\", // violet-300\n  \"rgba(168, 85, 247, 0.8)\", // purple-300\n  \"rgba(217, 70, 239, 0.8)\", // fuchsia-300\n  \"rgba(236, 72, 153, 0.8)\", // pink-300\n  \"rgba(249, 168, 212, 0.8)\", // rose-300\n  \"rgba(161, 161, 170, 0.8)\", // zinc-300\n]\n","import { lighten } from \"polished\"\n\nexport const safeLighten = (amount: number, color: string) => {\n  try {\n    return lighten(amount, color)\n  } catch (e) {\n    return color\n  }\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Point = ({\n  point,\n  interactiveState,\n  index,\n}: {\n  point: Types.Point\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const { color, label, layer, step } = point\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n\n  const screenPoint = applyToPoint(realToScreen, point)\n  const size = 10\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenPoint.x - size / 2,\n        top: screenPoint.y - size / 2,\n        width: size,\n        height: size,\n        borderRadius: \"50%\",\n        border: `2px solid ${\n          isHovered\n            ? safeLighten(\n                0.2,\n                color ?? defaultColors[index % defaultColors.length],\n              )\n            : (color ?? defaultColors[index % defaultColors.length])\n        }`,\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip\n            text={`${label ? `${label}\\n` : \"\"}x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Rect = ({\n  rect,\n  interactiveState,\n  index,\n}: {\n  rect: Types.Rect\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const defaultColor = defaultColors[index % defaultColors.length]\n  let { center, width, height, fill, stroke, layer, step } = rect\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n\n  const screenCenter = applyToPoint(realToScreen, center)\n  const screenWidth = width * realToScreen.a\n  const screenHeight = height * Math.abs(realToScreen.d)\n\n  // Default style when neither fill nor stroke is specified\n  const hasStrokeOrFill = fill !== undefined || stroke !== undefined\n\n  let backgroundColor = hasStrokeOrFill ? fill || \"transparent\" : defaultColor\n  if (isHovered) {\n    backgroundColor = safeLighten(0.2, backgroundColor)\n    stroke = safeLighten(0.2, stroke!)\n  }\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenCenter.x - screenWidth / 2,\n        top: screenCenter.y - screenHeight / 2,\n        width: screenWidth,\n        height: screenHeight,\n        backgroundColor,\n        border: stroke\n          ? `2px solid ${isHovered ? safeLighten(0.2, stroke) : stroke}`\n          : \"none\",\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && rect.label && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip text={rect.label} />\n        </div>\n      )}\n    </div>\n  )\n}\n","import { GraphicsObject } from \"lib/types\"\n\nexport const getGraphicsBounds = (graphics: GraphicsObject) => {\n  const bounds = {\n    minX: Infinity,\n    minY: Infinity,\n    maxX: -Infinity,\n    maxY: -Infinity,\n  }\n  for (const line of graphics.lines ?? []) {\n    for (const point of line.points ?? []) {\n      bounds.minX = Math.min(bounds.minX, point.x)\n      bounds.minY = Math.min(bounds.minY, point.y)\n      bounds.maxX = Math.max(bounds.maxX, point.x)\n      bounds.maxY = Math.max(bounds.maxY, point.y)\n    }\n  }\n  for (const rect of graphics.rects ?? []) {\n    const { center, width, height } = rect\n    const halfWidth = width / 2\n    const halfHeight = height / 2\n    bounds.minX = Math.min(bounds.minX, center.x - halfWidth)\n    bounds.minY = Math.min(bounds.minY, center.y - halfHeight)\n    bounds.maxX = Math.max(bounds.maxX, center.x + halfWidth)\n    bounds.maxY = Math.max(bounds.maxY, center.y + halfHeight)\n  }\n  for (const point of graphics.points ?? []) {\n    bounds.minX = Math.min(bounds.minX, point.x)\n    bounds.minY = Math.min(bounds.minY, point.y)\n    bounds.maxX = Math.max(bounds.maxX, point.x)\n    bounds.maxY = Math.max(bounds.maxY, point.y)\n  }\n  return bounds\n}\n"],"mappings":"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","names":["useState","jsx","applyToPoint","useState","jsx","useState","applyToPoint","applyToPoint","useState","jsx","useState","applyToPoint","jsx","jsxs","useState"]}
+{"version":3,"sources":["../../site/components/InteractiveGraphics/InteractiveGraphics.tsx","../../site/components/InteractiveGraphics/Line.tsx","../../site/components/InteractiveGraphics/Tooltip.tsx","../../site/utils/distToLineSegment.ts","../../site/components/InteractiveGraphics/defaultColors.ts","../../site/utils/safeLighten.ts","../../site/components/InteractiveGraphics/Point.tsx","../../site/components/InteractiveGraphics/Rect.tsx","../../site/components/InteractiveGraphics/Circle.tsx","../../site/utils/getGraphicsBounds.ts"],"sourcesContent":["import {\n  compose,\n  type Matrix,\n  applyToPoint,\n  scale,\n  translate,\n} from \"transformation-matrix\"\nimport { GraphicsObject } from \"../../../lib\"\nimport { useMemo, useState } from \"react\"\nimport useMouseMatrixTransform from \"use-mouse-matrix-transform\"\nimport { InteractiveState } from \"./InteractiveState\"\nimport { SuperGrid } from \"react-supergrid\"\nimport useResizeObserver from \"@react-hook/resize-observer\"\nimport { Line } from \"./Line\"\nimport { Point } from \"./Point\"\nimport { Rect } from \"./Rect\"\nimport { Circle } from \"./Circle\"\nimport { getGraphicsBounds } from \"site/utils/getGraphicsBounds\"\n\nexport const InteractiveGraphics = ({\n  graphics,\n}: { graphics: GraphicsObject }) => {\n  const [activeLayers, setActiveLayers] = useState<string[] | null>(null)\n  const [activeStep, setActiveStep] = useState<number | null>(null)\n  const [size, setSize] = useState({ width: 600, height: 600 })\n  const availableLayers: string[] = Array.from(\n    new Set([\n      ...(graphics.lines?.map((l) => l.layer!).filter(Boolean) ?? []),\n      ...(graphics.rects?.map((r) => r.layer!).filter(Boolean) ?? []),\n      ...(graphics.points?.map((p) => p.layer!).filter(Boolean) ?? []),\n    ]),\n  )\n  const maxStep = Math.max(\n    0,\n    ...(graphics.lines?.map((l) => l.step!).filter(Boolean) ?? []),\n    ...(graphics.rects?.map((r) => r.step!).filter(Boolean) ?? []),\n    ...(graphics.points?.map((p) => p.step!).filter(Boolean) ?? []),\n  )\n\n  const graphicsBoundsWithPadding = useMemo(() => {\n    const actualBounds = getGraphicsBounds(graphics)\n    const width = actualBounds.maxX - actualBounds.minX\n    const height = actualBounds.maxY - actualBounds.minY\n    return {\n      minX: actualBounds.minX - width / 10,\n      minY: actualBounds.minY - height / 10,\n      maxX: actualBounds.maxX + width / 10,\n      maxY: actualBounds.maxY + height / 10,\n    }\n  }, [graphics])\n\n  const { transform: realToScreen, ref } = useMouseMatrixTransform({\n    initialTransform: compose(\n      translate(size.width / 2, size.height / 2),\n      scale(\n        Math.min(\n          size.width /\n            (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),\n          size.height /\n            (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY),\n        ),\n        -Math.min(\n          size.width /\n            (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),\n          size.height /\n            (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY),\n        ),\n      ),\n      translate(\n        -(graphicsBoundsWithPadding.maxX + graphicsBoundsWithPadding.minX) / 2,\n        -(graphicsBoundsWithPadding.maxY + graphicsBoundsWithPadding.minY) / 2,\n      ),\n    ),\n  })\n\n  useResizeObserver(ref, (entry: ResizeObserverEntry) => {\n    setSize({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    })\n  })\n\n  const interactiveState: InteractiveState = {\n    activeLayers: activeLayers,\n    activeStep: activeStep,\n    realToScreen: realToScreen,\n  }\n\n  const showToolbar = availableLayers.length > 1 || maxStep > 0\n\n  const filterLayerAndStep = (obj: { layer?: string; step?: number }) => {\n    if (activeLayers && obj.layer && !activeLayers.includes(obj.layer))\n      return false\n    if (\n      activeStep !== null &&\n      obj.step !== undefined &&\n      obj.step !== activeStep\n    )\n      return false\n    return true\n  }\n\n  return (\n    <div>\n      {showToolbar && (\n        <div style={{ margin: 8 }}>\n          {availableLayers.length > 1 && (\n            <select\n              value={activeLayers ? activeLayers[0] : \"\"}\n              onChange={(e) => {\n                const value = e.target.value\n                setActiveLayers(value === \"\" ? null : [value])\n              }}\n              style={{ marginRight: 8 }}\n            >\n              <option value=\"\">All Layers</option>\n              {availableLayers.map((layer) => (\n                <option key={layer} value={layer}>\n                  {layer}\n                </option>\n              ))}\n            </select>\n          )}\n\n          {maxStep > 0 && (\n            <div\n              style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8 }}\n            >\n              Step:\n              <input\n                type=\"number\"\n                min={0}\n                max={maxStep}\n                value={activeStep ?? 0}\n                onChange={(e) => {\n                  const value = parseInt(e.target.value)\n                  setActiveStep(Number.isNaN(value) ? null : value)\n                }}\n                disabled={activeStep === null}\n              />\n              <label>\n                <input\n                  type=\"checkbox\"\n                  style={{ marginRight: 4 }}\n                  checked={activeStep !== null}\n                  onChange={(e) => {\n                    setActiveStep(e.target.checked ? 0 : null)\n                  }}\n                />\n                Filter by step\n              </label>\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        ref={ref}\n        style={{\n          position: \"relative\",\n          height: 600,\n          overflow: \"hidden\",\n        }}\n      >\n        {graphics.lines?.filter(filterLayerAndStep)?.map((l, i) => (\n          <Line\n            key={i}\n            line={l}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.rects?.filter(filterLayerAndStep)?.map((r, i) => (\n          <Rect\n            key={i}\n            rect={r}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.points?.filter(filterLayerAndStep)?.map((p, i) => (\n          <Point\n            key={i}\n            point={p}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.circles?.filter(filterLayerAndStep)?.map((c, i) => (\n          <Circle key={i} circle={c} index={i} interactiveState={interactiveState} />\n        ))}\n        <SuperGrid\n          stringifyCoord={(x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`}\n          width={size.width}\n          height={size.height}\n          transform={realToScreen}\n        />\n      </div>\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { distToLineSegment } from \"site/utils/distToLineSegment\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Line = ({\n  line,\n  index,\n  interactiveState,\n}: { line: Types.Line; index: number; interactiveState: InteractiveState }) => {\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const {\n    points,\n    layer,\n    step,\n    strokeColor,\n    strokeWidth = 1 / realToScreen.a,\n  } = line\n  const [isHovered, setIsHovered] = useState(false)\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })\n\n  const screenPoints = points.map((p) => applyToPoint(realToScreen, p))\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    const rect = e.currentTarget.getBoundingClientRect()\n    const mouseX = e.clientX - rect.left\n    const mouseY = e.clientY - rect.top\n    const hoverThreshold = 10 // pixels\n\n    setMousePos({ x: mouseX, y: mouseY })\n\n    // Check distance to each line segment\n    let isNearLine = false\n    for (let i = 0; i < screenPoints.length - 1; i++) {\n      const dist = distToLineSegment(\n        mouseX,\n        mouseY,\n        screenPoints[i].x,\n        screenPoints[i].y,\n        screenPoints[i + 1].x,\n        screenPoints[i + 1].y,\n      )\n      if (dist < hoverThreshold) {\n        isNearLine = true\n        break\n      }\n    }\n\n    setIsHovered(isNearLine)\n  }\n\n  const baseColor = strokeColor ?? defaultColors[index % defaultColors.length]\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <polyline\n        points={screenPoints.map((p) => `${p.x},${p.y}`).join(\" \")}\n        stroke={isHovered ? safeLighten(0.2, baseColor) : baseColor}\n        fill=\"none\"\n        strokeWidth={strokeWidth * realToScreen.a}\n      />\n      {isHovered && line.label && (\n        <foreignObject\n          x={mousePos.x}\n          y={mousePos.y - 40}\n          width={300}\n          height={40}\n        >\n          <Tooltip text={line.label} />\n        </foreignObject>\n      )}\n    </svg>\n  )\n}\n","export const Tooltip = ({ text }: { text: string }) => {\n  return (\n    <div\n      style={{\n        background: \"white\",\n        border: \"1px solid #ccc\",\n        boxShadow: \"0 0 10px 0 rgba(0, 0, 0, 0.1)\",\n        borderRadius: \"4px\",\n        padding: \"4px 8px\",\n        fontSize: \"12px\",\n        minWidth: \"150px\",\n        maxWidth: \"300px\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"pre-wrap\",\n        zIndex: 100,\n      }}\n    >\n      {text}\n    </div>\n  )\n}\n","// Calculate distance from point to line segment\nexport const distToLineSegment = (\n  px: number,\n  py: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n) => {\n  const A = px - x1\n  const B = py - y1\n  const C = x2 - x1\n  const D = y2 - y1\n\n  const dot = A * C + B * D\n  const lenSq = C * C + D * D\n  let param = -1\n\n  if (lenSq !== 0) param = dot / lenSq\n\n  let xx = 0\n  let yy = 0\n\n  if (param < 0) {\n    xx = x1\n    yy = y1\n  } else if (param > 1) {\n    xx = x2\n    yy = y2\n  } else {\n    xx = x1 + param * C\n    yy = y1 + param * D\n  }\n\n  const dx = px - xx\n  const dy = py - yy\n  return Math.sqrt(dx * dx + dy * dy)\n}\n","// These are default colors if no color is provided\n// colors are made based on the index of the item in the array\n\nexport const defaultColors = [\n  \"rgba(239, 68, 68, 0.8)\", // red-300\n  \"rgba(249, 115, 22, 0.8)\", // orange-300\n  \"rgba(245, 158, 11, 0.8)\", // amber-300\n  \"rgba(234, 179, 8, 0.8)\", // yellow-300\n  \"rgba(132, 204, 22, 0.8)\", // lime-300\n  \"rgba(34, 197, 94, 0.8)\", // green-300\n  \"rgba(16, 185, 129, 0.8)\", // emerald-300\n  \"rgba(20, 184, 166, 0.8)\", // teal-300\n  \"rgba(6, 182, 212, 0.8)\", // cyan-300\n  \"rgba(14, 165, 233, 0.8)\", // sky-300\n  \"rgba(59, 130, 246, 0.8)\", // blue-300\n  \"rgba(99, 102, 241, 0.8)\", // indigo-300\n  \"rgba(139, 92, 246, 0.8)\", // violet-300\n  \"rgba(168, 85, 247, 0.8)\", // purple-300\n  \"rgba(217, 70, 239, 0.8)\", // fuchsia-300\n  \"rgba(236, 72, 153, 0.8)\", // pink-300\n  \"rgba(249, 168, 212, 0.8)\", // rose-300\n  \"rgba(161, 161, 170, 0.8)\", // zinc-300\n]\n","import { lighten } from \"polished\"\n\nexport const safeLighten = (amount: number, color: string) => {\n  try {\n    return lighten(amount, color)\n  } catch (e) {\n    return color\n  }\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Point = ({\n  point,\n  interactiveState,\n  index,\n}: {\n  point: Types.Point\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const { color, label, layer, step } = point\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n\n  const screenPoint = applyToPoint(realToScreen, point)\n  const size = 10\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenPoint.x - size / 2,\n        top: screenPoint.y - size / 2,\n        width: size,\n        height: size,\n        borderRadius: \"50%\",\n        border: `2px solid ${\n          isHovered\n            ? safeLighten(\n                0.2,\n                color ?? defaultColors[index % defaultColors.length],\n              )\n            : (color ?? defaultColors[index % defaultColors.length])\n        }`,\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip\n            text={`${label ? `${label}\\n` : \"\"}x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Rect = ({\n  rect,\n  interactiveState,\n  index,\n}: {\n  rect: Types.Rect\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const defaultColor = defaultColors[index % defaultColors.length]\n  let { center, width, height, fill, stroke, layer, step } = rect\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n\n  const screenCenter = applyToPoint(realToScreen, center)\n  const screenWidth = width * realToScreen.a\n  const screenHeight = height * Math.abs(realToScreen.d)\n\n  // Default style when neither fill nor stroke is specified\n  const hasStrokeOrFill = fill !== undefined || stroke !== undefined\n\n  let backgroundColor = hasStrokeOrFill ? fill || \"transparent\" : defaultColor\n  if (isHovered) {\n    backgroundColor = safeLighten(0.2, backgroundColor)\n    stroke = safeLighten(0.2, stroke!)\n  }\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenCenter.x - screenWidth / 2,\n        top: screenCenter.y - screenHeight / 2,\n        width: screenWidth,\n        height: screenHeight,\n        backgroundColor,\n        border: stroke\n          ? `2px solid ${isHovered ? safeLighten(0.2, stroke) : stroke}`\n          : \"none\",\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && rect.label && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip text={rect.label} />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\nimport { safeLighten } from \"site/utils/safeLighten\"\n\nexport const Circle = ({\n  circle,\n  interactiveState,\n  index,\n}: {\n  circle: Types.Circle\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const defaultColor = defaultColors[index % defaultColors.length]\n  let { center, radius, fill, stroke, layer, step, label } = circle\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n  const screenCenter = applyToPoint(realToScreen, center)\n  const screenRadius = radius * realToScreen.a\n  let backgroundColor = fill || defaultColor\n  if (isHovered) {\n    backgroundColor = safeLighten(0.2, backgroundColor)\n    stroke = stroke ? safeLighten(0.2, stroke) : stroke\n  }\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenCenter.x - screenRadius,\n        top: screenCenter.y - screenRadius,\n        width: screenRadius * 2,\n        height: screenRadius * 2,\n        borderRadius: \"50%\",\n        backgroundColor,\n        border: stroke ? `2px solid ${stroke}` : \"none\",\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && label && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip text={label} />\n        </div>\n      )}\n    </div>\n  )\n}\n","import { GraphicsObject } from \"lib/types\"\n\nexport const getGraphicsBounds = (graphics: GraphicsObject) => {\n  const bounds = {\n    minX: Infinity,\n    minY: Infinity,\n    maxX: -Infinity,\n    maxY: -Infinity,\n  }\n  for (const line of graphics.lines ?? []) {\n    for (const point of line.points ?? []) {\n      bounds.minX = Math.min(bounds.minX, point.x)\n      bounds.minY = Math.min(bounds.minY, point.y)\n      bounds.maxX = Math.max(bounds.maxX, point.x)\n      bounds.maxY = Math.max(bounds.maxY, point.y)\n    }\n  }\n  for (const rect of graphics.rects ?? []) {\n    const { center, width, height } = rect\n    const halfWidth = width / 2\n    const halfHeight = height / 2\n    bounds.minX = Math.min(bounds.minX, center.x - halfWidth)\n    bounds.minY = Math.min(bounds.minY, center.y - halfHeight)\n    bounds.maxX = Math.max(bounds.maxX, center.x + halfWidth)\n    bounds.maxY = Math.max(bounds.maxY, center.y + halfHeight)\n  }\n  for (const point of graphics.points ?? []) {\n    bounds.minX = Math.min(bounds.minX, point.x)\n    bounds.minY = Math.min(bounds.minY, point.y)\n    bounds.maxX = Math.max(bounds.maxX, point.x)\n    bounds.maxY = Math.max(bounds.maxY, point.y)\n  }\n  return bounds\n}\n"],"mappings":"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","names":["useState","jsx","applyToPoint","useState","jsx","useState","applyToPoint","applyToPoint","useState","jsx","useState","applyToPoint","applyToPoint","useState","jsx","useState","applyToPoint","jsx","jsxs","useState"]}

package/dist/lib/types.d.ts

@@ -41,6 +41,7 @@ interface Circle {
     stroke?: string;
     layer?: string;
     step?: number;
+    label?: string;
 }
 interface GraphicsObject {
     points?: Point[];

package/package.json

@@ -2,7 +2,7 @@
   "name": "graphics-debug",
   "main": "dist/lib/index.js",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "files": [
     "dist"
   ],