modern-canvas 0.8.0 → 0.8.2

package/dist/index.cjs

@@ -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
       };
     });

package/dist/index.d.cts

@@ -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];
 }
 
@@ -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;

package/dist/index.d.mts

@@ -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];
 }
 
@@ -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;

package/dist/index.d.ts

@@ -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];
 }
 
@@ -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;