modern-canvas 0.8.2 → 0.8.3

package/dist/index.cjs

@@ -876,14 +876,14 @@ class Input extends modernIdoc.EventEmitter {
 let IID = 0;
 class CoreObject extends modernIdoc.EventEmitter {
   instanceId = ++IID;
-  _customPropertyAccessor;
+  _propertyAccessor;
   _properties = /* @__PURE__ */ new Map();
   _updatedProperties = /* @__PURE__ */ new Map();
   _changedProperties = /* @__PURE__ */ new Set();
   _updatingPromise = Promise.resolve();
   _updating = false;
   useCustomPropertyAccessor(accessor) {
-    this._customPropertyAccessor = accessor;
+    this._propertyAccessor = accessor;
     this.getPropertyDeclarations().forEach((declaration, key) => {
       const newValue = accessor.get(key, () => void 0);
       const oldValue = this._properties.get(key);
@@ -907,15 +907,15 @@ class CoreObject extends modernIdoc.EventEmitter {
     if (context?.declaration.protected) {
       return this[context.internalKey];
     } else {
-      return this._customPropertyAccessor ? this._customPropertyAccessor.get(key, () => this._properties.get(key)) : this._properties.get(key);
+      return this._propertyAccessor ? this._propertyAccessor.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);
+      if (this._propertyAccessor) {
+        this._propertyAccessor.set(key, value);
       }
       this._properties.set(key, value);
     }
@@ -7265,7 +7265,7 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "rotation":
-        this.requestRelayout();
+        this.updateGlobalTransform();
         break;
     }
   }
@@ -9357,6 +9357,45 @@ exports.ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
 ], exports.ZoomBlurEffect);
 
+function getDrawOptions(fill, size) {
+  let disableWrapMode = false;
+  const { width, height } = size;
+  const uvTransform = new Transform2D().scale(1 / width, 1 / height);
+  if (fill.cropRect) {
+    const {
+      left = 0,
+      top = 0,
+      right = 0,
+      bottom = 0
+    } = fill.cropRect;
+    uvTransform.scale(
+      Math.abs(1 - (left + right)),
+      Math.abs(1 - (top + bottom))
+    ).translate(left, top);
+    disableWrapMode = true;
+  }
+  if (fill.tile) {
+    const {
+      translateX = 0,
+      translateY = 0,
+      scaleX = 1,
+      scaleY = 1
+      // flip, TODO
+      // alignment, TODO
+    } = fill.tile;
+    uvTransform.translate(-translateX / width, -translateY / height).scale(1 / scaleX, 1 / scaleY);
+    disableWrapMode = true;
+  } else if (fill.stretchRect) {
+    const { left = 0, top = 0, right = 0, bottom = 0 } = fill.stretchRect;
+    uvTransform.scale(
+      Math.abs(1 - (-left + -right)),
+      Math.abs(1 - (-top + -bottom))
+    ).translate(-left, -top);
+    disableWrapMode = true;
+  }
+  return { disableWrapMode, uvTransform };
+}
+
 var __defProp$l = Object.defineProperty;
 var __decorateClass$s = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -9423,47 +9462,12 @@ class BaseElement2DFill extends CoreObject {
       this.enabled && (this._texture || this.color)
     );
   }
-  _getDrawOptions() {
-    let disableWrapMode = false;
-    const { width, height } = this.parent.size;
-    const uvTransform = new Transform2D().scale(1 / width, 1 / height);
-    if (this.cropRect) {
-      const {
-        left = 0,
-        top = 0,
-        right = 0,
-        bottom = 0
-      } = this.cropRect;
-      uvTransform.scale(
-        Math.abs(1 - (left + right)),
-        Math.abs(1 - (top + bottom))
-      ).translate(left, top);
-      disableWrapMode = true;
-    }
-    if (this.tile) {
-      const {
-        translateX = 0,
-        translateY = 0,
-        scaleX = 1,
-        scaleY = 1
-        // flip, TODO
-        // alignment, TODO
-      } = this.tile;
-      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;
-      uvTransform.scale(
-        Math.abs(1 - (-left + -right)),
-        Math.abs(1 - (-top + -bottom))
-      ).translate(-left, -top);
-      disableWrapMode = true;
-    }
-    return { disableWrapMode, uvTransform };
-  }
   draw() {
     const ctx = this.parent.context;
-    const { uvTransform, disableWrapMode } = this._getDrawOptions();
+    const { uvTransform, disableWrapMode } = getDrawOptions(
+      this,
+      this.parent.size
+    );
     ctx.uvTransform = uvTransform;
     ctx.fillStyle = this._texture ?? this.color;
     ctx.fill({
@@ -9595,7 +9599,10 @@ class BaseElement2DOutline extends BaseElement2DFill {
   }
   draw() {
     const ctx = this.parent.context;
-    const { uvTransform, disableWrapMode } = this._getDrawOptions();
+    const { uvTransform, disableWrapMode } = getDrawOptions(
+      this,
+      this.parent.size
+    );
     ctx.lineWidth = this.width || 1;
     ctx.uvTransform = uvTransform;
     ctx.strokeStyle = this._texture ?? this.color;
@@ -9818,6 +9825,7 @@ class BaseElement2DText extends CoreObject {
   }
   base = new modernText.Text();
   measureResult;
+  _textures = [];
   setProperties(properties) {
     return super.setProperties(
       modernIdoc.isNone(properties) ? void 0 : modernIdoc.normalizeText(properties)
@@ -9831,12 +9839,34 @@ class BaseElement2DText extends CoreObject {
       case "effects":
       case "measureDom":
       case "fonts":
+        this.parent.requestRedraw();
+        break;
       case "fill":
+        this._updateTexture(0, value);
+        break;
       case "outline":
-        this.parent.requestRedraw();
+        this._updateTexture(1, value);
         break;
     }
   }
+  async _updateTexture(index, fill) {
+    this._textures[index] = await this._loadTexture(fill);
+    this.parent.requestRedraw();
+  }
+  async _loadTexture(fill) {
+    if (fill.linearGradient || fill.radialGradient) {
+      return new GradientTexture(
+        fill.linearGradient ?? fill.radialGradient,
+        this.parent.size.width,
+        this.parent.size.height
+      );
+    } else if (!modernIdoc.isNone(fill.image)) {
+      this.parent.tree?.log(`load image ${fill.image}`);
+      return await assets.texture.load(fill.image);
+    } else {
+      return void 0;
+    }
+  }
   setContent(content) {
     this.content = modernIdoc.normalizeTextContent(content);
   }
@@ -9864,9 +9894,45 @@ class BaseElement2DText extends CoreObject {
     this.base.update();
     this.base.pathSets.forEach((pathSet) => {
       pathSet.paths.forEach((path) => {
-        ctx.addPath(path);
-        ctx.style = { ...path.style };
-        ctx.fill();
+        if (path.style.stroke && !modernIdoc.isNone(path.style.stroke)) {
+          if (typeof path.style.stroke === "object") {
+            const outline = path.style.stroke;
+            if (outline.enabled !== false && (this._textures[0] || outline.color) && (outline.width === void 0 || outline.width)) {
+              const { uvTransform, disableWrapMode } = getDrawOptions(outline, this.parent.size);
+              ctx.addPath(path);
+              ctx.style = { ...path.style };
+              ctx.lineWidth = outline.width || 1;
+              ctx.uvTransform = uvTransform;
+              ctx.strokeStyle = this._textures[0] ?? outline.color;
+              ctx.lineCap = outline.lineCap;
+              ctx.lineJoin = outline.lineJoin;
+              ctx.stroke({ disableWrapMode });
+            }
+          } else {
+            ctx.addPath(path);
+            ctx.style = { ...path.style };
+            ctx.stroke();
+          }
+        }
+        if (path.style.fill && !modernIdoc.isNone(path.style.fill)) {
+          if (typeof path.style.fill === "object") {
+            const fill = path.style.fill;
+            if (fill.enabled !== false && (this._textures[1] || fill.color)) {
+              const { uvTransform, disableWrapMode } = getDrawOptions(fill, this.parent.size);
+              ctx.addPath(path);
+              ctx.style = { ...path.style };
+              ctx.uvTransform = uvTransform;
+              ctx.fillStyle = this._textures[1] ?? fill.color;
+              ctx.fill({
+                disableWrapMode
+              });
+            }
+          } else {
+            ctx.addPath(path);
+            ctx.style = { ...path.style };
+            ctx.fill();
+          }
+        }
       });
     });
   }
@@ -14261,7 +14327,11 @@ class Engine extends SceneTree {
     return this.renderer.toPixels();
   }
   toImageData() {
-    return new ImageData(this.toPixels(), this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
+    return new ImageData(
+      this.toPixels(),
+      this.gl.drawingBufferWidth,
+      this.gl.drawingBufferHeight
+    );
   }
   toCanvas2D() {
     const imageData = this.toImageData();

package/dist/index.d.cts

@@ -260,7 +260,7 @@ interface CoreObject {
 }
 declare class CoreObject extends EventEmitter implements Required<ReactiveObject> {
     readonly instanceId: number;
-    protected _customPropertyAccessor?: CustomPropertyAccessor;
+    protected _propertyAccessor?: CustomPropertyAccessor;
     protected _properties: Map<string, unknown>;
     protected _updatedProperties: Map<string, unknown>;
     protected _changedProperties: Set<string>;
@@ -894,7 +894,7 @@ declare class WebGLRenderer extends Renderer {
     reset(): void;
     flush(): void;
     free(): void;
-    toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray;
+    toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray<ArrayBuffer>;
 }
 
 interface Renderable {
@@ -2015,10 +2015,6 @@ declare class BaseElement2DFill extends CoreObject {
     loadTexture(): Promise<Texture2D | undefined>;
     protected _updateTexture(): Promise<void>;
     canDraw(): boolean;
-    protected _getDrawOptions(): {
-        disableWrapMode: boolean;
-        uvTransform: Transform2D;
-    };
     draw(): void;
 }
 
@@ -2098,9 +2094,12 @@ declare class BaseElement2DText extends CoreObject {
     fonts: Text['fonts'];
     readonly base: Text;
     measureResult?: MeasureResult;
+    protected _textures: (Texture2D | undefined)[];
     constructor(parent: BaseElement2D);
     setProperties(properties?: Text$1): this;
     protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    protected _updateTexture(index: number, fill: NormalizedFill): Promise<void>;
+    protected _loadTexture(fill: NormalizedFill): Promise<Texture2D | undefined>;
     setContent(content: TextContent): void;
     measure(): MeasureResult;
     updateMeasure(): this;
@@ -3369,7 +3368,7 @@ declare class Engine extends SceneTree {
     render(delta?: number): void;
     start(): Promise<void>;
     free(): void;
-    toPixels(): Uint8ClampedArray;
+    toPixels(): Uint8ClampedArray<ArrayBuffer>;
     toImageData(): ImageData;
     toCanvas2D(): HTMLCanvasElement;
 }

package/dist/index.d.mts

@@ -260,7 +260,7 @@ interface CoreObject {
 }
 declare class CoreObject extends EventEmitter implements Required<ReactiveObject> {
     readonly instanceId: number;
-    protected _customPropertyAccessor?: CustomPropertyAccessor;
+    protected _propertyAccessor?: CustomPropertyAccessor;
     protected _properties: Map<string, unknown>;
     protected _updatedProperties: Map<string, unknown>;
     protected _changedProperties: Set<string>;
@@ -894,7 +894,7 @@ declare class WebGLRenderer extends Renderer {
     reset(): void;
     flush(): void;
     free(): void;
-    toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray;
+    toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray<ArrayBuffer>;
 }
 
 interface Renderable {
@@ -2015,10 +2015,6 @@ declare class BaseElement2DFill extends CoreObject {
     loadTexture(): Promise<Texture2D | undefined>;
     protected _updateTexture(): Promise<void>;
     canDraw(): boolean;
-    protected _getDrawOptions(): {
-        disableWrapMode: boolean;
-        uvTransform: Transform2D;
-    };
     draw(): void;
 }
 
@@ -2098,9 +2094,12 @@ declare class BaseElement2DText extends CoreObject {
     fonts: Text['fonts'];
     readonly base: Text;
     measureResult?: MeasureResult;
+    protected _textures: (Texture2D | undefined)[];
     constructor(parent: BaseElement2D);
     setProperties(properties?: Text$1): this;
     protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    protected _updateTexture(index: number, fill: NormalizedFill): Promise<void>;
+    protected _loadTexture(fill: NormalizedFill): Promise<Texture2D | undefined>;
     setContent(content: TextContent): void;
     measure(): MeasureResult;
     updateMeasure(): this;
@@ -3369,7 +3368,7 @@ declare class Engine extends SceneTree {
     render(delta?: number): void;
     start(): Promise<void>;
     free(): void;
-    toPixels(): Uint8ClampedArray;
+    toPixels(): Uint8ClampedArray<ArrayBuffer>;
     toImageData(): ImageData;
     toCanvas2D(): HTMLCanvasElement;
 }

package/dist/index.d.ts

@@ -260,7 +260,7 @@ interface CoreObject {
 }
 declare class CoreObject extends EventEmitter implements Required<ReactiveObject> {
     readonly instanceId: number;
-    protected _customPropertyAccessor?: CustomPropertyAccessor;
+    protected _propertyAccessor?: CustomPropertyAccessor;
     protected _properties: Map<string, unknown>;
     protected _updatedProperties: Map<string, unknown>;
     protected _changedProperties: Set<string>;
@@ -894,7 +894,7 @@ declare class WebGLRenderer extends Renderer {
     reset(): void;
     flush(): void;
     free(): void;
-    toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray;
+    toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray<ArrayBuffer>;
 }
 
 interface Renderable {
@@ -2015,10 +2015,6 @@ declare class BaseElement2DFill extends CoreObject {
     loadTexture(): Promise<Texture2D | undefined>;
     protected _updateTexture(): Promise<void>;
     canDraw(): boolean;
-    protected _getDrawOptions(): {
-        disableWrapMode: boolean;
-        uvTransform: Transform2D;
-    };
     draw(): void;
 }
 
@@ -2098,9 +2094,12 @@ declare class BaseElement2DText extends CoreObject {
     fonts: Text['fonts'];
     readonly base: Text;
     measureResult?: MeasureResult;
+    protected _textures: (Texture2D | undefined)[];
     constructor(parent: BaseElement2D);
     setProperties(properties?: Text$1): this;
     protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    protected _updateTexture(index: number, fill: NormalizedFill): Promise<void>;
+    protected _loadTexture(fill: NormalizedFill): Promise<Texture2D | undefined>;
     setContent(content: TextContent): void;
     measure(): MeasureResult;
     updateMeasure(): this;
@@ -3369,7 +3368,7 @@ declare class Engine extends SceneTree {
     render(delta?: number): void;
     start(): Promise<void>;
     free(): void;
-    toPixels(): Uint8ClampedArray;
+    toPixels(): Uint8ClampedArray<ArrayBuffer>;
     toImageData(): ImageData;
     toCanvas2D(): HTMLCanvasElement;
 }