modern-canvas 0.8.1 → 0.8.3

package/dist/index.mjs

@@ -870,14 +870,14 @@ class Input extends EventEmitter {
 let IID = 0;
 class CoreObject extends 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);
@@ -901,15 +901,15 @@ class CoreObject extends 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);
     }
@@ -1118,6 +1118,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];
   }
@@ -2531,8 +2534,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;
@@ -2550,7 +2553,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;
@@ -2570,7 +2573,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;
@@ -2582,7 +2585,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;
@@ -2597,6 +2600,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;
@@ -2608,20 +2612,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) {
@@ -2715,7 +2719,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;
@@ -2756,7 +2760,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;
@@ -2764,9 +2768,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];
@@ -5551,14 +5569,20 @@ class CanvasContext extends 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) {
@@ -5579,12 +5603,12 @@ class CanvasContext extends Path2D {
     }
     this._draws.push({
       ...options,
+      ...this._parseDrawStyle(strokeStyle),
       type: "stroke",
       path: new 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",
@@ -5619,9 +5643,9 @@ class CanvasContext extends Path2D {
     }
     this._draws.push({
       ...options,
+      ...this._parseDrawStyle(fillStyle),
       type: "fill",
       path: new Path2D(this),
-      texture: fillStyle ? this._toTexture(fillStyle) : this._defaultStyle,
       uvTransform: this.uvTransform,
       vertTransform: this.vertTransform
     });
@@ -5697,17 +5721,20 @@ class CanvasContext extends 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
@@ -6479,7 +6506,7 @@ let CanvasItem = class extends TimelineNode {
     return batchables.map((batchable) => {
       return {
         ...batchable,
-        modulate: this._modulate.toArgb(this.globalOpacity, true),
+        modulate: this._modulate.toInt8Array(),
         blendMode: this.blendMode
       };
     });
@@ -7232,7 +7259,7 @@ let Node2D = class extends CanvasItem {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "rotation":
-        this.requestRelayout();
+        this.updateGlobalTransform();
         break;
     }
   }
@@ -9324,6 +9351,45 @@ ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
 ], 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 ;
@@ -9390,47 +9456,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({
@@ -9562,7 +9593,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;
@@ -9785,6 +9819,7 @@ class BaseElement2DText extends CoreObject {
   }
   base = new Text();
   measureResult;
+  _textures = [];
   setProperties(properties) {
     return super.setProperties(
       isNone(properties) ? void 0 : normalizeText(properties)
@@ -9798,12 +9833,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 (!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 = normalizeTextContent(content);
   }
@@ -9831,9 +9888,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 && !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 && !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();
+          }
+        }
       });
     });
   }
@@ -14228,7 +14321,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -84,7 +84,7 @@
     "@types/node": "^24.3.0",
     "bumpp": "^10.2.3",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "lint-staged": "^16.1.5",
     "lottie-web": "^5.13.0",
     "modern-gif": "^2.0.4",