graphics-debug 0.0.5 → 0.0.7

package/README.md

@@ -131,6 +131,36 @@ const graphicsObjects = getGraphicsObjectsFromLogString(logString)
 // Array<GraphicsObject>
 ```
 
+### Example Graphics JSON
+
+An example graphics JSON file is provided in the repository to help you get started quickly.
+
+You can find the example file at [`site/examples/exampleGraphics.json`](site/examples/exampleGraphics.json). This file contains a sample graphics object that you can use to test the functionality of the `graphics-debug` module.
+
+Here is the content of the `exampleGraphics.json` file:
+
+```JSON
+{
+  "title": "Example Usage",
+  "rects": [
+    {
+      "center": { "x": 0, "y": 0 },
+      "width": 100,
+      "height": 100,
+      "fill": "green"
+    }
+  ],
+  "points": [
+    {
+      "x": 50,
+      "y": 50,
+      "color": "red",
+      "label": "Test Output!"
+    }
+  ]
+}
 ```
 
-```
+You can load this example into the application to visualize the graphics objects and understand how the `graphics-debug` module works.
+
+

package/dist/cli/cli.js

@@ -10,7 +10,6 @@ import "../chunk-5FZF67ET.js";
 
 // cli/cli.ts
 import { parseArgs } from "node:util";
-import "node:fs";
 import { writeFileSync } from "node:fs";
 async function getInput() {
   if (process.stdin.isTTY && process.stderr.isTTY) {

package/dist/cli/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { parseArgs } from \"node:util\"\nimport { readFileSync } from \"node:fs\"\nimport { writeFileSync } from \"node:fs\"\nimport {\n  getSvgsFromLogString,\n  getHtmlFromLogString,\n  getGraphicsObjectsFromLogString,\n} from \"../lib\"\n\nasync function getInput(): Promise<string> {\n  // Check if there's data being piped in\n  if (process.stdin.isTTY && process.stderr.isTTY) {\n    console.error(\n      \"Error: No input provided. Pipe in content with graphics objects.\",\n    )\n    process.exit(1)\n  }\n\n  const chunks = []\n\n  // Read from stdin if available\n  if (!process.stdin.isTTY) {\n    for await (const chunk of process.stdin) {\n      chunks.push(chunk)\n    }\n  }\n\n  return chunks.join(\"\")\n}\n\nasync function main() {\n  const { values } = parseArgs({\n    options: {\n      html: { type: \"boolean\" },\n      url: { type: \"boolean\" },\n      help: { type: \"boolean\" },\n    },\n  })\n\n  if (values.help) {\n    console.log(`\nUsage: graphics-debug [options]\n\nOptions:\n  --html    Output a single HTML file with all graphics\n  --url     Print a url to view the graphics in a browser\n  --help    Show this help message\n\nExamples:\n  cat debug.log | graphics-debug\n  echo '{ graphics: { points: [{x: 0, y: 0}] } }' | graphics-debug --html\n    `)\n    process.exit(0)\n  }\n\n  const input = await getInput()\n\n  if (values.html) {\n    const html = getHtmlFromLogString(input)\n    writeFileSync(\"graphicsdebug.debug.html\", html)\n    console.log('Wrote to \"graphicsdebug.debug.html\"')\n  } else if (values.url) {\n    const graphicsObjects = getGraphicsObjectsFromLogString(input)\n    if (graphicsObjects.length === 0) {\n      console.error(\"No graphics objects found in input\")\n      process.exit(0)\n    }\n\n    const { url } = await fetch(\"https://gdstore.seve.workers.dev/store\", {\n      method: \"POST\",\n      body: JSON.stringify({\n        graphicsObjects: getGraphicsObjectsFromLogString(input),\n      }),\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n    }).then((res) => res.json())\n\n    const token = url.split(\"/get/\").pop()\n\n    console.log(`https://graphicsdebug.com/t/${token}`)\n  } else {\n    const svgs = getSvgsFromLogString(input)\n    svgs.forEach((svg, i) => {\n      const filename = `${svg.title.toLowerCase().replace(/\\s+/g, \"-\")}-${i + 1}.debug.svg`\n      writeFileSync(filename, svg.svg)\n      console.log(`Wrote to \"${filename}\"`)\n    })\n  }\n}\n\nmain().catch((err) => {\n  console.error(\"Error:\", err)\n  process.exit(1)\n})\n"],"mappings":";;;;;;;;;;;AACA,SAAS,iBAAiB;AAC1B,OAA6B;AAC7B,SAAS,qBAAqB;AAO9B,eAAe,WAA4B;AAEzC,MAAI,QAAQ,MAAM,SAAS,QAAQ,OAAO,OAAO;AAC/C,YAAQ;AAAA,MACN;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,SAAS,CAAC;AAGhB,MAAI,CAAC,QAAQ,MAAM,OAAO;AACxB,qBAAiB,SAAS,QAAQ,OAAO;AACvC,aAAO,KAAK,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,OAAO,KAAK,EAAE;AACvB;AAEA,eAAe,OAAO;AACpB,QAAM,EAAE,OAAO,IAAI,UAAU;AAAA,IAC3B,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,UAAU;AAAA,MACxB,KAAK,EAAE,MAAM,UAAU;AAAA,MACvB,MAAM,EAAE,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,MAAI,OAAO,MAAM;AACf,YAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWX;AACD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,QAAQ,MAAM,SAAS;AAE7B,MAAI,OAAO,MAAM;AACf,UAAM,OAAO,qBAAqB,KAAK;AACvC,kBAAc,4BAA4B,IAAI;AAC9C,YAAQ,IAAI,qCAAqC;AAAA,EACnD,WAAW,OAAO,KAAK;AACrB,UAAM,kBAAkB,gCAAgC,KAAK;AAC7D,QAAI,gBAAgB,WAAW,GAAG;AAChC,cAAQ,MAAM,oCAAoC;AAClD,cAAQ,KAAK,CAAC;AAAA,IAChB;AAEA,UAAM,EAAE,IAAI,IAAI,MAAM,MAAM,0CAA0C;AAAA,MACpE,QAAQ;AAAA,MACR,MAAM,KAAK,UAAU;AAAA,QACnB,iBAAiB,gCAAgC,KAAK;AAAA,MACxD,CAAC;AAAA,MACD,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,IACF,CAAC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAE3B,UAAM,QAAQ,IAAI,MAAM,OAAO,EAAE,IAAI;AAErC,YAAQ,IAAI,+BAA+B,KAAK,EAAE;AAAA,EACpD,OAAO;AACL,UAAM,OAAO,qBAAqB,KAAK;AACvC,SAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,YAAM,WAAW,GAAG,IAAI,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC;AACzE,oBAAc,UAAU,IAAI,GAAG;AAC/B,cAAQ,IAAI,aAAa,QAAQ,GAAG;AAAA,IACtC,CAAC;AAAA,EACH;AACF;AAEA,KAAK,EAAE,MAAM,CAAC,QAAQ;AACpB,UAAQ,MAAM,UAAU,GAAG;AAC3B,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":[]}
+{"version":3,"sources":["../../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { parseArgs } from \"node:util\"\nimport { readFileSync } from \"node:fs\"\nimport { writeFileSync } from \"node:fs\"\nimport {\n  getSvgsFromLogString,\n  getHtmlFromLogString,\n  getGraphicsObjectsFromLogString,\n} from \"../lib\"\n\nasync function getInput(): Promise<string> {\n  // Check if there's data being piped in\n  if (process.stdin.isTTY && process.stderr.isTTY) {\n    console.error(\n      \"Error: No input provided. Pipe in content with graphics objects.\",\n    )\n    process.exit(1)\n  }\n\n  const chunks = []\n\n  // Read from stdin if available\n  if (!process.stdin.isTTY) {\n    for await (const chunk of process.stdin) {\n      chunks.push(chunk)\n    }\n  }\n\n  return chunks.join(\"\")\n}\n\nasync function main() {\n  const { values } = parseArgs({\n    options: {\n      html: { type: \"boolean\" },\n      url: { type: \"boolean\" },\n      help: { type: \"boolean\" },\n    },\n  })\n\n  if (values.help) {\n    console.log(`\nUsage: graphics-debug [options]\n\nOptions:\n  --html    Output a single HTML file with all graphics\n  --url     Print a url to view the graphics in a browser\n  --help    Show this help message\n\nExamples:\n  cat debug.log | graphics-debug\n  echo '{ graphics: { points: [{x: 0, y: 0}] } }' | graphics-debug --html\n    `)\n    process.exit(0)\n  }\n\n  const input = await getInput()\n\n  if (values.html) {\n    const html = getHtmlFromLogString(input)\n    writeFileSync(\"graphicsdebug.debug.html\", html)\n    console.log('Wrote to \"graphicsdebug.debug.html\"')\n  } else if (values.url) {\n    const graphicsObjects = getGraphicsObjectsFromLogString(input)\n    if (graphicsObjects.length === 0) {\n      console.error(\"No graphics objects found in input\")\n      process.exit(0)\n    }\n\n    const { url } = await fetch(\"https://gdstore.seve.workers.dev/store\", {\n      method: \"POST\",\n      body: JSON.stringify({\n        graphicsObjects: getGraphicsObjectsFromLogString(input),\n      }),\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n    }).then((res) => res.json())\n\n    const token = url.split(\"/get/\").pop()\n\n    console.log(`https://graphicsdebug.com/t/${token}`)\n  } else {\n    const svgs = getSvgsFromLogString(input)\n    svgs.forEach((svg, i) => {\n      const filename = `${svg.title.toLowerCase().replace(/\\s+/g, \"-\")}-${i + 1}.debug.svg`\n      writeFileSync(filename, svg.svg)\n      console.log(`Wrote to \"${filename}\"`)\n    })\n  }\n}\n\nmain().catch((err) => {\n  console.error(\"Error:\", err)\n  process.exit(1)\n})\n"],"mappings":";;;;;;;;;;;AACA,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAO9B,eAAe,WAA4B;AAEzC,MAAI,QAAQ,MAAM,SAAS,QAAQ,OAAO,OAAO;AAC/C,YAAQ;AAAA,MACN;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,SAAS,CAAC;AAGhB,MAAI,CAAC,QAAQ,MAAM,OAAO;AACxB,qBAAiB,SAAS,QAAQ,OAAO;AACvC,aAAO,KAAK,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,OAAO,KAAK,EAAE;AACvB;AAEA,eAAe,OAAO;AACpB,QAAM,EAAE,OAAO,IAAI,UAAU;AAAA,IAC3B,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,UAAU;AAAA,MACxB,KAAK,EAAE,MAAM,UAAU;AAAA,MACvB,MAAM,EAAE,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,MAAI,OAAO,MAAM;AACf,YAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWX;AACD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,QAAQ,MAAM,SAAS;AAE7B,MAAI,OAAO,MAAM;AACf,UAAM,OAAO,qBAAqB,KAAK;AACvC,kBAAc,4BAA4B,IAAI;AAC9C,YAAQ,IAAI,qCAAqC;AAAA,EACnD,WAAW,OAAO,KAAK;AACrB,UAAM,kBAAkB,gCAAgC,KAAK;AAC7D,QAAI,gBAAgB,WAAW,GAAG;AAChC,cAAQ,MAAM,oCAAoC;AAClD,cAAQ,KAAK,CAAC;AAAA,IAChB;AAEA,UAAM,EAAE,IAAI,IAAI,MAAM,MAAM,0CAA0C;AAAA,MACpE,QAAQ;AAAA,MACR,MAAM,KAAK,UAAU;AAAA,QACnB,iBAAiB,gCAAgC,KAAK;AAAA,MACxD,CAAC;AAAA,MACD,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,IACF,CAAC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAE3B,UAAM,QAAQ,IAAI,MAAM,OAAO,EAAE,IAAI;AAErC,YAAQ,IAAI,+BAA+B,KAAK,EAAE;AAAA,EACpD,OAAO;AACL,UAAM,OAAO,qBAAqB,KAAK;AACvC,SAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,YAAM,WAAW,GAAG,IAAI,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC;AACzE,oBAAc,UAAU,IAAI,GAAG;AAC/B,cAAQ,IAAI,aAAa,QAAQ,GAAG;AAAA,IACtC,CAAC;AAAA,EACH;AACF;AAEA,KAAK,EAAE,MAAM,CAAC,QAAQ;AACpB,UAAQ,MAAM,UAAU,GAAG;AAC3B,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":[]}

package/dist/lib/react.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GraphicsObject } from './types.js';
+
+declare const InteractiveGraphics: ({ graphics, }: {
+    graphics: GraphicsObject;
+}) => react_jsx_runtime.JSX.Element;
+
+export { InteractiveGraphics };

package/dist/lib/react.js

@@ -0,0 +1,346 @@
+// site/components/InteractiveGraphics/InteractiveGraphics.tsx
+import {
+  compose,
+  scale,
+  translate
+} from "transformation-matrix";
+import { useState as useState4 } from "react";
+import useMouseMatrixTransform from "use-mouse-matrix-transform";
+import { SuperGrid } from "react-supergrid";
+import useResizeObserver from "@react-hook/resize-observer";
+
+// site/components/InteractiveGraphics/Line.tsx
+import { applyToPoint } from "transformation-matrix";
+import { lighten } from "polished";
+import { useState } from "react";
+
+// site/components/InteractiveGraphics/Tooltip.tsx
+import { jsx } from "react/jsx-runtime";
+var Tooltip = ({ text }) => {
+  return /* @__PURE__ */ jsx("div", { className: "inline-block", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        background: "white",
+        border: "1px solid #ccc",
+        boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
+        borderRadius: "4px",
+        padding: "4px 8px",
+        fontSize: "12px",
+        maxWidth: "300px",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      },
+      children: text
+    }
+  ) });
+};
+
+// site/utils/distToLineSegment.ts
+var distToLineSegment = (px, py, x1, y1, x2, y2) => {
+  const A = px - x1;
+  const B = py - y1;
+  const C = x2 - x1;
+  const D = y2 - y1;
+  const dot = A * C + B * D;
+  const lenSq = C * C + D * D;
+  let param = -1;
+  if (lenSq !== 0) param = dot / lenSq;
+  let xx = 0;
+  let yy = 0;
+  if (param < 0) {
+    xx = x1;
+    yy = y1;
+  } else if (param > 1) {
+    xx = x2;
+    yy = y2;
+  } else {
+    xx = x1 + param * C;
+    yy = y1 + param * D;
+  }
+  const dx = px - xx;
+  const dy = py - yy;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
+// site/components/InteractiveGraphics/defaultColors.ts
+var defaultColors = [
+  "rgba(239, 68, 68, 0.8)",
+  // red-300
+  "rgba(249, 115, 22, 0.8)",
+  // orange-300
+  "rgba(245, 158, 11, 0.8)",
+  // amber-300
+  "rgba(234, 179, 8, 0.8)",
+  // yellow-300
+  "rgba(132, 204, 22, 0.8)",
+  // lime-300
+  "rgba(34, 197, 94, 0.8)",
+  // green-300
+  "rgba(16, 185, 129, 0.8)",
+  // emerald-300
+  "rgba(20, 184, 166, 0.8)",
+  // teal-300
+  "rgba(6, 182, 212, 0.8)",
+  // cyan-300
+  "rgba(14, 165, 233, 0.8)",
+  // sky-300
+  "rgba(59, 130, 246, 0.8)",
+  // blue-300
+  "rgba(99, 102, 241, 0.8)",
+  // indigo-300
+  "rgba(139, 92, 246, 0.8)",
+  // violet-300
+  "rgba(168, 85, 247, 0.8)",
+  // purple-300
+  "rgba(217, 70, 239, 0.8)",
+  // fuchsia-300
+  "rgba(236, 72, 153, 0.8)",
+  // pink-300
+  "rgba(249, 168, 212, 0.8)",
+  // rose-300
+  "rgba(161, 161, 170, 0.8)"
+  // zinc-300
+];
+
+// site/components/InteractiveGraphics/Line.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Line = ({
+  line,
+  index,
+  interactiveState
+}) => {
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const {
+    points,
+    layer,
+    step,
+    strokeColor,
+    strokeWidth = 1 / realToScreen.a
+  } = line;
+  const [isHovered, setIsHovered] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const screenPoints = points.map((p) => applyToPoint(realToScreen, p));
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const hoverThreshold = 10;
+    setMousePos({ x: mouseX, y: mouseY });
+    let isNearLine = false;
+    for (let i = 0; i < screenPoints.length - 1; i++) {
+      const dist = distToLineSegment(
+        mouseX,
+        mouseY,
+        screenPoints[i].x,
+        screenPoints[i].y,
+        screenPoints[i + 1].x,
+        screenPoints[i + 1].y
+      );
+      if (dist < hoverThreshold) {
+        isNearLine = true;
+        break;
+      }
+    }
+    setIsHovered(isNearLine);
+  };
+  const baseColor = strokeColor ?? defaultColors[index % defaultColors.length];
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsx2(
+          "polyline",
+          {
+            points: screenPoints.map((p) => `${p.x},${p.y}`).join(" "),
+            stroke: isHovered ? lighten(0.2, baseColor) : baseColor,
+            strokeWidth: strokeWidth * realToScreen.a
+          }
+        ),
+        isHovered && line.label && /* @__PURE__ */ jsx2(
+          "foreignObject",
+          {
+            x: mousePos.x,
+            y: mousePos.y - 40,
+            width: 300,
+            height: 40,
+            children: /* @__PURE__ */ jsx2(Tooltip, { text: line.label })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// site/components/InteractiveGraphics/Point.tsx
+import { applyToPoint as applyToPoint2 } from "transformation-matrix";
+import { lighten as lighten2 } from "polished";
+import { useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Point = ({
+  point,
+  interactiveState,
+  index
+}) => {
+  const { color, label, layer, step } = point;
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const [isHovered, setIsHovered] = useState2(false);
+  const screenPoint = applyToPoint2(realToScreen, point);
+  const size = 10;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: screenPoint.x - size / 2,
+        top: screenPoint.y - size / 2,
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        border: `2px solid ${isHovered ? lighten2(0.2, color ?? defaultColors[index % defaultColors.length]) : color ?? defaultColors[index % defaultColors.length]}`,
+        cursor: "pointer",
+        transition: "border-color 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: isHovered && label && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginBottom: 8
+          },
+          children: /* @__PURE__ */ jsx3(Tooltip, { text: label })
+        }
+      )
+    }
+  );
+};
+
+// site/components/InteractiveGraphics/Rect.tsx
+import { applyToPoint as applyToPoint3 } from "transformation-matrix";
+import { lighten as lighten3 } from "polished";
+import { useState as useState3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Rect = ({
+  rect,
+  interactiveState,
+  index
+}) => {
+  const defaultColor = defaultColors[index % defaultColors.length];
+  const { center, width, height, fill, stroke, layer, step } = rect;
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const [isHovered, setIsHovered] = useState3(false);
+  const screenCenter = applyToPoint3(realToScreen, center);
+  const screenWidth = width * realToScreen.a;
+  const screenHeight = height * Math.abs(realToScreen.d);
+  const hasStrokeOrFill = fill !== void 0 || stroke !== void 0;
+  let backgroundColor = hasStrokeOrFill ? fill || "transparent" : defaultColor;
+  if (isHovered) {
+    backgroundColor = lighten3(0.2, backgroundColor);
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: screenCenter.x - screenWidth / 2,
+        top: screenCenter.y - screenHeight / 2,
+        width: screenWidth,
+        height: screenHeight,
+        backgroundColor,
+        border: stroke ? `2px solid ${isHovered ? lighten3(0.2, stroke) : stroke}` : "none",
+        cursor: "pointer",
+        transition: "border-color 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: isHovered && rect.label && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginBottom: 8
+          },
+          children: /* @__PURE__ */ jsx4(Tooltip, { text: rect.label })
+        }
+      )
+    }
+  );
+};
+
+// site/components/InteractiveGraphics/InteractiveGraphics.tsx
+import { jsx as jsx5, 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 { transform: realToScreen, ref } = useMouseMatrixTransform({
+    initialTransform: compose(translate(0, size.height), scale(1, -1))
+  });
+  useResizeObserver(ref, (entry) => {
+    setSize({
+      width: entry.contentRect.width,
+      height: entry.contentRect.height
+    });
+  });
+  const interactiveState = {
+    activeLayers,
+    activeStep,
+    realToScreen
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      style: {
+        position: "relative",
+        height: 600,
+        overflow: "hidden"
+      },
+      children: [
+        graphics.lines?.map((l, i) => /* @__PURE__ */ jsx5(Line, { line: l, index: i, interactiveState }, i)),
+        graphics.rects?.map((r, i) => /* @__PURE__ */ jsx5(Rect, { rect: r, index: i, interactiveState }, i)),
+        graphics.points?.map((p, i) => /* @__PURE__ */ jsx5(
+          Point,
+          {
+            point: p,
+            index: i,
+            interactiveState
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx5(
+          SuperGrid,
+          {
+            stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,
+            width: size.width,
+            height: size.height,
+            transform: realToScreen
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  InteractiveGraphics
+};
+//# sourceMappingURL=react.js.map

package/dist/lib/react.js.map

@@ -0,0 +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/components/InteractiveGraphics/Point.tsx","../../site/components/InteractiveGraphics/Rect.tsx"],"sourcesContent":["import {\n  compose,\n  type Matrix,\n  applyToPoint,\n  scale,\n  translate,\n} from \"transformation-matrix\"\nimport { GraphicsObject } from \"../../../lib\"\nimport { 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\"\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\n  const { transform: realToScreen, ref } = useMouseMatrixTransform({\n    initialTransform: compose(translate(0, size.height), scale(1, -1)),\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  return (\n    <div\n      ref={ref}\n      style={{\n        position: \"relative\",\n        height: 600,\n        overflow: \"hidden\",\n      }}\n    >\n      {graphics.lines?.map((l, i) => (\n        <Line key={i} line={l} index={i} interactiveState={interactiveState} />\n      ))}\n      {graphics.rects?.map((r, i) => (\n        <Rect key={i} rect={r} index={i} interactiveState={interactiveState} />\n      ))}\n      {graphics.points?.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  )\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\"\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      }}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <polyline\n        points={screenPoints.map((p) => `${p.x},${p.y}`).join(\" \")}\n        stroke={isHovered ? lighten(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 className=\"inline-block\">\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          maxWidth: \"300px\",\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n        }}\n      >\n        {text}\n      </div>\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 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\"\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            ? lighten(0.2, color ?? defaultColors[index % defaultColors.length])\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 && 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 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\"\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  const { 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 = lighten(0.2, backgroundColor)\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 ? lighten(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"],"mappings":"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","names":["useState","jsx","applyToPoint","lighten","useState","jsx","useState","applyToPoint","lighten","applyToPoint","lighten","useState","jsx","useState","applyToPoint","lighten","jsx","jsxs","useState"]}

package/dist/lib/types.d.ts

@@ -3,6 +3,8 @@ interface Point {
     y: number;
     color?: string;
     label?: string;
+    layer?: string;
+    step?: number;
 }
 interface Line {
     points: {
@@ -11,6 +13,9 @@ interface Line {
     }[];
     strokeWidth?: number;
     strokeColor?: string;
+    layer?: string;
+    step?: number;
+    label?: string;
 }
 interface Rect {
     center: {
@@ -22,6 +27,9 @@ interface Rect {
     fill?: string;
     stroke?: string;
     color?: string;
+    layer?: string;
+    step?: number;
+    label?: string;
 }
 interface Circle {
     center: {
@@ -31,6 +39,8 @@ interface Circle {
     radius: number;
     fill?: string;
     stroke?: string;
+    layer?: string;
+    step?: number;
 }
 interface GraphicsObject {
     points?: Point[];

package/package.json

@@ -2,16 +2,27 @@
   "name": "graphics-debug",
   "main": "dist/lib/index.js",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    },
+    "./react": {
+      "types": "./dist/lib/react.d.ts",
+      "import": "./dist/lib/react.js"
+    }
+  },
   "bin": {
     "graphics-debug": "./dist/cli/cli.js",
     "gd": "./dist/cli/cli.js"
   },
   "scripts": {
-    "start": "vite",
+    "start": "cosmos",
+    "start:landing": "vite",
     "build": "tsup-node ./cli ./lib --dts --format esm --sourcemap",
     "format": "biome format --write .",
     "format:check": "biome format .",
@@ -19,6 +30,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@react-hook/resize-observer": "^2.0.2",
     "@types/bun": "latest",
     "@types/debug": "^4.1.12",
     "@types/jsdom": "^21.1.7",
@@ -31,18 +43,24 @@
     "debug": "^4.3.7",
     "jsdom": "^25.0.1",
     "react": "^18.3.1",
+    "react-cosmos": "^6.2.3",
+    "react-cosmos-plugin-vite": "^6.2.0",
     "react-dom": "^18.3.1",
     "tsup": "^8.3.5",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
   "dependencies": {
     "@types/react-router-dom": "^5.3.3",
+    "polished": "^4.3.1",
     "pretty": "^2.0.0",
     "react-router-dom": "^6.28.0",
+    "react-supergrid": "^1.0.10",
     "svgson": "^5.3.1",
-    "transformation-matrix": "^2.16.1"
+    "transformation-matrix": "^2.16.1",
+    "use-mouse-matrix-transform": "^1.3.0"
   }
 }