modern-canvas 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -1,7 +1,8 @@
 import { extend, colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-import earcut from 'earcut';
-import { textDefaultStyle, measureText, renderText } from 'modern-text';
+import { Path2D, strokeTriangulate, BoundingBox } from 'modern-path2d';
+import { getDefaultTextStyle, getDefaultTransformStyle } from 'modern-idoc';
+import { textDefaultStyle, Text } from 'modern-text';
 
 const PI = Math.PI;
 const PI_2 = PI * 2;
@@ -616,13 +617,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$B = Object.defineProperty;
-var __decorateClass$B = (decorators, target, key, kind) => {
+var __defProp$A = Object.defineProperty;
+var __decorateClass$A = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$B(target, key, result);
+  if (result) __defProp$A(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -666,20 +667,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$B([
+__decorateClass$A([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$A = Object.defineProperty;
-var __decorateClass$A = (decorators, target, key, kind) => {
+var __defProp$z = Object.defineProperty;
+var __decorateClass$z = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$A(target, key, result);
+  if (result) __defProp$z(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -723,20 +724,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$A([
+__decorateClass$z([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$z = Object.defineProperty;
-var __decorateClass$z = (decorators, target, key, kind) => {
+var __defProp$y = Object.defineProperty;
+var __decorateClass$y = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$z(target, key, result);
+  if (result) __defProp$y(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -773,25 +774,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$z([
+__decorateClass$y([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -975,13 +976,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$y = Object.defineProperty;
-var __decorateClass$y = (decorators, target, key, kind) => {
+var __defProp$x = Object.defineProperty;
+var __decorateClass$x = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$y(target, key, result);
+  if (result) __defProp$x(target, key, result);
   return result;
 };
 class MainLoop extends _Object {
@@ -1022,1731 +1023,182 @@ class MainLoop extends _Object {
     }
   }
 }
-__decorateClass$y([
+__decorateClass$x([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$y([
+__decorateClass$x([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
-const RECURSION_LIMIT$1 = 8;
-const FLT_EPSILON$1 = 11920929e-14;
-const PATH_DISTANCE_EPSILON$1 = 1;
-function buildAdaptiveBezier(points, sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, smoothness = 0.5) {
-  const scale = 1;
-  const smoothing = Math.min(
-    0.99,
-    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
-    Math.max(0, smoothness)
-  );
-  let distanceTolerance = (PATH_DISTANCE_EPSILON$1 - smoothing) / scale;
-  distanceTolerance *= distanceTolerance;
-  begin$1(sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, points, distanceTolerance);
-  return points;
-}
-function begin$1(sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, points, distanceTolerance) {
-  recursive$1(sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, points, distanceTolerance, 0);
-  points.push(eX, eY);
-}
-function recursive$1(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, level) {
-  if (level > RECURSION_LIMIT$1)
-    return;
-  const x12 = (x1 + x2) / 2;
-  const y12 = (y1 + y2) / 2;
-  const x23 = (x2 + x3) / 2;
-  const y23 = (y2 + y3) / 2;
-  const x34 = (x3 + x4) / 2;
-  const y34 = (y3 + y4) / 2;
-  const x123 = (x12 + x23) / 2;
-  const y123 = (y12 + y23) / 2;
-  const x234 = (x23 + x34) / 2;
-  const y234 = (y23 + y34) / 2;
-  const x1234 = (x123 + x234) / 2;
-  const y1234 = (y123 + y234) / 2;
-  if (level > 0) {
-    let dx = x4 - x1;
-    let dy = y4 - y1;
-    const d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx);
-    const d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx);
-    if (d2 > FLT_EPSILON$1 && d3 > FLT_EPSILON$1) {
-      if ((d2 + d3) * (d2 + d3) <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
-        }
+class Vector extends EventEmitter {
+  constructor(dim) {
+    super();
+    this.dim = dim;
+  }
+  _array = [];
+  get length() {
+    return this.dim;
+  }
+  _operate(operator, target, output) {
+    const { dim: length, _array: array } = this;
+    let targetArray;
+    if (typeof target === "number") {
+      targetArray = Array.from({ length }, () => target);
+    } else if (target instanceof Matrix || target instanceof Vector) {
+      targetArray = target.toArray();
+    } else {
+      targetArray = target;
+    }
+    let outputObject;
+    let outputArray = [];
+    if (!output) {
+      outputObject = this;
+    } else if (output instanceof Vector) {
+      outputObject = output;
+    } else {
+      outputArray = output;
+    }
+    if (target instanceof Matrix) {
+      const { cols } = target;
+      switch (operator) {
+        case "*":
+          for (let x = 0; x < length; x++) {
+            let val = 0;
+            for (let y = 0; y < length; y++) {
+              val += array[x] * targetArray[y * cols + x];
+            }
+            outputArray[x] = val;
+          }
+          break;
+        default:
+          throw new Error(`Not support operator in '${this.toName()} ${operator} ${target.toName()}'`);
       }
-    } else if (d2 > FLT_EPSILON$1) {
-      if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
+    } else {
+      switch (operator) {
+        case "+":
+          for (let i = 0; i < length; i++) {
+            outputArray[i] = array[i] + targetArray[i];
+          }
+          break;
+        case "-":
+          for (let i = 0; i < length; i++) {
+            outputArray[i] = array[i] - targetArray[i];
+          }
+          break;
+        case "*":
+          for (let i = 0; i < length; i++) {
+            outputArray[i] = array[i] * targetArray[i];
+          }
+          break;
+        case "/":
+          for (let i = 0; i < length; i++) {
+            outputArray[i] = array[i] / targetArray[i];
+          }
+          break;
+        case "rot": {
+          const c = Math.cos(targetArray[0]);
+          const s = Math.sin(targetArray[0]);
+          outputArray[0] = array[0] * c - array[1] * s;
+          outputArray[1] = array[1] * c + array[0] * s;
+          break;
         }
-      }
-    } else if (d3 > FLT_EPSILON$1) {
-      if (d3 * d3 <= distanceTolerance * (dx * dx + dy * dy)) {
-        {
-          points.push(x1234, y1234);
-          return;
+        case "==": {
+          let flag = true;
+          for (let i = 0; i < length; i++) {
+            flag = flag && array[i] === targetArray[i];
+          }
+          return flag;
         }
+        case "=":
+          for (let i = 0; i < length; i++) {
+            const val = targetArray[i];
+            if (val !== void 0) {
+              array[i] = val;
+            }
+          }
+          this._emitUpdate(array);
+          return this;
+        default:
+          throw new Error(`Not support operator in '${this.toName()} ${operator} Vector'`);
       }
-    } else {
-      dx = x1234 - (x1 + x4) / 2;
-      dy = y1234 - (y1 + y4) / 2;
-      if (dx * dx + dy * dy <= distanceTolerance) {
-        points.push(x1234, y1234);
-        return;
-      }
-    }
-  }
-  recursive$1(x1, y1, x12, y12, x123, y123, x1234, y1234, points, distanceTolerance, level + 1);
-  recursive$1(x1234, y1234, x234, y234, x34, y34, x4, y4, points, distanceTolerance, level + 1);
-}
-
-const RECURSION_LIMIT = 8;
-const FLT_EPSILON = 11920929e-14;
-const PATH_DISTANCE_EPSILON = 1;
-function buildAdaptiveQuadratic(points, sX, sY, cp1x, cp1y, eX, eY, smoothness = 0.5) {
-  const scale = 1;
-  const smoothing = Math.min(
-    0.99,
-    // a value of 1.0 actually inverts smoothing, so we cap it at 0.99
-    Math.max(0, smoothness)
-  );
-  let distanceTolerance = (PATH_DISTANCE_EPSILON - smoothing) / scale;
-  distanceTolerance *= distanceTolerance;
-  begin(sX, sY, cp1x, cp1y, eX, eY, points, distanceTolerance);
-  return points;
-}
-function begin(sX, sY, cp1x, cp1y, eX, eY, points, distanceTolerance) {
-  recursive(points, sX, sY, cp1x, cp1y, eX, eY, distanceTolerance, 0);
-  points.push(eX, eY);
-}
-function recursive(points, x1, y1, x2, y2, x3, y3, distanceTolerance, level) {
-  if (level > RECURSION_LIMIT)
-    return;
-  const x12 = (x1 + x2) / 2;
-  const y12 = (y1 + y2) / 2;
-  const x23 = (x2 + x3) / 2;
-  const y23 = (y2 + y3) / 2;
-  const x123 = (x12 + x23) / 2;
-  const y123 = (y12 + y23) / 2;
-  let dx = x3 - x1;
-  let dy = y3 - y1;
-  const d = Math.abs((x2 - x3) * dy - (y2 - y3) * dx);
-  if (d > FLT_EPSILON) {
-    if (d * d <= distanceTolerance * (dx * dx + dy * dy)) {
-      {
-        points.push(x123, y123);
-        return;
-      }
-    }
-  } else {
-    dx = x123 - (x1 + x3) / 2;
-    dy = y123 - (y1 + y3) / 2;
-    if (dx * dx + dy * dy <= distanceTolerance) {
-      points.push(x123, y123);
-      return;
-    }
-  }
-  recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
-  recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
-}
-
-function buildArc(points, x, y, radius, start, end, clockwise, steps) {
-  let dist = Math.abs(start - end);
-  if (!clockwise && start > end) {
-    dist = 2 * Math.PI - dist;
-  } else if (clockwise && end > start) {
-    dist = 2 * Math.PI - dist;
-  }
-  steps = steps || Math.max(6, Math.floor(6 * radius ** (1 / 3) * (dist / Math.PI)));
-  steps = Math.max(steps, 3);
-  let f = dist / steps;
-  let t = start;
-  f *= clockwise ? -1 : 1;
-  for (let i = 0; i < steps + 1; i++) {
-    const cs = Math.cos(t);
-    const sn = Math.sin(t);
-    const nx = x + cs * radius;
-    const ny = y + sn * radius;
-    points.push(nx, ny);
-    t += f;
-  }
-}
-
-function buildArcTo(points, x1, y1, x2, y2, radius) {
-  const fromX = points[points.length - 2];
-  const fromY = points[points.length - 1];
-  const a1 = fromY - y1;
-  const b1 = fromX - x1;
-  const a2 = y2 - y1;
-  const b2 = x2 - x1;
-  const mm = Math.abs(a1 * b2 - b1 * a2);
-  if (mm < 1e-8 || radius === 0) {
-    if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) {
-      points.push(x1, y1);
-    }
-    return;
-  }
-  const dd = a1 * a1 + b1 * b1;
-  const cc = a2 * a2 + b2 * b2;
-  const tt = a1 * a2 + b1 * b2;
-  const k1 = radius * Math.sqrt(dd) / mm;
-  const k2 = radius * Math.sqrt(cc) / mm;
-  const j1 = k1 * tt / dd;
-  const j2 = k2 * tt / cc;
-  const cx = k1 * b2 + k2 * b1;
-  const cy = k1 * a2 + k2 * a1;
-  const px = b1 * (k2 + j1);
-  const py = a1 * (k2 + j1);
-  const qx = b2 * (k1 + j2);
-  const qy = a2 * (k1 + j2);
-  const startAngle = Math.atan2(py - cy, px - cx);
-  const endAngle = Math.atan2(qy - cy, qx - cx);
-  buildArc(points, cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
-}
-
-const TAU = Math.PI * 2;
-const out = {
-  centerX: 0,
-  centerY: 0,
-  ang1: 0,
-  ang2: 0
-};
-function mapToEllipse({ x, y }, rx, ry, cosPhi, sinPhi, centerX, centerY, out2) {
-  x *= rx;
-  y *= ry;
-  const xp = cosPhi * x - sinPhi * y;
-  const yp = sinPhi * x + cosPhi * y;
-  out2.x = xp + centerX;
-  out2.y = yp + centerY;
-  return out2;
-}
-function approxUnitArc(ang1, ang2) {
-  const a1 = ang2 === -1.5707963267948966 ? -0.551915024494 : 4 / 3 * Math.tan(ang2 / 4);
-  const a = ang2 === 1.5707963267948966 ? 0.551915024494 : a1;
-  const x1 = Math.cos(ang1);
-  const y1 = Math.sin(ang1);
-  const x2 = Math.cos(ang1 + ang2);
-  const y2 = Math.sin(ang1 + ang2);
-  return [
-    {
-      x: x1 - y1 * a,
-      y: y1 + x1 * a
-    },
-    {
-      x: x2 + y2 * a,
-      y: y2 - x2 * a
-    },
-    {
-      x: x2,
-      y: y2
     }
-  ];
-}
-function vectorAngle(ux, uy, vx, vy) {
-  const sign = ux * vy - uy * vx < 0 ? -1 : 1;
-  let dot = ux * vx + uy * vy;
-  if (dot > 1) {
-    dot = 1;
-  }
-  if (dot < -1) {
-    dot = -1;
-  }
-  return sign * Math.acos(dot);
-}
-function getArcCenter(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinPhi, cosPhi, pxp, pyp, out2) {
-  const rxSq = rx ** 2;
-  const rySq = ry ** 2;
-  const pxpSq = pxp ** 2;
-  const pypSq = pyp ** 2;
-  let radicant = rxSq * rySq - rxSq * pypSq - rySq * pxpSq;
-  if (radicant < 0) {
-    radicant = 0;
-  }
-  radicant /= rxSq * pypSq + rySq * pxpSq;
-  radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1);
-  const centerXp = radicant * rx / ry * pyp;
-  const centerYp = radicant * -ry / rx * pxp;
-  const centerX = cosPhi * centerXp - sinPhi * centerYp + (px + cx) / 2;
-  const centerY = sinPhi * centerXp + cosPhi * centerYp + (py + cy) / 2;
-  const vx1 = (pxp - centerXp) / rx;
-  const vy1 = (pyp - centerYp) / ry;
-  const vx2 = (-pxp - centerXp) / rx;
-  const vy2 = (-pyp - centerYp) / ry;
-  const ang1 = vectorAngle(1, 0, vx1, vy1);
-  let ang2 = vectorAngle(vx1, vy1, vx2, vy2);
-  if (sweepFlag === 0 && ang2 > 0) {
-    ang2 -= TAU;
-  }
-  if (sweepFlag === 1 && ang2 < 0) {
-    ang2 += TAU;
-  }
-  out2.centerX = centerX;
-  out2.centerY = centerY;
-  out2.ang1 = ang1;
-  out2.ang2 = ang2;
-}
-function buildArcToSvg(points, px, py, cx, cy, rx, ry, xAxisRotation = 0, largeArcFlag = 0, sweepFlag = 0) {
-  if (rx === 0 || ry === 0) {
-    return;
-  }
-  const sinPhi = Math.sin(xAxisRotation * TAU / 360);
-  const cosPhi = Math.cos(xAxisRotation * TAU / 360);
-  const pxp = cosPhi * (px - cx) / 2 + sinPhi * (py - cy) / 2;
-  const pyp = -sinPhi * (px - cx) / 2 + cosPhi * (py - cy) / 2;
-  if (pxp === 0 && pyp === 0) {
-    return;
-  }
-  rx = Math.abs(rx);
-  ry = Math.abs(ry);
-  const lambda = pxp ** 2 / rx ** 2 + pyp ** 2 / ry ** 2;
-  if (lambda > 1) {
-    rx *= Math.sqrt(lambda);
-    ry *= Math.sqrt(lambda);
-  }
-  getArcCenter(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinPhi, cosPhi, pxp, pyp, out);
-  let { ang1, ang2 } = out;
-  const { centerX, centerY } = out;
-  let ratio = Math.abs(ang2) / (TAU / 4);
-  if (Math.abs(1 - ratio) < 1e-7) {
-    ratio = 1;
-  }
-  const segments = Math.max(Math.ceil(ratio), 1);
-  ang2 /= segments;
-  let lastX = points[points.length - 2];
-  let lastY = points[points.length - 1];
-  const outCurvePoint = { x: 0, y: 0 };
-  for (let i = 0; i < segments; i++) {
-    const curve = approxUnitArc(ang1, ang2);
-    const { x: x1, y: y1 } = mapToEllipse(curve[0], rx, ry, cosPhi, sinPhi, centerX, centerY, outCurvePoint);
-    const { x: x2, y: y2 } = mapToEllipse(curve[1], rx, ry, cosPhi, sinPhi, centerX, centerY, outCurvePoint);
-    const { x, y } = mapToEllipse(curve[2], rx, ry, cosPhi, sinPhi, centerX, centerY, outCurvePoint);
-    buildAdaptiveBezier(points, lastX, lastY, x1, y1, x2, y2, x, y);
-    lastX = x;
-    lastY = y;
-    ang1 += ang2;
-  }
-}
-
-class Circle {
-  constructor(x = 0, y = 0, radius = 0) {
-    this.x = x;
-    this.y = y;
-    this.radius = radius;
-  }
-  contains(x, y) {
-    if (this.radius <= 0)
-      return false;
-    const r2 = this.radius * this.radius;
-    let dx = this.x - x;
-    let dy = this.y - y;
-    dx *= dx;
-    dy *= dy;
-    return dx + dy <= r2;
-  }
-  strokeContains(x, y, width) {
-    if (this.radius === 0)
-      return false;
-    const dx = this.x - x;
-    const dy = this.y - y;
-    const r = this.radius;
-    const w2 = width / 2;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-    return distance < r + w2 && distance > r - w2;
-  }
-  clone() {
-    return new Circle(this.x, this.y, this.radius);
-  }
-  copyFrom(circle) {
-    this.x = circle.x;
-    this.y = circle.y;
-    this.radius = circle.radius;
-    return this;
+    return outputObject?.set(outputArray) ?? outputArray;
   }
-  copyTo(circle) {
-    circle.copyFrom(this);
-    return circle;
+  add(value, output) {
+    return this._operate("+", value, output);
   }
-  getBounds(out) {
-    out = out || new Rectangle();
-    out.x = this.x - this.radius;
-    out.y = this.y - this.radius;
-    out.width = this.radius * 2;
-    out.height = this.radius * 2;
-    return out;
+  sub(value, output) {
+    return this._operate("-", value, output);
   }
-  buildOutline(points) {
-    buildCircle.build(this, points);
+  multiply(value, output) {
+    return this._operate("*", value, output);
   }
-  buildGeometry(vertices, indices) {
-    const points = [];
-    this.buildOutline(points);
-    buildCircle.triangulate(points, vertices, 2, 0, indices, 0);
+  divide(value, output) {
+    return this._operate("/", value, output);
   }
-}
-
-class Ellipse {
-  constructor(x = 0, y = 0, halfWidth = 0, halfHeight = 0) {
-    this.x = x;
-    this.y = y;
-    this.halfWidth = halfWidth;
-    this.halfHeight = halfHeight;
+  rotate(angle) {
+    return this._operate("rot", angle);
   }
-  contains(x, y) {
-    if (this.halfWidth <= 0 || this.halfHeight <= 0) {
-      return false;
+  set(value, ...args) {
+    if (args.length && typeof value === "number") {
+      value = [value, ...args];
     }
-    let normx = (x - this.x) / this.halfWidth;
-    let normy = (y - this.y) / this.halfHeight;
-    normx *= normx;
-    normy *= normy;
-    return normx + normy <= 1;
+    return this._operate("=", value);
   }
-  strokeContains(x, y, width) {
-    const { halfWidth, halfHeight } = this;
-    if (halfWidth <= 0 || halfHeight <= 0) {
-      return false;
-    }
-    const halfStrokeWidth = width / 2;
-    const innerA = halfWidth - halfStrokeWidth;
-    const innerB = halfHeight - halfStrokeWidth;
-    const outerA = halfWidth + halfStrokeWidth;
-    const outerB = halfHeight + halfStrokeWidth;
-    const normalizedX = x - this.x;
-    const normalizedY = y - this.y;
-    const innerEllipse = normalizedX * normalizedX / (innerA * innerA) + normalizedY * normalizedY / (innerB * innerB);
-    const outerEllipse = normalizedX * normalizedX / (outerA * outerA) + normalizedY * normalizedY / (outerB * outerB);
-    return innerEllipse > 1 && outerEllipse <= 1;
+  equals(value) {
+    return this._operate("==", value);
   }
   clone() {
-    return new Ellipse(this.x, this.y, this.halfWidth, this.halfHeight);
+    const cloned = new this.constructor();
+    cloned.set(this.toArray());
+    return cloned;
   }
-  copyFrom(ellipse) {
-    this.x = ellipse.x;
-    this.y = ellipse.y;
-    this.halfWidth = ellipse.halfWidth;
-    this.halfHeight = ellipse.halfHeight;
+  onUpdate(callback) {
+    this.on("update", callback);
     return this;
   }
-  copyTo(ellipse) {
-    ellipse.copyFrom(this);
-    return ellipse;
-  }
-  getBounds() {
-    return new Rectangle(this.x - this.halfWidth, this.y - this.halfHeight, this.halfWidth * 2, this.halfHeight * 2);
-  }
-  buildOutline(points) {
-    buildCircle.build(this, points);
-  }
-  buildGeometry(vertices, indices) {
-    const points = [];
-    this.buildOutline(points);
-    buildCircle.triangulate(points, vertices, 2, 0, indices, 0);
-  }
-}
-
-function squaredDistanceToLineSegment(x, y, x1, y1, x2, y2) {
-  const a = x - x1;
-  const b = y - y1;
-  const c = x2 - x1;
-  const d = y2 - y1;
-  const dot = a * c + b * d;
-  const lenSq = c * c + d * d;
-  let param = -1;
-  if (lenSq !== 0) {
-    param = dot / lenSq;
-  }
-  let xx;
-  let yy;
-  if (param < 0) {
-    xx = x1;
-    yy = y1;
-  } else if (param > 1) {
-    xx = x2;
-    yy = y2;
-  } else {
-    xx = x1 + param * c;
-    yy = y1 + param * d;
-  }
-  const dx = x - xx;
-  const dy = y - yy;
-  return dx * dx + dy * dy;
-}
-class Triangle {
-  constructor(x = 0, y = 0, x2 = 0, y2 = 0, x3 = 0, y3 = 0) {
-    this.x = x;
-    this.y = y;
-    this.x2 = x2;
-    this.y2 = y2;
-    this.x3 = x3;
-    this.y3 = y3;
-  }
-  contains(x, y) {
-    const s = (this.x - this.x3) * (y - this.y3) - (this.y - this.y3) * (x - this.x3);
-    const t = (this.x2 - this.x) * (y - this.y) - (this.y2 - this.y) * (x - this.x);
-    if (s < 0 !== t < 0 && s !== 0 && t !== 0)
-      return false;
-    const d = (this.x3 - this.x2) * (y - this.y2) - (this.y3 - this.y2) * (x - this.x2);
-    return d === 0 || d < 0 === s + t <= 0;
-  }
-  strokeContains(pointX, pointY, strokeWidth) {
-    const halfStrokeWidth = strokeWidth / 2;
-    const halfStrokeWidthSquared = halfStrokeWidth * halfStrokeWidth;
-    const { x, x2, x3, y, y2, y3 } = this;
-    if (squaredDistanceToLineSegment(pointX, pointY, x, y, x2, y3) <= halfStrokeWidthSquared || squaredDistanceToLineSegment(pointX, pointY, x2, y2, x3, y3) <= halfStrokeWidthSquared || squaredDistanceToLineSegment(pointX, pointY, x3, y3, x, y) <= halfStrokeWidthSquared) {
-      return true;
-    }
-    return false;
-  }
-  clone() {
-    return new Triangle(this.x, this.y, this.x2, this.y2, this.x3, this.y3);
-  }
-  copyFrom(triangle) {
-    this.x = triangle.x;
-    this.y = triangle.y;
-    this.x2 = triangle.x2;
-    this.y2 = triangle.y2;
-    this.x3 = triangle.x3;
-    this.y3 = triangle.y3;
+  offUpdate(callback) {
+    this.off("update", callback);
     return this;
   }
-  copyTo(triangle) {
-    triangle.copyFrom(this);
-    return triangle;
+  _emitUpdate(array) {
+    this._onUpdate(array);
+    this.emit("update", array);
   }
-  getBounds(out) {
-    out = out || new Rectangle();
-    const minX = Math.min(this.x, this.x2, this.x3);
-    const maxX = Math.max(this.x, this.x2, this.x3);
-    const minY = Math.min(this.y, this.y2, this.y3);
-    const maxY = Math.max(this.y, this.y2, this.y3);
-    out.x = minX;
-    out.y = minY;
-    out.width = maxX - minX;
-    out.height = maxY - minY;
-    return out;
+  _onUpdate(_array) {
   }
-  buildOutline(points) {
-    buildTriangle.build(this, points);
+  toArray() {
+    return this._array.slice();
   }
-  buildGeometry(vertices, indices) {
-    const points = [];
-    this.buildOutline(points);
-    buildTriangle.triangulate(points, vertices, 2, 0, indices, 0);
+  toName() {
+    return `Vector${this.dim}`;
   }
 }
 
-class Polygon {
-  points;
-  closed;
-  get lastX() {
-    return this.points[this.points.length - 2];
-  }
-  get lastY() {
-    return this.points[this.points.length - 1];
-  }
-  get x() {
-    return this.points[this.points.length - 2];
-  }
-  get y() {
-    return this.points[this.points.length - 1];
-  }
-  constructor(...points) {
-    let flat = Array.isArray(points[0]) ? points[0] : points;
-    if (typeof flat[0] !== "number") {
-      const p = [];
-      for (let i = 0, il = flat.length; i < il; i++) {
-        p.push(flat[i].x, flat[i].y);
-      }
-      flat = p;
+class Matrix extends EventEmitter {
+  constructor(rows, cols, array) {
+    super();
+    this.rows = rows;
+    this.cols = cols;
+    if (array) {
+      this.set(array);
+    } else {
+      this.identity();
     }
-    this.points = flat;
-    this.closed = true;
   }
-  reset() {
-    this.points.length = 0;
-    return this;
+  _array = [];
+  get length() {
+    return this.cols * this.rows;
   }
-  contains(x, y) {
-    let inside = false;
-    const length = this.points.length / 2;
-    for (let i = 0, j = length - 1; i < length; j = i++) {
-      const xi = this.points[i * 2];
-      const yi = this.points[i * 2 + 1];
-      const xj = this.points[j * 2];
-      const yj = this.points[j * 2 + 1];
-      const intersect = yi > y !== yj > y && x < (xj - xi) * ((y - yi) / (yj - yi)) + xi;
-      if (intersect) {
-        inside = !inside;
-      }
-    }
-    return inside;
-  }
-  strokeContains(x, y, strokeWidth) {
-    const halfStrokeWidth = strokeWidth / 2;
-    const halfStrokeWidthSqrd = halfStrokeWidth * halfStrokeWidth;
-    const { points } = this;
-    const iterationLength = points.length - (this.closed ? 0 : 2);
-    for (let i = 0; i < iterationLength; i += 2) {
-      const x1 = points[i];
-      const y1 = points[i + 1];
-      const x2 = points[(i + 2) % points.length];
-      const y2 = points[(i + 3) % points.length];
-      const distanceSqrd = squaredDistanceToLineSegment(x, y, x1, y1, x2, y2);
-      if (distanceSqrd <= halfStrokeWidthSqrd) {
-        return true;
-      }
-    }
-    return false;
-  }
-  clone() {
-    const points = this.points.slice();
-    const polygon = new Polygon(points);
-    polygon.closed = this.closed;
-    return polygon;
-  }
-  copyFrom(polygon) {
-    this.points = polygon.points.slice();
-    this.closed = polygon.closed;
-    return this;
-  }
-  copyTo(polygon) {
-    polygon.copyFrom(this);
-    return polygon;
-  }
-  getBounds(out) {
-    out = out || new Rectangle();
-    const points = this.points;
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let minY = Infinity;
-    let maxY = -Infinity;
-    for (let i = 0, n = points.length; i < n; i += 2) {
-      const x = points[i];
-      const y = points[i + 1];
-      minX = x < minX ? x : minX;
-      maxX = x > maxX ? x : maxX;
-      minY = y < minY ? y : minY;
-      maxY = y > maxY ? y : maxY;
-    }
-    out.x = minX;
-    out.width = maxX - minX;
-    out.y = minY;
-    out.height = maxY - minY;
-    return out;
-  }
-  buildOutline(points) {
-    buildPolygon.build(this, points);
-  }
-  buildGeometry(vertices, indices) {
-    const points = [];
-    this.buildOutline(points);
-    buildPolygon.triangulate(points, vertices, 2, 0, indices, 0);
-  }
-}
-
-function isCornerWithinStroke(pX, pY, cornerX, cornerY, radius, halfStrokeWidth) {
-  const dx = pX - cornerX;
-  const dy = pY - cornerY;
-  const distance = Math.sqrt(dx * dx + dy * dy);
-  return distance >= radius - halfStrokeWidth && distance <= radius + halfStrokeWidth;
-}
-class RoundedRectangle {
-  constructor(x = 0, y = 0, width = 0, height = 0, radius = width / 4) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.radius = radius;
-  }
-  getBounds(out) {
-    out = out || new Rectangle();
-    out.x = this.x;
-    out.y = this.y;
-    out.width = this.width;
-    out.height = this.height;
-    return out;
-  }
-  clone() {
-    return new RoundedRectangle(this.x, this.y, this.width, this.height, this.radius);
-  }
-  copyFrom(rectangle) {
-    this.x = rectangle.x;
-    this.y = rectangle.y;
-    this.width = rectangle.width;
-    this.height = rectangle.height;
-    return this;
-  }
-  copyTo(rectangle) {
-    rectangle.copyFrom(this);
-    return rectangle;
-  }
-  contains(x, y) {
-    if (this.width <= 0 || this.height <= 0) {
-      return false;
-    }
-    if (x >= this.x && x <= this.x + this.width) {
-      if (y >= this.y && y <= this.y + this.height) {
-        const radius = Math.max(0, Math.min(this.radius, Math.min(this.width, this.height) / 2));
-        if (y >= this.y + radius && y <= this.y + this.height - radius || x >= this.x + radius && x <= this.x + this.width - radius) {
-          return true;
-        }
-        let dx = x - (this.x + radius);
-        let dy = y - (this.y + radius);
-        const radius2 = radius * radius;
-        if (dx * dx + dy * dy <= radius2) {
-          return true;
-        }
-        dx = x - (this.x + this.width - radius);
-        if (dx * dx + dy * dy <= radius2) {
-          return true;
-        }
-        dy = y - (this.y + this.height - radius);
-        if (dx * dx + dy * dy <= radius2) {
-          return true;
-        }
-        dx = x - (this.x + radius);
-        if (dx * dx + dy * dy <= radius2) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  strokeContains(pX, pY, strokeWidth) {
-    const { x, y, width, height, radius } = this;
-    const halfStrokeWidth = strokeWidth / 2;
-    const innerX = x + radius;
-    const innerY = y + radius;
-    const innerWidth = width - radius * 2;
-    const innerHeight = height - radius * 2;
-    const rightBound = x + width;
-    const bottomBound = y + height;
-    if ((pX >= x - halfStrokeWidth && pX <= x + halfStrokeWidth || pX >= rightBound - halfStrokeWidth && pX <= rightBound + halfStrokeWidth) && pY >= innerY && pY <= innerY + innerHeight) {
-      return true;
-    }
-    if ((pY >= y - halfStrokeWidth && pY <= y + halfStrokeWidth || pY >= bottomBound - halfStrokeWidth && pY <= bottomBound + halfStrokeWidth) && pX >= innerX && pX <= innerX + innerWidth) {
-      return true;
-    }
-    return (
-      // Top-left
-      pX < innerX && pY < innerY && isCornerWithinStroke(pX, pY, innerX, innerY, radius, halfStrokeWidth) || pX > rightBound - radius && pY < innerY && isCornerWithinStroke(pX, pY, rightBound - radius, innerY, radius, halfStrokeWidth) || pX > rightBound - radius && pY > bottomBound - radius && isCornerWithinStroke(pX, pY, rightBound - radius, bottomBound - radius, radius, halfStrokeWidth) || pX < innerX && pY > bottomBound - radius && isCornerWithinStroke(pX, pY, innerX, bottomBound - radius, radius, halfStrokeWidth)
-    );
-  }
-  buildOutline(points) {
-    buildCircle.build(this, points);
-  }
-  buildGeometry(vertices, indices) {
-    const points = [];
-    this.buildOutline(points);
-    buildCircle.triangulate(points, vertices, 2, 0, indices, 0);
-  }
-}
-
-class Star extends Polygon {
-  constructor(x = 0, y = 0, points = 5, radius = 1, innerRadius, rotation = 0) {
-    innerRadius = innerRadius || radius / 2;
-    const startAngle = -1 * Math.PI / 2 + rotation;
-    const len = points * 2;
-    const delta = PI_2 / len;
-    const polygon = [];
-    for (let i = 0; i < len; i++) {
-      const r = i % 2 ? innerRadius : radius;
-      const angle = i * delta + startAngle;
-      polygon.push(
-        x + r * Math.cos(angle),
-        y + r * Math.sin(angle)
-      );
-    }
-    super(polygon);
-  }
-}
-
-const buildCircle = {
-  build(shape, points) {
-    let x;
-    let y;
-    let dx;
-    let dy;
-    let rx;
-    let ry;
-    if (shape instanceof Circle) {
-      x = shape.x;
-      y = shape.y;
-      rx = ry = shape.radius;
-      dx = dy = 0;
-    } else if (shape instanceof Ellipse) {
-      x = shape.x;
-      y = shape.y;
-      rx = shape.halfWidth;
-      ry = shape.halfHeight;
-      dx = dy = 0;
-    } else {
-      const roundedRect = shape;
-      const halfWidth = roundedRect.width / 2;
-      const halfHeight = roundedRect.height / 2;
-      x = roundedRect.x + halfWidth;
-      y = roundedRect.y + halfHeight;
-      rx = ry = Math.max(0, Math.min(roundedRect.radius, Math.min(halfWidth, halfHeight)));
-      dx = halfWidth - rx;
-      dy = halfHeight - ry;
-    }
-    if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
-      return points;
-    }
-    const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
-    const m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
-    if (m === 0) {
-      return points;
-    }
-    if (n === 0) {
-      points[0] = points[6] = x + dx;
-      points[1] = points[3] = y + dy;
-      points[2] = points[4] = x - dx;
-      points[5] = points[7] = y - dy;
-      return points;
-    }
-    let j1 = 0;
-    let j2 = n * 4 + (dx ? 2 : 0) + 2;
-    let j3 = j2;
-    let j4 = m;
-    let x0 = dx + rx;
-    let y0 = dy;
-    let x1 = x + x0;
-    let x2 = x - x0;
-    let y1 = y + y0;
-    points[j1++] = x1;
-    points[j1++] = y1;
-    points[--j2] = y1;
-    points[--j2] = x2;
-    if (dy) {
-      const y22 = y - y0;
-      points[j3++] = x2;
-      points[j3++] = y22;
-      points[--j4] = y22;
-      points[--j4] = x1;
-    }
-    for (let i = 1; i < n; i++) {
-      const a = Math.PI / 2 * (i / n);
-      const x02 = dx + Math.cos(a) * rx;
-      const y02 = dy + Math.sin(a) * ry;
-      const x12 = x + x02;
-      const x22 = x - x02;
-      const y12 = y + y02;
-      const y22 = y - y02;
-      points[j1++] = x12;
-      points[j1++] = y12;
-      points[--j2] = y12;
-      points[--j2] = x22;
-      points[j3++] = x22;
-      points[j3++] = y22;
-      points[--j4] = y22;
-      points[--j4] = x12;
-    }
-    x0 = dx;
-    y0 = dy + ry;
-    x1 = x + x0;
-    x2 = x - x0;
-    y1 = y + y0;
-    const y2 = y - y0;
-    points[j1++] = x1;
-    points[j1++] = y1;
-    points[--j4] = y2;
-    points[--j4] = x1;
-    if (dx) {
-      points[j1++] = x2;
-      points[j1++] = y1;
-      points[--j4] = y2;
-      points[--j4] = x2;
-    }
-    return points;
-  },
-  triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
-    if (points.length === 0) {
-      return;
-    }
-    let centerX = 0;
-    let centerY = 0;
-    for (let i = 0; i < points.length; i += 2) {
-      centerX += points[i];
-      centerY += points[i + 1];
-    }
-    centerX /= points.length / 2;
-    centerY /= points.length / 2;
-    let count = verticesOffset;
-    vertices[count * verticesStride] = centerX;
-    vertices[count * verticesStride + 1] = centerY;
-    const centerIndex = count++;
-    for (let i = 0; i < points.length; i += 2) {
-      vertices[count * verticesStride] = points[i];
-      vertices[count * verticesStride + 1] = points[i + 1];
-      if (i > 0) {
-        indices[indicesOffset++] = count;
-        indices[indicesOffset++] = centerIndex;
-        indices[indicesOffset++] = count - 1;
-      }
-      count++;
-    }
-    indices[indicesOffset++] = centerIndex + 1;
-    indices[indicesOffset++] = centerIndex;
-    indices[indicesOffset++] = count - 1;
-  }
-};
-
-class Point {
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
-  }
-  static _shared;
-  static get shared() {
-    const point = this._shared ?? new Point();
-    point.x = 0;
-    point.y = 0;
-    return point;
-  }
-  copyFrom(p) {
-    this.set(p.x, p.y);
-    return this;
-  }
-  copyTo(p) {
-    p.set(this.x, this.y);
-    return p;
-  }
-  equals(p) {
-    return p.x === this.x && p.y === this.y;
-  }
-  set(x = 0, y = x) {
-    this.x = x;
-    this.y = y;
-    return this;
-  }
-}
-
-function getOrientationOfPoints(points) {
-  const m = points.length;
-  if (m < 6) {
-    return 1;
-  }
-  let area = 0;
-  for (let i = 0, x1 = points[m - 2], y1 = points[m - 1]; i < m; i += 2) {
-    const x2 = points[i];
-    const y2 = points[i + 1];
-    area += (x2 - x1) * (y2 + y1);
-    x1 = x2;
-    y1 = y2;
-  }
-  if (area < 0) {
-    return -1;
-  }
-  return 1;
-}
-
-function triangulateWithHoles(points, holes, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
-  const triangles = earcut(points, holes, 2);
-  if (!triangles) {
-    return;
-  }
-  for (let i = 0; i < triangles.length; i += 3) {
-    indices[indicesOffset++] = triangles[i] + verticesOffset;
-    indices[indicesOffset++] = triangles[i + 1] + verticesOffset;
-    indices[indicesOffset++] = triangles[i + 2] + verticesOffset;
-  }
-  let index = verticesOffset * verticesStride;
-  for (let i = 0; i < points.length; i += 2) {
-    vertices[index] = points[i];
-    vertices[index + 1] = points[i + 1];
-    index += verticesStride;
-  }
-}
-
-const closePointEps = 1e-4;
-const curveEps = 1e-4;
-function square(x, y, nx, ny, innerWeight, outerWeight, clockwise, verts) {
-  const ix = x - nx * innerWeight;
-  const iy = y - ny * innerWeight;
-  const ox = x + nx * outerWeight;
-  const oy = y + ny * outerWeight;
-  let exx;
-  let eyy;
-  if (clockwise) {
-    exx = ny;
-    eyy = -nx;
-  } else {
-    exx = -ny;
-    eyy = nx;
-  }
-  const eix = ix + exx;
-  const eiy = iy + eyy;
-  const eox = ox + exx;
-  const eoy = oy + eyy;
-  verts.push(eix, eiy);
-  verts.push(eox, eoy);
-  return 2;
-}
-function round(cx, cy, sx, sy, ex, ey, verts, clockwise) {
-  const cx2p0x = sx - cx;
-  const cy2p0y = sy - cy;
-  let angle0 = Math.atan2(cx2p0x, cy2p0y);
-  let angle1 = Math.atan2(ex - cx, ey - cy);
-  if (clockwise && angle0 < angle1) {
-    angle0 += Math.PI * 2;
-  } else if (!clockwise && angle0 > angle1) {
-    angle1 += Math.PI * 2;
-  }
-  let startAngle = angle0;
-  const angleDiff = angle1 - angle0;
-  const absAngleDiff = Math.abs(angleDiff);
-  const radius = Math.sqrt(cx2p0x * cx2p0x + cy2p0y * cy2p0y);
-  const segCount = (15 * absAngleDiff * Math.sqrt(radius) / Math.PI >> 0) + 1;
-  const angleInc = angleDiff / segCount;
-  startAngle += angleInc;
-  if (clockwise) {
-    verts.push(cx, cy);
-    verts.push(sx, sy);
-    for (let i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
-      verts.push(cx, cy);
-      verts.push(cx + Math.sin(angle) * radius, cy + Math.cos(angle) * radius);
-    }
-    verts.push(cx, cy);
-    verts.push(ex, ey);
-  } else {
-    verts.push(sx, sy);
-    verts.push(cx, cy);
-    for (let i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
-      verts.push(cx + Math.sin(angle) * radius, cy + Math.cos(angle) * radius);
-      verts.push(cx, cy);
-    }
-    verts.push(ex, ey);
-    verts.push(cx, cy);
-  }
-  return segCount * 2;
-}
-function buildLine(points, lineStyle, flipAlignment, closed, vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
-  const eps = closePointEps;
-  if (points.length === 0) {
-    return;
-  }
-  const style = lineStyle;
-  let alignment = style.alignment;
-  if (lineStyle.alignment !== 0.5) {
-    let orientation = getOrientationOfPoints(points);
-    if (flipAlignment)
-      orientation *= -1;
-    alignment = (alignment - 0.5) * orientation + 0.5;
-  }
-  const firstPoint = new Point(points[0], points[1]);
-  const lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
-  const closedShape = closed;
-  const closedPath = Math.abs(firstPoint.x - lastPoint.x) < eps && Math.abs(firstPoint.y - lastPoint.y) < eps;
-  if (closedShape) {
-    points = points.slice();
-    if (closedPath) {
-      points.pop();
-      points.pop();
-      lastPoint.set(points[points.length - 2], points[points.length - 1]);
-    }
-    const midPointX = (firstPoint.x + lastPoint.x) * 0.5;
-    const midPointY = (lastPoint.y + firstPoint.y) * 0.5;
-    points.unshift(midPointX, midPointY);
-    points.push(midPointX, midPointY);
-  }
-  const verts = vertices;
-  const length = points.length / 2;
-  let indexCount = points.length;
-  const indexStart = verts.length / 2;
-  const width = style.width / 2;
-  const widthSquared = width * width;
-  const miterLimitSquared = style.miterLimit * style.miterLimit;
-  let x0 = points[0];
-  let y0 = points[1];
-  let x1 = points[2];
-  let y1 = points[3];
-  let x2 = 0;
-  let y2 = 0;
-  let perpX = -(y0 - y1);
-  let perpY = x0 - x1;
-  let perp1x = 0;
-  let perp1y = 0;
-  let dist = Math.sqrt(perpX * perpX + perpY * perpY);
-  perpX /= dist;
-  perpY /= dist;
-  perpX *= width;
-  perpY *= width;
-  const ratio = alignment;
-  const innerWeight = (1 - ratio) * 2;
-  const outerWeight = ratio * 2;
-  if (!closedShape) {
-    if (style.cap === "round") {
-      indexCount += round(
-        x0 - perpX * (innerWeight - outerWeight) * 0.5,
-        y0 - perpY * (innerWeight - outerWeight) * 0.5,
-        x0 - perpX * innerWeight,
-        y0 - perpY * innerWeight,
-        x0 + perpX * outerWeight,
-        y0 + perpY * outerWeight,
-        verts,
-        true
-      ) + 2;
-    } else if (style.cap === "square") {
-      indexCount += square(x0, y0, perpX, perpY, innerWeight, outerWeight, true, verts);
-    }
-  }
-  verts.push(
-    x0 - perpX * innerWeight,
-    y0 - perpY * innerWeight
-  );
-  verts.push(
-    x0 + perpX * outerWeight,
-    y0 + perpY * outerWeight
-  );
-  for (let i = 1; i < length - 1; ++i) {
-    x0 = points[(i - 1) * 2];
-    y0 = points[(i - 1) * 2 + 1];
-    x1 = points[i * 2];
-    y1 = points[i * 2 + 1];
-    x2 = points[(i + 1) * 2];
-    y2 = points[(i + 1) * 2 + 1];
-    perpX = -(y0 - y1);
-    perpY = x0 - x1;
-    dist = Math.sqrt(perpX * perpX + perpY * perpY);
-    perpX /= dist;
-    perpY /= dist;
-    perpX *= width;
-    perpY *= width;
-    perp1x = -(y1 - y2);
-    perp1y = x1 - x2;
-    dist = Math.sqrt(perp1x * perp1x + perp1y * perp1y);
-    perp1x /= dist;
-    perp1y /= dist;
-    perp1x *= width;
-    perp1y *= width;
-    const dx0 = x1 - x0;
-    const dy0 = y0 - y1;
-    const dx1 = x1 - x2;
-    const dy1 = y2 - y1;
-    const dot = dx0 * dx1 + dy0 * dy1;
-    const cross = dy0 * dx1 - dy1 * dx0;
-    const clockwise = cross < 0;
-    if (Math.abs(cross) < 1e-3 * Math.abs(dot)) {
-      verts.push(
-        x1 - perpX * innerWeight,
-        y1 - perpY * innerWeight
-      );
-      verts.push(
-        x1 + perpX * outerWeight,
-        y1 + perpY * outerWeight
-      );
-      if (dot >= 0) {
-        if (style.join === "round") {
-          indexCount += round(
-            x1,
-            y1,
-            x1 - perpX * innerWeight,
-            y1 - perpY * innerWeight,
-            x1 - perp1x * innerWeight,
-            y1 - perp1y * innerWeight,
-            verts,
-            false
-          ) + 4;
-        } else {
-          indexCount += 2;
-        }
-        verts.push(
-          x1 - perp1x * outerWeight,
-          y1 - perp1y * outerWeight
-        );
-        verts.push(
-          x1 + perp1x * innerWeight,
-          y1 + perp1y * innerWeight
-        );
-      }
-      continue;
-    }
-    const c1 = (-perpX + x0) * (-perpY + y1) - (-perpX + x1) * (-perpY + y0);
-    const c2 = (-perp1x + x2) * (-perp1y + y1) - (-perp1x + x1) * (-perp1y + y2);
-    const px = (dx0 * c2 - dx1 * c1) / cross;
-    const py = (dy1 * c1 - dy0 * c2) / cross;
-    const pDist = (px - x1) * (px - x1) + (py - y1) * (py - y1);
-    const imx = x1 + (px - x1) * innerWeight;
-    const imy = y1 + (py - y1) * innerWeight;
-    const omx = x1 - (px - x1) * outerWeight;
-    const omy = y1 - (py - y1) * outerWeight;
-    const smallerInsideSegmentSq = Math.min(dx0 * dx0 + dy0 * dy0, dx1 * dx1 + dy1 * dy1);
-    const insideWeight = clockwise ? innerWeight : outerWeight;
-    const smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
-    const insideMiterOk = pDist <= smallerInsideDiagonalSq;
-    if (insideMiterOk) {
-      if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
-        if (clockwise) {
-          verts.push(imx, imy);
-          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-          verts.push(imx, imy);
-          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
-        } else {
-          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-          verts.push(omx, omy);
-          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
-          verts.push(omx, omy);
-        }
-        indexCount += 2;
-      } else if (style.join === "round") {
-        if (clockwise) {
-          verts.push(imx, imy);
-          verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-          indexCount += round(
-            x1,
-            y1,
-            x1 + perpX * outerWeight,
-            y1 + perpY * outerWeight,
-            x1 + perp1x * outerWeight,
-            y1 + perp1y * outerWeight,
-            verts,
-            true
-          ) + 4;
-          verts.push(imx, imy);
-          verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
-        } else {
-          verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-          verts.push(omx, omy);
-          indexCount += round(
-            x1,
-            y1,
-            x1 - perpX * innerWeight,
-            y1 - perpY * innerWeight,
-            x1 - perp1x * innerWeight,
-            y1 - perp1y * innerWeight,
-            verts,
-            false
-          ) + 4;
-          verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
-          verts.push(omx, omy);
-        }
-      } else {
-        verts.push(imx, imy);
-        verts.push(omx, omy);
-      }
-    } else {
-      verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-      verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-      if (style.join === "round") {
-        if (clockwise) {
-          indexCount += round(
-            x1,
-            y1,
-            x1 + perpX * outerWeight,
-            y1 + perpY * outerWeight,
-            x1 + perp1x * outerWeight,
-            y1 + perp1y * outerWeight,
-            verts,
-            true
-          ) + 2;
-        } else {
-          indexCount += round(
-            x1,
-            y1,
-            x1 - perpX * innerWeight,
-            y1 - perpY * innerWeight,
-            x1 - perp1x * innerWeight,
-            y1 - perp1y * innerWeight,
-            verts,
-            false
-          ) + 2;
-        }
-      } else if (style.join === "miter" && pDist / widthSquared <= miterLimitSquared) {
-        if (clockwise) {
-          verts.push(omx, omy);
-          verts.push(omx, omy);
-        } else {
-          verts.push(imx, imy);
-          verts.push(imx, imy);
-        }
-        indexCount += 2;
-      }
-      verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
-      verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
-      indexCount += 2;
-    }
-  }
-  x0 = points[(length - 2) * 2];
-  y0 = points[(length - 2) * 2 + 1];
-  x1 = points[(length - 1) * 2];
-  y1 = points[(length - 1) * 2 + 1];
-  perpX = -(y0 - y1);
-  perpY = x0 - x1;
-  dist = Math.sqrt(perpX * perpX + perpY * perpY);
-  perpX /= dist;
-  perpY /= dist;
-  perpX *= width;
-  perpY *= width;
-  verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
-  verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
-  if (!closedShape) {
-    if (style.cap === "round") {
-      indexCount += round(
-        x1 - perpX * (innerWeight - outerWeight) * 0.5,
-        y1 - perpY * (innerWeight - outerWeight) * 0.5,
-        x1 - perpX * innerWeight,
-        y1 - perpY * innerWeight,
-        x1 + perpX * outerWeight,
-        y1 + perpY * outerWeight,
-        verts,
-        false
-      ) + 2;
-    } else if (style.cap === "square") {
-      indexCount += square(x1, y1, perpX, perpY, innerWeight, outerWeight, false, verts);
-    }
-  }
-  const eps2 = curveEps * curveEps;
-  for (let i = indexStart; i < indexCount + indexStart - 2; ++i) {
-    x0 = verts[i * 2];
-    y0 = verts[i * 2 + 1];
-    x1 = verts[(i + 1) * 2];
-    y1 = verts[(i + 1) * 2 + 1];
-    x2 = verts[(i + 2) * 2];
-    y2 = verts[(i + 2) * 2 + 1];
-    if (Math.abs(x0 * (y1 - y2) + x1 * (y2 - y0) + x2 * (y0 - y1)) < eps2) {
-      continue;
-    }
-    indices.push(i, i + 1, i + 2);
-  }
-}
-
-const emptyArray = [];
-const buildPolygon = {
-  build(shape, points) {
-    for (let i = 0; i < shape.points.length; i++) {
-      points[i] = shape.points[i];
-    }
-    return points;
-  },
-  triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
-    triangulateWithHoles(points, emptyArray, vertices, verticesStride, verticesOffset, indices, indicesOffset);
-  }
-};
-
-const buildRectangle = {
-  build(shape, points) {
-    const rectData = shape;
-    const x = rectData.x;
-    const y = rectData.y;
-    const width = rectData.width;
-    const height = rectData.height;
-    if (!(width >= 0 && height >= 0)) {
-      return points;
-    }
-    points[0] = x;
-    points[1] = y;
-    points[2] = x + width;
-    points[3] = y;
-    points[4] = x + width;
-    points[5] = y + height;
-    points[6] = x;
-    points[7] = y + height;
-    return points;
-  },
-  triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
-    let count = 0;
-    verticesOffset *= verticesStride;
-    vertices[verticesOffset + count] = points[0];
-    vertices[verticesOffset + count + 1] = points[1];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[2];
-    vertices[verticesOffset + count + 1] = points[3];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[6];
-    vertices[verticesOffset + count + 1] = points[7];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[4];
-    vertices[verticesOffset + count + 1] = points[5];
-    count += verticesStride;
-    const verticesIndex = verticesOffset / verticesStride;
-    indices[indicesOffset++] = verticesIndex;
-    indices[indicesOffset++] = verticesIndex + 1;
-    indices[indicesOffset++] = verticesIndex + 2;
-    indices[indicesOffset++] = verticesIndex + 1;
-    indices[indicesOffset++] = verticesIndex + 3;
-    indices[indicesOffset++] = verticesIndex + 2;
-  }
-};
-
-const buildTriangle = {
-  build(shape, points) {
-    points[0] = shape.x;
-    points[1] = shape.y;
-    points[2] = shape.x2;
-    points[3] = shape.y2;
-    points[4] = shape.x3;
-    points[5] = shape.y3;
-    return points;
-  },
-  triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
-    let count = 0;
-    verticesOffset *= verticesStride;
-    vertices[verticesOffset + count] = points[0];
-    vertices[verticesOffset + count + 1] = points[1];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[2];
-    vertices[verticesOffset + count + 1] = points[3];
-    count += verticesStride;
-    vertices[verticesOffset + count] = points[4];
-    vertices[verticesOffset + count + 1] = points[5];
-    const verticesIndex = verticesOffset / verticesStride;
-    indices[indicesOffset++] = verticesIndex;
-    indices[indicesOffset++] = verticesIndex + 1;
-    indices[indicesOffset++] = verticesIndex + 2;
-  }
-};
-
-const tempPoints = [new Point(), new Point(), new Point(), new Point()];
-class Rectangle {
-  constructor(x = 0, y = 0, width = 0, height = 0) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
-  get left() {
-    return this.x;
-  }
-  get right() {
-    return this.x + this.width;
-  }
-  get top() {
-    return this.y;
-  }
-  get bottom() {
-    return this.y + this.height;
-  }
-  isEmpty() {
-    return this.left === this.right || this.top === this.bottom;
-  }
-  copyFromBounds(bounds) {
-    this.x = bounds.minX;
-    this.y = bounds.minY;
-    this.width = bounds.maxX - bounds.minX;
-    this.height = bounds.maxY - bounds.minY;
-    return this;
-  }
-  contains(x, y) {
-    if (this.width <= 0 || this.height <= 0) {
-      return false;
-    }
-    if (x >= this.x && x < this.x + this.width) {
-      if (y >= this.y && y < this.y + this.height) {
-        return true;
-      }
-    }
-    return false;
-  }
-  strokeContains(x, y, strokeWidth) {
-    const { width, height } = this;
-    if (width <= 0 || height <= 0)
-      return false;
-    const _x = this.x;
-    const _y = this.y;
-    const outerLeft = _x - strokeWidth / 2;
-    const outerRight = _x + width + strokeWidth / 2;
-    const outerTop = _y - strokeWidth / 2;
-    const outerBottom = _y + height + strokeWidth / 2;
-    const innerLeft = _x + strokeWidth / 2;
-    const innerRight = _x + width - strokeWidth / 2;
-    const innerTop = _y + strokeWidth / 2;
-    const innerBottom = _y + height - strokeWidth / 2;
-    return x >= outerLeft && x <= outerRight && y >= outerTop && y <= outerBottom && !(x > innerLeft && x < innerRight && y > innerTop && y < innerBottom);
-  }
-  clone() {
-    return new Rectangle(this.x, this.y, this.width, this.height);
-  }
-  copyFrom(rectangle) {
-    this.x = rectangle.x;
-    this.y = rectangle.y;
-    this.width = rectangle.width;
-    this.height = rectangle.height;
-  }
-  copyTo(rectangle) {
-    rectangle.copyFrom(this);
-  }
-  intersects(other, transform) {
-    if (!transform) {
-      const x02 = this.x < other.x ? other.x : this.x;
-      const x12 = this.right > other.right ? other.right : this.right;
-      if (x12 <= x02) {
-        return false;
-      }
-      const y02 = this.y < other.y ? other.y : this.y;
-      const y12 = this.bottom > other.bottom ? other.bottom : this.bottom;
-      return y12 > y02;
-    }
-    const x0 = this.left;
-    const x1 = this.right;
-    const y0 = this.top;
-    const y1 = this.bottom;
-    if (x1 <= x0 || y1 <= y0) {
-      return false;
-    }
-    const lt = tempPoints[0].set(other.left, other.top);
-    const lb = tempPoints[1].set(other.left, other.bottom);
-    const rt = tempPoints[2].set(other.right, other.top);
-    const rb = tempPoints[3].set(other.right, other.bottom);
-    if (rt.x <= lt.x || lb.y <= lt.y) {
-      return false;
-    }
-    const { a, d, b, c } = transform.toObject();
-    const s = Math.sign(a * d - b * c);
-    if (s === 0) {
-      return false;
-    }
-    [lt.x, lt.y] = transform.applyToPoint(lt.x, lt.y);
-    [lb.x, lb.y] = transform.applyToPoint(lb.x, lb.y);
-    [rt.x, rt.y] = transform.applyToPoint(rt.x, rt.y);
-    [rb.x, rb.y] = transform.applyToPoint(rb.x, lt.y);
-    if (Math.max(lt.x, lb.x, rt.x, rb.x) <= x0 || Math.min(lt.x, lb.x, rt.x, rb.x) >= x1 || Math.max(lt.y, lb.y, rt.y, rb.y) <= y0 || Math.min(lt.y, lb.y, rt.y, rb.y) >= y1) {
-      return false;
-    }
-    const nx = s * (lb.y - lt.y);
-    const ny = s * (lt.x - lb.x);
-    const n00 = nx * x0 + ny * y0;
-    const n10 = nx * x1 + ny * y0;
-    const n01 = nx * x0 + ny * y1;
-    const n11 = nx * x1 + ny * y1;
-    if (Math.max(n00, n10, n01, n11) <= nx * lt.x + ny * lt.y || Math.min(n00, n10, n01, n11) >= nx * rb.x + ny * rb.y) {
-      return false;
-    }
-    const mx = s * (lt.y - rt.y);
-    const my = s * (rt.x - lt.x);
-    const m00 = mx * x0 + my * y0;
-    const m10 = mx * x1 + my * y0;
-    const m01 = mx * x0 + my * y1;
-    const m11 = mx * x1 + my * y1;
-    if (Math.max(m00, m10, m01, m11) <= mx * lt.x + my * lt.y || Math.min(m00, m10, m01, m11) >= mx * rb.x + my * rb.y) {
-      return false;
-    }
-    return true;
-  }
-  pad(paddingX = 0, paddingY = paddingX) {
-    this.x -= paddingX;
-    this.y -= paddingY;
-    this.width += paddingX * 2;
-    this.height += paddingY * 2;
-    return this;
-  }
-  fit(rectangle) {
-    const x1 = Math.max(this.x, rectangle.x);
-    const x2 = Math.min(this.x + this.width, rectangle.x + rectangle.width);
-    const y1 = Math.max(this.y, rectangle.y);
-    const y2 = Math.min(this.y + this.height, rectangle.y + rectangle.height);
-    this.x = x1;
-    this.width = Math.max(x2 - x1, 0);
-    this.y = y1;
-    this.height = Math.max(y2 - y1, 0);
-    return this;
-  }
-  ceil(resolution = 1, eps = 1e-3) {
-    const x2 = Math.ceil((this.x + this.width - eps) * resolution) / resolution;
-    const y2 = Math.ceil((this.y + this.height - eps) * resolution) / resolution;
-    this.x = Math.floor((this.x + eps) * resolution) / resolution;
-    this.y = Math.floor((this.y + eps) * resolution) / resolution;
-    this.width = x2 - this.x;
-    this.height = y2 - this.y;
-    return this;
-  }
-  enlarge(rectangle) {
-    const x1 = Math.min(this.x, rectangle.x);
-    const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width);
-    const y1 = Math.min(this.y, rectangle.y);
-    const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height);
-    this.x = x1;
-    this.width = x2 - x1;
-    this.y = y1;
-    this.height = y2 - y1;
-    return this;
-  }
-  getBounds(out) {
-    out = out || new Rectangle();
-    out.copyFrom(this);
-    return out;
-  }
-  buildOutline(points) {
-    buildRectangle.build(this, points);
-  }
-  buildGeometry(vertices, indices) {
-    const points = [];
-    this.buildOutline(points);
-    buildRectangle.triangulate(points, vertices, 2, 0, indices, 0);
-  }
-}
-
-class Vector extends EventEmitter {
-  constructor(dim) {
-    super();
-    this.dim = dim;
-  }
-  _array = [];
-  get length() {
-    return this.dim;
-  }
-  _operate(operator, target, output) {
-    const { dim: length, _array: array } = this;
-    let targetArray;
-    if (typeof target === "number") {
-      targetArray = Array.from({ length }, () => target);
-    } else if (target instanceof Matrix || target instanceof Vector) {
-      targetArray = target.toArray();
-    } else {
-      targetArray = target;
-    }
-    let outputObject;
-    let outputArray = [];
-    if (!output) {
-      outputObject = this;
-    } else if (output instanceof Vector) {
-      outputObject = output;
-    } else {
-      outputArray = output;
-    }
-    if (target instanceof Matrix) {
-      const { cols } = target;
-      switch (operator) {
-        case "*":
-          for (let x = 0; x < length; x++) {
-            let val = 0;
-            for (let y = 0; y < length; y++) {
-              val += array[x] * targetArray[y * cols + x];
-            }
-            outputArray[x] = val;
-          }
-          break;
-        default:
-          throw new Error(`Not support operator in '${this.toName()} ${operator} ${target.toName()}'`);
-      }
-    } else {
-      switch (operator) {
-        case "+":
-          for (let i = 0; i < length; i++) {
-            outputArray[i] = array[i] + targetArray[i];
-          }
-          break;
-        case "-":
-          for (let i = 0; i < length; i++) {
-            outputArray[i] = array[i] - targetArray[i];
-          }
-          break;
-        case "*":
-          for (let i = 0; i < length; i++) {
-            outputArray[i] = array[i] * targetArray[i];
-          }
-          break;
-        case "/":
-          for (let i = 0; i < length; i++) {
-            outputArray[i] = array[i] / targetArray[i];
-          }
-          break;
-        case "rot": {
-          const c = Math.cos(targetArray[0]);
-          const s = Math.sin(targetArray[0]);
-          outputArray[0] = array[0] * c - array[1] * s;
-          outputArray[1] = array[1] * c + array[0] * s;
-          break;
-        }
-        case "==": {
-          let flag = true;
-          for (let i = 0; i < length; i++) {
-            flag = flag && array[i] === targetArray[i];
-          }
-          return flag;
-        }
-        case "=":
-          for (let i = 0; i < length; i++) {
-            const val = targetArray[i];
-            if (val !== void 0) {
-              array[i] = val;
-            }
-          }
-          this._emitUpdate(array);
-          return this;
-        default:
-          throw new Error(`Not support operator in '${this.toName()} ${operator} Vector'`);
-      }
-    }
-    return outputObject?.set(outputArray) ?? outputArray;
-  }
-  add(value, output) {
-    return this._operate("+", value, output);
-  }
-  sub(value, output) {
-    return this._operate("-", value, output);
-  }
-  multiply(value, output) {
-    return this._operate("*", value, output);
-  }
-  divide(value, output) {
-    return this._operate("/", value, output);
-  }
-  rotate(angle) {
-    return this._operate("rot", angle);
-  }
-  set(value, ...args) {
-    if (args.length && typeof value === "number") {
-      value = [value, ...args];
-    }
-    return this._operate("=", value);
-  }
-  equals(value) {
-    return this._operate("==", value);
-  }
-  clone() {
-    const cloned = new this.constructor();
-    cloned.set(this.toArray());
-    return cloned;
-  }
-  onUpdate(callback) {
-    this.on("update", callback);
-    return this;
-  }
-  offUpdate(callback) {
-    this.off("update", callback);
-    return this;
-  }
-  _emitUpdate(array) {
-    this._onUpdate(array);
-    this.emit("update", array);
-  }
-  _onUpdate(_array) {
-  }
-  toArray() {
-    return this._array.slice();
-  }
-  toName() {
-    return `Vector${this.dim}`;
-  }
-}
-
-class Matrix extends EventEmitter {
-  constructor(rows, cols, array) {
-    super();
-    this.rows = rows;
-    this.cols = cols;
-    if (array) {
-      this.set(array);
-    } else {
-      this.identity();
-    }
-  }
-  _array = [];
-  get length() {
-    return this.cols * this.rows;
-  }
-  _operate(operator, target, output) {
-    const { cols, rows, length, _array: array } = this;
-    let targetArray;
-    if (typeof target === "number") {
-      targetArray = Array.from({ length }, () => target);
-    } else if (target instanceof Vector || target instanceof Matrix) {
-      targetArray = target.toArray();
-    } else {
-      targetArray = target;
+  _operate(operator, target, output) {
+    const { cols, rows, length, _array: array } = this;
+    let targetArray;
+    if (typeof target === "number") {
+      targetArray = Array.from({ length }, () => target);
+    } else if (target instanceof Vector || target instanceof Matrix) {
+      targetArray = target.toArray();
+    } else {
+      targetArray = target;
     }
     let outputObject;
     let outputArray = [];
@@ -2869,6 +1321,12 @@ class Matrix extends EventEmitter {
   }
 }
 
+class Matrix2 extends Matrix {
+  constructor(array) {
+    super(2, 2, array);
+  }
+}
+
 class Matrix3 extends Matrix {
   constructor(array) {
     super(3, 3, array);
@@ -2907,6 +1365,72 @@ class Matrix3 extends Matrix {
   }
 }
 
+class Matrix4 extends Matrix {
+  constructor(array) {
+    super(4, 4, array);
+  }
+}
+
+class Projection2D extends Matrix3 {
+  constructor(_x = 0, _y = 0, _width = 0, _height = 0, _flipY = false) {
+    super();
+    this._x = _x;
+    this._y = _y;
+    this._width = _width;
+    this._height = _height;
+    this._flipY = _flipY;
+    this._performUpdateArray();
+  }
+  flipY(flipY) {
+    if (this._flipY !== flipY) {
+      this._flipY = flipY;
+      this._performUpdateArray();
+    }
+    return this;
+  }
+  translate(x, y) {
+    if (this._x !== x || this._y !== y) {
+      this._x = x;
+      this._y = y;
+      this._performUpdateArray();
+    }
+    return this;
+  }
+  resize(width, height) {
+    if (this._width !== width || this._height !== height) {
+      this._width = width;
+      this._height = height;
+      this._performUpdateArray();
+    }
+    return this;
+  }
+  _performUpdateArray() {
+    const width = this._width;
+    const height = this._height;
+    if (!width || !height) {
+      return;
+    }
+    const x = this._x;
+    const y = this._y;
+    const sign = !this._flipY ? 1 : -1;
+    const a = 1 / width * 2;
+    const d = sign * (1 / height * 2);
+    const tx = -1 - x * a;
+    const ty = -sign - y * d;
+    this.set([
+      a,
+      0,
+      tx,
+      0,
+      d,
+      ty,
+      0,
+      0,
+      1
+    ]);
+  }
+}
+
 class Transform2D extends Matrix3 {
   constructor(autoUpdate = true) {
     super();
@@ -3048,848 +1572,85 @@ class Transform2D extends Matrix3 {
   scale3d(x, y, z) {
     return this.scale(x, y, z);
   }
-  rotate(rad) {
-    this._rotate = rad;
-    this._updateSkew();
-    this._requestUpdateArray();
-    return this;
-  }
-  rotateX(x) {
-    return this.scaleY(this._rotateToScale(x));
-  }
-  rotateY(y) {
-    return this.scaleX(this._rotateToScale(y));
-  }
-  rotateZ(z) {
-    return this.rotate(z);
-  }
-  rotate3d(x, y, z, rad) {
-    const [rx, ry, rz] = this._rotate3d(x, y, z, rad);
-    rx && this.rotateX(rx);
-    ry && this.rotateY(ry);
-    rz && this.rotateZ(rz);
-    return this;
-  }
-  _rotateToScale(rad) {
-    const val = rad / PI_2;
-    return val <= 0.5 ? val * -4 + 1 : (val - 1) * 4 + 1;
-  }
-  _rotate3d(x, y, z, rad) {
-    if (x === 1 && y === 0 && z === 0) {
-      return [rad, 0, 0];
-    } else if (x === 0 && y === 1 && z === 0) {
-      return [0, rad, 0];
-    } else if (x === 0 && y === 0) {
-      return [0, 0, rad];
-    } else {
-      const cos = Math.cos(rad);
-      const sin = Math.sin(rad);
-      const m11 = cos + x * x * (1 - cos);
-      const m12 = x * y * (1 - cos) - z * sin;
-      const m13 = x * z * (1 - cos) + y * sin;
-      const m22 = cos + y * y * (1 - cos);
-      const m23 = y * z * (1 - cos) - x * sin;
-      const m33 = cos + z * z * (1 - cos);
-      const rotateX = -Math.atan2(-m23, m22);
-      const rotateY = -Math.atan2(m13, Math.sqrt(m23 * m23 + m33 * m33));
-      const rotateZ = -Math.atan2(-m12, m11);
-      return [rotateX, rotateY, rotateZ];
-    }
-  }
-  applyToPoint(x, y) {
-    const { a, c, tx, b, d, ty } = this.toObject();
-    return [
-      a * x + c * y + tx,
-      b * x + d * y + ty
-    ];
-  }
-  inverse() {
-    return this.clone().invert();
-  }
-  update() {
-    let updated = false;
-    if (this._needsUpdateArray) {
-      this._needsUpdateArray = false;
-      this._performUpdateArray();
-      updated = true;
-    }
-    if (this._needsUpdateFields) {
-      this._needsUpdateFields = false;
-      this._performUpdateFields();
-      updated = true;
-    }
-    return updated;
-  }
-  isIdentity() {
-    const { a, b, c, d, tx, ty } = this.toObject();
-    return a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0;
-  }
-  toObject() {
-    const [a, c, tx, b, d, ty, , , tz] = this._array;
-    return { a, c, tx, b, d, ty, tz };
-  }
-}
-
-const defaultMatrix = new Transform2D();
-class Bounds {
-  constructor(minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity) {
-    this.minX = minX;
-    this.minY = minY;
-    this.maxX = maxX;
-    this.maxY = maxY;
-  }
-  matrix = defaultMatrix;
-  _rectangle;
-  get x() {
-    return this.minX;
-  }
-  set x(value) {
-    const width = this.maxX - this.minX;
-    this.minX = value;
-    this.maxX = value + width;
-  }
-  get y() {
-    return this.minY;
-  }
-  set y(value) {
-    const height = this.maxY - this.minY;
-    this.minY = value;
-    this.maxY = value + height;
-  }
-  get width() {
-    return this.maxX - this.minX;
-  }
-  set width(value) {
-    this.maxX = this.minX + value;
-  }
-  get height() {
-    return this.maxY - this.minY;
-  }
-  set height(value) {
-    this.maxY = this.minY + value;
-  }
-  get left() {
-    return this.minX;
-  }
-  get right() {
-    return this.maxX;
-  }
-  get top() {
-    return this.minY;
-  }
-  get bottom() {
-    return this.maxY;
-  }
-  get isPositive() {
-    return this.maxX - this.minX > 0 && this.maxY - this.minY > 0;
-  }
-  get isValid() {
-    return this.minX + this.minY !== Infinity;
-  }
-  isEmpty() {
-    return this.minX > this.maxX || this.minY > this.maxY;
-  }
-  get rectangle() {
-    if (!this._rectangle) {
-      this._rectangle = new Rectangle();
-    }
-    const rectangle = this._rectangle;
-    if (this.minX > this.maxX || this.minY > this.maxY) {
-      rectangle.x = 0;
-      rectangle.y = 0;
-      rectangle.width = 0;
-      rectangle.height = 0;
-    } else {
-      rectangle.copyFromBounds(this);
-    }
-    return rectangle;
-  }
-  clear() {
-    this.minX = Infinity;
-    this.minY = Infinity;
-    this.maxX = -Infinity;
-    this.maxY = -Infinity;
-    this.matrix = defaultMatrix;
-    return this;
-  }
-  set(x0, y0, x1, y1) {
-    this.minX = x0;
-    this.minY = y0;
-    this.maxX = x1;
-    this.maxY = y1;
-    return this;
-  }
-  addFrame(x0, y0, x1, y1, matrix) {
-    matrix ||= this.matrix;
-    const { a, b, c, d, tx, ty } = matrix.toObject();
-    let minX = this.minX;
-    let minY = this.minY;
-    let maxX = this.maxX;
-    let maxY = this.maxY;
-    let x = a * x0 + c * y0 + tx;
-    let y = b * x0 + d * y0 + ty;
-    if (x < minX)
-      minX = x;
-    if (y < minY)
-      minY = y;
-    if (x > maxX)
-      maxX = x;
-    if (y > maxY)
-      maxY = y;
-    x = a * x1 + c * y0 + tx;
-    y = b * x1 + d * y0 + ty;
-    if (x < minX)
-      minX = x;
-    if (y < minY)
-      minY = y;
-    if (x > maxX)
-      maxX = x;
-    if (y > maxY)
-      maxY = y;
-    x = a * x0 + c * y1 + tx;
-    y = b * x0 + d * y1 + ty;
-    if (x < minX)
-      minX = x;
-    if (y < minY)
-      minY = y;
-    if (x > maxX)
-      maxX = x;
-    if (y > maxY)
-      maxY = y;
-    x = a * x1 + c * y1 + tx;
-    y = b * x1 + d * y1 + ty;
-    if (x < minX)
-      minX = x;
-    if (y < minY)
-      minY = y;
-    if (x > maxX)
-      maxX = x;
-    if (y > maxY)
-      maxY = y;
-    this.minX = minX;
-    this.minY = minY;
-    this.maxX = maxX;
-    this.maxY = maxY;
-  }
-  addRect(rect, matrix) {
-    this.addFrame(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height, matrix);
-    return this;
-  }
-  addBounds(bounds, matrix) {
-    this.addFrame(bounds.minX, bounds.minY, bounds.maxX, bounds.maxY, matrix);
-    return this;
-  }
-  addBoundsMask(mask) {
-    this.minX = this.minX > mask.minX ? this.minX : mask.minX;
-    this.minY = this.minY > mask.minY ? this.minY : mask.minY;
-    this.maxX = this.maxX < mask.maxX ? this.maxX : mask.maxX;
-    this.maxY = this.maxY < mask.maxY ? this.maxY : mask.maxY;
-  }
-  applyMatrix(matrix) {
-    const minX = this.minX;
-    const minY = this.minY;
-    const maxX = this.maxX;
-    const maxY = this.maxY;
-    const { a, b, c, d, tx, ty } = matrix.toObject();
-    let x = a * minX + c * minY + tx;
-    let y = b * minX + d * minY + ty;
-    this.minX = x;
-    this.minY = y;
-    this.maxX = x;
-    this.maxY = y;
-    x = a * maxX + c * minY + tx;
-    y = b * maxX + d * minY + ty;
-    this.minX = x < this.minX ? x : this.minX;
-    this.minY = y < this.minY ? y : this.minY;
-    this.maxX = x > this.maxX ? x : this.maxX;
-    this.maxY = y > this.maxY ? y : this.maxY;
-    x = a * minX + c * maxY + tx;
-    y = b * minX + d * maxY + ty;
-    this.minX = x < this.minX ? x : this.minX;
-    this.minY = y < this.minY ? y : this.minY;
-    this.maxX = x > this.maxX ? x : this.maxX;
-    this.maxY = y > this.maxY ? y : this.maxY;
-    x = a * maxX + c * maxY + tx;
-    y = b * maxX + d * maxY + ty;
-    this.minX = x < this.minX ? x : this.minX;
-    this.minY = y < this.minY ? y : this.minY;
-    this.maxX = x > this.maxX ? x : this.maxX;
-    this.maxY = y > this.maxY ? y : this.maxY;
-  }
-  fit(rect) {
-    if (this.minX < rect.left)
-      this.minX = rect.left;
-    if (this.maxX > rect.right)
-      this.maxX = rect.right;
-    if (this.minY < rect.top)
-      this.minY = rect.top;
-    if (this.maxY > rect.bottom)
-      this.maxY = rect.bottom;
-    return this;
-  }
-  fitBounds(left, right, top, bottom) {
-    if (this.minX < left)
-      this.minX = left;
-    if (this.maxX > right)
-      this.maxX = right;
-    if (this.minY < top)
-      this.minY = top;
-    if (this.maxY > bottom)
-      this.maxY = bottom;
-    return this;
-  }
-  pad(paddingX, paddingY = paddingX) {
-    this.minX -= paddingX;
-    this.maxX += paddingX;
-    this.minY -= paddingY;
-    this.maxY += paddingY;
-    return this;
-  }
-  ceil() {
-    this.minX = Math.floor(this.minX);
-    this.minY = Math.floor(this.minY);
-    this.maxX = Math.ceil(this.maxX);
-    this.maxY = Math.ceil(this.maxY);
-    return this;
-  }
-  clone() {
-    return new Bounds(this.minX, this.minY, this.maxX, this.maxY);
-  }
-  scale(x, y = x) {
-    this.minX *= x;
-    this.minY *= y;
-    this.maxX *= x;
-    this.maxY *= y;
-    return this;
-  }
-  addVertexData(vertexData, beginOffset, endOffset, matrix) {
-    let minX = this.minX;
-    let minY = this.minY;
-    let maxX = this.maxX;
-    let maxY = this.maxY;
-    matrix ||= this.matrix;
-    const { a, b, c, d, tx, ty } = matrix.toObject();
-    for (let i = beginOffset; i < endOffset; i += 2) {
-      const localX = vertexData[i];
-      const localY = vertexData[i + 1];
-      const x = a * localX + c * localY + tx;
-      const y = b * localX + d * localY + ty;
-      minX = x < minX ? x : minX;
-      minY = y < minY ? y : minY;
-      maxX = x > maxX ? x : maxX;
-      maxY = y > maxY ? y : maxY;
-    }
-    this.minX = minX;
-    this.minY = minY;
-    this.maxX = maxX;
-    this.maxY = maxY;
-  }
-  containsPoint(x, y) {
-    if (this.minX <= x && this.minY <= y && this.maxX >= x && this.maxY >= y) {
-      return true;
-    }
-    return false;
-  }
-}
-
-const dSegmentRE = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
-const dNumberRE = /-?\d*\.?\d+(?:e[-+]?\d+)?/gi;
-const dLengthMap = { a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0 };
-class SVGPath {
-  defines = [];
-  _calls = [];
-  _dirty = false;
-  get path2D() {
-    const path2D = new Path2D();
-    if (this._dirty) {
-      this._dirty = false;
-      this._calls.forEach((call) => {
-        path2D[call.method](...call.args);
-      });
-    }
-    return path2D;
-  }
-  constructor(d) {
-    if (typeof d === "string") {
-      this.defines = this._parseDefines(d);
-    } else {
-      this.defines = d.defines.slice();
-    }
-    this.update();
-  }
-  _addCall(method, args = [], dirty = true) {
-    this._calls.push({ method, args });
-    if (dirty) {
-      this._dirty = true;
-    }
-    return this;
-  }
-  _parseDefines(d) {
-    const defines = [];
-    d.replace(dSegmentRE, (_, rawCommand, rawArgs) => {
-      const args = rawArgs.match(dNumberRE)?.map(Number) ?? [];
-      let command = rawCommand.toLowerCase();
-      if (command === "m" && args.length > 2) {
-        defines.push({ command: rawCommand, args: args.splice(0, 2) });
-        command = "l";
-        rawCommand = rawCommand === "m" ? "l" : "L";
-      }
-      while (true) {
-        if (args.length === dLengthMap[command]) {
-          defines.push({ command: rawCommand, args });
-          return "";
-        }
-        if (args.length < dLengthMap[command])
-          throw new Error("malformed path defines");
-        defines.push({ command: rawCommand, args: args.splice(0, dLengthMap[command]) });
-      }
-    });
-    return defines;
-  }
-  update() {
-    const subpaths = [];
-    let currentSubPath = null;
-    let lastX = 0;
-    let lastY = 0;
-    for (let i = 0; i < this.defines.length; i++) {
-      const { command, args } = this.defines[i];
-      switch (command) {
-        case "M":
-          this._addCall("moveTo", [lastX = args[0], lastY = args[1]]);
-          break;
-        case "m":
-          this._addCall("moveTo", [lastX += args[0], lastY += args[1]]);
-          break;
-        case "H":
-          this._addCall("lineTo", [lastX = args[0], lastY]);
-          break;
-        case "h":
-          this._addCall("lineTo", [lastX += args[0], lastY]);
-          break;
-        case "V":
-          this._addCall("lineTo", [lastX, lastY = args[0]]);
-          break;
-        case "v":
-          this._addCall("lineTo", [lastX, lastY += args[0]]);
-          break;
-        case "L":
-          this._addCall("lineTo", [lastX = args[0], lastY = args[1]]);
-          break;
-        case "l":
-          this._addCall("lineTo", [lastX += args[0], lastY += args[1]]);
-          break;
-        case "C":
-          this._addCall("bezierCurveTo", [args[0], args[1], args[2], args[3], args[4], args[5]]);
-          lastX = args[4];
-          lastY = args[5];
-          break;
-        case "c":
-          this._addCall("bezierCurveTo", [
-            lastX + args[0],
-            lastY + args[1],
-            lastX + args[2],
-            lastY + args[3],
-            lastX + args[4],
-            lastY + args[5]
-          ]);
-          lastX += args[4];
-          lastY += args[5];
-          break;
-        case "Q":
-          this._addCall("quadraticCurveTo", [args[0], args[1], args[2], args[3]]);
-          lastX = args[2];
-          lastY = args[3];
-          break;
-        case "q":
-          this._addCall("quadraticCurveTo", [
-            lastX + args[0],
-            lastY + args[1],
-            lastX + args[2],
-            lastY + args[3]
-          ]);
-          lastX += args[2];
-          lastY += args[3];
-          break;
-        case "S":
-          this._smoothBezierCurveTo(args[0], args[1], args[2], args[3]);
-          lastX = args[2];
-          lastY = args[3];
-          break;
-        case "s":
-          this._smoothBezierCurveTo(
-            lastX + args[0],
-            lastY + args[1],
-            lastX + args[2],
-            lastY + args[3]
-          );
-          lastX += args[2];
-          lastY += args[3];
-          break;
-        case "T":
-          this._smoothQuadraticCurveTo(lastX = args[0], lastY = args[1]);
-          break;
-        case "t":
-          this._smoothQuadraticCurveTo(lastX += args[0], lastY += args[1]);
-          break;
-        case "A":
-          this._addCall("ellipticalArc", [args[0], args[1], args[2], args[3], args[4], args[5], args[6]]);
-          lastX = args[5];
-          lastY = args[6];
-          break;
-        case "a":
-          this._addCall("ellipticalArc", [args[0], args[1], args[2], args[3], args[4], args[5], args[6]]);
-          lastX += args[5];
-          lastY += args[6];
-          break;
-        case "Z":
-        case "z":
-          this._addCall("closePath");
-          if (subpaths.length > 0) {
-            currentSubPath = subpaths.pop();
-            if (currentSubPath) {
-              lastX = currentSubPath.startX;
-              lastY = currentSubPath.startY;
-            } else {
-              lastX = 0;
-              lastY = 0;
-            }
-          }
-          currentSubPath = null;
-          break;
-        default:
-          console.warn(`Unknown SVG path command: ${command}`);
-      }
-      if (command !== "Z" && command !== "z") {
-        if (currentSubPath === null) {
-          currentSubPath = { startX: lastX, startY: lastY };
-          subpaths.push(currentSubPath);
-        }
-      }
-    }
-  }
-  _getLastPoint(out) {
-    let index = this._calls.length - 1;
-    let call = this._calls[index];
-    if (!call) {
-      out.x = 0;
-      out.y = 0;
-      return out;
-    }
-    while (call.method === "closePath") {
-      index--;
-      if (index < 0) {
-        out.x = 0;
-        out.y = 0;
-        return out;
-      }
-      call = this._calls[index];
-    }
-    switch (call.method) {
-      case "moveTo":
-      case "lineTo":
-        out.set(call.args[0], call.args[1]);
-        break;
-      case "quadraticCurveTo":
-        out.set(call.args[2], call.args[3]);
-        break;
-      case "bezierCurveTo":
-        out.set(call.args[4], call.args[5]);
-        break;
-      case "arc":
-      case "ellipticalArc":
-        out.set(call.args[5], call.args[6]);
-        break;
-      case "addPath":
-        call.args[0]._getLastPoint(out);
-        break;
-    }
-    return out;
-  }
-  _smoothBezierCurveTo(cp2x, cp2y, x, y, smoothness) {
-    const last = this._calls[this._calls.length - 1];
-    const lastPoint = this._getLastPoint(Point.shared);
-    let cp1x;
-    let cp1y;
-    if (!last || last.method !== "bezierCurveTo") {
-      cp1x = lastPoint.x;
-      cp1y = lastPoint.y;
-    } else {
-      cp1x = last.args[2];
-      cp1y = last.args[3];
-      const currentX = lastPoint.x;
-      const currentY = lastPoint.y;
-      cp1x = currentX + (currentX - cp1x);
-      cp1y = currentY + (currentY - cp1y);
-    }
-    this._addCall("bezierCurveTo", [cp1x, cp1y, cp2x, cp2y, x, y, smoothness]);
-    return this;
-  }
-  _smoothQuadraticCurveTo(x, y, smoothness) {
-    const last = this._calls[this._calls.length - 1];
-    const lastPoint = this._getLastPoint(Point.shared);
-    let cpx1;
-    let cpy1;
-    if (!last || last.method !== "quadraticCurveTo") {
-      cpx1 = lastPoint.x;
-      cpy1 = lastPoint.y;
-    } else {
-      cpx1 = last.args[0];
-      cpy1 = last.args[1];
-      const currentX = lastPoint.x;
-      const currentY = lastPoint.y;
-      cpx1 = currentX + (currentX - cpx1);
-      cpy1 = currentY + (currentY - cpy1);
-    }
-    this._addCall("quadraticCurveTo", [cpx1, cpy1, x, y, smoothness]);
-    return this;
-  }
-}
-
-const tempRectangle = new Rectangle();
-class Path2D {
-  _polygon;
-  _bounds = new Bounds();
-  shapes = [];
-  get bounds() {
-    const bounds = this._bounds;
-    bounds.clear();
-    const shapes = this.shapes;
-    for (let i = 0; i < shapes.length; i++) {
-      const shape = shapes[i];
-      const boundsRect = shape.shape.getBounds(tempRectangle);
-      if (shape.transform) {
-        bounds.addRect(boundsRect, shape.transform);
-      } else {
-        bounds.addRect(boundsRect);
-      }
-    }
-    return bounds;
-  }
-  startPolygon(x, y) {
-    if (this._polygon) {
-      this.endPolygon();
-    }
-    this._polygon = new Polygon([x, y]);
-    return this;
-  }
-  endPolygon(closePath = false) {
-    const polygon = this._polygon;
-    if (polygon && polygon.points.length > 2) {
-      polygon.closed = closePath;
-      this.shapes.push({
-        shape: polygon
-      });
-    }
-    this._polygon = void 0;
-    return this;
-  }
-  ensurePolygon(start = true) {
-    if (this._polygon)
-      return;
-    this._polygon = new Polygon();
-    if (start) {
-      const lastShape = this.shapes[this.shapes.length - 1];
-      if (lastShape) {
-        let lx = lastShape.shape.x;
-        let ly = lastShape.shape.y;
-        if (!lastShape.transform?.isIdentity()) {
-          const t = lastShape.transform.toObject();
-          const tempX = lx;
-          lx = t.a * lx + t.c * ly + t.tx;
-          ly = t.b * tempX + t.d * ly + t.ty;
-        }
-        this._polygon.points.push(lx, ly);
-      } else {
-        this._polygon.points.push(0, 0);
-      }
-    }
-  }
-  beginPath() {
-    return this;
-  }
-  moveTo(x, y) {
-    this.startPolygon(x, y);
-    return this;
-  }
-  lineTo(x, y) {
-    this.ensurePolygon();
-    const points = this._polygon.points;
-    const fromX = points[points.length - 2];
-    const fromY = points[points.length - 1];
-    if (fromX !== x || fromY !== y) {
-      points.push(x, y);
-    }
-    return this;
-  }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, smoothness) {
-    this.ensurePolygon();
-    buildAdaptiveBezier(
-      this._polygon.points,
-      this._polygon.lastX,
-      this._polygon.lastY,
-      cp1x,
-      cp1y,
-      cp2x,
-      cp2y,
-      x,
-      y,
-      smoothness
-    );
-    return this;
-  }
-  quadraticCurveTo(cp1x, cp1y, x, y, smoothing) {
-    this.ensurePolygon();
-    buildAdaptiveQuadratic(
-      this._polygon.points,
-      this._polygon.lastX,
-      this._polygon.lastY,
-      cp1x,
-      cp1y,
-      x,
-      y,
-      smoothing
-    );
-    return this;
-  }
-  rect(x, y, width, height, transform) {
-    this.addShape(new Rectangle(x, y, width, height), transform);
-  }
-  roundRect(x, y, width, height, radii, transform) {
-    this.addShape(new RoundedRectangle(x, y, width, height, radii), transform);
-  }
-  ellipse(x, y, radiusX, radiusY, transform) {
-    this.addShape(new Ellipse(x, y, radiusX, radiusY), transform);
-  }
-  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.ensurePolygon(false);
-    const points = this._polygon.points;
-    buildArc(points, x, y, radius, startAngle, endAngle, counterclockwise);
-    return this;
-  }
-  ellipticalArc(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) {
-    buildArcToSvg(
-      this._polygon.points,
-      this._polygon.lastX,
-      this._polygon.lastY,
-      x,
-      y,
-      rx,
-      ry,
-      xAxisRotation,
-      largeArcFlag,
-      sweepFlag
-    );
-    return this;
-  }
-  poly(points, close = false, transform) {
-    const polygon = new Polygon(points);
-    polygon.closed = close;
-    this.addShape(polygon, transform);
+  rotate(rad) {
+    this._rotate = rad;
+    this._updateSkew();
+    this._requestUpdateArray();
     return this;
   }
-  addShape(shape, transform) {
-    this.endPolygon();
-    this.shapes.push({ shape, transform });
-    return this;
+  rotateX(x) {
+    return this.scaleY(this._rotateToScale(x));
   }
-  addPath(path2D) {
-    this.endPolygon();
-    path2D.endPolygon();
-    path2D.shapes.forEach((shape) => {
-      this.shapes.push(shape);
-    });
-    return this;
+  rotateY(y) {
+    return this.scaleX(this._rotateToScale(y));
   }
-  addSVGPath(d) {
-    this.addPath(new SVGPath(d).path2D);
-    return this;
+  rotateZ(z) {
+    return this.rotate(z);
   }
-  closePath() {
-    this.endPolygon(true);
+  rotate3d(x, y, z, rad) {
+    const [rx, ry, rz] = this._rotate3d(x, y, z, rad);
+    rx && this.rotateX(rx);
+    ry && this.rotateY(ry);
+    rz && this.rotateZ(rz);
     return this;
   }
-  buildOutline(points = []) {
-    this.shapes.forEach((item) => item.shape.buildOutline(points));
-    return points;
-  }
-  buildGeometry(vertices = [], indices = []) {
-    this.shapes.forEach((item) => item.shape.buildGeometry(vertices, indices));
-    return {
-      vertices,
-      indices
-    };
+  _rotateToScale(rad) {
+    const val = rad / PI_2;
+    return val <= 0.5 ? val * -4 + 1 : (val - 1) * 4 + 1;
   }
-}
-
-class Matrix2 extends Matrix {
-  constructor(array) {
-    super(2, 2, array);
+  _rotate3d(x, y, z, rad) {
+    if (x === 1 && y === 0 && z === 0) {
+      return [rad, 0, 0];
+    } else if (x === 0 && y === 1 && z === 0) {
+      return [0, rad, 0];
+    } else if (x === 0 && y === 0) {
+      return [0, 0, rad];
+    } else {
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+      const m11 = cos + x * x * (1 - cos);
+      const m12 = x * y * (1 - cos) - z * sin;
+      const m13 = x * z * (1 - cos) + y * sin;
+      const m22 = cos + y * y * (1 - cos);
+      const m23 = y * z * (1 - cos) - x * sin;
+      const m33 = cos + z * z * (1 - cos);
+      const rotateX = -Math.atan2(-m23, m22);
+      const rotateY = -Math.atan2(m13, Math.sqrt(m23 * m23 + m33 * m33));
+      const rotateZ = -Math.atan2(-m12, m11);
+      return [rotateX, rotateY, rotateZ];
+    }
   }
-}
-
-class Matrix4 extends Matrix {
-  constructor(array) {
-    super(4, 4, array);
+  applyToPoint(x, y) {
+    const { a, c, tx, b, d, ty } = this.toObject();
+    return [
+      a * x + c * y + tx,
+      b * x + d * y + ty
+    ];
   }
-}
-
-class Projection2D extends Matrix3 {
-  constructor(_x = 0, _y = 0, _width = 0, _height = 0, _flipY = false) {
-    super();
-    this._x = _x;
-    this._y = _y;
-    this._width = _width;
-    this._height = _height;
-    this._flipY = _flipY;
-    this._performUpdateArray();
+  inverse() {
+    return this.clone().invert();
   }
-  flipY(flipY) {
-    if (this._flipY !== flipY) {
-      this._flipY = flipY;
+  update() {
+    let updated = false;
+    if (this._needsUpdateArray) {
+      this._needsUpdateArray = false;
       this._performUpdateArray();
+      updated = true;
     }
-    return this;
-  }
-  translate(x, y) {
-    if (this._x !== x || this._y !== y) {
-      this._x = x;
-      this._y = y;
-      this._performUpdateArray();
+    if (this._needsUpdateFields) {
+      this._needsUpdateFields = false;
+      this._performUpdateFields();
+      updated = true;
     }
-    return this;
+    return updated;
   }
-  resize(width, height) {
-    if (this._width !== width || this._height !== height) {
-      this._width = width;
-      this._height = height;
-      this._performUpdateArray();
-    }
-    return this;
+  isIdentity() {
+    const { a, b, c, d, tx, ty } = this.toObject();
+    return a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0;
   }
-  _performUpdateArray() {
-    const width = this._width;
-    const height = this._height;
-    if (!width || !height) {
-      return;
-    }
-    const x = this._x;
-    const y = this._y;
-    const sign = !this._flipY ? 1 : -1;
-    const a = 1 / width * 2;
-    const d = sign * (1 / height * 2);
-    const tx = -1 - x * a;
-    const ty = -sign - y * d;
-    this.set([
-      a,
-      0,
-      tx,
-      0,
-      d,
-      ty,
-      0,
-      0,
-      1
-    ]);
+  toObject() {
+    const [a, c, tx, b, d, ty, , , tz] = this._array;
+    return { a, c, tx, b, d, ty, tz };
   }
 }
 
@@ -3998,14 +1759,14 @@ class Vector4 extends Vector {
   }
 }
 
-var __defProp$x = Object.defineProperty;
+var __defProp$w = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
+var __decorateClass$w = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 var InternalMode = /* @__PURE__ */ ((InternalMode2) => {
@@ -4403,22 +2164,22 @@ let Node = class extends Reference {
     return node;
   }
 };
-__decorateClass$x([
+__decorateClass$w([
   property()
 ], Node.prototype, "name", 2);
-__decorateClass$x([
+__decorateClass$w([
   property()
 ], Node.prototype, "mask", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: "visible" })
 ], Node.prototype, "visibility", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: 0 })
 ], Node.prototype, "visibleDelay", 2);
-__decorateClass$x([
+__decorateClass$w([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Node.prototype, "visibleDuration", 2);
-Node = __decorateClass$x([
+Node = __decorateClass$w([
   customNode("Node")
 ], Node);
 
@@ -4448,14 +2209,14 @@ class RenderStack {
   }
 }
 
-var __defProp$w = Object.defineProperty;
+var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
+var __decorateClass$v = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 let Timer = class extends Node {
@@ -4497,29 +2258,29 @@ let Timer = class extends Node {
     this.addTime(delta);
   }
 };
-__decorateClass$w([
+__decorateClass$v([
   property({ default: 0 })
 ], Timer.prototype, "start", 2);
-__decorateClass$w([
+__decorateClass$v([
   property({ default: 0 })
 ], Timer.prototype, "current", 2);
-__decorateClass$w([
+__decorateClass$v([
   property({ default: Number.MAX_SAFE_INTEGER })
 ], Timer.prototype, "end", 2);
-__decorateClass$w([
+__decorateClass$v([
   property({ default: false })
 ], Timer.prototype, "loop", 2);
-Timer = __decorateClass$w([
+Timer = __decorateClass$v([
   customNode("Timer")
 ], Timer);
 
-var __defProp$v = Object.defineProperty;
-var __decorateClass$v = (decorators, target, key, kind) => {
+var __defProp$u = Object.defineProperty;
+var __decorateClass$u = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$v(target, key, result);
+  if (result) __defProp$u(target, key, result);
   return result;
 };
 class Texture extends Resource {
@@ -4645,22 +2406,22 @@ class Texture extends Resource {
     }
   }
 }
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty()
 ], Texture.prototype, "source");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "width");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: 0 })
 ], Texture.prototype, "height");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: "linear" })
 ], Texture.prototype, "filterMode");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: "clamp_to_edge" })
 ], Texture.prototype, "wrapMode");
-__decorateClass$v([
+__decorateClass$u([
   protectedProperty({ default: 1 })
 ], Texture.prototype, "pixelRatio");
 
@@ -4796,13 +2557,13 @@ class PixelsTexture extends Texture {
   }
 }
 
-var __defProp$u = Object.defineProperty;
-var __decorateClass$u = (decorators, target, key, kind) => {
+var __defProp$t = Object.defineProperty;
+var __decorateClass$t = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$u(target, key, result);
+  if (result) __defProp$t(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5045,10 +2806,10 @@ const _VideoTexture = class _VideoTexture extends Texture {
     }
   }
 };
-__decorateClass$u([
+__decorateClass$t([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$u([
+__decorateClass$t([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5057,14 +2818,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$t = Object.defineProperty;
+var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
+var __decorateClass$s = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 let Viewport = class extends Node {
@@ -5185,19 +2946,19 @@ let Viewport = class extends Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$t([
+__decorateClass$s([
   property({ default: 0 })
 ], Viewport.prototype, "x", 2);
-__decorateClass$t([
+__decorateClass$s([
   property({ default: 0 })
 ], Viewport.prototype, "y", 2);
-__decorateClass$t([
+__decorateClass$s([
   property({ default: 0 })
 ], Viewport.prototype, "width", 2);
-__decorateClass$t([
+__decorateClass$s([
   property({ default: 0 })
 ], Viewport.prototype, "height", 2);
-Viewport = __decorateClass$t([
+Viewport = __decorateClass$s([
   customNode({
     tag: "Viewport",
     renderable: true
@@ -5616,30 +3377,7 @@ class ColorTexture extends Texture {
   }
 }
 
-var __defProp$s = Object.defineProperty;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$s(target, key, result);
-  return result;
-};
-function proxy$1() {
-  return function(target, method) {
-    Object.defineProperty(target.constructor.prototype, method, {
-      get() {
-        return (...args) => {
-          this._path2D[method](...args);
-          return this;
-        };
-      },
-      configurable: true,
-      enumerable: true
-    });
-  };
-}
-class CanvasContext {
+class CanvasContext extends Path2D {
   textureTransform;
   fillStyle;
   strokeStyle;
@@ -5647,7 +3385,6 @@ class CanvasContext {
   lineJoin;
   lineWidth;
   miterLimit;
-  _path2D = new Path2D();
   _defaultStyle = Texture.EMPTY;
   _stroked = [];
   _filled = [];
@@ -5660,10 +3397,9 @@ class CanvasContext {
         texture = new ColorTexture(this.strokeStyle);
       }
     }
-    this._path2D.endPolygon();
-    if (this._path2D.shapes.length) {
+    if (this.curves.length) {
       this._stroked.push({
-        shapes: this._path2D.shapes.slice(),
+        shapes: this.curves.slice(),
         texture,
         textureTransform: this.textureTransform,
         style: {
@@ -5674,7 +3410,7 @@ class CanvasContext {
           miterLimit: this.miterLimit ?? 10
         }
       });
-      this._path2D.shapes.length = 0;
+      this.curves.length = 0;
     }
   }
   fillRect(x, y, width, height) {
@@ -5693,11 +3429,11 @@ class CanvasContext {
       }
     }
     this._filled.push({
-      shapes: this._path2D.shapes.slice(),
+      shapes: this.curves.slice(),
       texture,
       textureTransform: this.textureTransform
     });
-    this._path2D.shapes.length = 0;
+    this.curves.length = 0;
   }
   reset() {
     this.strokeStyle = void 0;
@@ -5707,8 +3443,7 @@ class CanvasContext {
     this.lineJoin = void 0;
     this.lineWidth = void 0;
     this.miterLimit = void 0;
-    this._path2D.endPolygon();
-    this._path2D.shapes.length = 0;
+    this.curves.length = 0;
     this._stroked.length = 0;
     this._filled.length = 0;
   }
@@ -5749,14 +3484,20 @@ class CanvasContext {
       texture = void 0;
     };
     for (let len = this._stroked.length, i = 0; i < len; i++) {
+      startUv = vertices.length;
       const graphics = this._stroked[i];
       texture ??= graphics.texture;
       const points = [];
       for (let len2 = graphics.shapes.length, i2 = 0; i2 < len2; i2++) {
-        graphics.shapes[i2].shape.buildOutline(points);
+        graphics.shapes[i2].getAdaptivePointArray(points);
       }
-      startUv = vertices.length;
-      buildLine(points, graphics.style, false, true, vertices, 0, 0, indices);
+      strokeTriangulate(points, {
+        vertices,
+        indices,
+        lineStyle: graphics.style,
+        flipAlignment: false,
+        closed: true
+      });
       this.buildUvs(startUv, vertices, uvs, graphics.texture, graphics.textureTransform);
       push("stroke");
     }
@@ -5768,7 +3509,10 @@ class CanvasContext {
       }
       startUv = vertices.length;
       for (let len2 = graphics.shapes.length, i2 = 0; i2 < len2; i2++) {
-        graphics.shapes[i2].shape.buildGeometry(vertices, indices);
+        graphics.shapes[i2].fillTriangulate({
+          vertices,
+          indices
+        });
       }
       this.buildUvs(startUv, vertices, uvs, graphics.texture, graphics.textureTransform);
     }
@@ -5778,48 +3522,6 @@ class CanvasContext {
     return batchables;
   }
 }
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "moveTo");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "lineTo");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "bezierCurveTo");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "quadraticCurveTo");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "ellipticalArc");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "rect");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "roundRect");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "ellipse");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "arc");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "poly");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "addShape");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "addPath");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "addSvgPath");
-__decorateClass$s([
-  proxy$1()
-], CanvasContext.prototype, "closePath");
 
 class Loader {
 }
@@ -6256,61 +3958,22 @@ function getComputedFilterColorMatrix() {
   return m;
 }
 
-class Style2DOffsetModule extends Style2DModule {
-  install(Style2D) {
-    defineProperty(Style2D, "offsetPath");
-    defineProperty(Style2D, "offsetAnchor");
-    defineProperty(Style2D, "offsetDistance");
-    defineProperty(Style2D, "offsetPosition");
-    Style2D.prototype.getComputedOffset = getComputedOffset;
-  }
-}
-function getComputedOffset() {
-  const offsetPath = this.offsetPath;
-  if (!offsetPath)
-    return;
-  if (offsetPath.startsWith("path")) {
-    const path = offsetPath.match(/path\(["'](.+)["']\)/)?.[1];
-    if (!path)
-      return;
-    path.split(" ").forEach((arg) => {
-    });
-  } else if (offsetPath.startsWith("ray")) ; else if (offsetPath.startsWith("url")) ; else if (offsetPath.startsWith("circle")) ; else if (offsetPath.startsWith("ellipse")) ; else if (offsetPath.startsWith("insett")) ; else if (offsetPath.startsWith("polygon")) ; else if (offsetPath.startsWith("rect")) ; else if (offsetPath.startsWith("xywh")) ;
-}
-
 class Style2DTextModule extends Style2DModule {
   install(Style2D) {
-    defineProperty(Style2D, "color", { default: "#000000" });
-    defineProperty(Style2D, "fontSize", { default: 14 });
-    defineProperty(Style2D, "fontWeight", { default: "normal" });
-    defineProperty(Style2D, "fontFamily", { default: "sans-serif" });
-    defineProperty(Style2D, "fontStyle", { default: "normal" });
-    defineProperty(Style2D, "fontKerning", { default: "normal" });
-    defineProperty(Style2D, "textWrap", { default: "wrap" });
-    defineProperty(Style2D, "textAlign", { default: "start" });
-    defineProperty(Style2D, "verticalAlign", { default: "middle" });
-    defineProperty(Style2D, "textTransform", { default: "none" });
-    defineProperty(Style2D, "textDecoration", { default: null });
-    defineProperty(Style2D, "textStrokeWidth", { default: 0 });
-    defineProperty(Style2D, "textStrokeColor", { default: "#000000" });
+    const style = getDefaultTextStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     defineProperty(Style2D, "direction", { default: "inherit" });
-    defineProperty(Style2D, "lineHeight", { default: 1 });
-    defineProperty(Style2D, "letterSpacing", { default: 0 });
-    defineProperty(Style2D, "writingMode", { default: "horizontal-tb" });
   }
 }
 
 class Style2DTransformModule extends Style2DModule {
   install(Style2D) {
-    defineProperty(Style2D, "left", { default: 0 });
-    defineProperty(Style2D, "top", { default: 0 });
-    defineProperty(Style2D, "width", { default: 0 });
-    defineProperty(Style2D, "height", { default: 0 });
-    defineProperty(Style2D, "rotate", { default: 0 });
-    defineProperty(Style2D, "scaleX", { default: 1 });
-    defineProperty(Style2D, "scaleY", { default: 1 });
-    defineProperty(Style2D, "transform");
-    defineProperty(Style2D, "transformOrigin", { default: "center" });
+    const style = getDefaultTransformStyle();
+    for (const key in style) {
+      defineProperty(Style2D, key, { default: style[key] });
+    }
     Style2D.prototype.getComputedTransform = getComputedTransform;
     Style2D.prototype.getComputedTransformOrigin = getComputedTransformOrigin;
   }
@@ -6319,7 +3982,11 @@ function getComputedTransform() {
   const transform = new Transform2D();
   const transform3d = new Transform2D(false);
   const transform2d = new Transform2D(false).scale(this.scaleX, this.scaleY).translate(this.left, this.top).rotate(this.rotate * DEG_TO_RAD);
-  parseCssFunctions(this.transform ?? "", { width: this.width, height: this.height }).forEach(({ name, args }) => {
+  let _transform = this.transform;
+  if (!_transform || _transform === "none") {
+    _transform = "";
+  }
+  parseCssFunctions(_transform, { width: this.width, height: this.height }).forEach(({ name, args }) => {
     const values = args.map((arg) => arg.normalizedIntValue);
     transform.identity();
     switch (name) {
@@ -6430,15 +4097,6 @@ function getComputedTransformOrigin() {
   });
 }
 
-const modules = {
-  __proto__: null,
-  Style2DBackgroundModule: Style2DBackgroundModule,
-  Style2DFilterModule: Style2DFilterModule,
-  Style2DOffsetModule: Style2DOffsetModule,
-  Style2DTextModule: Style2DTextModule,
-  Style2DTransformModule: Style2DTransformModule
-};
-
 var __defProp$r = Object.defineProperty;
 var __decorateClass$r = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -6492,7 +4150,12 @@ __decorateClass$r([
 __decorateClass$r([
   property({ default: "visible" })
 ], Style2D.prototype, "overflow");
-Object.values(modules).forEach((Module) => {
+[
+  Style2DBackgroundModule,
+  Style2DFilterModule,
+  Style2DTextModule,
+  Style2DTransformModule
+].forEach((Module) => {
   new Module().install(Style2D);
 });
 
@@ -7061,7 +4724,7 @@ let Node2D = class extends CanvasItem {
       width = newWidth;
       height = newHeight;
     }
-    return new Rectangle(left, top, width, height);
+    return new BoundingBox(left, top, width, height);
   }
   _onUpdateStyleProperty(key, value, oldValue) {
     super._onUpdateStyleProperty(key, value, oldValue);
@@ -7551,6 +5214,9 @@ var __decorateClass$k = (decorators, target, key, kind) => {
 const textStyles = new Set(Object.keys(textDefaultStyle));
 let Text2D = class extends Node2D {
   effects;
+  measureDom;
+  fonts;
+  text = new Text();
   texture = new Texture(document.createElement("canvas"));
   _subTextsCount = 0;
   constructor(options) {
@@ -7561,6 +5227,9 @@ let Text2D = class extends Node2D {
     super._onUpdateProperty(key, value, oldValue);
     switch (key) {
       case "content":
+      case "effects":
+      case "measureDom":
+      case "fonts":
       case "split":
         this._updateSplit();
         this.requestRedraw();
@@ -7572,6 +5241,13 @@ let Text2D = class extends Node2D {
       });
     }
   }
+  _updateText() {
+    this.text.style = this.style.toJSON();
+    this.text.content = this.content ?? "";
+    this.text.effects = this.effects;
+    this.text.fonts = this.fonts;
+    this.text.measureDom = this.measureDom;
+  }
   _onUpdateStyleProperty(key, value, oldValue) {
     if (key === "height")
       return;
@@ -7615,13 +5291,8 @@ let Text2D = class extends Node2D {
     }
   }
   measure() {
-    const result = measureText({
-      content: this.content,
-      style: {
-        ...this.style.toJSON(),
-        height: void 0
-      }
-    });
+    this._updateText();
+    const result = this.text.measure();
     if (!this.style.width)
       this.style.width = result.boundingBox.width;
     if (!this.style.height)
@@ -7665,12 +5336,10 @@ let Text2D = class extends Node2D {
       if (onText2DRender) {
         onText2DRender();
       } else {
-        renderText({
-          view: this.texture.source,
+        this._updateText();
+        this.text.render({
           pixelRatio: this.pixelRatio,
-          content: this.content,
-          effects: this.effects,
-          style: this.style.toJSON()
+          view: this.texture.source
         });
       }
       this.texture.requestUpload();
@@ -7695,6 +5364,12 @@ __decorateClass$k([
 __decorateClass$k([
   property()
 ], Text2D.prototype, "effects", 2);
+__decorateClass$k([
+  protectedProperty()
+], Text2D.prototype, "measureDom", 2);
+__decorateClass$k([
+  protectedProperty()
+], Text2D.prototype, "fonts", 2);
 Text2D = __decorateClass$k([
   customNode("Text2D")
 ], Text2D);
@@ -13718,7 +11393,8 @@ class Engine extends SceneTree {
     } else {
       this.resize(
         width || this.gl.drawingBufferWidth || this.view?.clientWidth || 200,
-        height || this.gl.drawingBufferHeight || this.view?.clientHeight || 200
+        height || this.gl.drawingBufferHeight || this.view?.clientHeight || 200,
+        !view
       );
     }
   }
@@ -13853,4 +11529,4 @@ async function render(options) {
   });
 }
 
-export { Animation2D, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, Bounds, CanvasContext, CanvasItem, Circle, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, Ellipse, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InternalMode, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, Path2D, PixelateEffect, PixelsTexture, Point, PointerInputEvent, Polygon, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Rectangle, Reference, RenderStack, Renderer, Resource, RoundedRectangle, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SVGPath, SceneTree, Star, Style2D, Style2DBackgroundModule, Style2DFilterModule, Style2DModule, Style2DOffsetModule, Style2DTextModule, Style2DTransformModule, Text2D, TextLoader, Texture, TextureLoader, Ticker, TiltShiftEffect, Timer, Transform2D, Triangle, TwistEffect, UIInputEvent, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, _Object, assets, buildAdaptiveBezier, buildAdaptiveQuadratic, buildArc, buildArcTo, buildArcToSvg, buildCircle, buildLine, buildPolygon, buildRectangle, buildTriangle, clamp, closePointEps, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curveEps, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, squaredDistanceToLineSegment, timingFunctions, uid };
+export { Animation2D, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BlurEffect, CanvasContext, CanvasItem, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, DEG_TO_RAD, DEVICE_PIXEL_RATIO, Effect, EffectMaterial, EmbossEffect, Engine, EventEmitter, FontLoader, Geometry, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, Image2DResource, ImageTexture, IndexBuffer, Input, InternalMode, JsonLoader, KawaseEffect, LeftEraseEffect, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Reference, RenderStack, Renderer, Resource, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, SceneTree, Style2D, Style2DBackgroundModule, Style2DFilterModule, Style2DModule, Style2DTextModule, Style2DTransformModule, Text2D, TextLoader, Texture, TextureLoader, Ticker, TiltShiftEffect, Timer, Transform2D, TwistEffect, UIInputEvent, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, _Object, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };