@amcharts/amcharts5 5.3.6 → 5.3.7

package/.internal/core/render/backend/CanvasRenderer.js

@@ -447,6 +447,7 @@ export class CanvasDisplayObject extends DisposerClass {
             if (this._parent) {
                 this._parent.registerChildLayer(this._layer);
             }
+            this._layer.dirty = true;
             this._renderer.resizeLayer(this._layer);
             this._renderer.resizeGhost();
         }
@@ -3331,25 +3332,25 @@ export class CanvasRenderer extends ArrayDisposer {
             writable: true,
             value: this._patternCanvas.getContext("2d")
         });
-        Object.defineProperty(this, "_width", {
+        Object.defineProperty(this, "_domWidth", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "_height", {
+        Object.defineProperty(this, "_domHeight", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "_clientWidth", {
+        Object.defineProperty(this, "_canvasWidth", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "_clientHeight", {
+        Object.defineProperty(this, "_canvasHeight", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -3620,25 +3621,25 @@ export class CanvasRenderer extends ArrayDisposer {
         return new CanvasImage(this, image);
     }
     resizeLayer(layer) {
-        layer.dirty = true;
-        layer.resize(this._clientWidth, this._clientHeight, this.resolution);
+        layer.resize(this._canvasWidth, this._canvasHeight, this._domWidth, this._domHeight, this.resolution);
     }
     resizeGhost() {
-        this._ghostLayer.resize(this._clientWidth, this._clientHeight, this.resolution);
+        this._ghostLayer.resize(this._canvasWidth, this._canvasHeight, this._domWidth, this._domHeight, this.resolution);
     }
-    resize(width, height) {
-        this._clientWidth = width;
-        this._clientHeight = height;
-        this._width = Math.floor(width * this.resolution);
-        this._height = Math.floor(height * this.resolution);
+    resize(canvasWidth, canvasHeight, domWidth, domHeight) {
+        this._canvasWidth = canvasWidth;
+        this._canvasHeight = canvasHeight;
+        this._domWidth = domWidth;
+        this._domHeight = domHeight;
         $array.each(this.layers, (layer) => {
             if (layer) {
+                layer.dirty = true;
                 this.resizeLayer(layer);
             }
         });
         this.resizeGhost();
-        this.view.style.width = width + "px";
-        this.view.style.height = height + "px";
+        this.view.style.width = domWidth + "px";
+        this.view.style.height = domHeight + "px";
     }
     createDetachedLayer(willReadFrequently = false) {
         const view = document.createElement("canvas");
@@ -3667,11 +3668,8 @@ export class CanvasRenderer extends ArrayDisposer {
         const layer = this.createDetachedLayer(order == 99);
         layer.order = order;
         layer.visible = visible;
-        if (layer.visible && this._width) {
-            layer.view.width = this._width;
-            layer.view.style.width = this._clientWidth + "px";
-            layer.view.height = this._height;
-            layer.view.style.height = this._clientHeight + "px";
+        if (layer.visible) {
+            this.resizeLayer(layer);
         }
         const layers = this.layers;
         layers.push(layer);
@@ -4160,27 +4158,29 @@ export class CanvasRenderer extends ArrayDisposer {
             options = {};
         }
         let scale = this.resolution;
+        let canvasWidth = Math.floor(this._canvasWidth * this.resolution);
+        let canvasHeight = Math.floor(this._canvasHeight * this.resolution);
         // Check if we need to scale
-        if (options.minWidth && (options.minWidth > this._width)) {
-            let minScale = options.minWidth / this._width;
+        if (options.minWidth && (options.minWidth > canvasWidth)) {
+            let minScale = options.minWidth / canvasWidth;
             if (minScale > scale) {
                 scale = minScale * this.resolution;
             }
         }
-        if (options.minHeight && (options.minHeight > this._height)) {
-            let minScale = options.minHeight / this._height;
+        if (options.minHeight && (options.minHeight > canvasHeight)) {
+            let minScale = options.minHeight / canvasHeight;
             if (minScale > scale) {
                 scale = minScale * this.resolution;
             }
         }
-        if (options.maxWidth && (options.maxWidth < this._width)) {
-            let maxScale = options.maxWidth / this._width;
+        if (options.maxWidth && (options.maxWidth < canvasWidth)) {
+            let maxScale = options.maxWidth / canvasWidth;
             if (maxScale < scale) {
                 scale = maxScale * this.resolution;
             }
         }
-        if (options.maxHeight && (options.maxHeight > this._height)) {
-            let maxScale = options.maxHeight / this._height;
+        if (options.maxHeight && (options.maxHeight > canvasHeight)) {
+            let maxScale = options.maxHeight / canvasHeight;
             if (maxScale < scale) {
                 scale = maxScale * this.resolution;
             }
@@ -4193,13 +4193,11 @@ export class CanvasRenderer extends ArrayDisposer {
         const canvases = [];
         // Set up new canvas for export
         let forceRender = false;
-        let canvasWidth = this._width;
-        let canvasHeight = this._height;
         const canvas = document.createElement("canvas");
         if (scale != this.resolution) {
             forceRender = true;
-            canvasWidth = this._width * scale / this.resolution;
-            canvasHeight = this._height * scale / this.resolution;
+            canvasWidth = canvasWidth * scale / this.resolution;
+            canvasHeight = canvasHeight * scale / this.resolution;
         }
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
@@ -4314,17 +4312,20 @@ class GhostLayer {
         this.view.style.top = "0px";
         this.view.style.left = "0px";
     }
-    resize(width, height, resolution) {
-        width += (this.margin.left + this.margin.right);
-        height += (this.margin.top + this.margin.bottom);
+    resize(canvasWidth, canvasHeight, domWidth, domHeight, resolution) {
+        canvasWidth += (this.margin.left + this.margin.right);
+        canvasHeight += (this.margin.top + this.margin.bottom);
+        // TODO this should take into account calculateSize
+        domWidth += (this.margin.left + this.margin.right);
+        domHeight += (this.margin.top + this.margin.bottom);
         this.view.style.left = -this.margin.left + "px";
         this.view.style.top = -this.margin.top + "px";
-        this._width = Math.floor(width * resolution);
-        this._height = Math.floor(height * resolution);
+        this._width = Math.floor(canvasWidth * resolution);
+        this._height = Math.floor(canvasHeight * resolution);
         this.view.width = this._width;
-        this.view.style.width = width + "px";
+        this.view.style.width = domWidth + "px";
         this.view.height = this._height;
-        this.view.style.height = height + "px";
+        this.view.style.height = domHeight + "px";
     }
     getImageData(point, bbox) {
         return this.context.getImageData(
@@ -4443,16 +4444,23 @@ export class CanvasLayer {
         this.view = view;
         this.context = context;
     }
-    resize(width, height, resolution) {
+    resize(canvasWidth, canvasHeight, domWidth, domHeight, resolution) {
+        // TODO should this take into account calculateSize ?
         if (this.width != null) {
-            width = this.width;
+            canvasWidth = this.width;
+            domWidth = this.width;
         }
+        // TODO should this take into account calculateSize ?
         if (this.height != null) {
-            height = this.height;
+            canvasHeight = this.height;
+            domHeight = this.height;
         }
         if (this.margin) {
-            width += (this.margin.left + this.margin.right);
-            height += (this.margin.top + this.margin.bottom);
+            canvasWidth += (this.margin.left + this.margin.right);
+            canvasHeight += (this.margin.top + this.margin.bottom);
+            // TODO this should take into account calculateSize
+            domWidth += (this.margin.left + this.margin.right);
+            domHeight += (this.margin.top + this.margin.bottom);
             this.view.style.left = -this.margin.left + "px";
             this.view.style.top = -this.margin.top + "px";
         }
@@ -4460,12 +4468,12 @@ export class CanvasLayer {
             this.view.style.left = "0px";
             this.view.style.top = "0px";
         }
-        this._width = Math.floor(width * resolution);
-        this._height = Math.floor(height * resolution);
+        this._width = Math.floor(canvasWidth * resolution);
+        this._height = Math.floor(canvasHeight * resolution);
         this.view.width = this._width;
-        this.view.style.width = width + "px";
+        this.view.style.width = domWidth + "px";
         this.view.height = this._height;
-        this.view.style.height = height + "px";
+        this.view.style.height = domHeight + "px";
     }
     clear() {
         this.context.save();