Some tweaks to pieces area return values for freespace-style renderers

Author: Perlkonig

src/renderers/_base.ts

@@ -9004,7 +9004,7 @@ export abstract class RendererBase {
      *
      * @param gridPoints -
      */
-    protected piecesArea(box: SVGBox, opts?: {padding?: number, canvas?: Svg}): number|undefined {
+    protected piecesArea(box: SVGBox, opts?: {padding?: number, canvas?: Svg}): {newY: number|undefined; width: number|undefined} {
         if (this.rootSvg === undefined) {
             throw new Error("Can't place a `pieces` area until the root SVG is initialized!");
         }
@@ -9013,6 +9013,7 @@ export abstract class RendererBase {
             padding = opts.padding;
         }
         let placeY: number|undefined;
+        let finalWidth: number|undefined;
         if ( (this.json !== undefined) && (this.json.areas !== undefined) && (Array.isArray(this.json.areas)) && (this.json.areas.length > 0) ) {
             const areas = this.json.areas.filter((x) => x.type === "pieces") as AreaPieces[];
             const boardBottom = box.y2; // + this.cellsize;
@@ -9050,6 +9051,12 @@ export abstract class RendererBase {
                     root = opts.canvas;
                 }
                 const nested = root.nested().id(`_pieces${iArea}`).size(areaWidth+2, areaHeight+2).viewbox(-1 - markWidth - 5, -1, areaWidth+2+markWidth+10, areaHeight+2);
+                const fullWidth = areaWidth + 2 + markWidth + 10;
+                if (finalWidth === undefined) {
+                    finalWidth = fullWidth;
+                } else {
+                    finalWidth = Math.max(finalWidth, fullWidth);
+                }
                 if ("background" in area) {
                     nested.rect(areaWidth,areaHeight).fill(area.background as string);
                 }
@@ -9100,7 +9107,7 @@ export abstract class RendererBase {
                 placeY += nested.bbox().height + (this.cellsize * 0.5);
             }
         }
-        return placeY;
+        return {newY: placeY, width: finalWidth};
     }
 
     /**

src/renderers/freespace.ts

@@ -109,7 +109,7 @@ export class FreespaceRenderer extends RendererBase {
         const box = field.viewbox();
 
         // `pieces` area, if present
-        const newY = this.piecesArea(box, {canvas: field})!;
+        const {newY, width: areaWidth} = this.piecesArea(box, {canvas: field})!;
 
         // // button bar
         // this.placeButtonBar(gridPoints);
@@ -137,6 +137,11 @@ export class FreespaceRenderer extends RendererBase {
             h += dy;
             // field.viewbox(x, y, w, h);
         }
+        if (areaWidth !== undefined) {
+            if (w < areaWidth) {
+                w = areaWidth;
+            }
+        }
         field.viewbox(x, y, w, h);
         draw.viewbox(x, y, w, h);
     }

src/renderers/polyomino.ts

@@ -129,7 +129,7 @@ export class PolyominoRenderer extends RendererBase {
         }
     }
 
-    protected piecesArea(box: SVGBox): number|undefined {
+    protected piecesArea(box: SVGBox): {newY: number|undefined; width: number|undefined} {
         if (this.rootSvg === undefined) {
             throw new Error("Can't place a `pieces` area until the root SVG is initialized!");
         }
@@ -269,7 +269,7 @@ export class PolyominoRenderer extends RendererBase {
                 }
             }
         }
-        return undefined;
+        return {newY: undefined, width: undefined};
     }
 
     /**

src/renderers/treePyramid.ts

@@ -156,7 +156,7 @@ export class TreePyramidRenderer extends RendererBase {
         const box = field.viewbox();
 
         // `pieces` area, if present
-        const newY = this.piecesArea(box, {canvas: field})!;
+        const {newY} = this.piecesArea(box, {canvas: field})!;
 
         // // button bar
         // this.placeButtonBar(box);