Round corners of boardfill and generalize the rounding and offsetting of polygons

Author: Perlkonig

src/boards/hexOfTri.ts

@@ -2,6 +2,7 @@ import { IPoint, IPolyPolygon } from "../grids";
 import { RendererBase } from "../renderers/_base";
 import { hexOfTri as hexOfTriGrid } from "../grids";
 import { BoardReturn } from ".";
+import { offsetPolygon } from "../common/plotting";
 
 export const hexOfTri = (ctx: RendererBase): BoardReturn => {
     if ( (ctx.json === undefined) || (ctx.rootSvg === undefined) ) {
@@ -188,61 +189,53 @@ export const hexOfTri = (ctx: RendererBase): BoardReturn => {
     const widest = Math.max(...grid.map(row => row.length));
     const numWidest = grid.findIndex(row => row.length === widest);
     let boardFill: IPolyPolygon;
-    const dist = cellsize / 1.5;
     // if numWidest is not the top or the bottom, then we have a full hex
     if (numWidest !== numTop && numWidest !== numBottom) {
-        const xDist = dist / Math.sqrt(3);
         boardFill = {
             type: "poly",
-            points: [
-                {x: grid[numTop][0].x - xDist, y: grid[numTop][0].y - dist},
-                {x: grid[numTop][grid[numTop].length - 1].x + xDist, y: grid[numTop][grid[numTop].length - 1].y - dist},
-                {x: grid[numWidest][grid[numWidest].length - 1].x + (2 * xDist), y: grid[numWidest][grid[numWidest].length - 1].y},
-                {x: grid[numBottom][grid[numBottom].length - 1].x + xDist, y: grid[numBottom][grid[numBottom].length - 1].y + dist},
-                {x: grid[numBottom][0].x - xDist, y: grid[numBottom][0].y + dist},
-                {x: grid[numWidest][0].x - (2 * xDist), y: grid[numWidest][0].y},
-            ],
+            points: offsetPolygon([
+                {x: grid[numTop][0].x, y: grid[numTop][0].y},
+                {x: grid[numTop][grid[numTop].length - 1].x, y: grid[numTop][grid[numTop].length - 1].y},
+                {x: grid[numWidest][grid[numWidest].length - 1].x, y: grid[numWidest][grid[numWidest].length - 1].y},
+                {x: grid[numBottom][grid[numBottom].length - 1].x, y: grid[numBottom][grid[numBottom].length - 1].y},
+                {x: grid[numBottom][0].x, y: grid[numBottom][0].y},
+                {x: grid[numWidest][0].x, y: grid[numWidest][0].y},
+            ], cellsize / 1.5),
         };
     }
     // otherwise we just have a four-point poly
     else {
-        const xDist = dist / Math.sqrt(3);
         const ptWideL = {
-            x: grid[numWidest][0].x - (2 * xDist),
-            y: grid[numWidest][0].y + dist * (half === "top" ? 1 : -1),
+            x: grid[numWidest][0].x,
+            y: grid[numWidest][0].y,
         };
         const ptWideR = {
-            x: grid[numWidest][grid[numWidest].length - 1].x + (2 * xDist),
-            y: grid[numWidest][grid[numWidest].length - 1].y + dist * (half === "top" ? 1 : -1),
+            x: grid[numWidest][grid[numWidest].length - 1].x,
+            y: grid[numWidest][grid[numWidest].length - 1].y,
         };
         let ptOtherL: IPoint; let ptOtherR: IPoint;
         if (half === "top") {
             ptOtherL = {
-                x: grid[numTop][0].x - xDist,
-                y: grid[numTop][0].y - dist
+                x: grid[numTop][0].x,
+                y: grid[numTop][0].y
             };
             ptOtherR = {
-                x: grid[numTop][grid[numTop].length - 1].x + xDist,
-                y: grid[numTop][grid[numTop].length - 1].y - dist
+                x: grid[numTop][grid[numTop].length - 1].x,
+                y: grid[numTop][grid[numTop].length - 1].y
             };
         } else {
             ptOtherL = {
-                x: grid[numBottom][0].x - xDist,
-                y: grid[numBottom][0].y + dist
+                x: grid[numBottom][0].x,
+                y: grid[numBottom][0].y
             };
             ptOtherR = {
-                x: grid[numBottom][grid[numBottom].length - 1].x + xDist,
-                y: grid[numBottom][grid[numBottom].length - 1].y + dist
+                x: grid[numBottom][grid[numBottom].length - 1].x,
+                y: grid[numBottom][grid[numBottom].length - 1].y
             };
         }
         boardFill = {
             type: "poly",
-            points: [
-                ptWideL,
-                ptOtherL,
-                ptOtherR,
-                ptWideR,
-            ],
+            points: offsetPolygon([ptWideL, ptOtherL, ptOtherR, ptWideR], cellsize / 1.5),
         };
     }
 

src/common/plotting.ts

@@ -333,3 +333,97 @@ export const shortenLine = (x1: number, y1: number, x2: number, y2: number, val:
     const newy2 = y1 + (t1 * (y2 - y1));
     return [newx1, newy1, newx2, newy2];
 }
+
+/**
+ * Takes a closed polygon and generates a polygon of the exact same dimensions and angles
+ * but larger or smaller by a fixed amount.
+ *
+ * @param points - The vertices of the polygon
+ * @param distance - The amount to offset the polygon. Positive expands, negative contracts.
+ * @returns The new set of vertices
+ */
+export const offsetPolygon = (points: IPoint[], distance: number): IPoint[] => {
+    // Determine winding order (CW is positive area in SVG y-down coords)
+    let area = 0;
+    for (let i = 0; i < points.length; i++) {
+        const j = (i + 1) % points.length;
+        area += points[i].x * points[j].y;
+        area -= points[j].x * points[i].y;
+    }
+    const isCW = area > 0;
+
+    const newPoints: IPoint[] = [];
+    for (let i = 0; i < points.length; i++) {
+        const prev = points[(i - 1 + points.length) % points.length];
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+
+        const v1 = { x: curr.x - prev.x, y: curr.y - prev.y };
+        const len1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
+        let n1 = { x: -v1.y / len1, y: v1.x / len1 };
+
+        const v2 = { x: next.x - curr.x, y: next.y - curr.y };
+        const len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
+        let n2 = { x: -v2.y / len2, y: v2.x / len2 };
+
+        // If CW, normals pointing "right" are pointing inside. Invert to point outside.
+        if (isCW) {
+            n1 = { x: -n1.x, y: -n1.y };
+            n2 = { x: -n2.x, y: -n2.y };
+        }
+
+        const p1 = { x: prev.x + n1.x * distance, y: prev.y + n1.y * distance };
+        const C1 = n1.x * p1.x + n1.y * p1.y;
+
+        const p2 = { x: curr.x + n2.x * distance, y: curr.y + n2.y * distance };
+        const C2 = n2.x * p2.x + n2.y * p2.y;
+
+        const det = n1.x * n2.y - n2.x * n1.y;
+
+        if (Math.abs(det) < 1e-6) {
+            newPoints.push({ x: curr.x + n1.x * distance, y: curr.y + n1.y * distance });
+        } else {
+            const x = (n2.y * C1 - n1.y * C2) / det;
+            const y = (n1.x * C2 - n2.x * C1) / det;
+            newPoints.push({ x, y });
+        }
+    }
+    return newPoints;
+}
+
+export const roundPolygon = (points: IPoint[], radius: number): string => {
+    let d = "";
+    for (let i = 0; i < points.length; i++) {
+        const curr = points[i];
+        const prev = points[(i - 1 + points.length) % points.length];
+        const next = points[(i + 1) % points.length];
+
+        const v1 = { x: curr.x - prev.x, y: curr.y - prev.y };
+        const len1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
+        const v2 = { x: next.x - curr.x, y: next.y - curr.y };
+        const len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
+
+        if (len1 < 0.001 || len2 < 0.001) {
+            if (i === 0) {
+                d += `M ${curr.x},${curr.y}`;
+            } else {
+                d += ` L ${curr.x},${curr.y}`;
+            }
+            continue;
+        }
+
+        const r = Math.min(radius, len1 / 2, len2 / 2);
+
+        const p1 = { x: curr.x - (v1.x / len1) * r, y: curr.y - (v1.y / len1) * r };
+        const p2 = { x: curr.x + (v2.x / len2) * r, y: curr.y + (v2.y / len2) * r };
+
+        if (i === 0) {
+            d += `M ${p1.x},${p1.y}`;
+        } else {
+            d += ` L ${p1.x},${p1.y}`;
+        }
+        d += ` Q ${curr.x},${curr.y} ${p2.x},${p2.y}`;
+    }
+    d += " Z";
+    return d;
+}

src/renderers/_base.ts

@@ -4,7 +4,7 @@ import type { Hex } from "honeycomb-grid";
 import { GridPoints, IPoint, type Poly, IPolyPolygon } from "../grids/_base";
 import { AnnotationBasic, AnnotationSowing, APRenderRep, AreaButtonBar, AreaCompassRose, AreaKey, AreaPieces, AreaReserves, AreaScrollBar, ButtonBarButton, Colourfuncs, FunctionBestContrast, Glyph, Gradient, MarkerFence, MarkerFences, type Polymatrix } from "../schemas/schema";
 import { sheets } from "../sheets";
-import { projectPoint, scale, rotate, usePieceAt, calcPyramidOffset, calcLazoOffset, projectPointEllipse, rotatePoint, calcBearing, smallestDegreeDiff, shortenLine } from "../common/plotting";
+import { projectPoint, scale, rotate, usePieceAt, calcPyramidOffset, calcLazoOffset, projectPointEllipse, rotatePoint, calcBearing, smallestDegreeDiff, shortenLine, roundPolygon } from "../common/plotting";
 import { glyph2uid, x2uid } from "../common/glyph2uid";
 import tinycolor from "tinycolor2";
 import { unionPolys } from "../common/polys";
@@ -3739,7 +3739,8 @@ export abstract class RendererBase {
 
                     }
                     else if (boardFill.type === "poly") {
-                        const poly = this.rootSvg.polygon(boardFill.points.map((p) => `${p.x},${p.y}`).join(" ")).id("aprender-backfill").fill({color: bgcolour, opacity: bgopacity});
+                        const path = roundPolygon(boardFill.points, 15);
+                        const poly = this.rootSvg.path(path).id("aprender-backfill").fill({color: bgcolour, opacity: bgopacity}).stroke("none");
                         // `board` backfill can't just be pushed to the back but must be inside the `board` group
                         board.add(poly, 0);
                     }