modern-canvas 0.4.51 → 0.4.53

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
+const modernIdoc = require('modern-idoc');
 const colord = require('colord');
 const namesPlugin = require('colord/plugins/names');
-const modernIdoc = require('modern-idoc');
 const modernPath2d = require('modern-path2d');
 const modernText = require('modern-text');
 const load = require('yoga-layout/load');
@@ -11,270 +11,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const namesPlugin__default = /*#__PURE__*/_interopDefaultCompat(namesPlugin);
 
-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) {
@@ -285,7 +21,7 @@ function customNode(tag, defaultProperties) {
     });
     if (defaultProperties) {
       Object.keys(defaultProperties).forEach((key) => {
-        defineProperty(constructor, key, { default: defaultProperties[key] });
+        modernIdoc.defineProperty(constructor, key, { default: defaultProperties[key] });
       });
     }
     customNodes.set(tag, constructor);
@@ -293,7 +29,7 @@ function customNode(tag, defaultProperties) {
 }
 
 function protectedProperty(options) {
-  return property({ ...options, protected: true });
+  return modernIdoc.property({ ...options, protected: true });
 }
 
 function createNode(tag = "node", options = {}) {
@@ -474,9 +210,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();
@@ -512,7 +248,7 @@ class CoreObject extends EventEmitter {
     return this._updatedProperties.has(key);
   }
   getPropertyDeclarations() {
-    return getDeclarations(this.constructor);
+    return modernIdoc.getDeclarations(this.constructor);
   }
   getPropertyDeclaration(key) {
     return this.getPropertyDeclarations().get(key);
@@ -560,9 +296,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);
@@ -606,6 +341,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;
@@ -1502,18 +1443,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,
@@ -2230,10 +2171,10 @@ class MainLoop extends CoreObject {
   }
 }
 __decorateClass$Y([
-  property({ default: 24 })
+  modernIdoc.property({ default: 24 })
 ], MainLoop.prototype, "fps");
 __decorateClass$Y([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
 class Renderer {
@@ -3324,7 +3265,7 @@ class WebGLProgramModule extends WebGLModule {
       return {
         attributes: /* @__PURE__ */ new Map(),
         uniforms: /* @__PURE__ */ new Map(),
-        boundUniforms: new RawWeakMap()
+        boundUniforms: new modernIdoc.RawWeakMap()
       };
     });
   }
@@ -5089,19 +5030,19 @@ __decorateClass$U([
   protectedProperty()
 ], Texture2D.prototype, "source");
 __decorateClass$U([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], Texture2D.prototype, "width");
 __decorateClass$U([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], Texture2D.prototype, "height");
 __decorateClass$U([
-  property({ default: "linear" })
+  modernIdoc.property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
 __decorateClass$U([
-  property({ default: "clamp_to_edge" })
+  modernIdoc.property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
 __decorateClass$U([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
 class AnimatedTexture extends Resource {
@@ -5156,7 +5097,7 @@ class CanvasTexture extends Texture2D {
   }
 }
 __decorateClass$T([
-  property({ default: 2 })
+  modernIdoc.property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
 class ColorTexture extends Texture2D {
@@ -6140,25 +6081,25 @@ exports.Node = class Node extends CoreObject {
   }
 };
 __decorateClass$R([
-  property()
+  modernIdoc.property()
 ], exports.Node.prototype, "name", 2);
 __decorateClass$R([
-  property()
+  modernIdoc.property()
 ], exports.Node.prototype, "mask", 2);
 __decorateClass$R([
-  property({ default: "inherit" })
+  modernIdoc.property({ default: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
 __decorateClass$R([
-  property({ default: "default" })
+  modernIdoc.property({ default: "default" })
 ], exports.Node.prototype, "processSortMode", 2);
 __decorateClass$R([
-  property({ default: "inherit" })
+  modernIdoc.property({ default: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
 __decorateClass$R([
-  property({ default: "default" })
+  modernIdoc.property({ default: "default" })
 ], exports.Node.prototype, "internalMode", 2);
 __decorateClass$R([
-  property({ default: () => ({}) })
+  modernIdoc.property({ default: () => ({}) })
 ], exports.Node.prototype, "meta", 2);
 exports.Node = __decorateClass$R([
   customNode("Node")
@@ -6232,13 +6173,13 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
   }
 };
 __decorateClass$Q([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.TimelineNode.prototype, "delay", 2);
 __decorateClass$Q([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.TimelineNode.prototype, "duration", 2);
 __decorateClass$Q([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.TimelineNode.prototype, "paused", 2);
 __decorateClass$Q([
   protectedProperty()
@@ -6393,16 +6334,16 @@ exports.Viewport = class Viewport extends exports.Node {
   }
 };
 __decorateClass$P([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Viewport.prototype, "x", 2);
 __decorateClass$P([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Viewport.prototype, "y", 2);
 __decorateClass$P([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Viewport.prototype, "width", 2);
 __decorateClass$P([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Viewport.prototype, "height", 2);
 exports.Viewport = __decorateClass$P([
   customNode("Viewport")
@@ -6660,13 +6601,13 @@ __decorateClass$O([
   protectedProperty()
 ], exports.Effect.prototype, "material", 2);
 __decorateClass$O([
-  property()
+  modernIdoc.property()
 ], exports.Effect.prototype, "effectMode", 2);
 __decorateClass$O([
-  property({ default: "" })
+  modernIdoc.property({ default: "" })
 ], exports.Effect.prototype, "glsl", 2);
 __decorateClass$O([
-  property({ default: "" })
+  modernIdoc.property({ default: "" })
 ], exports.Effect.prototype, "glslSrc", 2);
 exports.Effect = __decorateClass$O([
   customNode("Effect")
@@ -6741,28 +6682,28 @@ void main(void) {
 }`
 }));
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "saturation", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "contrast", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "brightness", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "red", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "green", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "blue", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "alpha", 2);
 __decorateClass$N([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "gamma", 2);
 exports.ColorAdjustEffect = __decorateClass$N([
   customNode("ColorAdjustEffect")
@@ -6857,7 +6798,7 @@ void main(void) {
 }`
 }));
 __decorateClass$M([
-  property()
+  modernIdoc.property()
 ], exports.ColorFilterEffect.prototype, "filter", 2);
 exports.ColorFilterEffect = __decorateClass$M([
   customNode("ColorFilterEffect")
@@ -6948,10 +6889,10 @@ void main(void) {
 }`
 }));
 __decorateClass$L([
-  property({ default: () => [] })
+  modernIdoc.property({ default: () => [] })
 ], exports.ColorOverlayEffect.prototype, "colors", 2);
 __decorateClass$L([
-  property({ default: 0.5 })
+  modernIdoc.property({ default: 0.5 })
 ], exports.ColorOverlayEffect.prototype, "alpha", 2);
 exports.ColorOverlayEffect = __decorateClass$L([
   customNode("ColorOverlayEffect")
@@ -7033,10 +6974,10 @@ void main(void) {
 }`
 }));
 __decorateClass$K([
-  property({ default: () => [] })
+  modernIdoc.property({ default: () => [] })
 ], exports.ColorRemoveEffect.prototype, "colors", 2);
 __decorateClass$K([
-  property({ default: 0.5 })
+  modernIdoc.property({ default: 0.5 })
 ], exports.ColorRemoveEffect.prototype, "epsilon", 2);
 exports.ColorRemoveEffect = __decorateClass$K([
   customNode("ColorRemoveEffect")
@@ -7140,23 +7081,25 @@ void main(void) {
 }`
 }));
 __decorateClass$J([
-  property({ default: [] })
+  modernIdoc.property({ default: [] })
 ], exports.ColorReplaceEffect.prototype, "colors", 2);
 __decorateClass$J([
-  property({ default: 0.05 })
+  modernIdoc.property({ default: 0.05 })
 ], exports.ColorReplaceEffect.prototype, "epsilon", 2);
 exports.ColorReplaceEffect = __decorateClass$J([
   customNode("ColorReplaceEffect")
 ], exports.ColorReplaceEffect);
 
 class CanvasContext extends modernPath2d.Path2D {
-  textureTransform;
   fillStyle;
   strokeStyle;
   lineCap;
   lineJoin;
   lineWidth;
   miterLimit;
+  // custom
+  uvTransform;
+  vertTransform;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
   _toTexture(source) {
@@ -7178,7 +7121,8 @@ class CanvasContext extends modernPath2d.Path2D {
         type: "stroke",
         path,
         texture,
-        textureTransform: this.textureTransform,
+        uvTransform: this.uvTransform,
+        vertTransform: this.vertTransform,
         style: {
           alignment: 0.5,
           cap: this.lineCap ?? "butt",
@@ -7207,7 +7151,8 @@ class CanvasContext extends modernPath2d.Path2D {
       type: "fill",
       path,
       texture,
-      textureTransform: this.textureTransform
+      uvTransform: this.uvTransform,
+      vertTransform: this.vertTransform
     });
     super.reset();
   }
@@ -7215,7 +7160,8 @@ class CanvasContext extends modernPath2d.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;
@@ -7227,7 +7173,8 @@ class CanvasContext extends modernPath2d.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;
@@ -7235,8 +7182,9 @@ class CanvasContext extends modernPath2d.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) {
@@ -7244,8 +7192,8 @@ class CanvasContext extends modernPath2d.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];
         }
@@ -7259,59 +7207,35 @@ class CanvasContext extends modernPath2d.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;
   }
@@ -7390,11 +7314,6 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   requestRelayout() {
     this._relayouting = true;
     this.requestUpdate();
-    this.forEachChild((node) => {
-      if (node instanceof exports.CanvasItem) {
-        node.requestRelayout();
-      }
-    });
   }
   requestRepaint() {
     this._repainting = true;
@@ -7444,7 +7363,8 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
       this.requestUpdate();
     }
   }
-  _update() {
+  _update(changed) {
+    super._update(changed);
     const parent = this.getParent();
     if (this._parentGlobalVisible !== parent?.globalVisible) {
       this._updateGlobalVisible();
@@ -7491,10 +7411,10 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   }
 };
 __decorateClass$I([
-  property()
+  modernIdoc.property()
 ], exports.CanvasItem.prototype, "modulate", 2);
 __decorateClass$I([
-  property()
+  modernIdoc.property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
 __decorateClass$I([
   protectedProperty({ default: true })
@@ -7585,16 +7505,16 @@ exports.Timeline = class Timeline extends exports.Node {
   }
 };
 __decorateClass$H([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Timeline.prototype, "startTime", 2);
 __decorateClass$H([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Timeline.prototype, "currentTime", 2);
 __decorateClass$H([
-  property({ default: Number.MAX_SAFE_INTEGER })
+  modernIdoc.property({ default: Number.MAX_SAFE_INTEGER })
 ], exports.Timeline.prototype, "endTime", 2);
 __decorateClass$H([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.Timeline.prototype, "loop", 2);
 exports.Timeline = __decorateClass$H([
   customNode("Timeline")
@@ -7680,10 +7600,10 @@ class SceneTree extends MainLoop {
   }
 }
 __decorateClass$G([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], SceneTree.prototype, "processPaused");
 __decorateClass$G([
-  property()
+  modernIdoc.property()
 ], SceneTree.prototype, "backgroundColor");
 __decorateClass$G([
   protectedProperty({ default: false })
@@ -7826,10 +7746,10 @@ void main(void) {
   frag: frag$2
 }));
 __decorateClass$E([
-  property({ default: 4 })
+  modernIdoc.property({ default: 4 })
 ], exports.GaussianBlurEffect.prototype, "strength", 2);
 __decorateClass$E([
-  property({ default: 3 })
+  modernIdoc.property({ default: 3 })
 ], exports.GaussianBlurEffect.prototype, "quality", 2);
 exports.GaussianBlurEffect = __decorateClass$E([
   customNode("GaussianBlurEffect")
@@ -7908,19 +7828,19 @@ void main(void) {
 }`
 }));
 __decorateClass$D([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.DropShadowEffect.prototype, "color", 2);
 __decorateClass$D([
-  property({ default: 4 })
+  modernIdoc.property({ default: 4 })
 ], exports.DropShadowEffect.prototype, "blur", 2);
 __decorateClass$D([
-  property({ default: 4 })
+  modernIdoc.property({ default: 4 })
 ], exports.DropShadowEffect.prototype, "offsetX", 2);
 __decorateClass$D([
-  property({ default: 4 })
+  modernIdoc.property({ default: 4 })
 ], exports.DropShadowEffect.prototype, "offsetY", 2);
 __decorateClass$D([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.DropShadowEffect.prototype, "shadowOnly", 2);
 exports.DropShadowEffect = __decorateClass$D([
   customNode("DropShadowEffect")
@@ -7980,7 +7900,7 @@ void main(void) {
 }`
 }));
 __decorateClass$C([
-  property({ default: 5 })
+  modernIdoc.property({ default: 5 })
 ], exports.EmbossEffect.prototype, "strength", 2);
 exports.EmbossEffect = __decorateClass$C([
   customNode("EmbossEffect")
@@ -8169,31 +8089,31 @@ void main(void) {
 }`
 }));
 __decorateClass$B([
-  property({ default: 10 })
+  modernIdoc.property({ default: 10 })
 ], exports.GlitchEffect.prototype, "slices", 2);
 __decorateClass$B([
-  property({ default: 512 })
+  modernIdoc.property({ default: 512 })
 ], exports.GlitchEffect.prototype, "sampleSize", 2);
 __decorateClass$B([
-  property({ default: 100 })
+  modernIdoc.property({ default: 100 })
 ], exports.GlitchEffect.prototype, "offset", 2);
 __decorateClass$B([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.GlitchEffect.prototype, "direction", 2);
 __decorateClass$B([
-  property({ default: 2 })
+  modernIdoc.property({ default: 2 })
 ], exports.GlitchEffect.prototype, "fillMode", 2);
 __decorateClass$B([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.GlitchEffect.prototype, "seed", 2);
 __decorateClass$B([
-  property({ default: [2, 2] })
+  modernIdoc.property({ default: [2, 2] })
 ], exports.GlitchEffect.prototype, "red", 2);
 __decorateClass$B([
-  property({ default: [-10, 4] })
+  modernIdoc.property({ default: [-10, 4] })
 ], exports.GlitchEffect.prototype, "green", 2);
 __decorateClass$B([
-  property({ default: [10, -4] })
+  modernIdoc.property({ default: [10, -4] })
 ], exports.GlitchEffect.prototype, "blue", 2);
 exports.GlitchEffect = __decorateClass$B([
   customNode("GlitchEffect")
@@ -8386,25 +8306,25 @@ void main(void) {
 }`
 }));
 __decorateClass$A([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.GodrayEffect.prototype, "time", 2);
 __decorateClass$A([
-  property({ default: 30 })
+  modernIdoc.property({ default: 30 })
 ], exports.GodrayEffect.prototype, "angle", 2);
 __decorateClass$A([
-  property({ default: 0.5 })
+  modernIdoc.property({ default: 0.5 })
 ], exports.GodrayEffect.prototype, "gain", 2);
 __decorateClass$A([
-  property({ default: 2.5 })
+  modernIdoc.property({ default: 2.5 })
 ], exports.GodrayEffect.prototype, "lacunarity", 2);
 __decorateClass$A([
-  property({ default: true })
+  modernIdoc.property({ default: true })
 ], exports.GodrayEffect.prototype, "parallel", 2);
 __decorateClass$A([
-  property({ default: () => [0, 0] })
+  modernIdoc.property({ default: () => [0, 0] })
 ], exports.GodrayEffect.prototype, "center", 2);
 __decorateClass$A([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.GodrayEffect.prototype, "alpha", 2);
 exports.GodrayEffect = __decorateClass$A([
   customNode("GodrayEffect")
@@ -8509,13 +8429,13 @@ void main() {
   }
 };
 __decorateClass$z([
-  property({ default: 4 })
+  modernIdoc.property({ default: 4 })
 ], exports.KawaseBlurEffect.prototype, "strength", 2);
 __decorateClass$z([
-  property({ default: 3 })
+  modernIdoc.property({ default: 3 })
 ], exports.KawaseBlurEffect.prototype, "quality", 2);
 __decorateClass$z([
-  property({ default: [1, 1] })
+  modernIdoc.property({ default: [1, 1] })
 ], exports.KawaseBlurEffect.prototype, "pixelSize", 2);
 exports.KawaseBlurEffect = __decorateClass$z([
   customNode("KawaseBlurEffect")
@@ -8622,7 +8542,7 @@ __decorateClass$y([
   protectedProperty()
 ], exports.MaskEffect.prototype, "texture", 2);
 __decorateClass$y([
-  property({ default: "" })
+  modernIdoc.property({ default: "" })
 ], exports.MaskEffect.prototype, "src", 2);
 exports.MaskEffect = __decorateClass$y([
   customNode("MaskEffect")
@@ -8725,25 +8645,25 @@ void main() {
 __publicField$7(exports.OutlineEffect, "MIN_SAMPLES", 1);
 __publicField$7(exports.OutlineEffect, "MAX_SAMPLES", 100);
 __decorateClass$x([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.OutlineEffect.prototype, "color", 2);
 __decorateClass$x([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.OutlineEffect.prototype, "width", 2);
 __decorateClass$x([
-  property({ default: "solid" })
+  modernIdoc.property({ default: "solid" })
 ], exports.OutlineEffect.prototype, "style", 2);
 __decorateClass$x([
-  property()
+  modernIdoc.property()
 ], exports.OutlineEffect.prototype, "image", 2);
 __decorateClass$x([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.OutlineEffect.prototype, "opacity", 2);
 __decorateClass$x([
-  property({ default: 0.1 })
+  modernIdoc.property({ default: 0.1 })
 ], exports.OutlineEffect.prototype, "quality", 2);
 __decorateClass$x([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.OutlineEffect.prototype, "knockout", 2);
 exports.OutlineEffect = __decorateClass$x([
   customNode("OutlineEffect")
@@ -8814,7 +8734,7 @@ void main(void) {
 }`
 }));
 __decorateClass$w([
-  property({ default: 10 })
+  modernIdoc.property({ default: 10 })
 ], exports.PixelateEffect.prototype, "strength", 2);
 exports.PixelateEffect = __decorateClass$w([
   customNode("PixelateEffect")
@@ -8942,16 +8862,16 @@ void main() {
 }`
 }));
 __decorateClass$v([
-  property()
+  modernIdoc.property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
 __decorateClass$v([
-  property({ default: 20 })
+  modernIdoc.property({ default: 20 })
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
 __decorateClass$v([
-  property({ default: -1 })
+  modernIdoc.property({ default: -1 })
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
 __decorateClass$v([
-  property({ default: 0.1 })
+  modernIdoc.property({ default: 0.1 })
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
 exports.ZoomBlurEffect = __decorateClass$v([
   customNode("ZoomBlurEffect")
@@ -9024,7 +8944,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,
@@ -9032,7 +8952,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);
@@ -9047,55 +8967,57 @@ 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([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "color");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "image");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "linearGradient");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "radialGradient");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "cropRect");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "stretchRect");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "dpi");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "rotateWithShape");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "tile");
 __decorateClass$u([
-  property()
+  modernIdoc.property()
 ], BaseElement2DFill.prototype, "opacity");
 
 var __defProp$m = Object.defineProperty;
@@ -9115,7 +9037,7 @@ class BaseElement2DBackground extends BaseElement2DFill {
   }
 }
 __decorateClass$t([
-  property()
+  modernIdoc.property()
 ], BaseElement2DBackground.prototype, "fillWithShape");
 
 var __defProp$l = Object.defineProperty;
@@ -9135,7 +9057,7 @@ class BaseElement2DForeground extends BaseElement2DFill {
   }
 }
 __decorateClass$s([
-  property()
+  modernIdoc.property()
 ], BaseElement2DForeground.prototype, "fillWithShape");
 
 var __defProp$k = Object.defineProperty;
@@ -9169,21 +9091,21 @@ 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 });
   }
 }
 __decorateClass$r([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], BaseElement2DOutline.prototype, "color");
 __decorateClass$r([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], BaseElement2DOutline.prototype, "width");
 __decorateClass$r([
-  property({ default: "solid" })
+  modernIdoc.property({ default: "solid" })
 ], BaseElement2DOutline.prototype, "style");
 
 var __defProp$j = Object.defineProperty;
@@ -9233,16 +9155,16 @@ class BaseElement2DShadow extends CoreObject {
   }
 }
 __decorateClass$q([
-  property({ default: "#000000" })
+  modernIdoc.property({ default: "#000000" })
 ], BaseElement2DShadow.prototype, "color");
 __decorateClass$q([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], BaseElement2DShadow.prototype, "blur");
 __decorateClass$q([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], BaseElement2DShadow.prototype, "offsetY");
 __decorateClass$q([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], BaseElement2DShadow.prototype, "offsetX");
 
 var __defProp$i = Object.defineProperty;
@@ -9326,16 +9248,16 @@ class BaseElement2DShape extends CoreObject {
   }
 }
 __decorateClass$p([
-  property()
+  modernIdoc.property()
 ], BaseElement2DShape.prototype, "preset");
 __decorateClass$p([
-  property()
+  modernIdoc.property()
 ], BaseElement2DShape.prototype, "svg");
 __decorateClass$p([
-  property()
+  modernIdoc.property()
 ], BaseElement2DShape.prototype, "viewBox");
 __decorateClass$p([
-  property({ default: () => [] })
+  modernIdoc.property({ default: () => [] })
 ], BaseElement2DShape.prototype, "paths");
 
 class BaseElement2DStyle extends Resource {
@@ -9350,7 +9272,7 @@ delete defaultStyles$1.left;
 delete defaultStyles$1.width;
 delete defaultStyles$1.height;
 for (const key in defaultStyles$1) {
-  defineProperty(BaseElement2DStyle, key, {
+  modernIdoc.defineProperty(BaseElement2DStyle, key, {
     default: defaultStyles$1[key]
   });
 }
@@ -9369,11 +9291,8 @@ class BaseElement2DText extends CoreObject {
     super();
     this.parent = parent;
   }
-  effects;
-  measureDom;
-  fonts;
+  base = new modernText.Text();
   texture = new CanvasTexture();
-  baseText = new modernText.Text();
   measureResult;
   setProperties(properties) {
     return super.setProperties(
@@ -9385,7 +9304,7 @@ class BaseElement2DText extends CoreObject {
     switch (key) {
       case "content":
       case "effects":
-      case "measureDom":
+      case "measureDOM":
       case "fonts":
       case "split":
         this.parent.requestRedraw();
@@ -9393,21 +9312,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();
@@ -9415,34 +9330,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: "" })
+  modernIdoc.property({ alias: "base.content" })
 ], BaseElement2DText.prototype, "content");
 __decorateClass$o([
-  property()
+  modernIdoc.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;
@@ -9469,8 +9392,19 @@ exports.Node2D = class Node2D extends exports.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();
@@ -9497,8 +9431,17 @@ exports.Node2D = class Node2D extends exports.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];
@@ -9514,7 +9457,7 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     return super._relayout(batchables).map((batchable) => {
       return {
         ...batchable,
-        vertices: this._transformVertices(batchable.vertices)
+        vertices: this._transformVertices(batchable.vertices, batchable.vertTransform)
       };
     });
   }
@@ -9721,14 +9664,17 @@ exports.BaseElement2D = class BaseElement2D extends exports.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();
@@ -9894,7 +9840,7 @@ const defaultStyles = {
   height: 0
 };
 for (const key in defaultStyles) {
-  defineProperty(Element2DStyle, key, { default: defaultStyles[key] });
+  modernIdoc.defineProperty(Element2DStyle, key, { default: defaultStyles[key] });
 }
 
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -10520,7 +10466,7 @@ exports.Image2D = class Image2D extends exports.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();
     }
@@ -10538,13 +10484,13 @@ __decorateClass$i([
   protectedProperty()
 ], exports.Image2D.prototype, "texture", 2);
 __decorateClass$i([
-  property({ default: "" })
+  modernIdoc.property({ default: "" })
 ], exports.Image2D.prototype, "src", 2);
 __decorateClass$i([
-  property()
+  modernIdoc.property()
 ], exports.Image2D.prototype, "srcRect", 2);
 __decorateClass$i([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.Image2D.prototype, "gif", 2);
 exports.Image2D = __decorateClass$i([
   customNode("Image2D")
@@ -10560,7 +10506,7 @@ class TextureRect2D extends exports.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
       );
@@ -10621,7 +10567,7 @@ exports.Lottie2D = class Lottie2D extends TextureRect2D {
   }
 };
 __decorateClass$h([
-  property({ default: "" })
+  modernIdoc.property({ default: "" })
 ], exports.Lottie2D.prototype, "src", 2);
 exports.Lottie2D = __decorateClass$h([
   customNode("Lottie2D")
@@ -10658,7 +10604,7 @@ exports.Text2D = class Text2D extends TextureRect2D {
     switch (key) {
       case "content":
       case "effects":
-      case "measureDom":
+      case "measureDOM":
       case "fonts":
       case "split":
         this._updateSplit();
@@ -10673,10 +10619,6 @@ exports.Text2D = class Text2D 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();
   }
@@ -10789,19 +10731,19 @@ exports.Text2D = class Text2D extends TextureRect2D {
   }
 };
 __decorateClass$g([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.Text2D.prototype, "split", 2);
 __decorateClass$g([
-  property({ default: "" })
+  modernIdoc.property({ alias: "base.content" })
 ], exports.Text2D.prototype, "content", 2);
 __decorateClass$g([
-  property()
+  modernIdoc.property({ alias: "base.effects" })
 ], exports.Text2D.prototype, "effects", 2);
 __decorateClass$g([
-  protectedProperty()
-], exports.Text2D.prototype, "measureDom", 2);
+  protectedProperty({ alias: "base.measureDOM" })
+], exports.Text2D.prototype, "measureDOM", 2);
 __decorateClass$g([
-  protectedProperty()
+  protectedProperty({ alias: "base.fonts" })
 ], exports.Text2D.prototype, "fonts", 2);
 exports.Text2D = __decorateClass$g([
   customNode("Text2D")
@@ -10860,7 +10802,7 @@ class TransformRect2D extends exports.Element2D {
   }
 }
 __decorateClass$f([
-  property({ default: 6 })
+  modernIdoc.property({ default: 6 })
 ], TransformRect2D.prototype, "handleSize");
 
 var __defProp$b = Object.defineProperty;
@@ -10924,7 +10866,7 @@ exports.Video2D = class Video2D extends TextureRect2D {
   }
 };
 __decorateClass$e([
-  property({ default: "" })
+  modernIdoc.property({ default: "" })
 ], exports.Video2D.prototype, "src", 2);
 exports.Video2D = __decorateClass$e([
   customNode("Video2D")
@@ -11001,7 +10943,7 @@ exports.Animation = class Animation extends exports.TimelineNode {
   easing;
   _keyframes = [];
   _isFirstUpdatePosition = false;
-  _cachedProps = new RawWeakMap();
+  _cachedProps = new modernIdoc.RawWeakMap();
   _stoped = false;
   constructor(properties, children = []) {
     super();
@@ -11258,16 +11200,16 @@ exports.Animation = class Animation extends exports.TimelineNode {
   }
 };
 __decorateClass$d([
-  property({ default: "parent" })
+  modernIdoc.property({ default: "parent" })
 ], exports.Animation.prototype, "effectMode", 2);
 __decorateClass$d([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.Animation.prototype, "loop", 2);
 __decorateClass$d([
-  property({ default: () => [] })
+  modernIdoc.property({ default: () => [] })
 ], exports.Animation.prototype, "keyframes", 2);
 __decorateClass$d([
-  property()
+  modernIdoc.property()
 ], exports.Animation.prototype, "easing", 2);
 exports.Animation = __decorateClass$d([
   customNode("Animation", {
@@ -12470,7 +12412,7 @@ exports.AudioWaveform = class AudioWaveform extends exports.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
       );
@@ -12478,13 +12420,13 @@ exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
   }
 };
 __decorateClass$b([
-  property()
+  modernIdoc.property()
 ], exports.AudioWaveform.prototype, "src", 2);
 __decorateClass$b([
-  property()
+  modernIdoc.property()
 ], exports.AudioWaveform.prototype, "gap", 2);
 __decorateClass$b([
-  property()
+  modernIdoc.property()
 ], exports.AudioWaveform.prototype, "color", 2);
 exports.AudioWaveform = __decorateClass$b([
   customNode("AudioWaveform")
@@ -12574,25 +12516,25 @@ exports.Range = class Range extends exports.Control {
   }
 };
 __decorateClass$9([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.Range.prototype, "allowGreater", 2);
 __decorateClass$9([
-  property({ default: false })
+  modernIdoc.property({ default: false })
 ], exports.Range.prototype, "allowLesser", 2);
 __decorateClass$9([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.Range.prototype, "page", 2);
 __decorateClass$9([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Range.prototype, "minValue", 2);
 __decorateClass$9([
-  property({ default: 100 })
+  modernIdoc.property({ default: 100 })
 ], exports.Range.prototype, "maxValue", 2);
 __decorateClass$9([
-  property({ default: 0.01 })
+  modernIdoc.property({ default: 0.01 })
 ], exports.Range.prototype, "step", 2);
 __decorateClass$9([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Range.prototype, "value", 2);
 exports.Range = __decorateClass$9([
   customNode("Range")
@@ -12744,7 +12686,7 @@ exports.Ruler = class Ruler extends exports.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
       );
@@ -12754,31 +12696,31 @@ exports.Ruler = class Ruler extends exports.Control {
   }
 };
 __decorateClass$8([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Ruler.prototype, "offsetX", 2);
 __decorateClass$8([
-  property({ default: 0 })
+  modernIdoc.property({ default: 0 })
 ], exports.Ruler.prototype, "offsetY", 2);
 __decorateClass$8([
-  property({ default: 20 })
+  modernIdoc.property({ default: 20 })
 ], exports.Ruler.prototype, "thickness", 2);
 __decorateClass$8([
-  property({ default: 3 })
+  modernIdoc.property({ default: 3 })
 ], exports.Ruler.prototype, "markHeight", 2);
 __decorateClass$8([
-  property({ default: "#b2b6bc" })
+  modernIdoc.property({ default: "#b2b6bc" })
 ], exports.Ruler.prototype, "color", 2);
 __decorateClass$8([
-  property({ default: "#f9f9fa" })
+  modernIdoc.property({ default: "#f9f9fa" })
 ], exports.Ruler.prototype, "markBackgroundColor", 2);
 __decorateClass$8([
-  property({ default: "#b2b6bc" })
+  modernIdoc.property({ default: "#b2b6bc" })
 ], exports.Ruler.prototype, "markColor", 2);
 __decorateClass$8([
-  property({ default: 300 })
+  modernIdoc.property({ default: 300 })
 ], exports.Ruler.prototype, "gap", 2);
 __decorateClass$8([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.Ruler.prototype, "gapScale", 2);
 exports.Ruler = __decorateClass$8([
   customNode("Ruler")
@@ -12851,7 +12793,7 @@ exports.ScrollBar = class ScrollBar extends exports.Range {
   }
 };
 __decorateClass$7([
-  property({ default: "vertical" })
+  modernIdoc.property({ default: "vertical" })
 ], exports.ScrollBar.prototype, "direction", 2);
 exports.ScrollBar = __decorateClass$7([
   customNode("ScrollBar")
@@ -12962,13 +12904,13 @@ exports.Scaler = class Scaler extends exports.Node {
   }
 };
 __decorateClass$4([
-  property({ default: 1 })
+  modernIdoc.property({ default: 1 })
 ], exports.Scaler.prototype, "value", 2);
 __decorateClass$4([
-  property({ default: 0.05 })
+  modernIdoc.property({ default: 0.05 })
 ], exports.Scaler.prototype, "minValue", 2);
 __decorateClass$4([
-  property({ default: 10 })
+  modernIdoc.property({ default: 10 })
 ], exports.Scaler.prototype, "maxValue", 2);
 exports.Scaler = __decorateClass$4([
   customNode("Scaler", {
@@ -13677,7 +13619,7 @@ class CanvasItemEditor extends exports.Control {
     style: {
       visibility: "hidden",
       outlineStyle: "solid",
-      outlineColor: 16711935,
+      outlineColor: "#00FF00FF",
       outlineWidth: 2,
       pointerEvents: "none"
     }
@@ -13714,7 +13656,7 @@ class CanvasItemEditor extends exports.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)"
@@ -14216,14 +14158,12 @@ exports.curves = curves;
 exports.customNode = customNode;
 exports.customNodes = customNodes;
 exports.defaultOptions = defaultOptions;
-exports.defineProperty = defineProperty;
 exports.determineCrossOrigin = determineCrossOrigin;
 exports.ease = ease;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
 exports.frag = frag$1;
-exports.getDeclarations = getDeclarations;
 exports.getDefaultCssPropertyValue = getDefaultCssPropertyValue;
 exports.isCanvasElement = isCanvasElement;
 exports.isElementNode = isElementNode;
@@ -14242,7 +14182,6 @@ exports.parseCSSTransform = parseCSSTransform;
 exports.parseCSSTransformOrigin = parseCSSTransformOrigin;
 exports.parseCssFunctions = parseCssFunctions;
 exports.parseCssProperty = parseCssProperty;
-exports.property = property;
 exports.protectedProperty = protectedProperty;
 exports.render = render;
 exports.timingFunctions = timingFunctions;