modern-canvas 0.4.51 → 0.4.53

package/dist/index.mjs

@@ -1,274 +1,10 @@
+import { defineProperty, property, getDeclarations, parseColor, RawWeakMap as RawWeakMap$1, isGradient, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-import { parseColor, isGradient, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
 import { Path2D, Path2DSet, svgToDOM, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
 import { Text, textDefaultStyle } from 'modern-text';
 import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
 
-const PI = Math.PI;
-const PI_2 = PI * 2;
-let UID$1 = 0;
-function uid(object) {
-  return object?.__SPECTOR_Object_TAG?.id ?? ++UID$1;
-}
-function isPow2(v) {
-  return !(v & v - 1) && !!v;
-}
-
-const FUNCTIONS_RE = /([\w-]+)\((.+?)\)/g;
-const ARGS_RE = /[^,]+/g;
-const ARG_RE = /([-e.\d]+)(.*)/;
-function getDefaultCssPropertyValue(value) {
-  if (Array.isArray(value)) {
-    return value.map((func) => {
-      return {
-        name: func.name,
-        args: func.args.map((arg) => {
-          return {
-            ...arg,
-            normalizedIntValue: arg.normalizedDefaultIntValue
-          };
-        })
-      };
-    });
-  } else {
-    return {
-      ...value,
-      normalizedIntValue: value.normalizedDefaultIntValue
-    };
-  }
-}
-function parseCssProperty(name, propertyValue, context = {}) {
-  const functions = parseCssFunctions(propertyValue, context);
-  return functions.length ? functions : parseArgument(name, propertyValue, context);
-}
-function parseCssFunctions(propertyValue, context = {}) {
-  const functions = [];
-  let match;
-  while ((match = FUNCTIONS_RE.exec(propertyValue)) !== null) {
-    const [, name, value] = match;
-    if (name) {
-      functions.push({
-        name,
-        args: parseArguments(name, value, context)
-      });
-    }
-  }
-  return functions;
-}
-function parseArguments(name, value, context = {}) {
-  const values = [];
-  let match;
-  let i = 0;
-  while ((match = ARGS_RE.exec(value)) !== null) {
-    values.push(
-      parseArgument(name, match[0], {
-        ...context,
-        index: i++
-      })
-    );
-  }
-  return values;
-}
-function parseArgument(name, value, context = {}) {
-  const { width = 1, height = 1, index = 0 } = context;
-  const matched = value.match(ARG_RE);
-  const result = {
-    unit: matched?.[2] ?? null,
-    value,
-    intValue: Number(matched?.[1]),
-    normalizedIntValue: 0,
-    normalizedDefaultIntValue: 0
-  };
-  switch (name) {
-    case "scale":
-    case "scaleX":
-    case "scaleY":
-    case "scale3d":
-      result.normalizedDefaultIntValue = 1;
-      break;
-  }
-  switch (result.unit) {
-    case "%":
-      result.normalizedIntValue = result.intValue / 100;
-      break;
-    case "rad":
-      result.normalizedIntValue = result.intValue / PI_2;
-      break;
-    case "deg":
-      result.normalizedIntValue = result.intValue / 360;
-      break;
-    case "px":
-      switch (index) {
-        case 0:
-          result.normalizedIntValue = result.intValue / width;
-          break;
-        case 1:
-          result.normalizedIntValue = result.intValue / height;
-          break;
-      }
-      break;
-    case "turn":
-    case "em":
-    // div fontSize
-    case "rem":
-    // div fontSize
-    default:
-      result.normalizedIntValue = result.intValue;
-      break;
-  }
-  return result;
-}
-
-const SUPPORTS_WEBGL2 = "WebGL2RenderingContext" in globalThis;
-const SUPPORTS_IMAGE_BITMAP = "ImageBitmap" in globalThis;
-const SUPPORTS_RESIZE_OBSERVER = "ResizeObserver" in globalThis;
-const SUPPORTS_POINTER_EVENTS = "PointerEvent" in globalThis;
-const SUPPORTS_WHEEL_EVENTS = "WheelEvent" in globalThis;
-const SUPPORTS_MOUSE_EVENTS = "MouseEvent" in globalThis;
-const SUPPORTS_TOUCH_EVENTS = "ontouchstart" in globalThis;
-const SUPPORTS_CLICK_EVENTS = "onclick" in globalThis;
-const SUPPORTS_CREATE_IMAGE_BITMAP = "createImageBitmap" in globalThis;
-const SUPPORTS_AUDIO_CONTEXT = "AudioContext" in globalThis;
-const SUPPORTS_WEBKIT_AUDIO_CONTEXT = "webkitAudioContext" in globalThis;
-const SUPPORTS_OFFLINE_AUDIO_CONTEXT = "OfflineAudioContext" in globalThis;
-const SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT = "webkitOfflineAudioContext" in globalThis;
-const SUPPORTS_WEB_AUDIO = SUPPORTS_AUDIO_CONTEXT || SUPPORTS_WEBKIT_AUDIO_CONTEXT;
-const IN_BROWSER = typeof window !== "undefined";
-const DEVICE_PIXEL_RATIO = globalThis.devicePixelRatio || 1;
-const isElementNode = (node) => node !== null && typeof node === "object" && node.nodeType === 1;
-const isVideoElement = (node) => isElementNode(node) && node.tagName === "VIDEO";
-const isImageElement = (node) => isElementNode(node) && node.tagName === "IMG";
-function isCanvasElement(node) {
-  return typeof node === "object" && node !== null && node.nodeType === 1 && node.tagName === "CANVAS";
-}
-function isWebgl2(gl) {
-  return SUPPORTS_WEBGL2 && gl instanceof globalThis.WebGL2RenderingContext;
-}
-function createHTMLCanvas() {
-  if (IN_BROWSER) {
-    return globalThis.document.createElement("canvas");
-  }
-  return void 0;
-}
-function determineCrossOrigin(url, loc = globalThis.location) {
-  if (url.startsWith("data:")) {
-    return "";
-  }
-  loc = loc || globalThis.location;
-  const parsedUrl = new URL(url, document.baseURI);
-  if (parsedUrl.hostname !== loc.hostname || parsedUrl.port !== loc.port || parsedUrl.protocol !== loc.protocol) {
-    return "anonymous";
-  }
-  return "";
-}
-function crossOrigin(element, url, crossorigin) {
-  if (crossorigin === null && !url.startsWith("data:")) {
-    element.crossOrigin = determineCrossOrigin(url);
-  } else if (crossorigin !== false) {
-    element.crossOrigin = typeof crossorigin === "string" ? crossorigin : "anonymous";
-  }
-}
-
-class RawWeakMap {
-  _map = /* @__PURE__ */ new WeakMap();
-  // fix: vue reactive object
-  _toRaw(value) {
-    if (value && typeof value === "object") {
-      const raw = value.__v_raw;
-      if (raw) {
-        value = this._toRaw(raw);
-      }
-    }
-    return value;
-  }
-  /**
-   * Removes the specified element from the WeakMap.
-   * @returns true if the element was successfully removed, or false if it was not present.
-   */
-  delete(key) {
-    return this._map.delete(this._toRaw(key));
-  }
-  /**
-   * @returns a specified element.
-   */
-  get(key) {
-    return this._map.get(this._toRaw(key));
-  }
-  /**
-   * @returns a boolean indicating whether an element with the specified key exists or not.
-   */
-  has(key) {
-    return this._map.has(this._toRaw(key));
-  }
-  /**
-   * Adds a new element with a specified key and value.
-   * @param key Must be an object or symbol.
-   */
-  set(key, value) {
-    this._map.set(this._toRaw(key), this._toRaw(value));
-    return this;
-  }
-}
-
-const declarationMap = new RawWeakMap();
-function getDeclarations(constructor) {
-  let declarations = declarationMap.get(constructor);
-  if (!declarations) {
-    const superConstructor = Object.getPrototypeOf(constructor);
-    declarations = new Map(superConstructor ? getDeclarations(superConstructor) : void 0);
-    declarationMap.set(constructor, declarations);
-  }
-  return declarations;
-}
-function defineProperty(constructor, name, declaration = {}) {
-  getDeclarations(constructor).set(name, declaration);
-  const {
-    default: defaultValue,
-    alias
-  } = declaration;
-  let descriptor = Object.getOwnPropertyDescriptor(constructor.prototype, name);
-  if (!descriptor) {
-    const key = alias ?? Symbol.for(String(name));
-    descriptor = {
-      get() {
-        return this[key];
-      },
-      set(v) {
-        this[key] = v;
-      }
-    };
-  }
-  const getDefaultValue = () => typeof defaultValue === "function" ? defaultValue() : defaultValue;
-  Object.defineProperty(constructor.prototype, name, {
-    get() {
-      let value = descriptor.get?.call(this);
-      if (value === void 0) {
-        value = getDefaultValue();
-        if (value !== void 0) {
-          descriptor.set?.call(this, value);
-        }
-      }
-      return value;
-    },
-    set(value) {
-      let oldValue = descriptor.get?.call(this);
-      if (oldValue === void 0) {
-        oldValue = getDefaultValue();
-      }
-      descriptor.set?.call(this, value);
-      this.requestUpdate?.(name, oldValue, declaration);
-    },
-    configurable: true,
-    enumerable: true
-  });
-}
-function property(options) {
-  return function(proto, name) {
-    defineProperty(proto.constructor, name, options);
-  };
-}
-
 const customNodes = /* @__PURE__ */ new Map();
 function customNode(tag, defaultProperties) {
   return function(constructor) {
@@ -468,9 +204,9 @@ class EventEmitter {
   }
 }
 
-let UID = 0;
+let UID$1 = 0;
 class CoreObject extends EventEmitter {
-  instanceId = ++UID;
+  instanceId = ++UID$1;
   _defaultProperties;
   _updatedProperties = /* @__PURE__ */ new Map();
   _changedProperties = /* @__PURE__ */ new Set();
@@ -554,9 +290,8 @@ class CoreObject extends EventEmitter {
     }
     return this;
   }
-  requestUpdate(key, oldValue, declaration) {
+  requestUpdate(key, newValue, oldValue, declaration) {
     if (key !== void 0) {
-      const newValue = this[key];
       if (!Object.is(newValue, oldValue)) {
         this._updatedProperties.set(key, oldValue);
         this._changedProperties.add(key);
@@ -600,6 +335,212 @@ class RefCounted extends CoreObject {
   //
 }
 
+const PI = Math.PI;
+const PI_2 = PI * 2;
+let UID = 0;
+function uid(object) {
+  return object?.__SPECTOR_Object_TAG?.id ?? ++UID;
+}
+function isPow2(v) {
+  return !(v & v - 1) && !!v;
+}
+
+const FUNCTIONS_RE = /([\w-]+)\((.+?)\)/g;
+const ARGS_RE = /[^,]+/g;
+const ARG_RE = /([-e.\d]+)(.*)/;
+function getDefaultCssPropertyValue(value) {
+  if (Array.isArray(value)) {
+    return value.map((func) => {
+      return {
+        name: func.name,
+        args: func.args.map((arg) => {
+          return {
+            ...arg,
+            normalizedIntValue: arg.normalizedDefaultIntValue
+          };
+        })
+      };
+    });
+  } else {
+    return {
+      ...value,
+      normalizedIntValue: value.normalizedDefaultIntValue
+    };
+  }
+}
+function parseCssProperty(name, propertyValue, context = {}) {
+  const functions = parseCssFunctions(propertyValue, context);
+  return functions.length ? functions : parseArgument(name, propertyValue, context);
+}
+function parseCssFunctions(propertyValue, context = {}) {
+  const functions = [];
+  let match;
+  while ((match = FUNCTIONS_RE.exec(propertyValue)) !== null) {
+    const [, name, value] = match;
+    if (name) {
+      functions.push({
+        name,
+        args: parseArguments(name, value, context)
+      });
+    }
+  }
+  return functions;
+}
+function parseArguments(name, value, context = {}) {
+  const values = [];
+  let match;
+  let i = 0;
+  while ((match = ARGS_RE.exec(value)) !== null) {
+    values.push(
+      parseArgument(name, match[0], {
+        ...context,
+        index: i++
+      })
+    );
+  }
+  return values;
+}
+function parseArgument(name, value, context = {}) {
+  const { width = 1, height = 1, index = 0 } = context;
+  const matched = value.match(ARG_RE);
+  const result = {
+    unit: matched?.[2] ?? null,
+    value,
+    intValue: Number(matched?.[1]),
+    normalizedIntValue: 0,
+    normalizedDefaultIntValue: 0
+  };
+  switch (name) {
+    case "scale":
+    case "scaleX":
+    case "scaleY":
+    case "scale3d":
+      result.normalizedDefaultIntValue = 1;
+      break;
+  }
+  switch (result.unit) {
+    case "%":
+      result.normalizedIntValue = result.intValue / 100;
+      break;
+    case "rad":
+      result.normalizedIntValue = result.intValue / PI_2;
+      break;
+    case "deg":
+      result.normalizedIntValue = result.intValue / 360;
+      break;
+    case "px":
+      switch (index) {
+        case 0:
+          result.normalizedIntValue = result.intValue / width;
+          break;
+        case 1:
+          result.normalizedIntValue = result.intValue / height;
+          break;
+      }
+      break;
+    case "turn":
+    case "em":
+    // div fontSize
+    case "rem":
+    // div fontSize
+    default:
+      result.normalizedIntValue = result.intValue;
+      break;
+  }
+  return result;
+}
+
+const SUPPORTS_WEBGL2 = "WebGL2RenderingContext" in globalThis;
+const SUPPORTS_IMAGE_BITMAP = "ImageBitmap" in globalThis;
+const SUPPORTS_RESIZE_OBSERVER = "ResizeObserver" in globalThis;
+const SUPPORTS_POINTER_EVENTS = "PointerEvent" in globalThis;
+const SUPPORTS_WHEEL_EVENTS = "WheelEvent" in globalThis;
+const SUPPORTS_MOUSE_EVENTS = "MouseEvent" in globalThis;
+const SUPPORTS_TOUCH_EVENTS = "ontouchstart" in globalThis;
+const SUPPORTS_CLICK_EVENTS = "onclick" in globalThis;
+const SUPPORTS_CREATE_IMAGE_BITMAP = "createImageBitmap" in globalThis;
+const SUPPORTS_AUDIO_CONTEXT = "AudioContext" in globalThis;
+const SUPPORTS_WEBKIT_AUDIO_CONTEXT = "webkitAudioContext" in globalThis;
+const SUPPORTS_OFFLINE_AUDIO_CONTEXT = "OfflineAudioContext" in globalThis;
+const SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT = "webkitOfflineAudioContext" in globalThis;
+const SUPPORTS_WEB_AUDIO = SUPPORTS_AUDIO_CONTEXT || SUPPORTS_WEBKIT_AUDIO_CONTEXT;
+const IN_BROWSER = typeof window !== "undefined";
+const DEVICE_PIXEL_RATIO = globalThis.devicePixelRatio || 1;
+const isElementNode = (node) => node !== null && typeof node === "object" && node.nodeType === 1;
+const isVideoElement = (node) => isElementNode(node) && node.tagName === "VIDEO";
+const isImageElement = (node) => isElementNode(node) && node.tagName === "IMG";
+function isCanvasElement(node) {
+  return typeof node === "object" && node !== null && node.nodeType === 1 && node.tagName === "CANVAS";
+}
+function isWebgl2(gl) {
+  return SUPPORTS_WEBGL2 && gl instanceof globalThis.WebGL2RenderingContext;
+}
+function createHTMLCanvas() {
+  if (IN_BROWSER) {
+    return globalThis.document.createElement("canvas");
+  }
+  return void 0;
+}
+function determineCrossOrigin(url, loc = globalThis.location) {
+  if (url.startsWith("data:")) {
+    return "";
+  }
+  loc = loc || globalThis.location;
+  const parsedUrl = new URL(url, document.baseURI);
+  if (parsedUrl.hostname !== loc.hostname || parsedUrl.port !== loc.port || parsedUrl.protocol !== loc.protocol) {
+    return "anonymous";
+  }
+  return "";
+}
+function crossOrigin(element, url, crossorigin) {
+  if (crossorigin === null && !url.startsWith("data:")) {
+    element.crossOrigin = determineCrossOrigin(url);
+  } else if (crossorigin !== false) {
+    element.crossOrigin = typeof crossorigin === "string" ? crossorigin : "anonymous";
+  }
+}
+
+class RawWeakMap {
+  _map = /* @__PURE__ */ new WeakMap();
+  // fix: vue reactive object
+  _toRaw(value) {
+    if (value && typeof value === "object") {
+      const raw = value.__v_raw;
+      if (raw) {
+        value = this._toRaw(raw);
+      }
+    }
+    return value;
+  }
+  /**
+   * Removes the specified element from the WeakMap.
+   * @returns true if the element was successfully removed, or false if it was not present.
+   */
+  delete(key) {
+    return this._map.delete(this._toRaw(key));
+  }
+  /**
+   * @returns a specified element.
+   */
+  get(key) {
+    return this._map.get(this._toRaw(key));
+  }
+  /**
+   * @returns a boolean indicating whether an element with the specified key exists or not.
+   */
+  has(key) {
+    return this._map.has(this._toRaw(key));
+  }
+  /**
+   * Adds a new element with a specified key and value.
+   * @param key Must be an object or symbol.
+   */
+  set(key, value) {
+    this._map.set(this._toRaw(key), this._toRaw(value));
+    return this;
+  }
+}
+
 class InputEvent {
   bubbles = true;
   cancelable = false;
@@ -1496,18 +1437,18 @@ class ColorMatrix extends Matrix {
     const lumG = 0.715;
     const lumB = 0.072;
     return this.multiply([
-      lumR + cos * (1 - lumR) + sin * -0.213,
-      lumG + cos * -0.715 + sin * -0.715,
-      lumB + cos * -0.072 + sin * (1 - lumB),
+      lumR + cos * (1 - lumR) + sin * -lumR,
+      lumG + cos * -lumG + sin * -lumG,
+      lumB + cos * -lumB + sin * (1 - lumB),
       0,
       0,
-      lumR + cos * -0.213 + sin * 0.143,
+      lumR + cos * -lumR + sin * 0.143,
       lumG + cos * (1 - lumG) + sin * 0.14,
-      lumB + cos * -0.072 + sin * -0.283,
+      lumB + cos * -lumB + sin * -0.283,
       0,
       0,
-      lumR + cos * -0.213 + sin * -0.787,
-      lumG + cos * -0.715 + sin * lumG,
+      lumR + cos * -lumR + sin * -0.787,
+      lumG + cos * -lumG + sin * lumG,
       lumB + cos * (1 - lumB) + sin * lumB,
       0,
       0,
@@ -3318,7 +3259,7 @@ class WebGLProgramModule extends WebGLModule {
       return {
         attributes: /* @__PURE__ */ new Map(),
         uniforms: /* @__PURE__ */ new Map(),
-        boundUniforms: new RawWeakMap()
+        boundUniforms: new RawWeakMap$1()
       };
     });
   }
@@ -7144,13 +7085,15 @@ ColorReplaceEffect = __decorateClass$J([
 ], ColorReplaceEffect);
 
 class CanvasContext extends Path2D {
-  textureTransform;
   fillStyle;
   strokeStyle;
   lineCap;
   lineJoin;
   lineWidth;
   miterLimit;
+  // custom
+  uvTransform;
+  vertTransform;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
   _toTexture(source) {
@@ -7172,7 +7115,8 @@ class CanvasContext extends Path2D {
         type: "stroke",
         path,
         texture,
-        textureTransform: this.textureTransform,
+        uvTransform: this.uvTransform,
+        vertTransform: this.vertTransform,
         style: {
           alignment: 0.5,
           cap: this.lineCap ?? "butt",
@@ -7201,7 +7145,8 @@ class CanvasContext extends Path2D {
       type: "fill",
       path,
       texture,
-      textureTransform: this.textureTransform
+      uvTransform: this.uvTransform,
+      vertTransform: this.vertTransform
     });
     super.reset();
   }
@@ -7209,7 +7154,8 @@ class CanvasContext extends Path2D {
     super.copy(source);
     this.strokeStyle = source.strokeStyle;
     this.fillStyle = source.fillStyle;
-    this.textureTransform = source.textureTransform;
+    this.uvTransform = source.uvTransform;
+    this.vertTransform = source.vertTransform;
     this.lineCap = source.lineCap;
     this.lineJoin = source.lineJoin;
     this.lineWidth = source.lineWidth;
@@ -7221,7 +7167,8 @@ class CanvasContext extends Path2D {
     super.reset();
     this.strokeStyle = void 0;
     this.fillStyle = void 0;
-    this.textureTransform = void 0;
+    this.uvTransform = void 0;
+    this.vertTransform = void 0;
     this.lineCap = void 0;
     this.lineJoin = void 0;
     this.lineWidth = void 0;
@@ -7229,8 +7176,9 @@ class CanvasContext extends Path2D {
     this._draws.length = 0;
     return this;
   }
-  buildUvs(start, vertices, uvs, texture, textureTransform) {
+  buildUvs(start, vertices, uvs, texture, uvTransform) {
     if (texture) {
+      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.applyToPoint(x, y) : uvTransform;
       const w = texture.width;
       const h = texture.height;
       for (let len = vertices.length, i = start; i < len; i += 2) {
@@ -7238,8 +7186,8 @@ class CanvasContext extends Path2D {
         const y = vertices[i + 1];
         let uvX;
         let uvY;
-        if (textureTransform) {
-          [uvX, uvY] = textureTransform?.applyToPoint(x, y);
+        if (_uvTransform) {
+          [uvX, uvY] = _uvTransform(x, y);
         } else {
           [uvX, uvY] = [x / w, y / h];
         }
@@ -7253,59 +7201,35 @@ class CanvasContext extends Path2D {
   }
   toBatchables() {
     const batchables = [];
-    let vertices = [];
-    let indices = [];
-    let uvs = [];
-    let texture;
-    const push = (draw) => {
-      batchables.push({
-        vertices,
-        indices,
-        uvs,
-        texture,
-        type: draw.type,
-        disableWrapMode: draw.disableWrapMode
-      });
-      vertices = [];
-      indices = [];
-      uvs = [];
-      texture = void 0;
-    };
     for (let len = this._draws.length, i = 0; i < len; i++) {
-      const draw = this._draws[i];
-      const prev = this._draws[i - 1];
-      if (vertices.length && prev && prev?.type !== draw.type) {
-        push(prev);
-      }
-      const oldTexture = texture;
-      if (!oldTexture) {
-        texture = draw.texture;
-      }
-      if (vertices.length && oldTexture !== draw.texture && !oldTexture?.is(draw.texture)) {
-        push(draw);
-        texture = draw.texture;
-      }
-      const start = vertices.length;
-      if (draw.type === "fill") {
-        draw.path.fillTriangulate({
+      const current = this._draws[i];
+      const vertices = [];
+      const indices = [];
+      const uvs = [];
+      if (current.type === "fill") {
+        current.path.fillTriangulate({
           vertices,
           indices
         });
-        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
       } else {
-        draw.path.strokeTriangulate({
+        current.path.strokeTriangulate({
           vertices,
           indices,
-          lineStyle: draw.style,
+          lineStyle: current.style,
           flipAlignment: false,
           closed: true
         });
-        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
       }
-    }
-    const last = this._draws[this._draws.length - 1];
-    if (last && vertices.length) {
-      push(last);
+      this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      batchables.push({
+        vertices,
+        indices,
+        uvs,
+        texture: current.texture,
+        type: current.type,
+        disableWrapMode: current.disableWrapMode,
+        vertTransform: current.vertTransform
+      });
     }
     return batchables;
   }
@@ -7384,11 +7308,6 @@ let CanvasItem = class extends TimelineNode {
   requestRelayout() {
     this._relayouting = true;
     this.requestUpdate();
-    this.forEachChild((node) => {
-      if (node instanceof CanvasItem) {
-        node.requestRelayout();
-      }
-    });
   }
   requestRepaint() {
     this._repainting = true;
@@ -7438,7 +7357,8 @@ let CanvasItem = class extends TimelineNode {
       this.requestUpdate();
     }
   }
-  _update() {
+  _update(changed) {
+    super._update(changed);
     const parent = this.getParent();
     if (this._parentGlobalVisible !== parent?.globalVisible) {
       this._updateGlobalVisible();
@@ -9018,7 +8938,7 @@ class BaseElement2DFill extends CoreObject {
   _getDrawOptions() {
     let disableWrapMode = false;
     const { width, height } = this.parent.size;
-    const textureTransform = new Transform2D().scale(1 / width, 1 / height);
+    const uvTransform = new Transform2D().scale(1 / width, 1 / height);
     if (this.cropRect) {
       const {
         left = 0,
@@ -9026,7 +8946,7 @@ class BaseElement2DFill extends CoreObject {
         right = 0,
         bottom = 0
       } = this.cropRect;
-      textureTransform.scale(
+      uvTransform.scale(
         Math.abs(1 - (left + right)),
         Math.abs(1 - (top + bottom))
       ).translate(left, top);
@@ -9041,24 +8961,26 @@ class BaseElement2DFill extends CoreObject {
         // flip, TODO
         // alignment, TODO
       } = this.tile;
-      textureTransform.translate(-translateX / width, -translateY / height).scale(1 / scaleX, 1 / scaleY);
+      uvTransform.translate(-translateX / width, -translateY / height).scale(1 / scaleX, 1 / scaleY);
       disableWrapMode = true;
     } else if (this.stretchRect) {
       const { left = 0, top = 0, right = 0, bottom = 0 } = this.stretchRect;
-      textureTransform.scale(
+      uvTransform.scale(
         Math.abs(1 - (-left + -right)),
         Math.abs(1 - (-top + -bottom))
       ).translate(-left, -top);
       disableWrapMode = true;
     }
-    return { disableWrapMode, textureTransform };
+    return { disableWrapMode, uvTransform };
   }
   draw() {
     const ctx = this.parent.context;
-    const { textureTransform, disableWrapMode } = this._getDrawOptions();
-    ctx.textureTransform = textureTransform;
+    const { uvTransform, disableWrapMode } = this._getDrawOptions();
+    ctx.uvTransform = uvTransform;
     ctx.fillStyle = this._texture ?? this.color;
-    ctx.fill({ disableWrapMode });
+    ctx.fill({
+      disableWrapMode
+    });
   }
 }
 __decorateClass$u([
@@ -9163,9 +9085,9 @@ class BaseElement2DOutline extends BaseElement2DFill {
   }
   draw() {
     const ctx = this.parent.context;
-    const { textureTransform, disableWrapMode } = this._getDrawOptions();
+    const { uvTransform, disableWrapMode } = this._getDrawOptions();
     ctx.lineWidth = this.width || 1;
-    ctx.textureTransform = textureTransform;
+    ctx.uvTransform = uvTransform;
     ctx.strokeStyle = this._texture ?? this.color;
     ctx.stroke({ disableWrapMode });
   }
@@ -9363,11 +9285,8 @@ class BaseElement2DText extends CoreObject {
     super();
     this.parent = parent;
   }
-  effects;
-  measureDom;
-  fonts;
+  base = new Text();
   texture = new CanvasTexture();
-  baseText = new Text();
   measureResult;
   setProperties(properties) {
     return super.setProperties(
@@ -9379,7 +9298,7 @@ class BaseElement2DText extends CoreObject {
     switch (key) {
       case "content":
       case "effects":
-      case "measureDom":
+      case "measureDOM":
       case "fonts":
       case "split":
         this.parent.requestRedraw();
@@ -9387,21 +9306,17 @@ class BaseElement2DText extends CoreObject {
     }
   }
   _updateText() {
-    this.baseText.style = {
+    this.base.style = {
       justifyContent: "center",
       alignItems: "center",
       textAlign: "center",
       ...this.parent.style.toJSON()
     };
-    this.baseText.content = this.content ?? "";
-    this.baseText.effects = this.effects;
-    this.baseText.fonts = this.fonts;
-    this.baseText.measureDom = this.measureDom;
-    this.baseText.requestUpdate();
+    this.base.requestUpdate();
   }
   measure() {
     this._updateText();
-    return this.baseText.measure();
+    return this.base.measure();
   }
   updateMeasure() {
     this.measureResult = this.measure();
@@ -9409,34 +9324,42 @@ class BaseElement2DText extends CoreObject {
   }
   canDraw() {
     return Boolean(
-      this.content && this.texture?.valid
+      !/^\s*$/.test(this.base.toString()) && this.texture?.valid
     );
   }
   draw() {
-    const ctx = this.parent.context;
-    this.baseText.render({
+    this.base.render({
       pixelRatio: this.texture.pixelRatio,
       view: this.texture.source
     });
     this.texture.requestUpload();
     const textWidth = this.measureResult?.boundingBox.width ?? this.parent.size.width;
     const textHeight = this.measureResult?.boundingBox.height ?? this.parent.size.height;
+    const ctx = this.parent.context;
     ctx.fillStyle = this.texture;
-    ctx.textureTransform = new Transform2D().scale(1 / textWidth, 1 / textHeight);
+    ctx.uvTransform = new Transform2D().scale(1 / textWidth, 1 / textHeight);
+    ctx.vertTransform = () => {
+      const parent = this.parent;
+      const origin = parent.getTransformOrigin();
+      return new Transform2D().translate(-origin.x, -origin.y).scale(
+        parent.globalScale.x > 0 ? 1 : -1,
+        parent.globalScale.y > 0 ? 1 : -1
+      ).translate(origin.x, origin.y);
+    };
     ctx.fill();
   }
 }
 __decorateClass$o([
-  property({ default: "" })
+  property({ alias: "base.content" })
 ], BaseElement2DText.prototype, "content");
 __decorateClass$o([
-  property()
+  property({ alias: "base.effects" })
 ], BaseElement2DText.prototype, "effects");
 __decorateClass$o([
-  protectedProperty()
-], BaseElement2DText.prototype, "measureDom");
+  protectedProperty({ alias: "base.measureDOM" })
+], BaseElement2DText.prototype, "measureDOM");
 __decorateClass$o([
-  protectedProperty()
+  protectedProperty({ alias: "base.fonts" })
 ], BaseElement2DText.prototype, "fonts");
 
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
@@ -9463,8 +9386,19 @@ let Node2D = class extends CanvasItem {
     super();
     this.setProperties(properties).append(nodes);
   }
+  getTransformOrigin() {
+    return new Vector2(0, 0);
+  }
+  getTransform(cb) {
+    const origin = this.getTransformOrigin();
+    const transform = new Transform2D();
+    transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
+    cb?.(transform);
+    transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
+    return transform;
+  }
   _updateTransform() {
-    this.transform.identity().scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation).translate(this.position.x, this.position.y);
+    this.transform.copy(this.getTransform());
   }
   _updateGlobalTransform() {
     const parent = this.getParent();
@@ -9491,8 +9425,17 @@ let Node2D = class extends CanvasItem {
     this.globalSkew.y = Math.atan2(b, d) - this.globalRotation;
     this.requestRelayout();
   }
-  _transformVertices(vertices) {
-    const [a, c, tx, b, d, ty] = this.globalTransform.toArray();
+  _transformVertices(vertices, vertTransform) {
+    let a, c, tx, b, d, ty;
+    if (vertTransform) {
+      const globalTransform = this.globalTransform.clone();
+      globalTransform.multiply(
+        typeof vertTransform === "function" ? vertTransform?.() : vertTransform
+      );
+      [a, c, tx, b, d, ty] = globalTransform.toArray();
+    } else {
+      [a, c, tx, b, d, ty] = this.globalTransform.toArray();
+    }
     const newVertices = vertices.slice();
     for (let len = vertices.length, i = 0; i < len; i += 2) {
       const x = vertices[i];
@@ -9508,7 +9451,7 @@ let Node2D = class extends CanvasItem {
     return super._relayout(batchables).map((batchable) => {
       return {
         ...batchable,
-        vertices: this._transformVertices(batchable.vertices)
+        vertices: this._transformVertices(batchable.vertices, batchable.vertTransform)
       };
     });
   }
@@ -9715,14 +9658,17 @@ let BaseElement2D = class extends Node2D {
       }
     }
   }
-  _updateTransform() {
+  getTransformOrigin() {
     const { width, height } = this.size;
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
-    const offsetX = originX * width;
-    const offsetY = originY * height;
-    this.transform.identity().translate(-offsetX, -offsetY).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
-    parseCSSTransform(this.style.transform ?? "", width, height, this.transform);
-    this.transform.translate(this.position.x, this.position.y).translate(offsetX, offsetY);
+    return new Vector2(originX * width, originY * height);
+  }
+  getTransform(cb) {
+    const { width, height } = this.size;
+    return super.getTransform((transform) => {
+      parseCSSTransform(this.style.transform ?? "", width, height, transform);
+      cb?.(transform);
+    });
   }
   _updateGlobalTransform() {
     super._updateGlobalTransform();
@@ -10514,7 +10460,7 @@ let Image2D = class extends Element2D {
       const sy = 1 / h;
       const tx = left * width * sx;
       const ty = top * height * sy;
-      this.context.textureTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
+      this.context.uvTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
       this.shape.draw();
       this.context.fill();
     }
@@ -10554,7 +10500,7 @@ class TextureRect2D extends Element2D {
     if (this.texture?.valid) {
       const { width, height } = this.size;
       this.context.fillStyle = this.texture;
-      this.context.textureTransform = new Transform2D().scale(
+      this.context.uvTransform = new Transform2D().scale(
         1 / width,
         1 / height
       );
@@ -10652,7 +10598,7 @@ let Text2D = class extends TextureRect2D {
     switch (key) {
       case "content":
       case "effects":
-      case "measureDom":
+      case "measureDOM":
       case "fonts":
       case "split":
         this._updateSplit();
@@ -10667,10 +10613,6 @@ let Text2D = class extends TextureRect2D {
   }
   _updateBase() {
     this.base.style = this.style.toJSON();
-    this.base.content = this.content ?? "";
-    this.base.effects = this.effects;
-    this.base.fonts = this.fonts;
-    this.base.measureDom = this.measureDom;
     this.emit("updateBase", this.base);
     this.base.requestUpdate();
   }
@@ -10786,16 +10728,16 @@ __decorateClass$g([
   property({ default: false })
 ], Text2D.prototype, "split", 2);
 __decorateClass$g([
-  property({ default: "" })
+  property({ alias: "base.content" })
 ], Text2D.prototype, "content", 2);
 __decorateClass$g([
-  property()
+  property({ alias: "base.effects" })
 ], Text2D.prototype, "effects", 2);
 __decorateClass$g([
-  protectedProperty()
-], Text2D.prototype, "measureDom", 2);
+  protectedProperty({ alias: "base.measureDOM" })
+], Text2D.prototype, "measureDOM", 2);
 __decorateClass$g([
-  protectedProperty()
+  protectedProperty({ alias: "base.fonts" })
 ], Text2D.prototype, "fonts", 2);
 Text2D = __decorateClass$g([
   customNode("Text2D")
@@ -10995,7 +10937,7 @@ let Animation = class extends TimelineNode {
   easing;
   _keyframes = [];
   _isFirstUpdatePosition = false;
-  _cachedProps = new RawWeakMap();
+  _cachedProps = new RawWeakMap$1();
   _stoped = false;
   constructor(properties, children = []) {
     super();
@@ -12464,7 +12406,7 @@ let AudioWaveform = class extends Element2D {
     const src = this._src;
     if (src?.valid) {
       this.context.fillStyle = src;
-      this.context.textureTransform = new Transform2D().scale(
+      this.context.uvTransform = new Transform2D().scale(
         1 / this.style.width,
         1 / this.style.height
       );
@@ -12738,7 +12680,7 @@ let Ruler = class extends Control {
     const texture = this.texture;
     if (texture?.valid) {
       this.context.fillStyle = texture;
-      this.context.textureTransform = new Transform2D().scale(
+      this.context.uvTransform = new Transform2D().scale(
         1 / this.size.width,
         1 / this.size.height
       );
@@ -13671,7 +13613,7 @@ class CanvasItemEditor extends Control {
     style: {
       visibility: "hidden",
       outlineStyle: "solid",
-      outlineColor: 16711935,
+      outlineColor: "#00FF00FF",
       outlineWidth: 2,
       pointerEvents: "none"
     }
@@ -13708,7 +13650,7 @@ class CanvasItemEditor extends Control {
     style: {
       width: 500,
       height: 500,
-      backgroundColor: 4294967295,
+      backgroundColor: "#FFFFFFFF",
       overflow: "hidden",
       pointerEvents: "none",
       boxShadow: "2px 2px 2px 1px rgba(0, 0, 0, 0.2)"
@@ -14084,4 +14026,4 @@ async function render(options) {
   });
 }
 
-export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, 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, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, 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, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, 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, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, 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, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, protectedProperty, render, timingFunctions, uid };