BREAKING CHANGE:Everything now works in Firefox and Chrome. Converted…

… all slyph sheets into 'symbols' instead of 'groups.' This also allowed me to simplify the layout code significantly. More browser testing to come.

CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [0.6.0] - 2021-12-15
+
+### Breaking Change
+
+- The renderer now works correctly in both Chrome and Firefox. The glyph sheets have now all been converted to `symbol`s instead of basic `group`s. This has vastly simplified the layout code, though it required extensive code changes. Further testing is planned on other browsers.
 
 ### Added
 
@@ -15,6 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
   **Note:** To avoid the buffer click handlers from interfering with the generic click handler on `vertex` boards, if a buffer is present at all (regardless of whether it is shown), the generic handler ignores clicks outside of the board's outer edge. This reduces the sensitivity of clicks along the edge, but it's still quite functional.
 
+### Removed
+
+- Removed the `key` feature for now. It is a decidedly nontrivial task to generalize this in a way that works cross-browser. Its only use so far has been for Volcano, and that is now obviated by the click handler. This is something I may revisit.
+
 ## [0.5.0] - 2021-12-10
 
 ### Added

bin/contact.ts

@@ -5,7 +5,7 @@ import { sheets } from "../src/sheets";
 const { createSVGWindow } = require("svgdom");
 const window = createSVGWindow();
 const document = window.document;
-import { registerWindow, SVG, Svg } from "@svgdotjs/svg.js";
+import { registerWindow, SVG, Svg, Symbol as SVGSymbol } from "@svgdotjs/svg.js";
 
 // register window and document
 registerWindow(window, document);
@@ -15,10 +15,12 @@ const canvas = SVG(document.documentElement) as Svg;
 
 const tileSizeOuter = 200;
 const tileSizeInner = 150;
+const factor = tileSizeInner / tileSizeOuter;
 const innerTL = (tileSizeOuter - tileSizeInner) / 2;
 const numimgswide = 6;
 const rowPadding = 5;
 const sheetPadding = 40;
+const width = tileSizeOuter * numimgswide;
 
 const title = canvas.nested().id("title");
 title.text("Renderer Contact Sheet\n(Generated " + moment().format("DD MMM YYYY") + ")").move(0, 0);
@@ -39,10 +41,11 @@ Array.from(sheets.values()).forEach((sheet) => {
         const name = names[idx];
         const glyph = glyphs[idx];
         const tile = nstSheet.nested().size(tileSizeOuter, tileSizeOuter);
-        const placed = glyph(tile);
+        const symbol = glyph(tile);
+        const used = tile.use(tile.findOne("#" + symbol.id()) as SVGSymbol);
         // Scale it appropriately
-        placed.size(tileSizeInner);
-        placed.move(innerTL, innerTL);
+        used.dmove(innerTL, innerTL);
+        used.scale(factor, innerTL, innerTL);
         tile.plain(name).move(0, tileSizeOuter - innerTL);
         tiles.push(tile);
     }
@@ -62,21 +65,23 @@ Array.from(sheets.values()).forEach((sheet) => {
             }
         }
     }
-    nstSheet.height((numrows * tileSizeOuter) + (numrows * rowPadding));
+    const height = (numrows * tileSizeOuter) + (numrows * rowPadding);
+    // nstSheet.viewbox(0, 0, width, height);
+    nstSheet.size(width, height);
     nestedSheets.push(nstSheet);
 });
 
 // Arrange sheets
 let currY = 40;
-nestedSheets.forEach((sheet) => {
+nestedSheets.forEach((sheet: Svg) => {
     sheet.move(0, currY);
-    currY += sheet.height() + sheetPadding;
+    currY += (sheet.height() as number) + sheetPadding;
 });
 
 // Calculate total image size and resize the canvas
 const height = currY;
-const width = tileSizeOuter * numimgswide;
-canvas.size(width, height);
+canvas.viewbox(0, 0, width, height);
+// canvas.size(width, height);
 canvas.rect(width, height).fill("#fff").back();
 
 // tslint:disable-next-line: no-console

bin/export.ts

@@ -52,15 +52,9 @@ function exportGlyph(sheetName: string, glyphName: string): string {
     // create canvas
     const canvas = SVG(document.documentElement) as Svg;
 
-    // add glyph directly to canvas
-    const placed = glyph(canvas);
-
-    // get sizing data and resize canvas
-    const size = placed.attr("data-cellsize");
-    if ( (size === null) || (size === undefined) ) {
-      throw new Error("Glyph does not have size metadata. This should never happen.");
-    }
-    canvas.size(size, size);
+    // add glyph to defs then use
+    const placed = glyph(canvas.defs());
+    canvas.use(placed);
 
     // return canvas SVG code
     return canvas.svg();

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abstractplay/renderer",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Renders Abstract Play game states graphically",
     "repository": {
         "type": "git",