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

package/esm2015/lib/CanvasViewRenderer.js

@@ -15,6 +15,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
@@ -23,31 +24,32 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
     class CanvasViewRenderer extends Base {
         constructor() {
             super(...arguments);
-            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;
         }
         h$e() {
-            return this.i;
+            return this.j;
         }
         get h$d() {
-            return this.i;
+            return this.j;
         }
         set h$d(a) {
-            this.i = a;
+            this.j = a;
         }
-        k(a, b, c, d, e, f, g) {
-            return CanvasViewRenderer.j(this.i, a, b, c, d, e, f, g);
+        l(a, b, c, d, e, f, g) {
+            return CanvasViewRenderer.k(this.j, a, b, c, d, e, f, g);
         }
-        static j(a, b, c, d, e, f, g, h) {
+        static k(a, b, c, d, e, f, g, h) {
             let i;
             if (b.useCustomDirection) {
                 let j, k, l, m, n;
@@ -92,8 +94,8 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             let e = a.height;
             let f = a.am;
             let 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);
@@ -102,97 +104,97 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                     g = (e / 2);
                 }
                 let 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);
             }
             let i = a._fill;
             let 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;
         }
         h$q(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);
             }
             let b = a._fill;
             let 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;
             }
         }
         h$o(a) {
@@ -207,22 +209,22 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                     }
                     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;
             }
         }
-        o(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 };
+        p(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 };
             let b = ((() => {
                 let $ret = new ArcSegment();
                 $ret.e = { $type: Point_$type, x: a.e.x, y: a.e.y + a.d };
@@ -239,8 +241,8 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             })());
             let 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;
@@ -249,73 +251,73 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             let f = a.e.y + a.c;
             let g = a.e.x - a.d;
             let h = a.e.y + a.d;
-            let i = this.e;
-            let j = this.f;
-            let k = this.g;
-            let 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;
+            let i = this.f;
+            let j = this.g;
+            let k = this.h;
+            let 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;
         }
-        s(a) {
+        t(a) {
             let b = a.c;
             let c = b.count;
             for (let d = 0; d < c; d++) {
-                this.p(b._inner[d]);
+                this.q(b._inner[d]);
             }
         }
-        p(a) {
+        q(a) {
             let b = a == null ? null : a._startPoint;
             if (PointUtil.equals(b, null)) {
                 return;
             }
             let c = b.x;
             let d = b.y;
-            this.i.moveTo(c, d);
+            this.j.moveTo(c, d);
             if (this.b) {
-                let e = this.e;
-                let f = this.f;
-                let g = this.g;
-                let 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;
+                let e = this.f;
+                let f = this.g;
+                let g = this.h;
+                let 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;
             let i = a._segments;
             let j = i.count;
             for (let k = 0; k < j; k++) {
-                this.w(i._inner[k]);
+                this.x(i._inner[k]);
             }
             if (a._isClosed) {
-                this.i.closePath();
+                this.j.closePath();
             }
         }
-        w(a) {
+        x(a) {
             let 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;
             }
         }
-        y(a, b, c, d, e, f, g, h) {
+        z(a, b, c, d, e, f, g, h) {
             let i = 1 / 50;
             let j;
             let k;
@@ -324,10 +326,10 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             let n;
             let o;
             let p;
-            let q = this.g;
-            let r = this.h;
-            let s = this.e;
-            let t = this.f;
+            let q = this.h;
+            let r = this.i;
+            let s = this.f;
+            let t = this.g;
             for (let u = 0; u <= 1; u += i) {
                 j = 1 - u;
                 k = j * j;
@@ -341,42 +343,42 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                 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;
         }
-        n(a) {
-            this.i.bezierCurveTo(a.e.x, a.e.y, a.f.x, a.f.y, a.g.x, a.g.y);
+        o(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);
             }
         }
-        t(a) {
+        u(a) {
             let b = 0;
             let c = a.b.count;
             let d = a.b;
-            let e = this.z;
-            let f = this.z;
-            let g = this.z;
+            let e = this.aa;
+            let f = this.aa;
+            let g = this.aa;
             let 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;
         }
-        x(a, b, c, d, e) {
+        y(a, b, c, d, e) {
             let 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 });
@@ -436,18 +438,18 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                 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;
         }
-        m(a) {
-            let b = this.z;
+        n(a) {
+            let b = this.aa;
             let 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 };
             }
@@ -465,141 +467,147 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                 }
             }
             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();
             }
         }
-        r(a) {
+        s(a) {
             let b = a.c.x;
             let 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) {
-                let d = this.e;
-                let e = this.f;
-                let f = this.g;
-                let 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;
+                let d = this.f;
+                let e = this.g;
+                let f = this.h;
+                let 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;
             }
         }
-        u(a) {
+        v(a) {
             let b = a._points;
             let c = b.count;
             if (this.b) {
-                let d = this.g;
-                let e = this.h;
-                let f = this.e;
-                let g = this.f;
+                let d = this.h;
+                let e = this.i;
+                let f = this.f;
+                let g = this.g;
                 let h;
                 let i;
                 for (let 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 (let 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];
         }
-        v(a) {
-            this.i.rect(a.e.left, a.e.top, a.e.width, a.e.height);
+        w(a) {
+            this.j.rect(a.e.left, a.e.top, a.e.width, a.e.height);
             if (this.b) {
                 let b = a.e;
-                let c = this.g;
-                let d = this.h;
-                let e = this.e;
-                let f = this.f;
+                let c = this.h;
+                let d = this.i;
+                let e = this.f;
+                let f = this.g;
                 let g = b.left;
                 let h = b.right;
                 let i = b.top;
                 let 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;
             }
         }
-        q(a) {
-            this.i.moveTo(a.d.x, a.d.y);
-            this.i.lineTo(a.c.x, a.c.y);
+        r(a) {
+            this.j.moveTo(a.d.x, a.d.y);
+            this.j.lineTo(a.c.x, a.c.y);
             if (this.b) {
                 let b = a.d;
                 let c = a.c;
-                let d = this.g;
-                let e = this.h;
-                let f = this.e;
-                let g = this.f;
+                let d = this.h;
+                let e = this.i;
+                let f = this.f;
+                let g = this.g;
                 let h = b.x < c.x ? b.x : c.x;
                 let i = b.x > c.x ? b.x : c.x;
                 let j = b.y < c.y ? b.y : c.y;
                 let 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;
             }
         }
         h$u(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);
                 }
-                let def_ = this.l;
-                let con_ = this.i;
+                let def_ = this.m;
+                let 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;
                 }
             }
         }
         h$v(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);
                 }
                 let d = b.left + b.width / 2;
-                let e = a.ak.split(' ');
-                this.i.fillStyle = a.am._fill;
-                this.i.textBaseline = "top";
-                this.i.textAlign = "center";
+                let e = a.al.split(' ');
+                this.j.fillStyle = a.ao._fill;
+                this.j.textBaseline = "top";
+                this.j.textAlign = "center";
                 let f = b.width;
                 let g = b.height;
                 let h = b.top;
                 let i = "";
                 for (let j = 0; j < e.length; j++) {
                     let k = i + e[j];
-                    let l = this.i.measureText(k);
+                    let 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;
@@ -607,10 +615,10 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                     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;
                 }
             }
         }
@@ -618,8 +626,8 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             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);
             let b = a.ak;
             let c = b._inner[0];
             let d = a._fill;
@@ -636,56 +644,56 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                 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 (let 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 (let 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;
         }
         h$s(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);
             let b = a.ak;
             let c = b._inner[0];
             let d = a._fill;
@@ -702,64 +710,64 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                 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 (let 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 (let 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;
         }
         h$n(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);
             }
             let 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;
         }
         h$h(a) {
             if (typeCast(TransformGroup.$, a) !== null) {
@@ -771,7 +779,7 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             }
             else if (typeCast(TranslateTransform.$, a) !== null) {
                 let e = a;
-                this.i.translate(e.j, e.k);
+                this.j.translate(e.j, e.k);
             }
             else if (typeCast(RotateTransform.$, a) !== null) {
                 let f = a;
@@ -780,102 +788,102 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
                 let i = Math.sin(g);
                 let j = f.k * (1 - h) + f.l * i;
                 let 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) {
                 let 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);
             }
         }
         h$p(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;
-                let b = this.g;
-                let c = this.h;
-                let d = this.e;
-                let e = this.f;
+                this.i = 1.7976931348623157E+308;
+                this.g = -1.7976931348623157E+308;
+                let b = this.h;
+                let c = this.i;
+                let d = this.f;
+                let e = this.g;
                 let f = a.ak < a.al ? a.ak : a.al;
                 let g = a.ak > a.al ? a.ak : a.al;
                 let h = a.am < a.an ? a.am : a.an;
                 let 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;
             }
             let j = a._fill;
             let 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;
         }
         h$ac(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();
         }
         h$x() {
-            this.i.save();
+            this.j.save();
         }
         h$w() {
-            this.i.restore();
+            this.j.restore();
         }
         h$y(a, b) {
-            this.i.scale(a, b);
+            this.j.scale(a, b);
         }
         h$ad(a, b) {
-            this.i.translate(a, b);
+            this.j.translate(a, b);
         }
         h$i(a, b, c, d) {
-            this.i.clearRect(a, b, c, d);
+            this.j.clearRect(a, b, c, d);
         }
         h$k(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;
             }
         }
         h$l(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;
             }
         }
         h$a(a, b) {
-            let c = this.i.getImageData(a, b, 1, 1);
+            let c = this.j.getImageData(a, b, 1, 1);
             let d = new Array(4);
             d[0] = c.data[0];
             d[1] = c.data[1];
@@ -884,29 +892,52 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             return d;
         }
         h$f() {
-            return this.i.font;
+            return this.j.font;
         }
         h$b() {
             return this.a;
         }
         h$z(a) {
-            if (this.i.font != a) {
-                this.i.font = a;
+            if (this.j.font != a) {
+                this.j.font = a;
             }
         }
         h$aa(a) {
             this.a = a;
-            let b = a != null ? a.fontString : null;
-            if (this.i.font != b) {
-                this.i.font = b;
+            if (a != null) {
+                this.d = a.d;
             }
+            let b = a != null ? a.fontString : null;
+            if (this.j.font != b) {
+                this.j.font = b;
+            }
+        }
+        h$ae(a, b, c) {
+            let d = this.j.measureText(a);
+            let metrics_ = d;
+            let e = b;
+            this.j.textBaseline = "alphabetic";
+            let f = new TextFontMetrics();
+            if ((metrics_.actualBoundingBoxAscent !== undefined)) {
+                f.a = (metrics_.actualBoundingBoxAscent);
+                e = (metrics_.actualBoundingBoxAscent + metrics_.actualBoundingBoxDescent);
+                if (c) {
+                    let g = (b - e);
+                    let h = g / 2;
+                    f.a += h;
+                    e += g;
+                }
+            }
+            f.c = d.width;
+            f.b = e;
+            return f;
         }
         h$c(a) {
-            let b = this.i.measureText(a);
+            let b = this.j.measureText(a);
             return b.width;
         }
         h$ab(a) {
-            this.d = a;
+            this.e = a;
         }
         h$g(shape_, style_) {
             if (style_ == null) {
@@ -955,16 +986,16 @@ export let CanvasViewRenderer = /*@__PURE__*/ (() => {
             }
         }
         h$m(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;
         }
         h$j() {
-            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]);