modern-canvas 0.8.4 → 0.8.6

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { defineProperty, EventEmitter, getDeclarations, parseColor, property, RawWeakMap as RawWeakMap$1, isGradient, isColorFillObject, clearUndef, idGenerator, normalizeFill, isNone, normalizeBackground, normalizeForeground, normalizeOutline, normalizeShadow, normalizeShape, getDefaultStyle, normalizeText, normalizeTextContent } from 'modern-idoc';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
-import { Text } from 'modern-text';
+import { Path2D, Path2DSet, svgToDom, svgToPath2DSet, Matrix3 as Matrix3$1, BoundingBox } from 'modern-path2d';
+import { Text, Character } from 'modern-text';
 
 const customNodes = /* @__PURE__ */ new Map();
 function customNode(name, defaultProperties) {
@@ -5120,21 +5120,26 @@ class GradientTexture extends Texture2D {
     if (!ctx) {
       throw new Error("Failed to parse linear gradient, get canvas context is null.");
     }
-    let { angle = 0, stops } = linearGradient;
-    angle -= Math.PI / 2;
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const length = Math.sqrt(width * width + height * height) / 2;
-    const x0 = halfWidth + length * Math.cos(angle + Math.PI);
-    const y0 = halfHeight + length * Math.sin(angle + Math.PI);
-    const x1 = halfWidth + length * Math.cos(angle);
-    const y1 = halfHeight + length * Math.sin(angle);
+    const { angle = 0, stops } = linearGradient;
+    const w = width;
+    const h = height;
+    const cx = w / 2;
+    const cy = h / 2;
+    const canAng = angle * Math.PI / 180;
+    const hypt = cy / Math.cos(canAng);
+    const fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy);
+    const diag = Math.sin(canAng) * fromTopRight;
+    const len = hypt + diag;
+    const x0 = cx + Math.cos(-Math.PI / 2 + canAng) * len;
+    const y0 = cy + Math.sin(-Math.PI / 2 + canAng) * len;
+    const x1 = cx + Math.cos(Math.PI / 2 + canAng) * len;
+    const y1 = cy + Math.sin(Math.PI / 2 + canAng) * len;
     const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
     stops.forEach((stop) => {
       gradient.addColorStop(stop.offset, stop.color);
     });
     ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillRect(0, 0, w, h);
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     return {
       width: imageData.width,
@@ -9351,21 +9356,21 @@ ZoomBlurEffect = __decorateClass$t([
   customNode("ZoomBlurEffect")
 ], ZoomBlurEffect);
 
-function getDrawOptions(fill, size) {
+function getDrawOptions(fill, box) {
   let disableWrapMode = false;
-  const { width, height } = size;
-  const uvTransform = new Transform2D().scale(1 / width, 1 / height);
+  const { left = 0, top = 0, width, height } = box;
+  const uvTransform = new Transform2D().translate(-left, -top).scale(1 / width, 1 / height);
   if (fill.cropRect) {
     const {
-      left = 0,
-      top = 0,
+      left: left2 = 0,
+      top: top2 = 0,
       right = 0,
       bottom = 0
     } = fill.cropRect;
     uvTransform.scale(
-      Math.abs(1 - (left + right)),
-      Math.abs(1 - (top + bottom))
-    ).translate(left, top);
+      Math.abs(1 - (left2 + right)),
+      Math.abs(1 - (top2 + bottom))
+    ).translate(left2, top2);
     disableWrapMode = true;
   }
   if (fill.tile) {
@@ -9380,11 +9385,16 @@ function getDrawOptions(fill, size) {
     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;
+    const {
+      left: left2 = 0,
+      top: top2 = 0,
+      right = 0,
+      bottom = 0
+    } = fill.stretchRect;
     uvTransform.scale(
-      Math.abs(1 - (-left + -right)),
-      Math.abs(1 - (-top + -bottom))
-    ).translate(-left, -top);
+      Math.abs(1 - (-left2 + -right)),
+      Math.abs(1 - (-top2 + -bottom))
+    ).translate(-left2, -top2);
     disableWrapMode = true;
   }
   return { disableWrapMode, uvTransform };
@@ -9460,7 +9470,10 @@ class BaseElement2DFill extends CoreObject {
     const ctx = this.parent.context;
     const { uvTransform, disableWrapMode } = getDrawOptions(
       this,
-      this.parent.size
+      {
+        width: this.parent.size.width,
+        height: this.parent.size.height
+      }
     );
     ctx.uvTransform = uvTransform;
     ctx.fillStyle = this._texture ?? this.color;
@@ -9595,7 +9608,10 @@ class BaseElement2DOutline extends BaseElement2DFill {
     const ctx = this.parent.context;
     const { uvTransform, disableWrapMode } = getDrawOptions(
       this,
-      this.parent.size
+      {
+        width: this.parent.size.width,
+        height: this.parent.size.height
+      }
     );
     ctx.lineWidth = this.width || 1;
     ctx.uvTransform = uvTransform;
@@ -9819,7 +9835,7 @@ class BaseElement2DText extends CoreObject {
   }
   base = new Text();
   measureResult;
-  _textures = [];
+  _textureMap = /* @__PURE__ */ new Map();
   setProperties(properties) {
     return super.setProperties(
       isNone(properties) ? void 0 : normalizeText(properties)
@@ -9829,30 +9845,72 @@ class BaseElement2DText extends CoreObject {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
       case "enabled":
-      case "content":
       case "effects":
       case "measureDom":
       case "fonts":
         this.parent.requestRedraw();
         break;
       case "fill":
-        this._updateTexture(0, value);
-        break;
       case "outline":
-        this._updateTexture(1, value);
+      case "content":
+        this._updateTextureMap();
         break;
     }
   }
-  async _updateTexture(index, fill) {
-    this._textures[index] = await this._loadTexture(fill);
+  _update() {
+    this.base.style = {
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      ...this.parent.style.toJSON()
+    };
+    this.base.update();
+  }
+  _updateTextureMap() {
+    this._update();
+    this._textureMap.clear();
+    const pGlyphBoxs = [];
+    this.base.paragraphs.forEach((p, pIndex) => {
+      const fGlyphBoxs = [];
+      p.fragments.forEach((f, fIndex) => {
+        if (f.characters.length) {
+          const fGlyphBox = BoundingBox.from(
+            ...f.characters.map((c) => c.compatibleGlyphBox)
+          );
+          this._updateTexture(`${pIndex}.${fIndex}.fill`, f.fill, fGlyphBox);
+          this._updateTexture(`${pIndex}.${fIndex}.outline`, f.outline, fGlyphBox);
+          fGlyphBoxs.push(fGlyphBox);
+        }
+      });
+      if (fGlyphBoxs.length) {
+        const pGlyphBox = BoundingBox.from(...fGlyphBoxs);
+        this._updateTexture(`${pIndex}.fill`, p.fill, pGlyphBox);
+        this._updateTexture(`${pIndex}.outline`, p.outline, pGlyphBox);
+        pGlyphBoxs.push(pGlyphBox);
+      }
+    });
+    if (pGlyphBoxs.length) {
+      const glyphBox = BoundingBox.from(...pGlyphBoxs);
+      this._updateTexture("fill", this.fill, glyphBox);
+      this._updateTexture("outline", this.outline, glyphBox);
+    }
     this.parent.requestRedraw();
   }
-  async _loadTexture(fill) {
+  async _updateTexture(key, fill, box) {
+    if (fill && Object.keys(fill).length > 0) {
+      this._textureMap.set(key, {
+        texture: await this._loadTexture(fill, box),
+        box
+      });
+      this.parent.requestRedraw();
+    }
+  }
+  async _loadTexture(fill, box) {
     if (fill.linearGradient || fill.radialGradient) {
       return new GradientTexture(
         fill.linearGradient ?? fill.radialGradient,
-        this.parent.size.width,
-        this.parent.size.height
+        box.width,
+        box.height
       );
     } else if (!isNone(fill.image)) {
       this.parent.tree?.log(`load image ${fill.image}`);
@@ -9871,7 +9929,6 @@ class BaseElement2DText extends CoreObject {
       textAlign: "center",
       ...this.parent.style.toJSON()
     };
-    this.base.requestUpdate();
     return this.base.measure();
   }
   updateMeasure() {
@@ -9885,57 +9942,76 @@ class BaseElement2DText extends CoreObject {
   }
   _getVertTransform() {
     const parent = this.parent;
-    if (parent.style.scaleX > 0 && parent.style.scaleY > 0) {
+    if (parent.scale.x > 0 && parent.scale.y > 0) {
       return void 0;
     }
-    const scale = parent.style.scaleX * parent.style.scaleY;
+    const scale = parent.scale.x * parent.scale.y;
     const origin = parent.getTransformOrigin();
     return new Transform2D().translate(-origin.x, -origin.y).scale(scale > 0 ? 1 : -1, 1).translate(origin.x, origin.y);
   }
   draw() {
     const ctx = this.parent.context;
-    this.base.update();
+    this._update();
     this.base.pathSets.forEach((pathSet) => {
       pathSet.paths.forEach((path) => {
-        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);
+        const meta = path.getMeta();
+        if (meta instanceof Character) {
+          const fIndex = meta.parent.index;
+          const pIndex = meta.parent.parent.index;
+          if (path.style.fill && !isNone(path.style.fill)) {
+            if (typeof path.style.fill === "object") {
+              const fill = path.style.fill;
+              const texture = this._textureMap.get(`${pIndex}.${fIndex}.fill`) ?? this._textureMap.get(`${pIndex}.fill`) ?? this._textureMap.get("fill");
+              if (fill.enabled !== false && (texture || fill.color)) {
+                const { uvTransform, disableWrapMode } = getDrawOptions(
+                  fill,
+                  texture?.box ?? {
+                    width: this.parent.size.width,
+                    height: this.parent.size.height
+                  }
+                );
+                ctx.addPath(path);
+                ctx.style = { ...path.style };
+                ctx.uvTransform = uvTransform;
+                ctx.fillStyle = texture?.texture ?? fill.color;
+                ctx.vertTransform = this._getVertTransform();
+                ctx.fill({ disableWrapMode });
+              }
+            } else {
               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.vertTransform = this._getVertTransform();
-              ctx.stroke({ disableWrapMode });
+              ctx.fill();
             }
-          } else {
-            ctx.addPath(path);
-            ctx.style = { ...path.style };
-            ctx.vertTransform = this._getVertTransform();
-            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);
+          if (path.style.stroke && !isNone(path.style.stroke)) {
+            if (typeof path.style.stroke === "object") {
+              const outline = path.style.stroke;
+              const texture = this._textureMap.get(`${pIndex}.${fIndex}.outline`) ?? this._textureMap.get(`${pIndex}.outline`) ?? this._textureMap.get("outline");
+              if (outline.enabled !== false && (texture || outline.color) && (outline.width === void 0 || outline.width)) {
+                const { uvTransform, disableWrapMode } = getDrawOptions(
+                  outline,
+                  texture?.box ?? {
+                    width: this.parent.size.width,
+                    height: this.parent.size.height
+                  }
+                );
+                ctx.addPath(path);
+                ctx.style = { ...path.style };
+                ctx.lineWidth = outline.width || 1;
+                ctx.uvTransform = uvTransform;
+                ctx.strokeStyle = texture?.texture ?? outline.color;
+                ctx.lineCap = outline.lineCap;
+                ctx.lineJoin = outline.lineJoin;
+                ctx.vertTransform = this._getVertTransform();
+                ctx.stroke({ disableWrapMode });
+              }
+            } else {
               ctx.addPath(path);
               ctx.style = { ...path.style };
-              ctx.uvTransform = uvTransform;
-              ctx.fillStyle = this._textures[1] ?? fill.color;
               ctx.vertTransform = this._getVertTransform();
-              ctx.fill({ disableWrapMode });
+              ctx.stroke();
             }
-          } else {
-            ctx.addPath(path);
-            ctx.style = { ...path.style };
-            ctx.vertTransform = this._getVertTransform();
-            ctx.fill();
           }
         }
       });
@@ -10069,16 +10145,22 @@ let BaseElement2D = class extends Node2D {
     }
     return this;
   }
-  _updateStyleProperty(key, value, _oldValue, _declaration) {
+  _updateStyleProperty(key, value, oldValue, _declaration) {
     switch (key) {
       case "rotate":
         this.rotation = this.style.rotate * DEG_TO_RAD;
         break;
       case "scaleX":
         this.scale.x = this.style.scaleX;
+        if (this.text.canDraw() && (value ^ oldValue) < 0) {
+          this.requestRedraw();
+        }
         break;
       case "scaleY":
         this.scale.y = this.style.scaleY;
+        if (this.text.canDraw() && (value ^ oldValue) < 0) {
+          this.requestRedraw();
+        }
         break;
       case "skewX":
         this.skew.x = this.style.skewX;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -75,8 +75,8 @@
     "earcut": "^3.0.2",
     "modern-font": "^0.4.1",
     "modern-idoc": "^0.8.9",
-    "modern-path2d": "^1.4.8",
-    "modern-text": "^1.7.4"
+    "modern-path2d": "^1.4.9",
+    "modern-text": "^1.7.6"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^5.2.1",