modern-canvas 0.4.23 → 0.4.25

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-import { Path2D, Path2DSet, svgToDOM, svgToPath2DSet, Matrix3 as Matrix3$1, svgPathCommandsAddToPath2D } from 'modern-path2d';
+import { Path2D, Path2DSet, svgToDOM, svgToPath2DSet, Matrix3 as Matrix3$1 } from 'modern-path2d';
 import { getDefaultStyle } from 'modern-idoc';
 import { Text, textDefaultStyle } from 'modern-text';
 import { loadYoga, BoxSizing, PositionType, Edge, Overflow, Gutter, Justify, Wrap, FlexDirection, Display, Direction, Align } from 'yoga-layout/load';
@@ -7075,7 +7075,7 @@ class CanvasContext extends Path2D {
   miterLimit;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
-  stroke() {
+  stroke(options) {
     let texture = this._defaultStyle;
     if (this.strokeStyle) {
       if (this.strokeStyle instanceof Texture2D) {
@@ -7086,6 +7086,7 @@ class CanvasContext extends Path2D {
     }
     if (this.curves.length) {
       this._draws.push({
+        ...options,
         type: "stroke",
         path: new Path2D(this),
         texture,
@@ -7107,7 +7108,7 @@ class CanvasContext extends Path2D {
   strokeRect(x, y, width, height) {
     this.rect(x, y, width, height).stroke();
   }
-  fill() {
+  fill(options) {
     let texture = this._defaultStyle;
     if (this.fillStyle) {
       if (this.fillStyle instanceof Texture2D) {
@@ -7117,6 +7118,7 @@ class CanvasContext extends Path2D {
       }
     }
     this._draws.push({
+      ...options,
       type: "fill",
       path: new Path2D(this),
       texture,
@@ -7176,13 +7178,14 @@ class CanvasContext extends Path2D {
     let indices = [];
     let uvs = [];
     let texture;
-    const push = (type) => {
+    const push = (draw) => {
       batchables.push({
-        type,
         vertices,
         indices,
         uvs,
-        texture
+        texture,
+        type: draw.type,
+        disableWrapMode: draw.disableWrapMode
       });
       vertices = [];
       indices = [];
@@ -7193,14 +7196,14 @@ class CanvasContext extends Path2D {
       const draw = this._draws[i];
       const prev = this._draws[i - 1];
       if (vertices.length && prev && prev?.type !== draw.type) {
-        push(prev.type);
+        push(prev);
       }
       const oldTexture = texture;
       if (!oldTexture) {
         texture = draw.texture;
       }
       if (vertices.length && oldTexture !== draw.texture && !oldTexture?.is(draw.texture)) {
-        push(draw.type);
+        push(draw);
         texture = draw.texture;
       }
       const start = vertices.length;
@@ -7223,7 +7226,7 @@ class CanvasContext extends Path2D {
     }
     const last = this._draws[this._draws.length - 1];
     if (last && vertices.length) {
-      push(last.type);
+      push(last);
     }
     return batchables;
   }
@@ -7251,7 +7254,6 @@ let CanvasItem = class extends TimelineNode {
     return this._globalOpacity ?? 1;
   }
   _modulate = new Color(4294967295);
-  _backgroundImage;
   // Batch render
   context = new CanvasContext();
   _resetContext = true;
@@ -8912,13 +8914,40 @@ class BaseElement2DFill extends CoreObject {
   draw() {
     const ctx = this.parent.context;
     if (this._image) {
+      const { width: imageWidth, height: imageHeight } = this._image;
       const { width, height } = this.parent.size;
-      ctx.textureTransform = new Transform2D().scale(1 / width, 1 / height);
+      const transform = new Transform2D();
+      if (this.tile) {
+        const {
+          translateX = 0,
+          translateY = 0,
+          scaleX = 1,
+          scaleY = 1
+          // flip, TODO
+          // alignment, TODO
+        } = this.tile;
+        transform.scale(1 / imageWidth, 1 / imageHeight).scale(1 / scaleX, 1 / scaleY).translate(-translateX / imageWidth, -translateY / imageHeight);
+      } else if (this.stretch) {
+        const { left = 0, top = 0, right = 0, bottom = 0 } = this.stretch.rect ?? {};
+        const w = Math.abs(1 + (-left + -right)) * width;
+        const h = Math.abs(1 + (-top + -bottom)) * height;
+        const scaleX = 1 / w;
+        const scaleY = 1 / h;
+        const translateX = -left * width * scaleX;
+        const translateY = -top * height * scaleY;
+        transform.scale(scaleX, scaleY).translate(translateX, translateY);
+      } else {
+        transform.scale(1 / width, 1 / height);
+      }
+      ctx.textureTransform = transform;
       ctx.fillStyle = this._image;
+      ctx.fill({
+        disableWrapMode: true
+      });
     } else {
       ctx.fillStyle = this.color;
+      ctx.fill();
     }
-    ctx.fill();
   }
 }
 __decorateClass$s([
@@ -8936,6 +8965,9 @@ __decorateClass$s([
 __decorateClass$s([
   property()
 ], BaseElement2DFill.prototype, "tile");
+__decorateClass$s([
+  property()
+], BaseElement2DFill.prototype, "stretch");
 
 var __defProp$k = Object.defineProperty;
 var __decorateClass$r = (decorators, target, key, kind) => {
@@ -8987,14 +9019,27 @@ class BaseElement2DGeometry extends CoreObject {
     });
   }
   draw() {
+    if (this._path2DSet.paths.length) {
+      const ctx = this.parent.context;
+      const { width, height } = this.parent.size;
+      this._path2DSet.paths.forEach((path) => {
+        ctx.addPath(path.clone().applyTransform(new Matrix3$1().scale(width, height)));
+      });
+    } else {
+      this.drawRect();
+    }
+  }
+  drawRect() {
     const ctx = this.parent.context;
     const { width, height } = this.parent.size;
-    this._path2DSet.paths.forEach((path) => {
-      svgPathCommandsAddToPath2D(
-        path.clone().applyTransform(new Matrix3$1().scale(width, height)).toCommands(),
-        ctx
-      );
-    });
+    const { borderRadius } = this.parent.style;
+    if (width && height) {
+      if (borderRadius) {
+        ctx.roundRect(0, 0, width, height, borderRadius);
+      } else {
+        ctx.rect(0, 0, width, height);
+      }
+    }
   }
 }
 __decorateClass$r([
@@ -9007,7 +9052,7 @@ __decorateClass$r([
   property({ default: [0, 0, 1, 1] })
 ], BaseElement2DGeometry.prototype, "viewBox");
 __decorateClass$r([
-  property({ default: [{ data: "M0,0L0,1L1,1L1,0Z" }] })
+  property({ default: [] })
 ], BaseElement2DGeometry.prototype, "data");
 
 var __defProp$j = Object.defineProperty;
@@ -9173,7 +9218,7 @@ class BaseElement2DText extends CoreObject {
   measureDom;
   fonts;
   texture = new CanvasTexture();
-  text = new Text();
+  baseText = new Text();
   measureResult;
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -9188,16 +9233,21 @@ class BaseElement2DText extends CoreObject {
     }
   }
   _updateText() {
-    this.text.style = this.parent.style.toJSON();
-    this.text.content = this.content ?? "";
-    this.text.effects = this.effects;
-    this.text.fonts = this.fonts;
-    this.text.measureDom = this.measureDom;
-    this.text.requestUpdate();
+    this.baseText.style = {
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      ...this.parent.style.toJSON()
+    };
+    this.baseText.content = this.content ?? "";
+    this.baseText.effects = this.effects;
+    this.baseText.fonts = this.fonts;
+    this.baseText.measureDom = this.measureDom;
+    this.baseText.requestUpdate();
   }
   measure() {
     this._updateText();
-    return this.text.measure();
+    return this.baseText.measure();
   }
   updateMeasure() {
     this.measureResult = this.measure();
@@ -9217,7 +9267,7 @@ class BaseElement2DText extends CoreObject {
   }
   draw() {
     const ctx = this.parent.context;
-    this.text.render({
+    this.baseText.render({
       pixelRatio: this.texture.pixelRatio,
       view: this.texture.source
     });
@@ -9447,12 +9497,6 @@ let BaseElement2D = class extends Node2D {
         this.requestRelayout();
         break;
       /** draw */
-      case "backgroundColor":
-        this._updateBackgroundColor();
-        break;
-      case "backgroundImage":
-        this._updateBackgroundImage();
-        break;
       case "opacity":
         this.opacity = this.style.opacity;
         break;
@@ -9468,6 +9512,24 @@ let BaseElement2D = class extends Node2D {
       case "borderRadius":
         this.requestRedraw();
         break;
+      case "backgroundColor":
+        this.fill.color = this.style.backgroundColor;
+        break;
+      case "backgroundImage":
+        this.fill.image = this.style.backgroundImage;
+        break;
+      case "borderStyle":
+      case "outlineStyle":
+        this.outline.style = value;
+        break;
+      case "borderWidth":
+      case "outlineWidth":
+        this.outline.width = value;
+        break;
+      case "borderColor":
+      case "outlineColor":
+        this.outline.color = value;
+        break;
     }
   }
   _updateMaskImage() {
@@ -9487,18 +9549,6 @@ let BaseElement2D = class extends Node2D {
       }
     }
   }
-  _updateBackgroundColor() {
-    const backgroundColor = this.style.getComputedBackgroundColor();
-    if (this._originalBatchables.length) {
-      this.requestRepaint();
-    } else if (backgroundColor.a > 0) {
-      this.requestRedraw();
-    }
-  }
-  async _updateBackgroundImage() {
-    this._backgroundImage = await this.style.loadBackgroundImage();
-    this.requestRedraw();
-  }
   _updateTransform() {
     const { width, height } = this.size;
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
@@ -9558,7 +9608,6 @@ let BaseElement2D = class extends Node2D {
   }
   _draw() {
     super._draw();
-    let flag = false;
     if (this.text.canDraw()) {
       this.text.updateMeasure();
     }
@@ -9566,81 +9615,26 @@ let BaseElement2D = class extends Node2D {
       this._tree?.log(this.name, "draw fill");
       this.geometry.draw();
       this.fill.draw();
-      flag = true;
     }
     if (this.outline.canDraw()) {
       this._tree?.log(this.name, "draw outline");
       this.geometry.draw();
       this.outline.draw();
-      flag = true;
     }
     if (this.text.canDraw()) {
       this._tree?.log(this.name, "draw text");
-      this._drawBoundingRect();
+      this.geometry.drawRect();
       this.text.draw();
-      flag = true;
-    }
-    if (!flag) {
-      this._drawBackground();
-      this._drawContent();
-      this._drawBorder();
-      this._drawOutline();
-    }
-  }
-  _drawBackground() {
-    const texture = this._backgroundImage;
-    if (texture?.valid) {
-      const { width, height } = this.size;
-      this.context.fillStyle = texture;
-      this.context.textureTransform = new Transform2D().scale(
-        1 / width,
-        1 / height
-      );
-      this._fillBoundingRect();
     }
+    this._drawContent();
   }
   _drawContent() {
-    this._fillBoundingRect();
-  }
-  _drawBorder() {
-    if (this.style.borderWidth && this.style.borderStyle !== "none") {
-      this.context.lineWidth = this.style.borderWidth;
-      this.context.strokeStyle = this.style.borderColor;
-      this._strokeBoundingRect();
-    }
-  }
-  _drawOutline() {
-    if (this.style.outlineWidth && this.style.outlineColor !== "none") {
-      this.context.lineWidth = this.style.outlineWidth;
-      this.context.strokeStyle = this.style.outlineColor;
-      this._strokeBoundingRect();
-    }
-  }
-  _drawBoundingRect() {
-    const { borderRadius } = this.style;
-    const { width, height } = this.size;
-    if (width && height) {
-      if (borderRadius) {
-        this.context.roundRect(0, 0, width, height, borderRadius);
-      } else {
-        this.context.rect(0, 0, width, height);
-      }
-    }
-  }
-  _fillBoundingRect() {
-    this._drawBoundingRect();
-    this.context.fill();
-  }
-  _strokeBoundingRect() {
-    this._drawBoundingRect();
-    this.context.stroke();
   }
   _repaint(batchables) {
     const colorMatrix = parseCSSFilter(this.style.filter);
     return super._repaint(batchables).map((batchable) => {
       return {
         ...batchable,
-        backgroundColor: this.style.getComputedBackgroundColor().abgr,
         colorMatrix: colorMatrix.toMatrix4().toArray(true),
         colorMatrixOffset: colorMatrix.toVector4().toArray()
       };
@@ -9758,11 +9752,11 @@ let Element2D = class extends BaseElement2D {
         break;
       case "width":
         this.size.width = Number(value);
-        this.requestRelayout();
+        this.requestRedraw();
         break;
       case "height":
         this.size.height = Number(value);
-        this.requestRelayout();
+        this.requestRedraw();
         break;
     }
   }
@@ -10343,7 +10337,8 @@ let Image2D = class extends Element2D {
       const tx = left * width * sx;
       const ty = top * height * sy;
       this.context.textureTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
-      super._drawContent();
+      this.geometry.drawRect();
+      this.context.fill();
     }
   }
   _repaint(batchables) {
@@ -10385,7 +10380,8 @@ class TextureRect2D extends Element2D {
         1 / width,
         1 / height
       );
-      super._drawContent();
+      this.geometry.drawRect();
+      this.context.fill();
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.4.23",
+  "version": "0.4.25",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",
@@ -70,8 +70,8 @@
     "colord": "^2.9.3",
     "earcut": "^3.0.1",
     "modern-font": "^0.4.0",
-    "modern-idoc": "^0.2.12",
-    "modern-path2d": "^1.2.11",
+    "modern-idoc": "^0.2.13",
+    "modern-path2d": "^1.2.16",
     "modern-text": "^1.3.1",
     "yoga-layout": "^3.2.1"
   },