modern-canvas 0.6.3 → 0.6.5

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineProperty, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, clearUndef, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
+import { defineProperty, EventEmitter, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, clearUndef, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText } from 'modern-idoc';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
@@ -125,245 +125,6 @@ async function nextTick(cb) {
   });
 }
 
-class EventEmitter {
-  eventListeners = /* @__PURE__ */ new Map();
-  removeAllListeners() {
-    this.eventListeners.clear();
-    return this;
-  }
-  hasEventListener(event) {
-    return this.eventListeners.has(event);
-  }
-  on(type, listener, options) {
-    const object = { value: listener, options };
-    const listeners = this.eventListeners.get(type);
-    if (!listeners) {
-      this.eventListeners.set(type, object);
-    } else if (Array.isArray(listeners)) {
-      listeners.push(object);
-    } else {
-      this.eventListeners.set(type, [listeners, object]);
-    }
-    return this;
-  }
-  once(type, listener) {
-    return this.on(type, listener, { once: true });
-  }
-  off(type, listener, options) {
-    if (!listener) {
-      this.eventListeners.delete(type);
-      return this;
-    }
-    const listeners = this.eventListeners.get(type);
-    if (!listeners) {
-      return this;
-    }
-    if (Array.isArray(listeners)) {
-      const events = [];
-      for (let i = 0, length = listeners.length; i < length; i++) {
-        const object = listeners[i];
-        if (object.value !== listener || typeof options === "object" && options?.once && (typeof object.options === "boolean" || !object.options?.once)) {
-          events.push(object);
-        }
-      }
-      if (events.length) {
-        this.eventListeners.set(type, events.length === 1 ? events[0] : events);
-      } else {
-        this.eventListeners.delete(type);
-      }
-    } else {
-      if (listeners.value === listener && (typeof options === "boolean" || !options?.once || (typeof listeners.options === "boolean" || listeners.options?.once))) {
-        this.eventListeners.delete(type);
-      }
-    }
-    return this;
-  }
-  emit(type, ...args) {
-    const listeners = this.eventListeners.get(type);
-    if (listeners) {
-      if (Array.isArray(listeners)) {
-        for (let len = listeners.length, i = 0; i < len; i++) {
-          const object = listeners[i];
-          if (typeof object.options === "object" && object.options?.once) {
-            this.off(type, object.value, object.options);
-          }
-          object.value.apply(this, args);
-        }
-      } else {
-        if (typeof listeners.options === "object" && listeners.options?.once) {
-          this.off(type, listeners.value, listeners.options);
-        }
-        listeners.value.apply(this, args);
-      }
-      return true;
-    } else {
-      return false;
-    }
-  }
-}
-
-let IID = 0;
-class CoreObject extends EventEmitter {
-  instanceId = ++IID;
-  _customPropertyAccessor;
-  _properties = /* @__PURE__ */ new Map();
-  _updatedProperties = /* @__PURE__ */ new Map();
-  _changedProperties = /* @__PURE__ */ new Set();
-  _updatingPromise = Promise.resolve();
-  _updating = false;
-  useCustomPropertyAccessor(accessor) {
-    this._customPropertyAccessor = accessor;
-    this.getPropertyDeclarations().forEach((declaration, key) => {
-      const newValue = accessor.get(key, () => void 0);
-      const oldValue = this._properties.get(key);
-      if (newValue === void 0) {
-        if (oldValue !== void 0) {
-          accessor.set(key, oldValue);
-        }
-      } else if (newValue !== oldValue) {
-        this._properties.set(key, newValue);
-        this._updateProperty(key, newValue, oldValue, declaration);
-        this.emit("updateProperty", key, newValue, oldValue, declaration);
-      }
-    });
-    return this;
-  }
-  getter(key, context) {
-    if (context.declaration.protected) {
-      return this[context.internalKey];
-    } else {
-      return this._customPropertyAccessor ? this._customPropertyAccessor.get(key, () => this._properties.get(key)) : this._properties.get(key);
-    }
-  }
-  setter(key, value, context) {
-    if (context.declaration.protected) {
-      this[context.internalKey] = value;
-    } else {
-      if (this._customPropertyAccessor) {
-        this._customPropertyAccessor.set(key, value);
-      }
-      this._properties.set(key, value);
-    }
-  }
-  equal(target) {
-    return Boolean(target && this.instanceId === target.instanceId);
-  }
-  async _enqueueUpdate() {
-    this._updating = true;
-    try {
-      await this._updatingPromise;
-    } catch (e) {
-      Promise.reject(e);
-    }
-    await nextTick();
-    if (!this._updating)
-      return;
-    this.update();
-    this._updating = false;
-  }
-  update() {
-    this._update(this._updatedProperties);
-    this._updatedProperties = /* @__PURE__ */ new Map();
-  }
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  _update(changed) {
-  }
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  _updateProperty(key, value, oldValue, declaration) {
-  }
-  isDirty(key) {
-    return this._updatedProperties.has(key);
-  }
-  getPropertyDeclarations() {
-    return getDeclarations(this.constructor);
-  }
-  getPropertyDeclaration(key) {
-    return this.getPropertyDeclarations().get(key);
-  }
-  getProperty(key) {
-    return this[key];
-  }
-  setProperty(key, value) {
-    this[key] = value;
-    return this;
-  }
-  getProperties(keys) {
-    const properties = {};
-    for (const [name, property] of this.getPropertyDeclarations()) {
-      if (!property.protected && !property.alias && (!keys || keys.includes(name))) {
-        properties[name] = this.getProperty(name);
-      }
-    }
-    return properties;
-  }
-  setProperties(properties) {
-    if (properties && typeof properties === "object") {
-      for (const [name] of this.getPropertyDeclarations()) {
-        if (name in properties) {
-          this.setProperty(name, properties[name]);
-        }
-      }
-    }
-    return this;
-  }
-  resetProperties() {
-    for (const [name, property] of this.getPropertyDeclarations()) {
-      this.setProperty(
-        name,
-        typeof property.fallback === "function" ? property.fallback() : property.fallback
-      );
-    }
-    return this;
-  }
-  onUpdateProperty(key, newValue, oldValue, declaration) {
-    this.requestUpdate(key, newValue, oldValue, declaration);
-  }
-  requestUpdate(key, newValue, oldValue, declaration) {
-    if (key !== void 0) {
-      if (!Object.is(newValue, oldValue)) {
-        this._updatedProperties.set(key, oldValue);
-        this._changedProperties.add(key);
-        declaration ??= this.getPropertyDeclaration(key);
-        this._updateProperty(key, newValue, oldValue, declaration);
-        this.emit("updateProperty", key, newValue, oldValue, declaration);
-      } else {
-        return;
-      }
-    }
-    if (!this._updating) {
-      this._updatingPromise = this._enqueueUpdate();
-    }
-  }
-  toJSON() {
-    const json = {};
-    this._properties.forEach((value, key) => {
-      if (value === void 0) {
-        return;
-      }
-      if (value && typeof value === "object") {
-        if ("toJSON" in value && typeof value.toJSON === "function") {
-          json[key] = value.toJSON();
-        } else {
-          json[key] = { ...value };
-        }
-      } else {
-        json[key] = value;
-      }
-    });
-    return json;
-  }
-  clone() {
-    return new this.constructor(this.toJSON());
-  }
-  free() {
-    this.removeAllListeners();
-  }
-}
-
-class RefCounted extends CoreObject {
-  //
-}
-
 const PI = Math.PI;
 const PI_2 = PI * 2;
 let UID = 0;
@@ -1049,6 +810,172 @@ class Input extends EventEmitter {
   };
 }
 
+let IID = 0;
+class CoreObject extends EventEmitter {
+  instanceId = ++IID;
+  _customPropertyAccessor;
+  _properties = /* @__PURE__ */ new Map();
+  _updatedProperties = /* @__PURE__ */ new Map();
+  _changedProperties = /* @__PURE__ */ new Set();
+  _updatingPromise = Promise.resolve();
+  _updating = false;
+  useCustomPropertyAccessor(accessor) {
+    this._customPropertyAccessor = accessor;
+    this.getPropertyDeclarations().forEach((declaration, key) => {
+      const newValue = accessor.get(key, () => void 0);
+      const oldValue = this._properties.get(key);
+      if (newValue === void 0) {
+        if (oldValue !== void 0) {
+          accessor.set(key, oldValue);
+        }
+      } else if (newValue !== oldValue) {
+        if (declaration.alias && declaration.alias !== key) {
+          this.setProperty(key, newValue);
+        } else {
+          this._properties.set(key, newValue);
+        }
+        this._updateProperty(key, newValue, oldValue, declaration);
+        this.emit("updateProperty", key, newValue, oldValue, declaration);
+      }
+    });
+    return this;
+  }
+  getter(key, context) {
+    if (context?.declaration.protected) {
+      return this[context.internalKey];
+    } else {
+      return this._customPropertyAccessor ? this._customPropertyAccessor.get(key, () => this._properties.get(key)) : this._properties.get(key);
+    }
+  }
+  setter(key, value, context) {
+    if (context?.declaration.protected) {
+      this[context.internalKey] = value;
+    } else {
+      if (this._customPropertyAccessor) {
+        this._customPropertyAccessor.set(key, value);
+      }
+      this._properties.set(key, value);
+    }
+  }
+  equal(target) {
+    return Boolean(target && this.instanceId === target.instanceId);
+  }
+  async _enqueueUpdate() {
+    this._updating = true;
+    try {
+      await this._updatingPromise;
+    } catch (e) {
+      Promise.reject(e);
+    }
+    await nextTick();
+    if (!this._updating)
+      return;
+    this.update();
+    this._updating = false;
+  }
+  update() {
+    this._update(this._updatedProperties);
+    this._updatedProperties = /* @__PURE__ */ new Map();
+  }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  _update(changed) {
+  }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  _updateProperty(key, value, oldValue, declaration) {
+  }
+  isDirty(key) {
+    return this._updatedProperties.has(key);
+  }
+  getPropertyDeclarations() {
+    return getDeclarations(this.constructor);
+  }
+  getPropertyDeclaration(key) {
+    return this.getPropertyDeclarations().get(key);
+  }
+  getProperty(key) {
+    return this[key];
+  }
+  setProperty(key, value) {
+    this[key] = value;
+    return this;
+  }
+  getProperties(keys) {
+    const properties = {};
+    for (const [name, property] of this.getPropertyDeclarations()) {
+      if (!property.protected && !property.alias && (!keys || keys.includes(name))) {
+        properties[name] = this.getProperty(name);
+      }
+    }
+    return properties;
+  }
+  setProperties(properties) {
+    if (properties && typeof properties === "object") {
+      for (const [name] of this.getPropertyDeclarations()) {
+        if (name in properties) {
+          this.setProperty(name, properties[name]);
+        }
+      }
+    }
+    return this;
+  }
+  resetProperties() {
+    for (const [name, property] of this.getPropertyDeclarations()) {
+      this.setProperty(
+        name,
+        typeof property.fallback === "function" ? property.fallback() : property.fallback
+      );
+    }
+    return this;
+  }
+  onUpdateProperty(key, newValue, oldValue, declaration) {
+    this.requestUpdate(key, newValue, oldValue, declaration);
+  }
+  requestUpdate(key, newValue, oldValue, declaration) {
+    if (key !== void 0) {
+      if (!Object.is(newValue, oldValue)) {
+        this._updatedProperties.set(key, oldValue);
+        this._changedProperties.add(key);
+        declaration ??= this.getPropertyDeclaration(key);
+        this._updateProperty(key, newValue, oldValue, declaration);
+        this.emit("updateProperty", key, newValue, oldValue, declaration);
+      } else {
+        return;
+      }
+    }
+    if (!this._updating) {
+      this._updatingPromise = this._enqueueUpdate();
+    }
+  }
+  toJSON() {
+    const json = {};
+    this._properties.forEach((value, key) => {
+      if (value === void 0) {
+        return;
+      }
+      if (value && typeof value === "object") {
+        if ("toJSON" in value && typeof value.toJSON === "function") {
+          json[key] = value.toJSON();
+        } else {
+          json[key] = { ...value };
+        }
+      } else {
+        json[key] = value;
+      }
+    });
+    return json;
+  }
+  clone() {
+    return new this.constructor(this.toJSON());
+  }
+  free() {
+    this.removeAllListeners();
+  }
+}
+
+class RefCounted extends CoreObject {
+  //
+}
+
 class Resource extends RefCounted {
   //
 }
@@ -9336,6 +9263,15 @@ class BaseElement2DText extends CoreObject {
   constructor(parent) {
     super();
     this.parent = parent;
+    this.base.on("updateProperty", (...args) => {
+      switch (args[0]) {
+        case "content":
+        case "effects":
+          this.setter(args[0], args[1]);
+          break;
+      }
+      this._updateProperty(...args);
+    });
   }
   base = new Text();
   measureResult;
@@ -9539,7 +9475,10 @@ var __decorateClass$l = (decorators, target, key, kind) => {
   return result;
 };
 let BaseElement2D = class extends Node2D {
-  size = new Vector2().on("update", () => this.updateGlobalTransform());
+  size = new Vector2().on("update", () => {
+    this.updateGlobalTransform();
+    this.requestRedraw();
+  });
   get style() {
     return this._style;
   }
@@ -9633,15 +9572,6 @@ let BaseElement2D = class extends Node2D {
     return this;
   }
   _updateStyleProperty(key, value, _oldValue, _declaration) {
-    switch (key) {
-      case "width":
-      case "height":
-        if (this.mask instanceof BaseElement2D) {
-          this.mask.size.x = this.size.x;
-          this.mask.size.y = this.size.y;
-        }
-        break;
-    }
     switch (key) {
       case "rotate":
         this.rotation = this.style.rotate * DEG_TO_RAD;
@@ -9934,6 +9864,15 @@ let Element2D = class extends BaseElement2D {
         this.size.height = Number(value);
         break;
     }
+    switch (key) {
+      case "width":
+      case "height":
+        if (this.mask instanceof BaseElement2D) {
+          this.mask.size.width = this.size.width;
+          this.mask.size.height = this.size.height;
+        }
+        break;
+    }
   }
 };
 Element2D = __decorateClass$k([
@@ -12834,13 +12773,13 @@ let Scaler = class extends Node {
   }
 };
 __decorateClass$4([
-  property()
+  property({ default: 1 })
 ], Scaler.prototype, "value", 2);
 __decorateClass$4([
-  property()
+  property({ default: 0.05 })
 ], Scaler.prototype, "minValue", 2);
 __decorateClass$4([
-  property()
+  property({ default: 10 })
 ], Scaler.prototype, "maxValue", 2);
 Scaler = __decorateClass$4([
   customNode("Scaler", {
@@ -13980,4 +13919,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, 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, 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, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, 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, render, timingFunctions, uid };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -70,9 +70,9 @@
     "colord": "^2.9.3",
     "earcut": "^3.0.1",
     "modern-font": "^0.4.1",
-    "modern-idoc": "^0.7.7",
+    "modern-idoc": "^0.8.1",
     "modern-path2d": "^1.4.1",
-    "modern-text": "^1.5.0",
+    "modern-text": "^1.6.0",
     "yoga-layout": "^3.2.1"
   },
   "devDependencies": {
@@ -88,7 +88,7 @@
     "simple-git-hooks": "^2.13.0",
     "typescript": "^5.8.3",
     "unbuild": "^3.5.0",
-    "vite": "^7.0.0",
+    "vite": "^7.0.2",
     "vitest": "^3.2.4"
   },
   "simple-git-hooks": {