modern-canvas 0.8.1 → 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);
     }
@@ -1124,6 +1124,9 @@ class Color {
     }
     return (alpha * 255 << 24) + (r << 16) + (g << 8) + b;
   }
+  toInt8Array() {
+    return [this.r8, this.g8, this.b8, this.a8];
+  }
   toArray() {
     return [this.r, this.g, this.b, this.a];
   }
@@ -2537,8 +2540,8 @@ class WebGLBatch2DModule extends WebGLModule {
   _state = WebGLState.for2D();
   _batchSize = 4096 * 4;
   _drawCallUid = 0;
-  _defaultModulate = 4294967295;
-  _defaultBackgroundColor = 0;
+  _defaultModulate = [255, 255, 255, 255];
+  _defaultBackgroundColor = [0, 0, 0, 0];
   _batchables = [];
   _vertexCount = 0;
   _indexCount = 0;
@@ -2556,7 +2559,7 @@ class WebGLBatch2DModule extends WebGLModule {
     // 1
     aBackgroundColor: { size: 4, normalized: true, type: "unsigned_byte" },
     // 1
-    aDisableWrapMode: { size: 4, normalized: true, type: "unsigned_byte" }
+    aDisableWrapMode: { size: 1, normalized: true, type: "float" }
     // 1
   };
   _vertexSize = 1 + 2 + 2 + 1 + 1 + 1;
@@ -2576,7 +2579,7 @@ attribute vec2 aPosition;
 attribute vec2 aUv;
 attribute vec4 aModulate;
 attribute vec4 aBackgroundColor;
-attribute vec4 aDisableWrapMode;
+attribute float aDisableWrapMode;
 
 uniform mat3 projectionMatrix;
 uniform mat3 viewMatrix;
@@ -2588,7 +2591,7 @@ varying float vTextureId;
 varying vec2 vUv;
 varying vec4 vModulate;
 varying vec4 vBackgroundColor;
-varying vec4 vDisableWrapMode;
+varying float vDisableWrapMode;
 
 vec2 roundPixels(vec2 position, vec2 targetSize) {
   return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
@@ -2603,6 +2606,7 @@ void main(void) {
   vTextureId = aTextureId;
   vec3 pos = projectionMatrix * viewMatrix * modelMatrix * vec3(aPosition, 1.0);
   gl_Position = vec4(roundPixels(pos.xy, vec2(canvasWidth, canvasHeight)), 0.0, 1.0);
+  // gl_Position = vec4(pos.xy, 0.0, 1.0);
 
   vUv = aUv;
   vModulate = aModulate * modulate;
@@ -2614,20 +2618,20 @@ varying float vTextureId;
 varying vec2 vUv;
 varying vec4 vModulate;
 varying vec4 vBackgroundColor;
-varying vec4 vDisableWrapMode;
+varying float vDisableWrapMode;
 
 uniform sampler2D samplers[${maxTextureUnits}];
 
 void main(void) {
-  vec4 color;
-  if (vDisableWrapMode.x > 0.0 && (vUv.x < 0.0 || vUv.y < 0.0 || vUv.x > 1.0 || vUv.y > 1.0))
+  vec4 color = vec4(0.0, 0.0, 0.0, 0.0);
+  if (vDisableWrapMode > 0.0 && (vUv.x < 0.0 || vUv.y < 0.0 || vUv.x > 1.0 || vUv.y > 1.0))
   {
-    color = vec4(0.0, 0.0, 0.0, 0.0);
+    //
   }
   else
   if (vTextureId < 0.0)
   {
-    color = vec4(0.0, 0.0, 0.0, 0.0);
+    //
   }${Array.from({ length: maxTextureUnits }, (_, i) => {
         let text = "  ";
         if (i >= 0) {
@@ -2721,7 +2725,7 @@ void main(void) {
     const textureMaxUnits = this._renderer.texture.maxUnits;
     const attributeBuffer = this._getAttributeBuffer(vertexCount);
     const float32View = new Float32Array(attributeBuffer);
-    const uint32View = new Uint32Array(attributeBuffer);
+    const uint8View = new Uint8Array(attributeBuffer);
     const indexBuffer = this._getIndexBuffer(indexCount);
     let aIndex = 0;
     let iIndex = 0;
@@ -2762,7 +2766,7 @@ void main(void) {
             drawCall.first = iIndex;
           }
           const iIndexStart = aIndex / this._vertexSize;
-          const textureLocation = (texture2 ? textureLocationMap.get(texture2) : 255) ?? 255;
+          const textureLocation = (texture2 ? textureLocationMap.get(texture2) : -1) ?? -1;
           const disableWrapModeInt = disableWrapMode ? 1 : 0;
           for (let len2 = vertices.length, i2 = 0; i2 < len2; i2 += 2) {
             float32View[aIndex++] = textureLocation;
@@ -2770,9 +2774,23 @@ void main(void) {
             float32View[aIndex++] = vertices[i2 + 1];
             float32View[aIndex++] = uvs[i2];
             float32View[aIndex++] = uvs[i2 + 1];
-            uint32View[aIndex++] = modulate;
-            uint32View[aIndex++] = backgroundColor;
-            uint32View[aIndex++] = disableWrapModeInt;
+            if (modulate) {
+              const aU8Index = aIndex * 4;
+              uint8View[aU8Index] = modulate[0];
+              uint8View[aU8Index + 1] = modulate[1];
+              uint8View[aU8Index + 2] = modulate[2];
+              uint8View[aU8Index + 3] = modulate[3];
+            }
+            aIndex++;
+            if (backgroundColor) {
+              const aU8Index = aIndex * 4;
+              uint8View[aU8Index] = backgroundColor[0];
+              uint8View[aU8Index + 1] = backgroundColor[1];
+              uint8View[aU8Index + 2] = backgroundColor[2];
+              uint8View[aU8Index + 3] = backgroundColor[3];
+            }
+            aIndex++;
+            float32View[aIndex++] = disableWrapModeInt;
           }
           for (let len2 = indices.length, i2 = 0; i2 < len2; i2++) {
             indexBuffer[iIndex++] = iIndexStart + indices[i2];
@@ -5557,14 +5575,20 @@ class CanvasContext extends modernPath2d.Path2D {
   // custom
   uvTransform;
   vertTransform;
-  _defaultStyle = Texture2D.EMPTY;
   _draws = [];
-  _toTexture(source) {
-    if (source instanceof Texture2D) {
-      return source;
-    } else {
-      return ColorTexture.get(source);
+  _parseDrawStyle(source) {
+    if (source) {
+      if (source instanceof Texture2D) {
+        return {
+          texture: source
+        };
+      } else {
+        return {
+          backgroundColor: new Color(source).toInt8Array()
+        };
+      }
     }
+    return {};
   }
   stroke(options) {
     if (!this.curves.length) {
@@ -5585,12 +5609,12 @@ class CanvasContext extends modernPath2d.Path2D {
     }
     this._draws.push({
       ...options,
+      ...this._parseDrawStyle(strokeStyle),
       type: "stroke",
       path: new modernPath2d.Path2D(this),
-      texture: strokeStyle ? this._toTexture(strokeStyle) : this._defaultStyle,
       uvTransform: this.uvTransform,
       vertTransform: this.vertTransform,
-      style: {
+      lineStyle: {
         alignment: this.strokeAlignment ?? 0.5,
         cap: this.lineCap ?? "butt",
         join: this.lineJoin ?? "miter",
@@ -5625,9 +5649,9 @@ class CanvasContext extends modernPath2d.Path2D {
     }
     this._draws.push({
       ...options,
+      ...this._parseDrawStyle(fillStyle),
       type: "fill",
       path: new modernPath2d.Path2D(this),
-      texture: fillStyle ? this._toTexture(fillStyle) : this._defaultStyle,
       uvTransform: this.uvTransform,
       vertTransform: this.vertTransform
     });
@@ -5703,17 +5727,20 @@ class CanvasContext extends modernPath2d.Path2D {
         current.path.strokeTriangulate({
           vertices,
           indices,
-          lineStyle: current.style,
+          lineStyle: current.lineStyle,
           flipAlignment: false,
           closed: true
         });
       }
-      this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      if (current.texture) {
+        this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      }
       batchables.push({
         vertices: new Float32Array(vertices),
         indices: new Float32Array(indices),
         uvs: new Float32Array(uvs),
         texture: current.texture,
+        backgroundColor: current.backgroundColor,
         type: current.type,
         disableWrapMode: current.disableWrapMode,
         vertTransform: current.vertTransform
@@ -6485,7 +6512,7 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     return batchables.map((batchable) => {
       return {
         ...batchable,
-        modulate: this._modulate.toArgb(this.globalOpacity, true),
+        modulate: this._modulate.toInt8Array(),
         blendMode: this.blendMode
       };
     });
@@ -7238,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;
     }
   }
@@ -9330,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 ;
@@ -9396,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({
@@ -9568,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;
@@ -9791,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)
@@ -9804,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);
   }
@@ -9837,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();
+          }
+        }
       });
     });
   }
@@ -14234,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>;
@@ -335,6 +335,7 @@ declare class Color {
     toHslString(): string;
     toHsv(): HsvaColor;
     toArgb(alpha?: number, applyToRGB?: boolean): number;
+    toInt8Array(): [number, number, number, number];
     toArray(): [number, number, number, number];
 }
 
@@ -893,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 {
@@ -979,13 +980,13 @@ interface Batchable2D {
     indices: Float32Array;
     uvs?: Float32Array;
     texture?: WebGLTexture;
-    backgroundColor?: number;
-    modulate?: number;
+    backgroundColor?: number[];
+    modulate?: number[];
     blendMode?: WebGLBlendMode;
     disableWrapMode?: boolean;
 }
 interface Shader {
-    update: (attributeBuffer: ArrayBuffer, indexBuffer: Uint16Array) => void;
+    update: (attributeBuffer: ArrayBuffer, indexBuffer: Uint16Array<ArrayBuffer>) => void;
     draw: (options?: WebGLDrawOptions) => void;
 }
 declare class WebGLBatch2DModule extends WebGLModule {
@@ -993,13 +994,13 @@ declare class WebGLBatch2DModule extends WebGLModule {
     protected _state: WebGLState;
     protected _batchSize: number;
     protected _drawCallUid: number;
-    protected _defaultModulate: number;
-    protected _defaultBackgroundColor: number;
+    protected _defaultModulate: number[];
+    protected _defaultBackgroundColor: number[];
     protected _batchables: Batchable2D[];
     protected _vertexCount: number;
     protected _indexCount: number;
     protected _attributeBuffer: ArrayBuffer[];
-    protected _indexBuffers: Uint16Array[];
+    protected _indexBuffers: Uint16Array<ArrayBuffer>[];
     protected _shaders: Map<number, Shader>;
     protected _attributes: Record<string, Partial<WebGLVertexAttrib>>;
     protected _vertexSize: number;
@@ -1019,7 +1020,7 @@ declare class WebGLBatch2DModule extends WebGLModule {
      * @param size - minimum required capacity
      * @returns - buffer that can fit `size` indices.
      */
-    protected _getIndexBuffer(size: number): Uint16Array;
+    protected _getIndexBuffer(size: number): Uint16Array<ArrayBuffer>;
 }
 /**
  * Rounds to next power of two.
@@ -1472,7 +1473,7 @@ interface CanvasBatchable extends Batchable2D {
 interface StrokeDraw extends Partial<CanvasBatchable> {
     type: 'stroke';
     path: Path2D;
-    style: LineStyle;
+    lineStyle: LineStyle;
     uvTransform?: UvTransform;
 }
 interface FillDraw extends Partial<CanvasBatchable> {
@@ -1490,9 +1491,11 @@ declare class CanvasContext extends Path2D {
     miterLimit?: number;
     uvTransform?: UvTransform;
     vertTransform?: VertTransform;
-    protected _defaultStyle: Texture2D<Texture2DSource>;
     protected _draws: (StrokeDraw | FillDraw)[];
-    protected _toTexture(source: Color$1 | Texture2D): Texture2D;
+    protected _parseDrawStyle(source?: Color$1 | Texture2D): {
+        texture?: Texture2D;
+        backgroundColor?: number[];
+    };
     stroke(options?: Partial<StrokeDraw>): void;
     fillRect(x: number, y: number, width: number, height: number): void;
     strokeRect(x: number, y: number, width: number, height: number): void;
@@ -2012,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;
 }
 
@@ -2095,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;
@@ -3366,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;
 }