modern-canvas 0.8.5 → 0.8.7

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,23 @@ 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 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);
+    const { angle = 0, stops } = linearGradient;
+    const w = width;
+    const h = height;
+    const cx = w / 2;
+    const cy = h / 2;
+    const A = (angle + 90) * Math.PI / 180;
+    const dx = Math.sin(A);
+    const dy = -Math.cos(A);
+    const L = Math.abs(w * Math.sin(A)) + Math.abs(h * Math.cos(A));
+    const x0 = cx - dx * (L / 2);
+    const y0 = cy - dy * (L / 2);
+    const x1 = cx + dx * (L / 2);
+    const y1 = cy + dy * (L / 2);
+    const g = ctx.createLinearGradient(x0, y0, x1, y1);
+    for (const s of stops) g.addColorStop(s.offset, s.color);
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, w, h);
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     return {
       width: imageData.width,
@@ -9351,21 +9353,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 +9382,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 +9467,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 +9605,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 +9832,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 +9842,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 +9926,6 @@ class BaseElement2DText extends CoreObject {
       textAlign: "center",
       ...this.parent.style.toJSON()
     };
-    this.base.requestUpdate();
     return this.base.measure();
   }
   updateMeasure() {
@@ -9894,48 +9948,67 @@ class BaseElement2DText extends CoreObject {
   }
   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();
           }
         }
       });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "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",