@amcharts/amcharts5 5.2.38 → 5.2.39

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

@@ -456,17 +456,22 @@ var CanvasDisplayObject = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true,
         writable: true,
-        value: function (order, visible) {
-            if (visible === void 0) { visible = true; }
+        value: function (order, margin) {
             if (order == null) {
                 this._layer = undefined;
             }
             else {
+                var visible = true;
                 this._layer = this._renderer.getLayer(order, visible);
                 this._layer.visible = visible;
+                this._layer.margin = margin;
+                if (margin) {
+                    $utils.setInteractive(this._layer.view, false);
+                }
                 if (this._parent) {
                     this._parent.registerChildLayer(this._layer);
                 }
+                this._renderer.resizeLayer(this._layer);
             }
         }
     });
@@ -645,6 +650,28 @@ var CanvasDisplayObject = /** @class */ (function (_super) {
             context.setTransform(m.a * resolution, m.b * resolution, m.c * resolution, m.d * resolution, m.tx * resolution, m.ty * resolution);
         }
     });
+    Object.defineProperty(CanvasDisplayObject.prototype, "_transformMargin", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (context, resolution, margin) {
+            var m = this._matrix;
+            context.setTransform(m.a * resolution, m.b * resolution, m.c * resolution, m.d * resolution, (m.tx + margin.left) * resolution, (m.ty + margin.top) * resolution);
+        }
+    });
+    Object.defineProperty(CanvasDisplayObject.prototype, "_transformLayer", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (context, resolution, layer) {
+            if (layer.margin) {
+                this._transformMargin(context, layer.scale || resolution, layer.margin);
+            }
+            else {
+                this._transform(context, layer.scale || resolution);
+            }
+        }
+    });
     Object.defineProperty(CanvasDisplayObject.prototype, "render", {
         enumerable: false,
         configurable: true,
@@ -667,12 +694,12 @@ var CanvasDisplayObject = /** @class */ (function (_super) {
                         context.save();
                         // We must apply the mask before we transform the element
                         if (mask_1) {
-                            mask_1._transform(context, layer.scale || resolution_1);
+                            mask_1._transformLayer(context, resolution_1, layer);
                             mask_1._runPath(context);
                             context.clip();
                         }
                         context.globalAlpha = _this.compoundAlpha * _this.alpha;
-                        _this._transform(context, layer.scale || resolution_1);
+                        _this._transformLayer(context, resolution_1, layer);
                         if (_this.filter) {
                             context.filter = _this.filter;
                         }
@@ -2393,7 +2420,7 @@ var CanvasText = /** @class */ (function (_super) {
             // Other parameters
             if (style.fill) {
                 if (style.fill instanceof Color) {
-                    context.fillStyle = style.fill.toCSS();
+                    context.fillStyle = style.fill.toCSS(style.fillOpacity != undefined ? style.fillOpacity : 1);
                 }
                 else {
                     context.fillStyle = style.fill;
@@ -3060,6 +3087,12 @@ var CanvasTextStyle = /** @class */ (function () {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "fillOpacity", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "textAlign", {
             enumerable: true,
             configurable: true,
@@ -4308,6 +4341,15 @@ var CanvasRenderer = /** @class */ (function (_super) {
             return new CanvasImage(this, image);
         }
     });
+    Object.defineProperty(CanvasRenderer.prototype, "resizeLayer", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (layer) {
+            layer.dirty = true;
+            layer.resize(this._clientWidth, this._clientHeight, this.resolution);
+        }
+    });
     Object.defineProperty(CanvasRenderer.prototype, "resize", {
         enumerable: false,
         configurable: true,
@@ -4320,23 +4362,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this._height = Math.floor(height * this.resolution);
             $array.each(this.layers, function (layer) {
                 if (layer) {
-                    layer.dirty = true;
-                    if (layer.width != null) {
-                        layer.view.width = layer.width;
-                        layer.view.style.width = layer.width + "px";
-                    }
-                    else {
-                        layer.view.width = _this._width;
-                        layer.view.style.width = width + "px";
-                    }
-                    if (layer.height != null) {
-                        layer.view.height = layer.height;
-                        layer.view.style.height = layer.height + "px";
-                    }
-                    else {
-                        layer.view.height = _this._height;
-                        layer.view.style.height = height + "px";
-                    }
+                    _this.resizeLayer(layer);
                 }
             });
             // @todo: do the same for ghost canvases
@@ -4356,16 +4382,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             if (willReadFrequently === void 0) { willReadFrequently = false; }
             var view = document.createElement("canvas");
             var context = view.getContext("2d", { willReadFrequently: willReadFrequently });
-            var layer = {
-                view: view,
-                context: context,
-                order: 0,
-                visible: true,
-                width: undefined,
-                height: undefined,
-                dirty: true,
-                tainted: false
-            };
+            var layer = new CanvasLayer(view, context);
             view.style.position = "absolute";
             view.style.top = "0px";
             view.style.left = "0px";
@@ -4449,10 +4466,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
             $array.each(this.layers, function (layer) {
                 if (layer) {
                     if (layer.dirty && layer.visible) {
-                        var context = layer.context;
                         _this._dirtyLayers.push(layer);
-                        context.save();
-                        context.clearRect(0, 0, _this._width, _this._height);
+                        layer.clear();
                     }
                 }
             });
@@ -5119,4 +5134,137 @@ var CanvasRenderer = /** @class */ (function (_super) {
     return CanvasRenderer;
 }(ArrayDisposer));
 export { CanvasRenderer };
+/**
+ * @ignore
+ */
+var CanvasLayer = /** @class */ (function () {
+    function CanvasLayer(view, context) {
+        Object.defineProperty(this, "view", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "tainted", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "margin", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "order", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "visible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "scale", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dirty", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "exportableView", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "exportableContext", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "_height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        this.view = view;
+        this.context = context;
+    }
+    Object.defineProperty(CanvasLayer.prototype, "resize", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (width, height, resolution) {
+            if (this.width != null) {
+                width = this.width;
+            }
+            if (this.height != null) {
+                height = this.height;
+            }
+            if (this.margin) {
+                width += (this.margin.left + this.margin.right);
+                height += (this.margin.top + this.margin.bottom);
+                this.view.style.left = -this.margin.left + "px";
+                this.view.style.top = -this.margin.top + "px";
+            }
+            else {
+                this.view.style.left = "";
+                this.view.style.top = "";
+            }
+            this._width = Math.floor(width * resolution);
+            this._height = Math.floor(height * resolution);
+            this.view.width = this._width;
+            this.view.style.width = width + "px";
+            this.view.height = this._height;
+            this.view.style.height = height + "px";
+        }
+    });
+    Object.defineProperty(CanvasLayer.prototype, "clear", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.context.save();
+            this.context.clearRect(0, 0, this._width, this._height);
+        }
+    });
+    return CanvasLayer;
+}());
+export { CanvasLayer };
 //# sourceMappingURL=CanvasRenderer.js.map