Allow to render grid from data. Seems like we dont need to compute the

grid our-self.

packages/snips/src/uprp/stampy.ts

@@ -190,64 +190,84 @@ export class StampySnip extends BaseSnip {
         return this.stampy.measurement.volume;
     }
 
+    get grid() {
+        return this.stampy.measurement.grid;
+    }
+
     // TODO: Make this dynamic
     get width(): number {
-        return 700;
+        return 400;
     }
     get height(): number {
-        return 700;
+        return 400;
     }
 
-    private computeScale(): number {
-        // compute scale from given data to fit into
-        // the width and height of the canvas
-        // TODO: Implement this
-        return 150;
+    /** Compute the scale such that
+     * the max values fits inside
+     * the width and height
+     */
+    private computeScale(width: number, height: number, max: number): number {
+        return Math.min(width, height) / max;
     }
 
     public render(ctx: RenderContext): void {
+        // Apply translate, rotate and mirror
+        // see base.ts
+        const transform = ctx.getTransform();
+        this.transform(ctx);
+
+        this.renderGrid(ctx);
+
+        ctx.setTransform(transform);
+    }
+
+    public renderGrid(ctx: RenderContext): void {
+        const gridWidth = 500;
+        const gridHeight = 500;
+
         // Draw rect around the area
-        ctx.rect(0, 0, this.width, this.height);
+        ctx.rect(0, 0, gridWidth, gridHeight);
         ctx.stroke();
 
-        // Render sample circle
-        const s = this.computeScale();
-        this.drawCircle(
-            ctx,
-            this.width / 2,
-            this.height / 2,
-            (this.volume.diameter / 2) * s,
-            {
+        ctx.translate(gridHeight / 2, gridHeight / 2);
+        const s = this.computeScale(
+            gridWidth,
+            gridHeight,
+            this.volume.diameter * 2.5,
+        );
+
+        // Render grid
+        const r = (this.volume.fovw * s) / 2;
+        const positions = this.grid.values;
+        for (let i = 0; i < positions.length; i++) {
+            const x = positions[i]![0]!;
+            const y = positions[i]![1]!;
+            this.drawCircle(ctx, x * s, y * s, r, {
                 stroke: "#000",
-                fill: "red",
+                fill: "#000",
                 fill_alpha: 0.2,
-            },
-        );
+            });
+        }
+
+        // Render sample circle
+        this.drawCircle(ctx, 0, 0, (this.volume.diameter / 2) * s, {
+            stroke: "#000",
+            fill: "red",
+            fill_alpha: 0.2,
+        });
 
         // Render scale
-        this.drawScale(ctx, s);
-
-        // Render grid points
-        const grid = new HexagonalGrid(
-            0,
-            0,
-            0,
-            50,
-            this.width / 2,
-            this.height / 2,
-        );
+        this.drawScale(ctx, s, gridWidth / 2, gridHeight / 2);
 
-        for (let i = -1; i < 2; i++) {
-            for (let j = -1; j < 2; j++) {
-                const { x, y } = grid.axialToPixel(i, j);
-                this.drawCircle(ctx, x, y, 2, {
-                    stroke: "#000",
-                    fill: "#000",
-                });
-                const txt = `${i}, ${j}`;
-                ctx.fillText(txt, x + 5, y + 5);
-            }
-        }
+        // Label
+        ctx.font = "bold 18px Arial";
+        ctx.fillStyle = "#000";
+        ctx.textBaseline = "top";
+        ctx.fillText(
+            `Grid (${this.grid.method})`,
+            -gridWidth / 2 + 5,
+            -gridHeight / 2 + 5,
+        );
     }
 
     private drawCircle(
@@ -306,25 +326,31 @@ export class StampySnip extends BaseSnip {
      * If the scale is too small, the scale will be multiplied until it is
      * at least 150px.
      */
-    private drawScale(ctx: RenderContext, scale: number) {
+    private drawScale(
+        ctx: RenderContext,
+        scale: number,
+        x: number = 0,
+        y: number = 0,
+        padding: number = 10,
+    ) {
+        ctx.save();
         let mm = 1;
         let s = scale;
-        while (s < 150) {
+        while (s < 50) {
             mm *= 2;
             s *= 2;
         }
 
         // pos
-        const padding = 10;
         const rectHeight = 5;
-        const x = this.width - s - padding;
-        const y = this.height - rectHeight - padding - 18; //18=font size
+        const _x = x - s - padding;
+        const _y = y - rectHeight - padding - 18; //18=font size
 
         // Render scale rect
         ctx.globalAlpha = 0.8;
         ctx.fillStyle = "#000";
         ctx.beginPath();
-        ctx.fillRect(x, y, s, rectHeight);
+        ctx.fillRect(_x, _y, s, rectHeight);
         ctx.stroke();
 
         // Render text
@@ -333,7 +359,8 @@ export class StampySnip extends BaseSnip {
         ctx.font = "18px Arial";
         ctx.textBaseline = "top";
         const ts = ctx.measureText(`${mm} mm`);
-        ctx.fillText(`${mm} mm`, x + s / 2 - ts.width / 2, y + rectHeight);
+        ctx.fillText(`${mm} mm`, _x + s / 2 - ts.width / 2, _y + rectHeight);
+        ctx.restore();
     }
 }