modern-canvas 0.4.52 → 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()
       };
     });
   }
@@ -7416,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();
@@ -9343,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(
@@ -9359,7 +9298,7 @@ class BaseElement2DText extends CoreObject {
     switch (key) {
       case "content":
       case "effects":
-      case "measureDom":
+      case "measureDOM":
       case "fonts":
       case "split":
         this.parent.requestRedraw();
@@ -9367,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();
@@ -9389,11 +9324,11 @@ class BaseElement2DText extends CoreObject {
   }
   canDraw() {
     return Boolean(
-      this.content && this.texture?.valid
+      !/^\s*$/.test(this.base.toString()) && this.texture?.valid
     );
   }
   draw() {
-    this.baseText.render({
+    this.base.render({
       pixelRatio: this.texture.pixelRatio,
       view: this.texture.source
     });
@@ -9415,16 +9350,16 @@ class BaseElement2DText extends CoreObject {
   }
 }
 __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;
@@ -10663,7 +10598,7 @@ let Text2D = class extends TextureRect2D {
     switch (key) {
       case "content":
       case "effects":
-      case "measureDom":
+      case "measureDOM":
       case "fonts":
       case "split":
         this._updateSplit();
@@ -10678,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();
   }
@@ -10797,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")
@@ -11006,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();
@@ -13682,7 +13613,7 @@ class CanvasItemEditor extends Control {
     style: {
       visibility: "hidden",
       outlineStyle: "solid",
-      outlineColor: 16711935,
+      outlineColor: "#00FF00FF",
       outlineWidth: 2,
       pointerEvents: "none"
     }
@@ -13719,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)"
@@ -14095,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 };