@amcharts/amcharts5 5.3.6 → 5.3.8

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();
         }
@@ -1819,17 +1820,17 @@ export class CanvasText extends CanvasDisplayObject {
             writable: true,
             value: 1
         });
-        Object.defineProperty(this, "_textInfo", {
+        Object.defineProperty(this, "textVisible", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: true
         });
-        Object.defineProperty(this, "_textVisible", {
+        Object.defineProperty(this, "_textInfo", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: true
+            value: void 0
         });
         Object.defineProperty(this, "_originalScale", {
             enumerable: true,
@@ -1946,7 +1947,7 @@ export class CanvasText extends CanvasDisplayObject {
         if (!this._textInfo) {
             this._measure(layer);
         }
-        if (this._textVisible) {
+        if (this.textVisible) {
             const interactive = this._isInteractive();
             const context = layer.context;
             const layerDirty = layer.dirty;
@@ -2205,7 +2206,7 @@ export class CanvasText extends CanvasDisplayObject {
                                 const tmpText = this._truncateText(context, chunk.text, excessWidth, false, (firstTextChunk && this.style.oversizedBehavior != "wrap-no-break"));
                                 if (tmpText == "") {
                                     // Unable to fit a single letter - hide the whole label
-                                    this._textVisible = true;
+                                    this.textVisible = true;
                                     return false;
                                 }
                                 //skipFurtherText = true;
@@ -2339,18 +2340,26 @@ export class CanvasText extends CanvasDisplayObject {
             if (ratio < 1) {
                 if (oversizedBehavior == "fit") {
                     if ($type.isNumber(this.style.minScale) && (ratio < this.style.minScale)) {
-                        this._textVisible = false;
+                        this.textVisible = false;
+                        bounds.left = 0;
+                        bounds.top = 0;
+                        bounds.right = 0;
+                        bounds.bottom = 0;
                     }
                     else {
                         if (!this._originalScale || this._originalScale == 1) {
                             this._originalScale = this.scale;
                         }
                         this.scale = ratio;
-                        this._textVisible = true;
+                        this.textVisible = true;
                     }
                 }
                 else if (oversizedBehavior == "hide") {
-                    this._textVisible = false;
+                    this.textVisible = false;
+                    bounds.left = 0;
+                    bounds.top = 0;
+                    bounds.right = 0;
+                    bounds.bottom = 0;
                 }
                 else {
                     switch (this.style.textAlign) {
@@ -2369,13 +2378,13 @@ export class CanvasText extends CanvasDisplayObject {
                     }
                     this.scale = this._originalScale || 1;
                     this._originalScale = undefined;
-                    this._textVisible = true;
+                    this.textVisible = true;
                 }
             }
             else {
                 this.scale = this._originalScale || 1;
                 this._originalScale = undefined;
-                this._textVisible = true;
+                this.textVisible = true;
             }
         }
         context.restore();
@@ -2698,7 +2707,7 @@ export class CanvasRadialText extends CanvasText {
         }
     }
     _renderCircular(parentLayer) {
-        if (this._textVisible) {
+        if (this.textVisible) {
             const layer = this._layer || parentLayer;
             this._prerender(layer);
             const interactive = this._isInteractive();
@@ -2888,7 +2897,7 @@ export class CanvasRadialText extends CanvasText {
         let ellipsisMetrics;
         //const wrap = $type.isNumber(maxWidth) && (oversizedBehavior == "wrap" || oversizedBehavior == "wrap-no-break");
         // Reset text info
-        this._textVisible = true;
+        this.textVisible = true;
         this._textInfo = [];
         this._textReversed = false;
         // Pre-render
@@ -3000,7 +3009,7 @@ export class CanvasRadialText extends CanvasText {
                             totalWidth += ellipsisWidth;
                             if ((totalWidth + ellipsisWidth) > maxWidth) {
                                 if (lineInfo.textChunks.length == 1) {
-                                    this._textVisible = false;
+                                    this.textVisible = false;
                                 }
                                 else {
                                     lineInfo.width += ellipsisWidth;
@@ -3044,7 +3053,7 @@ export class CanvasRadialText extends CanvasText {
             ghostContext.restore();
         }
         if (oversizedBehavior == "hide" && (totalWidth > maxWidth)) {
-            this._textVisible = false;
+            this.textVisible = false;
         }
         // Adjust chunk internal offsets
         $array.each(this._textInfo, (lineInfo) => {
@@ -3331,25 +3340,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 +3629,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 +3676,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 +4166,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 +4201,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;
@@ -4225,8 +4231,14 @@ export class CanvasRenderer extends ArrayDisposer {
                     layer.view.style.top = "-10000px";
                     this.view.appendChild(layer.view);
                     canvases.push(layer.view);
-                    layer.view.width = canvasWidth;
-                    layer.view.height = canvasHeight;
+                    let extraX = 0;
+                    let extraY = 0;
+                    if (layer.margin) {
+                        extraX += layer.margin.left || 0 + layer.margin.right || 0;
+                        extraY += layer.margin.top || 0 + layer.margin.bottom || 0;
+                    }
+                    layer.view.width = canvasWidth + extraX;
+                    layer.view.height = canvasHeight + extraY;
                     layer.context = layer.view.getContext("2d");
                     layer.dirty = true;
                     layer.scale = scale;
@@ -4241,7 +4253,13 @@ export class CanvasRenderer extends ArrayDisposer {
         $array.each(this.layers, (layer) => {
             if (layer && layer.visible) {
                 // Layer is fine. Just plop it into our target canvas
-                context.drawImage(layer.view, 0, 0);
+                let x = 0;
+                let y = 0;
+                if (layer.margin) {
+                    x = -(layer.margin.left || 0) * this.resolution;
+                    y = -(layer.margin.top || 0) * this.resolution;
+                }
+                context.drawImage(layer.view, x, y);
                 // Restore layer original canvas
                 if (layer.exportableView) {
                     layer.view = layer.exportableView;
@@ -4314,17 +4332,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 +4464,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 +4488,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();