igniteui-angular-core 13.1.1 → 13.2.0-beta.2

package/esm5/lib/CanvasViewRenderer.js

@@ -16,6 +16,7 @@ import { TransformGroup } from "./TransformGroup";
 import { TranslateTransform } from "./TranslateTransform";
 import { RotateTransform } from "./RotateTransform";
 import { ScaleTransform } from "./ScaleTransform";
+import { TextFontMetrics } from "./TextFontMetrics";
 import { isNaN_ } from "./number";
 /**
  * @hidden
@@ -24,36 +25,37 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
     __extends(CanvasViewRenderer, _super);
     function CanvasViewRenderer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.i = null;
-        _this.g = 0;
-        _this.e = 0;
+        _this.j = null;
         _this.h = 0;
         _this.f = 0;
+        _this.i = 0;
+        _this.g = 0;
         _this.b = false;
         _this.c = false;
-        _this.z = null;
-        _this.l = "left";
+        _this.aa = null;
+        _this.m = "left";
         _this.a = null;
-        _this.d = 1;
+        _this.d = 11;
+        _this.e = 1;
         return _this;
     }
     CanvasViewRenderer.prototype.h$e = function () {
-        return this.i;
+        return this.j;
     };
     Object.defineProperty(CanvasViewRenderer.prototype, "h$d", {
         get: function () {
-            return this.i;
+            return this.j;
         },
         set: function (a) {
-            this.i = a;
+            this.j = a;
         },
         enumerable: false,
         configurable: true
     });
-    CanvasViewRenderer.prototype.k = function (a, b, c, d, e, f, g) {
-        return CanvasViewRenderer.j(this.i, a, b, c, d, e, f, g);
+    CanvasViewRenderer.prototype.l = function (a, b, c, d, e, f, g) {
+        return CanvasViewRenderer.k(this.j, a, b, c, d, e, f, g);
     };
-    CanvasViewRenderer.j = function (a, b, c, d, e, f, g, h) {
+    CanvasViewRenderer.k = function (a, b, c, d, e, f, g, h) {
         var i;
         if (b.useCustomDirection) {
             var j = void 0, k = void 0, l = void 0, m = void 0, n = void 0;
@@ -98,8 +100,8 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         var e = a.height;
         var f = a.am;
         var g = a.an;
-        this.i.beginPath();
-        this.i.globalAlpha = (a._opacity * this.d);
+        this.j.beginPath();
+        this.j.globalAlpha = (a._opacity * this.e);
         if (f > 0 || g > 0) {
             if (f > d / 2) {
                 f = (d / 2);
@@ -108,97 +110,97 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
                 g = (e / 2);
             }
             var h = Math.min(f, g);
-            this.i.beginPath();
-            this.i.moveTo(b + h, c);
-            this.i.lineTo(b + d - h, c);
-            this.i.arc(b + d - h, c + h, h, (3 / 2 * Math.PI), 0, false);
-            this.i.lineTo(b + d, c + e - h);
-            this.i.arc(b + d - h, c + e - h, h, 0, (Math.PI / 2), false);
-            this.i.lineTo(b + h, c + e);
-            this.i.arc(b + h, c + e - h, h, (Math.PI / 2), Math.PI, false);
-            this.i.lineTo(b, c + h);
-            this.i.arc(b + h, c + h, h, Math.PI, (3 / 2 * Math.PI), false);
-            this.i.closePath();
+            this.j.beginPath();
+            this.j.moveTo(b + h, c);
+            this.j.lineTo(b + d - h, c);
+            this.j.arc(b + d - h, c + h, h, (3 / 2 * Math.PI), 0, false);
+            this.j.lineTo(b + d, c + e - h);
+            this.j.arc(b + d - h, c + e - h, h, 0, (Math.PI / 2), false);
+            this.j.lineTo(b + h, c + e);
+            this.j.arc(b + h, c + e - h, h, (Math.PI / 2), Math.PI, false);
+            this.j.lineTo(b, c + h);
+            this.j.arc(b + h, c + h, h, Math.PI, (3 / 2 * Math.PI), false);
+            this.j.closePath();
         }
         else {
-            this.i.rect(b, c, d, e);
+            this.j.rect(b, c, d, e);
         }
         var i = a._fill;
         var j = a._stroke;
         if (i != null) {
             if (i.isGradient && c == c && b == b) {
-                this.i.fillStyle = this.k(i, b, c, b + d, c + e, a.ac, false);
+                this.j.fillStyle = this.l(i, b, c, b + d, c + e, a.ac, false);
             }
             else {
-                this.i.fillStyle = i._fill;
+                this.j.fillStyle = i._fill;
             }
-            this.i.fill();
+            this.j.fill();
         }
         if (j != null) {
             if (j.isGradient && c == c && b == b) {
-                this.i.strokeStyle = this.k(j, b, c, b + d, c + e, a.ac, true);
+                this.j.strokeStyle = this.l(j, b, c, b + d, c + e, a.ac, true);
             }
             else {
-                this.i.strokeStyle = j._fill;
+                this.j.strokeStyle = j._fill;
             }
-            this.i.lineWidth = a.ac;
-            this.i.stroke();
+            this.j.lineWidth = a.ac;
+            this.j.stroke();
         }
-        this.i.globalAlpha = 1;
+        this.j.globalAlpha = 1;
     };
     CanvasViewRenderer.prototype.h$q = function (a) {
         if (a._visibility != 0) {
             return;
         }
-        this.i.beginPath();
-        if (a._opacity < 1 || this.d < 1) {
-            this.i.globalAlpha = (a._opacity * this.d);
+        this.j.beginPath();
+        if (a._opacity < 1 || this.e < 1) {
+            this.j.globalAlpha = (a._opacity * this.e);
         }
         var b = a._fill;
         var c = a._stroke;
         this.b = (b != null && b.isGradient) || (c != null && c.isGradient);
         if (this.b) {
-            this.e = -1.7976931348623157E+308;
             this.f = -1.7976931348623157E+308;
-            this.g = 1.7976931348623157E+308;
+            this.g = -1.7976931348623157E+308;
             this.h = 1.7976931348623157E+308;
+            this.i = 1.7976931348623157E+308;
             this.c = false;
         }
         switch (a.aj) {
             case 0:
-                this.i.lineJoin = "miter";
+                this.j.lineJoin = "miter";
                 break;
             case 1:
-                this.i.lineJoin = "bevel";
+                this.j.lineJoin = "bevel";
                 break;
             case 2:
-                this.i.lineJoin = "round";
+                this.j.lineJoin = "round";
                 break;
         }
         this.h$o(a.ak);
         if (b != null) {
             if (b.isGradient && this.c) {
-                this.i.fillStyle = this.k(b, this.g, this.h, this.e, this.f, a.ac, false);
+                this.j.fillStyle = this.l(b, this.h, this.i, this.f, this.g, a.ac, false);
             }
             else {
-                this.i.fillStyle = a._fill._fill;
+                this.j.fillStyle = a._fill._fill;
             }
-            this.i.fill();
+            this.j.fill();
         }
         if (c != null) {
             if (c.isGradient && this.c) {
-                this.i.strokeStyle = this.k(c, this.g, this.h, this.e, this.f, a.ac, true);
+                this.j.strokeStyle = this.l(c, this.h, this.i, this.f, this.g, a.ac, true);
             }
             else {
-                this.i.strokeStyle = a._stroke._fill;
+                this.j.strokeStyle = a._stroke._fill;
             }
-            this.i.lineWidth = a.ac;
+            this.j.lineWidth = a.ac;
             if (a.ac > 0) {
-                this.i.stroke();
+                this.j.stroke();
             }
         }
-        if (a._opacity < 1 || this.d < 1) {
-            this.i.globalAlpha = 1;
+        if (a._opacity < 1 || this.e < 1) {
+            this.j.globalAlpha = 1;
         }
     };
     CanvasViewRenderer.prototype.h$o = function (a) {
@@ -213,22 +215,22 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
                 }
                 break;
             case 4:
-                this.s(a);
+                this.t(a);
                 break;
             case 1:
-                this.q(a);
+                this.r(a);
                 break;
             case 2:
-                this.v(a);
+                this.w(a);
                 break;
             case 3:
-                this.o(a);
+                this.p(a);
                 break;
         }
     };
-    CanvasViewRenderer.prototype.o = function (a) {
-        this.i.moveTo(a.e.x, (a.e.y - a.d));
-        this.z = { $type: Point_$type, x: a.e.x, y: a.e.y - a.d };
+    CanvasViewRenderer.prototype.p = function (a) {
+        this.j.moveTo(a.e.x, (a.e.y - a.d));
+        this.aa = { $type: Point_$type, x: a.e.x, y: a.e.y - a.d };
         var b = ((function () {
             var $ret = new ArcSegment();
             $ret.e = { $type: Point_$type, x: a.e.x, y: a.e.y + a.d };
@@ -245,8 +247,8 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         })());
         var d = this.b;
         this.b = false;
-        this.m(b);
-        this.m(c);
+        this.n(b);
+        this.n(c);
         this.b = d;
         if (!this.b) {
             return;
@@ -255,73 +257,73 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         var f = a.e.y + a.c;
         var g = a.e.x - a.d;
         var h = a.e.y + a.d;
-        var i = this.e;
-        var j = this.f;
-        var k = this.g;
-        var l = this.h;
-        this.g = e < k ? e : k;
-        this.h = g < l ? g : l;
-        this.e = f > i ? f : i;
-        this.f = h > j ? h : j;
+        var i = this.f;
+        var j = this.g;
+        var k = this.h;
+        var l = this.i;
+        this.h = e < k ? e : k;
+        this.i = g < l ? g : l;
+        this.f = f > i ? f : i;
+        this.g = h > j ? h : j;
         this.c = true;
     };
-    CanvasViewRenderer.prototype.s = function (a) {
+    CanvasViewRenderer.prototype.t = function (a) {
         var b = a.c;
         var c = b.count;
         for (var d = 0; d < c; d++) {
-            this.p(b._inner[d]);
+            this.q(b._inner[d]);
         }
     };
-    CanvasViewRenderer.prototype.p = function (a) {
+    CanvasViewRenderer.prototype.q = function (a) {
         var b = a == null ? null : a._startPoint;
         if (PointUtil.equals(b, null)) {
             return;
         }
         var c = b.x;
         var d = b.y;
-        this.i.moveTo(c, d);
+        this.j.moveTo(c, d);
         if (this.b) {
-            var e = this.e;
-            var f = this.f;
-            var g = this.g;
-            var h = this.h;
-            this.g = c < g ? c : g;
-            this.h = d < h ? d : h;
-            this.e = c > e ? c : e;
-            this.f = d > f ? d : f;
+            var e = this.f;
+            var f = this.g;
+            var g = this.h;
+            var h = this.i;
+            this.h = c < g ? c : g;
+            this.i = d < h ? d : h;
+            this.f = c > e ? c : e;
+            this.g = d > f ? d : f;
             this.c = true;
         }
-        this.z = b;
+        this.aa = b;
         var i = a._segments;
         var j = i.count;
         for (var k = 0; k < j; k++) {
-            this.w(i._inner[k]);
+            this.x(i._inner[k]);
         }
         if (a._isClosed) {
-            this.i.closePath();
+            this.j.closePath();
         }
     };
-    CanvasViewRenderer.prototype.w = function (a) {
+    CanvasViewRenderer.prototype.x = function (a) {
         var b = a.a;
         switch (b) {
             case 0:
-                this.r(a);
+                this.s(a);
                 break;
             case 3:
-                this.u(a);
+                this.v(a);
                 break;
             case 4:
-                this.m(a);
+                this.n(a);
                 break;
             case 1:
-                this.n(a);
+                this.o(a);
                 break;
             case 2:
-                this.t(a);
+                this.u(a);
                 break;
         }
     };
-    CanvasViewRenderer.prototype.y = function (a, b, c, d, e, f, g, h) {
+    CanvasViewRenderer.prototype.z = function (a, b, c, d, e, f, g, h) {
         var i = 1 / 50;
         var j;
         var k;
@@ -330,10 +332,10 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         var n;
         var o;
         var p;
-        var q = this.g;
-        var r = this.h;
-        var s = this.e;
-        var t = this.f;
+        var q = this.h;
+        var r = this.i;
+        var s = this.f;
+        var t = this.g;
         for (var u = 0; u <= 1; u += i) {
             j = 1 - u;
             k = j * j;
@@ -347,42 +349,42 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
             s = o > s ? o : s;
             t = p > t ? p : t;
         }
-        this.g = q;
-        this.h = r;
-        this.e = s;
-        this.f = t;
+        this.h = q;
+        this.i = r;
+        this.f = s;
+        this.g = t;
         this.c = true;
     };
-    CanvasViewRenderer.prototype.n = function (a) {
-        this.i.bezierCurveTo(a.e.x, a.e.y, a.f.x, a.f.y, a.g.x, a.g.y);
+    CanvasViewRenderer.prototype.o = function (a) {
+        this.j.bezierCurveTo(a.e.x, a.e.y, a.f.x, a.f.y, a.g.x, a.g.y);
         if (this.b) {
-            this.y(this.z.x, this.z.y, a.e.x, a.e.y, a.f.x, a.f.y, a.g.x, a.g.y);
+            this.z(this.aa.x, this.aa.y, a.e.x, a.e.y, a.f.x, a.f.y, a.g.x, a.g.y);
         }
     };
-    CanvasViewRenderer.prototype.t = function (a) {
+    CanvasViewRenderer.prototype.u = function (a) {
         var b = 0;
         var c = a.b.count;
         var d = a.b;
-        var e = this.z;
-        var f = this.z;
-        var g = this.z;
+        var e = this.aa;
+        var f = this.aa;
+        var g = this.aa;
         var h = this.b;
         while (b < c) {
             if (b + 1 < c && b + 2 < c) {
                 e = d._inner[b];
                 f = d._inner[b + 1];
                 g = d._inner[b + 2];
-                this.i.bezierCurveTo(e.x, e.y, f.x, f.y, g.x, g.y);
+                this.j.bezierCurveTo(e.x, e.y, f.x, f.y, g.x, g.y);
                 if (h) {
-                    this.y(this.z.x, this.z.y, e.x, e.y, f.x, f.y, g.x, g.y);
-                    this.z = g;
+                    this.z(this.aa.x, this.aa.y, e.x, e.y, f.x, f.y, g.x, g.y);
+                    this.aa = g;
                 }
             }
             b = b + 3;
         }
-        this.z = g;
+        this.aa = g;
     };
-    CanvasViewRenderer.prototype.x = function (a, b, c, d, e) {
+    CanvasViewRenderer.prototype.y = function (a, b, c, d, e) {
         var f = new List$1(Point_$type, 0);
         f.add(a);
         f.add({ $type: Point_$type, x: a.x + Math.cos(b) * d, y: a.y + Math.sin(b) * d });
@@ -442,18 +444,18 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
             m = Math.max(m, p.x);
             n = Math.max(n, p.y);
         }
-        this.g = Math.min(this.g, k);
-        this.h = Math.min(this.h, l);
-        this.e = Math.max(this.e, m);
-        this.f = Math.max(this.f, n);
+        this.h = Math.min(this.h, k);
+        this.i = Math.min(this.i, l);
+        this.f = Math.max(this.f, m);
+        this.g = Math.max(this.g, n);
         this.c = true;
     };
-    CanvasViewRenderer.prototype.m = function (a) {
-        var b = this.z;
+    CanvasViewRenderer.prototype.n = function (a) {
+        var b = this.aa;
         var c = a.e;
         if (a.f.width != a.f.height) {
-            this.i.save();
-            this.i.scale(a.f.width / a.f.height, 1);
+            this.j.save();
+            this.j.scale(a.f.width / a.f.height, 1);
             b = { $type: Point_$type, x: b.x * (a.f.height / a.f.width), y: b.y };
             c = { $type: Point_$type, x: c.x * (a.f.height / a.f.width), y: c.y };
         }
@@ -471,141 +473,147 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
         if (!isNaN_(e.x) && !isNaN_(e.y) && !isNaN_(a.f.height) && !isNaN_(f) && !isNaN_(g)) {
-            this.i.arc(e.x, e.y, a.f.height, f, g, d);
+            this.j.arc(e.x, e.y, a.f.height, f, g, d);
             if (this.b) {
-                this.x(e, f, g, a.f.height, d);
+                this.y(e, f, g, a.f.height, d);
             }
         }
-        this.z = a.e;
+        this.aa = a.e;
         if (a.f.width != a.f.height) {
-            this.i.restore();
+            this.j.restore();
         }
     };
-    CanvasViewRenderer.prototype.r = function (a) {
+    CanvasViewRenderer.prototype.s = function (a) {
         var b = a.c.x;
         var c = a.c.y;
-        this.i.lineTo(b, c);
-        this.z = a.c;
+        this.j.lineTo(b, c);
+        this.aa = a.c;
         if (this.b) {
-            var d = this.e;
-            var e = this.f;
-            var f = this.g;
-            var g = this.h;
-            this.g = b < f ? b : f;
-            this.h = c < g ? c : g;
-            this.e = b > d ? b : d;
-            this.f = c > e ? c : e;
+            var d = this.f;
+            var e = this.g;
+            var f = this.h;
+            var g = this.i;
+            this.h = b < f ? b : f;
+            this.i = c < g ? c : g;
+            this.f = b > d ? b : d;
+            this.g = c > e ? c : e;
             this.c = true;
         }
     };
-    CanvasViewRenderer.prototype.u = function (a) {
+    CanvasViewRenderer.prototype.v = function (a) {
         var b = a._points;
         var c = b.count;
         if (this.b) {
-            var d = this.g;
-            var e = this.h;
-            var f = this.e;
-            var g = this.f;
+            var d = this.h;
+            var e = this.i;
+            var f = this.f;
+            var g = this.g;
             var h = void 0;
             var i = void 0;
             for (var j = 0; j < c; j++) {
                 h = b._inner[j].x;
                 i = b._inner[j].y;
-                this.i.lineTo(h, i);
+                this.j.lineTo(h, i);
                 d = h < d ? h : d;
                 e = i < e ? i : e;
                 f = h > f ? h : f;
                 g = i > g ? i : g;
             }
-            this.g = d;
-            this.h = e;
-            this.e = f;
-            this.f = g;
+            this.h = d;
+            this.i = e;
+            this.f = f;
+            this.g = g;
             this.c = true;
         }
         else {
             for (var k = 0; k < c; k++) {
-                this.i.lineTo(b._inner[k].x, b._inner[k].y);
+                this.j.lineTo(b._inner[k].x, b._inner[k].y);
             }
         }
-        this.z = a._points._inner[c - 1];
+        this.aa = a._points._inner[c - 1];
     };
-    CanvasViewRenderer.prototype.v = function (a) {
-        this.i.rect(a.e.left, a.e.top, a.e.width, a.e.height);
+    CanvasViewRenderer.prototype.w = function (a) {
+        this.j.rect(a.e.left, a.e.top, a.e.width, a.e.height);
         if (this.b) {
             var b = a.e;
-            var c = this.g;
-            var d = this.h;
-            var e = this.e;
-            var f = this.f;
+            var c = this.h;
+            var d = this.i;
+            var e = this.f;
+            var f = this.g;
             var g = b.left;
             var h = b.right;
             var i = b.top;
             var j = b.bottom;
-            this.g = g < c ? g : c;
-            this.h = i < d ? i : d;
-            this.e = h > e ? h : e;
-            this.f = j > f ? j : f;
+            this.h = g < c ? g : c;
+            this.i = i < d ? i : d;
+            this.f = h > e ? h : e;
+            this.g = j > f ? j : f;
             this.c = true;
         }
     };
-    CanvasViewRenderer.prototype.q = function (a) {
-        this.i.moveTo(a.d.x, a.d.y);
-        this.i.lineTo(a.c.x, a.c.y);
+    CanvasViewRenderer.prototype.r = function (a) {
+        this.j.moveTo(a.d.x, a.d.y);
+        this.j.lineTo(a.c.x, a.c.y);
         if (this.b) {
             var b = a.d;
             var c = a.c;
-            var d = this.g;
-            var e = this.h;
-            var f = this.e;
-            var g = this.f;
+            var d = this.h;
+            var e = this.i;
+            var f = this.f;
+            var g = this.g;
             var h = b.x < c.x ? b.x : c.x;
             var i = b.x > c.x ? b.x : c.x;
             var j = b.y < c.y ? b.y : c.y;
             var k = b.y > c.y ? b.y : c.y;
-            this.g = h < d ? h : d;
-            this.h = j < e ? j : e;
-            this.e = i > f ? i : f;
-            this.f = k > g ? k : g;
+            this.h = h < d ? h : d;
+            this.i = j < e ? j : e;
+            this.f = i > f ? i : f;
+            this.g = k > g ? k : g;
             this.c = true;
         }
     };
     CanvasViewRenderer.prototype.h$u = function (a) {
-        if (a._visibility == 0 && a.ak != null) {
-            if (a._opacity < 1 || this.d < 1) {
-                this.i.globalAlpha = (a._opacity * this.d);
+        if (a._visibility == 0 && a.al != null) {
+            if (a._opacity < 1 || this.e < 1) {
+                this.j.globalAlpha = (a._opacity * this.e);
             }
-            var def_ = this.l;
-            var con_ = this.i;
+            var def_ = this.m;
+            var con_ = this.j;
             con_.textAlign = def_;
-            this.i.fillStyle = a.am != null ? a.am._fill : null;
-            this.i.textBaseline = "top";
-            this.i.fillText(a.ak, a.n, a.o);
-            if (a._opacity < 1 || this.d < 1) {
-                this.i.globalAlpha = 1;
+            this.j.fillStyle = a.ao != null ? a.ao._fill : null;
+            if (a.ag) {
+                this.j.textBaseline = "alphabetic";
+                this.j.fillText(a.al, a.n, a.o + a.ah);
+            }
+            else {
+                this.j.textBaseline = "top";
+                this.j.fillText(a.al, a.n, a.o);
+            }
+            if (a._opacity < 1 || this.e < 1) {
+                this.j.globalAlpha = 1;
             }
         }
     };
     CanvasViewRenderer.prototype.h$v = function (a, b, c) {
         if (a._visibility == 0) {
-            if (a._opacity < 1 || this.d < 1) {
-                this.i.globalAlpha = (a._opacity * this.d);
+            if (a._opacity < 1 || this.e < 1) {
+                this.j.globalAlpha = (a._opacity * this.e);
             }
             var d = b.left + b.width / 2;
-            var e = a.ak.split(' ');
-            this.i.fillStyle = a.am._fill;
-            this.i.textBaseline = "top";
-            this.i.textAlign = "center";
+            var e = a.al.split(' ');
+            this.j.fillStyle = a.ao._fill;
+            this.j.textBaseline = "top";
+            this.j.textAlign = "center";
             var f = b.width;
             var g = b.height;
             var h = b.top;
             var i = "";
             for (var j = 0; j < e.length; j++) {
                 var k = i + e[j];
-                var l = this.i.measureText(k);
+                var l = this.j.measureText(k);
                 if (l.width > f) {
                     if (i != null) {
-                        this.i.fillText(i, d, h);
+                        this.j.fillText(i, d, h);
                     }
                     i = "";
                     h = h + c;
@@ -613,10 +621,10 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
                 i = i + e[j] + " ";
             }
             if (i != null) {
-                this.i.fillText(i, d, h);
+                this.j.fillText(i, d, h);
             }
-            if (a._opacity < 1 || this.d < 1) {
-                this.i.globalAlpha = 1;
+            if (a._opacity < 1 || this.e < 1) {
+                this.j.globalAlpha = 1;
             }
         }
     };
@@ -624,8 +632,8 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         if (a.ak == null || a.ak.count < 1) {
             return;
         }
-        this.i.beginPath();
-        this.i.globalAlpha = (a._opacity * this.d);
+        this.j.beginPath();
+        this.j.globalAlpha = (a._opacity * this.e);
         var b = a.ak;
         var c = b._inner[0];
         var d = a._fill;
@@ -642,56 +650,56 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
             h = k < h ? k : h;
             g = j > g ? j : g;
             i = k > i ? k : i;
-            this.i.moveTo(j, k);
+            this.j.moveTo(j, k);
             for (var l = 1; l < b.count; l++) {
                 j = b._inner[l].x;
                 k = b._inner[l].y;
-                this.i.lineTo(j, k);
+                this.j.lineTo(j, k);
                 f = j < f ? j : f;
                 h = k < h ? k : h;
                 g = j > g ? j : g;
                 i = k > i ? k : i;
             }
-            this.i.closePath();
-            this.g = f;
-            this.h = h;
-            this.e = g;
-            this.f = i;
+            this.j.closePath();
+            this.h = f;
+            this.i = h;
+            this.f = g;
+            this.g = i;
         }
         else {
-            this.i.moveTo(c.x, c.y);
+            this.j.moveTo(c.x, c.y);
             for (var m = 1; m < b.count; m++) {
-                this.i.lineTo(b._inner[m].x, b._inner[m].y);
+                this.j.lineTo(b._inner[m].x, b._inner[m].y);
             }
-            this.i.closePath();
+            this.j.closePath();
         }
         if (d != null) {
             if (d.isGradient) {
-                this.i.fillStyle = this.k(d, this.g, this.h, this.e, this.f, a.ac, false);
+                this.j.fillStyle = this.l(d, this.h, this.i, this.f, this.g, a.ac, false);
             }
             else {
-                this.i.fillStyle = d._fill;
+                this.j.fillStyle = d._fill;
             }
-            this.i.fill();
+            this.j.fill();
         }
         if (e != null) {
             if (e.isGradient) {
-                this.i.strokeStyle = this.k(e, this.g, this.h, this.e, this.f, a.ac, true);
+                this.j.strokeStyle = this.l(e, this.h, this.i, this.f, this.g, a.ac, true);
             }
             else {
-                this.i.strokeStyle = e._fill;
+                this.j.strokeStyle = e._fill;
             }
-            this.i.lineWidth = a.ac;
-            this.i.stroke();
+            this.j.lineWidth = a.ac;
+            this.j.stroke();
         }
-        this.i.globalAlpha = 1;
+        this.j.globalAlpha = 1;
     };
     CanvasViewRenderer.prototype.h$s = function (a) {
         if (a.ak == null || a.ak.count < 1) {
             return;
         }
-        this.i.beginPath();
-        this.i.globalAlpha = (a._opacity * this.d);
+        this.j.beginPath();
+        this.j.globalAlpha = (a._opacity * this.e);
         var b = a.ak;
         var c = b._inner[0];
         var d = a._fill;
@@ -708,64 +716,64 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
             h = k < h ? k : h;
             g = j > g ? j : g;
             i = k > i ? k : i;
-            this.i.moveTo(j, k);
+            this.j.moveTo(j, k);
             for (var l = 1; l < b.count; l++) {
                 j = b._inner[l].x;
                 k = b._inner[l].y;
-                this.i.lineTo(j, k);
+                this.j.lineTo(j, k);
                 f = j < f ? j : f;
                 h = k < h ? k : h;
                 g = j > g ? j : g;
                 i = k > i ? k : i;
             }
-            this.g = f;
-            this.h = h;
-            this.e = g;
-            this.f = i;
+            this.h = f;
+            this.i = h;
+            this.f = g;
+            this.g = i;
         }
         else {
-            this.i.moveTo(c.x, c.y);
+            this.j.moveTo(c.x, c.y);
             for (var m = 1; m < b.count; m++) {
-                this.i.lineTo(b._inner[m].x, b._inner[m].y);
+                this.j.lineTo(b._inner[m].x, b._inner[m].y);
             }
         }
         if (d != null) {
             if (d.isGradient) {
-                this.i.fillStyle = this.k(d, this.g, this.h, this.e, this.f, a.ac, false);
+                this.j.fillStyle = this.l(d, this.h, this.i, this.f, this.g, a.ac, false);
             }
             else {
-                this.i.fillStyle = d._fill;
+                this.j.fillStyle = d._fill;
             }
-            this.i.fill();
+            this.j.fill();
         }
         if (e != null) {
             if (e.isGradient) {
-                this.i.strokeStyle = this.k(e, this.g, this.h, this.e, this.f, a.ac, true);
+                this.j.strokeStyle = this.l(e, this.h, this.i, this.f, this.g, a.ac, true);
             }
             else {
-                this.i.strokeStyle = e._fill;
+                this.j.strokeStyle = e._fill;
             }
-            this.i.lineWidth = a.ac;
-            this.i.stroke();
+            this.j.lineWidth = a.ac;
+            this.j.stroke();
         }
-        this.i.globalAlpha = 1;
+        this.j.globalAlpha = 1;
     };
     CanvasViewRenderer.prototype.h$n = function (a, b) {
         if (b._visibility == 1) {
             return;
         }
-        if ((b._opacity != 1 || this.d != 1) && !a.isHitTestRender) {
-            this.i.globalAlpha = (b._opacity * this.d);
+        if ((b._opacity != 1 || this.e != 1) && !a.isHitTestRender) {
+            this.j.globalAlpha = (b._opacity * this.e);
         }
         var c = b.ah;
         if (c != null && c.render != null) {
-            a.context = this.i;
+            a.context = this.j;
             a.xPosition = b.n;
             a.yPosition = b.o;
             a.data = b.content;
             c.render(a);
         }
-        this.i.globalAlpha = 1;
+        this.j.globalAlpha = 1;
     };
     CanvasViewRenderer.prototype.h$h = function (a) {
         if (typeCast(TransformGroup.$, a) !== null) {
@@ -777,7 +785,7 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         }
         else if (typeCast(TranslateTransform.$, a) !== null) {
             var e = a;
-            this.i.translate(e.j, e.k);
+            this.j.translate(e.j, e.k);
         }
         else if (typeCast(RotateTransform.$, a) !== null) {
             var f = a;
@@ -786,102 +794,102 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
             var i = Math.sin(g);
             var j = f.k * (1 - h) + f.l * i;
             var k = f.l * (1 - h) - f.k * i;
-            this.i.transform(h, i, i * -1, h, j, k);
+            this.j.transform(h, i, i * -1, h, j, k);
         }
         else if (typeCast(ScaleTransform.$, a) !== null) {
             var l = a;
-            this.i.transform(l.l, 0, 0, l.m, l.j - l.l * l.j, l.k - l.m * l.k);
+            this.j.transform(l.l, 0, 0, l.m, l.j - l.l * l.j, l.k - l.m * l.k);
         }
     };
     CanvasViewRenderer.prototype.h$p = function (a) {
         if (a._visibility != 0) {
             return;
         }
-        this.i.beginPath();
-        this.i.globalAlpha = (a._opacity * this.d);
-        this.i.moveTo(a.ak, a.am);
-        this.i.lineTo(a.al, a.an);
+        this.j.beginPath();
+        this.j.globalAlpha = (a._opacity * this.e);
+        this.j.moveTo(a.ak, a.am);
+        this.j.lineTo(a.al, a.an);
         if (this.b) {
-            this.g = 1.7976931348623157E+308;
-            this.e = -1.7976931348623157E+308;
             this.h = 1.7976931348623157E+308;
             this.f = -1.7976931348623157E+308;
-            var b = this.g;
-            var c = this.h;
-            var d = this.e;
-            var e = this.f;
+            this.i = 1.7976931348623157E+308;
+            this.g = -1.7976931348623157E+308;
+            var b = this.h;
+            var c = this.i;
+            var d = this.f;
+            var e = this.g;
             var f = a.ak < a.al ? a.ak : a.al;
             var g = a.ak > a.al ? a.ak : a.al;
             var h = a.am < a.an ? a.am : a.an;
             var i = a.am > a.an ? a.am : a.an;
-            this.g = f < b ? f : b;
-            this.h = h < c ? h : c;
-            this.e = g > d ? g : d;
-            this.f = i > e ? i : e;
+            this.h = f < b ? f : b;
+            this.i = h < c ? h : c;
+            this.f = g > d ? g : d;
+            this.g = i > e ? i : e;
         }
         var j = a._fill;
         var k = a._stroke;
         if (j != null) {
             if (j.isGradient) {
-                this.i.fillStyle = this.k(j, this.g, this.h, this.e, this.e, a.ac, false);
+                this.j.fillStyle = this.l(j, this.h, this.i, this.f, this.f, a.ac, false);
             }
             else {
-                this.i.fillStyle = j._fill;
+                this.j.fillStyle = j._fill;
             }
-            this.i.fill();
+            this.j.fill();
         }
         if (k != null) {
             if (k.isGradient) {
-                this.i.strokeStyle = this.k(k, this.g, this.h, this.e, this.e, a.ac, true);
+                this.j.strokeStyle = this.l(k, this.h, this.i, this.f, this.f, a.ac, true);
             }
             else {
-                this.i.strokeStyle = a._stroke._fill;
+                this.j.strokeStyle = a._stroke._fill;
             }
-            this.i.lineWidth = a.ac;
-            this.i.stroke();
+            this.j.lineWidth = a.ac;
+            this.j.stroke();
         }
-        this.i.globalAlpha = 1;
+        this.j.globalAlpha = 1;
     };
     CanvasViewRenderer.prototype.h$ac = function (a) {
-        this.i.beginPath();
-        this.i.rect(a.left, a.top, a.width, a.height);
-        this.i.clip();
+        this.j.beginPath();
+        this.j.rect(a.left, a.top, a.width, a.height);
+        this.j.clip();
     };
     CanvasViewRenderer.prototype.h$x = function () {
-        this.i.save();
+        this.j.save();
     };
     CanvasViewRenderer.prototype.h$w = function () {
-        this.i.restore();
+        this.j.restore();
     };
     CanvasViewRenderer.prototype.h$y = function (a, b) {
-        this.i.scale(a, b);
+        this.j.scale(a, b);
     };
     CanvasViewRenderer.prototype.h$ad = function (a, b) {
-        this.i.translate(a, b);
+        this.j.translate(a, b);
     };
     CanvasViewRenderer.prototype.h$i = function (a, b, c, d) {
-        this.i.clearRect(a, b, c, d);
+        this.j.clearRect(a, b, c, d);
     };
     CanvasViewRenderer.prototype.h$k = function (a, b, c, d, e, f) {
         if (b != 1) {
-            this.i.globalAlpha = (b * this.d);
+            this.j.globalAlpha = (b * this.e);
         }
-        this.i.drawImage(a, c, d, e, f);
+        this.j.drawImage(a, c, d, e, f);
         if (b != 1) {
-            this.i.globalAlpha = 1;
+            this.j.globalAlpha = 1;
         }
     };
     CanvasViewRenderer.prototype.h$l = function (a, b, c, d, e, f, g, h, i, j) {
         if (b != 1) {
-            this.i.globalAlpha = (b * this.d);
+            this.j.globalAlpha = (b * this.e);
         }
-        this.i.drawImage(a, c, d, e, f, g, h, i, j);
+        this.j.drawImage(a, c, d, e, f, g, h, i, j);
         if (b != 1) {
-            this.i.globalAlpha = 1;
+            this.j.globalAlpha = 1;
         }
     };
     CanvasViewRenderer.prototype.h$a = function (a, b) {
-        var c = this.i.getImageData(a, b, 1, 1);
+        var c = this.j.getImageData(a, b, 1, 1);
         var d = new Array(4);
         d[0] = c.data[0];
         d[1] = c.data[1];
@@ -890,29 +898,52 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         return d;
     };
     CanvasViewRenderer.prototype.h$f = function () {
-        return this.i.font;
+        return this.j.font;
     };
     CanvasViewRenderer.prototype.h$b = function () {
         return this.a;
     };
     CanvasViewRenderer.prototype.h$z = function (a) {
-        if (this.i.font != a) {
-            this.i.font = a;
+        if (this.j.font != a) {
+            this.j.font = a;
         }
     };
     CanvasViewRenderer.prototype.h$aa = function (a) {
         this.a = a;
-        var b = a != null ? a.fontString : null;
-        if (this.i.font != b) {
-            this.i.font = b;
+        if (a != null) {
+            this.d = a.d;
         }
+        var b = a != null ? a.fontString : null;
+        if (this.j.font != b) {
+            this.j.font = b;
+        }
+    };
+    CanvasViewRenderer.prototype.h$ae = function (a, b, c) {
+        var d = this.j.measureText(a);
+        var metrics_ = d;
+        var e = b;
+        this.j.textBaseline = "alphabetic";
+        var f = new TextFontMetrics();
+        if ((metrics_.actualBoundingBoxAscent !== undefined)) {
+            f.a = (metrics_.actualBoundingBoxAscent);
+            e = (metrics_.actualBoundingBoxAscent + metrics_.actualBoundingBoxDescent);
+            if (c) {
+                var g = (b - e);
+                var h = g / 2;
+                f.a += h;
+                e += g;
+            }
+        }
+        f.c = d.width;
+        f.b = e;
+        return f;
     };
     CanvasViewRenderer.prototype.h$c = function (a) {
-        var b = this.i.measureText(a);
+        var b = this.j.measureText(a);
         return b.width;
     };
     CanvasViewRenderer.prototype.h$ab = function (a) {
-        this.d = a;
+        this.e = a;
     };
     CanvasViewRenderer.prototype.h$g = function (shape_, style_) {
         if (style_ == null) {
@@ -961,16 +992,16 @@ var CanvasViewRenderer = /** @class */ /*@__PURE__*/ (function (_super) {
         }
     };
     CanvasViewRenderer.prototype.h$m = function (a, b, c, d) {
-        this.i.shadowColor = a;
-        this.i.shadowBlur = b;
-        this.i.shadowOffsetX = c;
-        this.i.shadowOffsetY = d;
+        this.j.shadowColor = a;
+        this.j.shadowBlur = b;
+        this.j.shadowOffsetX = c;
+        this.j.shadowOffsetY = d;
     };
     CanvasViewRenderer.prototype.h$j = function () {
-        this.i.shadowColor = "rgba(0,0,0,0)";
-        this.i.shadowBlur = 0;
-        this.i.shadowOffsetX = 0;
-        this.i.shadowOffsetY = 0;
+        this.j.shadowColor = "rgba(0,0,0,0)";
+        this.j.shadowBlur = 0;
+        this.j.shadowOffsetX = 0;
+        this.j.shadowOffsetY = 0;
     };
     CanvasViewRenderer.$t = markType(CanvasViewRenderer, 'CanvasViewRenderer', Base.$, [IRenderer_$type]);
     return CanvasViewRenderer;