@peter.prib/renderengine 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",

package/src/BaseRenderer.js

@@ -13,6 +13,17 @@ export class BaseRenderer {
         this.width = width;
         this.height = height;
     }
+    /**
+     * Take a new drawing size — the container's, once it has one. A renderer
+     * is sized from its container when it is created, and a container that is
+     * hidden then (a pane in a tab not yet shown) measures 0×0; without this
+     * the drawing stays 0×0 when the pane is shown. Subclasses resize their
+     * surface and call this.
+     */
+    resize(width, height) {
+        this.width = width;
+        this.height = height;
+    }
     clear() { throw new Error("Method 'clear()' must be implemented."); }
     rect(x, y, width, height, fill, stroke) { throw new Error("Method 'rect()' must be implemented."); }
     circle(cx, cy, r, fill, stroke) { throw new Error("Method 'circle()' must be implemented."); }

package/src/CanvasRenderer.js

@@ -22,6 +22,13 @@ export class CanvasRenderer extends BaseRenderer {
         this.ctx = this.canvas.getContext('2d');
     }
 
+    /** Resize the canvas. Setting a canvas's size clears it, so redraw after. */
+    resize(width, height) {
+        super.resize(width, height);
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
     clear() {
         this.ctx.clearRect(0, 0, this.width, this.height);
         this._shapes = [];

package/src/SVGRenderer.js

@@ -167,6 +167,22 @@ export class SVGRenderer extends BaseRenderer {
         this.container.appendChild(this.svg);
     }
 
+    /**
+     * Resize the <svg>. Its viewBox follows only while it is still the size it
+     * was created with: a diagram sets its own viewBox to its content, and that
+     * must survive, so the diagram then scales to the new box instead of
+     * being cropped to it.
+     */
+    resize(width, height) {
+        const defaultViewBox = `0 0 ${this.width} ${this.height}`;
+        super.resize(width, height);
+        this.svg.setAttribute('width', width);
+        this.svg.setAttribute('height', height);
+        if (this.svg.getAttribute('viewBox') === defaultViewBox) {
+            this.svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        }
+    }
+
     clear() {
         this._elMap.clear();
         // Keep <defs> and <style> elements; remove everything else.