elm-canvas - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

elm-canvas.js

@@ -15,3 +15,8 @@ customElements.define(
 
+    static get observedAttributes() {
+      return ["width", "height"];
+    }
+
     connectedCallback() {
+      // Wait for the inner elements to be rendered before using them
       requestAnimationFrame(() => {
@@ -22,8 +27,3 @@ this.canvas = this.querySelector("canvas");
 
-        var devicePixelRatio = window.devicePixelRatio || 1;
-        this.canvas.style.width = this.canvas.width;
-        this.canvas.style.height = this.canvas.height;
-        this.canvas.width = this.canvas.width * devicePixelRatio;
-        this.canvas.height = this.canvas.height * devicePixelRatio;
-        this.context.scale(devicePixelRatio, devicePixelRatio);
+        this.setCanvasDimensions();
 
@@ -34,2 +34,34 @@ this.render();
 
+    attributeChangedCallback(name, oldValue, newValue) {
+      if ((name === "width" || name === "height") && oldValue !== newValue) {
+        // Wait for Elm to finish rendering and setting its stuff before
+        // changing the inner canvas dimensions
+        requestAnimationFrame(() => {
+          this.setCanvasDimensions();
+        });
+      }
+    }
+
+    setCanvasDimensions() {
+      if (!this.mounted) return;
+
+      // Get dimensions from the elm-canvas element. If they are not set, try to
+      // get them from the canvas element inside (to support elm-canvas@3.0.3)
+      var width = Number(
+        this.getAttribute("width") || this.canvas.getAttribute("width")
+      );
+      var height = Number(
+        this.getAttribute("height") || this.canvas.getAttribute("height")
+      );
+
+      var devicePixelRatio = window.devicePixelRatio || 1;
+      this.canvas.style.width = width;
+      this.canvas.style.height = height;
+      this.canvas.width = width * devicePixelRatio;
+      this.canvas.height = height * devicePixelRatio;
+      // Reset current transformation matrix to the identity matrix
+      this.context.setTransform(1, 0, 0, 1, 0, 0);
+      this.context.scale(devicePixelRatio, devicePixelRatio);
+    }
+
     render() {
@@ -36,0 +68,0 @@ if (!this.mounted) return;

package.json

 {
   "name": "elm-canvas",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Custom element to be used in conjunction with Elm",
@@ -5,0 +5,0 @@ "main": "elm-canvas.js",

README.md

@@ -28,1 +28,2 @@ # elm-canvas
 | 3.x              | 2.x              |
+| >= 3.0.4         | 2.2.0            |

No alert changes

Improved metrics

Total package byte prevSize

3795

increased by40.3%

Lines of code

71

increased by61.36%

Number of lines in readme file

29

increased by3.57%

No dependency changes