Add InteractiveGraphicsCanvas (#46)

* Add InteractiveGraphicsCanvas

* export interactive graphics canvas

* fix types

Author: seveibar

examples/canvas-renderer.fixture.tsx

@@ -201,7 +201,7 @@ export default function CanvasRenderer() {
       <h2>Canvas Renderer with Mouse Panning/Zooming</h2>
       <p>Drag to pan, scroll to zoom</p>
       <div
-        ref={node => {
+        ref={(node) => {
           // Using a callback ref approach
           containerRef.current = node
           // Apply the mouse transform ref if available

examples/interactive-graphics-canvas.fixture.tsx

@@ -0,0 +1,98 @@
+import React from "react"
+import { GraphicsObject } from "../lib"
+import InteractiveGraphicsCanvas from "../site/components/InteractiveGraphicsCanvas"
+
+// Example graphics object with different elements and steps
+const steppedGraphics: GraphicsObject = {
+  title: "Interactive Canvas Demo with Steps",
+  points: [
+    { x: 0, y: 0, label: "Origin", color: "blue", step: 0 },
+    { x: 50, y: 50, label: "Point A", color: "red", step: 1 },
+    { x: -50, y: 20, label: "Point B", color: "green", step: 2 },
+    { x: -20, y: -30, label: "Point C", color: "purple", step: 3 },
+  ],
+  lines: [
+    {
+      points: [
+        { x: 0, y: 0 },
+        { x: 50, y: 50 },
+      ],
+      strokeColor: "gray",
+      strokeWidth: 2,
+      step: 1,
+    },
+    {
+      points: [
+        { x: 0, y: 0 },
+        { x: -50, y: 20 },
+      ],
+      strokeColor: "green",
+      strokeWidth: 2,
+      step: 2,
+    },
+    {
+      points: [
+        { x: 0, y: 0 },
+        { x: -20, y: -30 },
+      ],
+      strokeColor: "purple",
+      strokeWidth: 2,
+      step: 3,
+    },
+  ],
+  rects: [
+    {
+      center: { x: 0, y: 30 },
+      width: 40,
+      height: 20,
+      fill: "rgba(255, 0, 0, 0.2)",
+      stroke: "red",
+      step: 1,
+    },
+    {
+      center: { x: -30, y: 0 },
+      width: 30,
+      height: 30,
+      fill: "rgba(0, 0, 255, 0.2)",
+      stroke: "blue",
+      step: 2,
+    },
+  ],
+  circles: [
+    {
+      center: { x: 25, y: 25 },
+      radius: 15,
+      fill: "rgba(0, 255, 0, 0.2)",
+      stroke: "green",
+      step: 1,
+    },
+    {
+      center: { x: -20, y: -30 },
+      radius: 10,
+      fill: "rgba(255, 0, 255, 0.2)",
+      stroke: "purple",
+      step: 3,
+    },
+  ],
+  coordinateSystem: "cartesian",
+}
+
+export default function InteractiveGraphicsCanvasFixture() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+      <h2>Interactive Graphics Canvas</h2>
+      <p>Drag to pan, scroll to zoom</p>
+      <p>Use the step controls to visualize the graphics step by step</p>
+      <p>
+        When dimension tool is enabled, press 'd' key to measure distances and
+        coordinates
+      </p>
+
+      <InteractiveGraphicsCanvas
+        graphics={steppedGraphics}
+        height={500}
+        showGrid={true}
+      />
+    </div>
+  )
+}

lib/drawGraphicsToCanvas.ts

@@ -232,10 +232,15 @@ export function drawGraphicsToCanvas(
       ctx.lineWidth = line.strokeWidth || 1
 
       if (line.strokeDash) {
-        if (typeof line.strokeDash === 'string') {
-          ctx.setLineDash(line.strokeDash.split(",").map(Number).map(n => n * Math.abs(matrix.a)))
+        if (typeof line.strokeDash === "string") {
+          ctx.setLineDash(
+            line.strokeDash
+              .split(",")
+              .map(Number)
+              .map((n) => n * Math.abs(matrix.a)),
+          )
         } else {
-          ctx.setLineDash(line.strokeDash.map(n => n * Math.abs(matrix.a)))
+          ctx.setLineDash(line.strokeDash.map((n) => n * Math.abs(matrix.a)))
         }
       } else {
         ctx.setLineDash([])

lib/react.ts

@@ -1,2 +1,3 @@
 export * from "../site/components/InteractiveGraphics/InteractiveGraphics"
+export * from "../site/components/InteractiveGraphicsCanvas"
 export * from "../site/components/CanvasGraphics/CanvasGraphics"

site/assets/exampleGraphics.json

@@ -16,10 +16,7 @@
   ],
   "lines": [
     {
-      "points": [
-        { "x": 0, "y": 0 },
-        { "x": 100, "y": 100 }
-      ],
+      "points": [{ "x": 0, "y": 0 }, { "x": 100, "y": 100 }],
       "strokeWidth": 1,
       "strokeDash": [10, 5],
       "label": "hello"