modern-canvas 0.8.2 → 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);
     }
@@ -7259,7 +7259,7 @@ let Node2D = class extends CanvasItem {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "rotation":
-        this.requestRelayout();
+        this.updateGlobalTransform();
         break;
     }
   }
@@ -9351,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 ;
@@ -9417,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({
@@ -9589,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;
@@ -9812,6 +9819,7 @@ class BaseElement2DText extends CoreObject {
   }
   base = new Text();
   measureResult;
+  _textures = [];
   setProperties(properties) {
     return super.setProperties(
       isNone(properties) ? void 0 : normalizeText(properties)
@@ -9825,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);
   }
@@ -9858,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();
+          }
+        }
       });
     });
   }
@@ -14255,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.2",
+  "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",