modern-canvas 0.4.23 → 0.4.24

package/dist/index.cjs

@@ -7081,7 +7081,7 @@ class CanvasContext extends modernPath2d.Path2D {
   miterLimit;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
-  stroke() {
+  stroke(options) {
     let texture = this._defaultStyle;
     if (this.strokeStyle) {
       if (this.strokeStyle instanceof Texture2D) {
@@ -7092,6 +7092,7 @@ class CanvasContext extends modernPath2d.Path2D {
     }
     if (this.curves.length) {
       this._draws.push({
+        ...options,
         type: "stroke",
         path: new modernPath2d.Path2D(this),
         texture,
@@ -7113,7 +7114,7 @@ class CanvasContext extends modernPath2d.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) {
@@ -7123,6 +7124,7 @@ class CanvasContext extends modernPath2d.Path2D {
       }
     }
     this._draws.push({
+      ...options,
       type: "fill",
       path: new modernPath2d.Path2D(this),
       texture,
@@ -7182,13 +7184,14 @@ class CanvasContext extends modernPath2d.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 = [];
@@ -7199,14 +7202,14 @@ class CanvasContext extends modernPath2d.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;
@@ -7229,7 +7232,7 @@ class CanvasContext extends modernPath2d.Path2D {
     }
     const last = this._draws[this._draws.length - 1];
     if (last && vertices.length) {
-      push(last.type);
+      push(last);
     }
     return batchables;
   }
@@ -7257,7 +7260,6 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     return this._globalOpacity ?? 1;
   }
   _modulate = new Color(4294967295);
-  _backgroundImage;
   // Batch render
   context = new CanvasContext();
   _resetContext = true;
@@ -8918,13 +8920,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([
@@ -8942,6 +8971,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) => {
@@ -8993,14 +9025,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 modernPath2d.Matrix3().scale(width, height)));
+      });
+    } else {
+      this.drawRect();
+    }
+  }
+  drawRect() {
     const ctx = this.parent.context;
     const { width, height } = this.parent.size;
-    this._path2DSet.paths.forEach((path) => {
-      modernPath2d.svgPathCommandsAddToPath2D(
-        path.clone().applyTransform(new modernPath2d.Matrix3().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([
@@ -9013,7 +9058,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;
@@ -9179,7 +9224,7 @@ class BaseElement2DText extends CoreObject {
   measureDom;
   fonts;
   texture = new CanvasTexture();
-  text = new modernText.Text();
+  baseText = new modernText.Text();
   measureResult;
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
@@ -9194,16 +9239,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();
@@ -9223,7 +9273,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
     });
@@ -9453,12 +9503,6 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
         this.requestRelayout();
         break;
       /** draw */
-      case "backgroundColor":
-        this._updateBackgroundColor();
-        break;
-      case "backgroundImage":
-        this._updateBackgroundImage();
-        break;
       case "opacity":
         this.opacity = this.style.opacity;
         break;
@@ -9474,6 +9518,24 @@ exports.BaseElement2D = class BaseElement2D extends exports.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() {
@@ -9493,18 +9555,6 @@ exports.BaseElement2D = class BaseElement2D extends exports.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);
@@ -9564,7 +9614,6 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
   }
   _draw() {
     super._draw();
-    let flag = false;
     if (this.text.canDraw()) {
       this.text.updateMeasure();
     }
@@ -9572,81 +9621,26 @@ exports.BaseElement2D = class BaseElement2D extends exports.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()
       };
@@ -10349,7 +10343,8 @@ exports.Image2D = class Image2D extends exports.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) {
@@ -10391,7 +10386,8 @@ class TextureRect2D extends exports.Element2D {
         1 / width,
         1 / height
       );
-      super._drawContent();
+      this.geometry.drawRect();
+      this.context.fill();
     }
   }
 }

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import { Font } from 'modern-font';
 import { AnimationItem } from 'lottie-web';
 import { AnyColor, Colord } from 'colord';
 import { Path2D, LineCap, LineJoin, LineStyle, Path2DSet } from 'modern-path2d';
-import { ImageFillSource, ImageFillTile, FillDeclaration, Path2DDeclaration, OutlineDeclaration, ShadowDeclaration, StyleDeclaration, ImageSource, ImageSourceRect } from 'modern-idoc';
+import { ImageFillSource, ImageFillTile, ImageFillStretch, FillDeclaration, Path2DDeclaration, GeometryDeclaration, OutlineDeclaration, ShadowDeclaration, StyleDeclaration, ImageSource, ImageSourceRect } from 'modern-idoc';
 import { TextOptions, Text, MeasureResult } from 'modern-text';
 import { Node as Node$1, Direction } from 'yoga-layout/load';
 
@@ -1411,14 +1411,14 @@ interface CanvasBatchable extends Batchable2D {
     type: 'stroke' | 'fill';
     texture?: Texture2D;
 }
-interface StrokeDraw {
+interface StrokeDraw extends Partial<CanvasBatchable> {
     type: 'stroke';
     path: Path2D;
     texture?: Texture2D;
     textureTransform?: Transform2D;
     style: LineStyle;
 }
-interface FillDraw {
+interface FillDraw extends Partial<CanvasBatchable> {
     type: 'fill';
     path: Path2D;
     texture?: Texture2D;
@@ -1434,10 +1434,10 @@ declare class CanvasContext extends Path2D {
     miterLimit?: number;
     _defaultStyle: Texture2D<Texture2DSource>;
     _draws: (StrokeDraw | FillDraw)[];
-    stroke(): void;
+    stroke(options?: Partial<StrokeDraw>): void;
     fillRect(x: number, y: number, width: number, height: number): void;
     strokeRect(x: number, y: number, width: number, height: number): void;
-    fill(): void;
+    fill(options?: Partial<FillDraw>): void;
     copy(source: CanvasContext): this;
     reset(): this;
     buildUvs(start: number, vertices: number[], uvs: number[], texture?: Texture2D, textureTransform?: Transform2D): void;
@@ -1767,7 +1767,6 @@ declare class CanvasItem extends TimelineNode {
     protected _globalOpacity?: number;
     get globalOpacity(): number;
     protected _modulate: Color;
-    protected _backgroundImage?: Texture2D;
     context: CanvasContext;
     protected _resetContext: boolean;
     protected _redrawing: boolean;
@@ -1858,6 +1857,7 @@ declare class BaseElement2DFill extends CoreObject {
     dpi?: number;
     rotateWithShape?: boolean;
     tile?: ImageFillTile;
+    stretch?: ImageFillStretch;
     protected _image?: Texture2D<ImageBitmap>;
     constructor(parent: BaseElement2D, properties?: Partial<BaseElement2DFillProperties>);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
@@ -1867,12 +1867,7 @@ declare class BaseElement2DFill extends CoreObject {
     draw(): void;
 }
 
-interface BaseElement2DGeometryProperties {
-    name?: string;
-    svg?: string;
-    viewBox?: number[];
-    data?: Path2DDeclaration[];
-}
+type BaseElement2DGeometryProperties = GeometryDeclaration;
 declare class BaseElement2DGeometry extends CoreObject {
     parent: BaseElement2D;
     name?: string;
@@ -1884,6 +1879,7 @@ declare class BaseElement2DGeometry extends CoreObject {
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updatePath2DSet(): void;
     draw(): void;
+    drawRect(): void;
 }
 
 type BaseElement2DOutlineProperties = OutlineDeclaration;
@@ -1940,7 +1936,7 @@ declare class BaseElement2DText extends CoreObject {
     fonts?: TextOptions['fonts'];
     constructor(parent: BaseElement2D, properties?: Partial<BaseElement2DTextProperties>);
     texture: CanvasTexture;
-    text: Text;
+    baseText: Text;
     measureResult?: MeasureResult;
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updateText(): void;
@@ -2015,20 +2011,12 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     setProperties(properties?: Record<PropertyKey, any>): this;
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updateMaskImage(): void;
-    protected _updateBackgroundColor(): void;
-    protected _updateBackgroundImage(): Promise<void>;
     protected _updateTransform(): void;
     protected _updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _updateOverflow(): void;
     protected _draw(): void;
-    protected _drawBackground(): void;
     protected _drawContent(): void;
-    protected _drawBorder(): void;
-    protected _drawOutline(): void;
-    protected _drawBoundingRect(): void;
-    protected _fillBoundingRect(): void;
-    protected _strokeBoundingRect(): void;
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
     canPointerEvents(): boolean;
     input(event: InputEvent, key: InputEventKey): void;

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { Font } from 'modern-font';
 import { AnimationItem } from 'lottie-web';
 import { AnyColor, Colord } from 'colord';
 import { Path2D, LineCap, LineJoin, LineStyle, Path2DSet } from 'modern-path2d';
-import { ImageFillSource, ImageFillTile, FillDeclaration, Path2DDeclaration, OutlineDeclaration, ShadowDeclaration, StyleDeclaration, ImageSource, ImageSourceRect } from 'modern-idoc';
+import { ImageFillSource, ImageFillTile, ImageFillStretch, FillDeclaration, Path2DDeclaration, GeometryDeclaration, OutlineDeclaration, ShadowDeclaration, StyleDeclaration, ImageSource, ImageSourceRect } from 'modern-idoc';
 import { TextOptions, Text, MeasureResult } from 'modern-text';
 import { Node as Node$1, Direction } from 'yoga-layout/load';
 
@@ -1411,14 +1411,14 @@ interface CanvasBatchable extends Batchable2D {
     type: 'stroke' | 'fill';
     texture?: Texture2D;
 }
-interface StrokeDraw {
+interface StrokeDraw extends Partial<CanvasBatchable> {
     type: 'stroke';
     path: Path2D;
     texture?: Texture2D;
     textureTransform?: Transform2D;
     style: LineStyle;
 }
-interface FillDraw {
+interface FillDraw extends Partial<CanvasBatchable> {
     type: 'fill';
     path: Path2D;
     texture?: Texture2D;
@@ -1434,10 +1434,10 @@ declare class CanvasContext extends Path2D {
     miterLimit?: number;
     _defaultStyle: Texture2D<Texture2DSource>;
     _draws: (StrokeDraw | FillDraw)[];
-    stroke(): void;
+    stroke(options?: Partial<StrokeDraw>): void;
     fillRect(x: number, y: number, width: number, height: number): void;
     strokeRect(x: number, y: number, width: number, height: number): void;
-    fill(): void;
+    fill(options?: Partial<FillDraw>): void;
     copy(source: CanvasContext): this;
     reset(): this;
     buildUvs(start: number, vertices: number[], uvs: number[], texture?: Texture2D, textureTransform?: Transform2D): void;
@@ -1767,7 +1767,6 @@ declare class CanvasItem extends TimelineNode {
     protected _globalOpacity?: number;
     get globalOpacity(): number;
     protected _modulate: Color;
-    protected _backgroundImage?: Texture2D;
     context: CanvasContext;
     protected _resetContext: boolean;
     protected _redrawing: boolean;
@@ -1858,6 +1857,7 @@ declare class BaseElement2DFill extends CoreObject {
     dpi?: number;
     rotateWithShape?: boolean;
     tile?: ImageFillTile;
+    stretch?: ImageFillStretch;
     protected _image?: Texture2D<ImageBitmap>;
     constructor(parent: BaseElement2D, properties?: Partial<BaseElement2DFillProperties>);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
@@ -1867,12 +1867,7 @@ declare class BaseElement2DFill extends CoreObject {
     draw(): void;
 }
 
-interface BaseElement2DGeometryProperties {
-    name?: string;
-    svg?: string;
-    viewBox?: number[];
-    data?: Path2DDeclaration[];
-}
+type BaseElement2DGeometryProperties = GeometryDeclaration;
 declare class BaseElement2DGeometry extends CoreObject {
     parent: BaseElement2D;
     name?: string;
@@ -1884,6 +1879,7 @@ declare class BaseElement2DGeometry extends CoreObject {
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updatePath2DSet(): void;
     draw(): void;
+    drawRect(): void;
 }
 
 type BaseElement2DOutlineProperties = OutlineDeclaration;
@@ -1940,7 +1936,7 @@ declare class BaseElement2DText extends CoreObject {
     fonts?: TextOptions['fonts'];
     constructor(parent: BaseElement2D, properties?: Partial<BaseElement2DTextProperties>);
     texture: CanvasTexture;
-    text: Text;
+    baseText: Text;
     measureResult?: MeasureResult;
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updateText(): void;
@@ -2015,20 +2011,12 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     setProperties(properties?: Record<PropertyKey, any>): this;
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updateMaskImage(): void;
-    protected _updateBackgroundColor(): void;
-    protected _updateBackgroundImage(): Promise<void>;
     protected _updateTransform(): void;
     protected _updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _updateOverflow(): void;
     protected _draw(): void;
-    protected _drawBackground(): void;
     protected _drawContent(): void;
-    protected _drawBorder(): void;
-    protected _drawOutline(): void;
-    protected _drawBoundingRect(): void;
-    protected _fillBoundingRect(): void;
-    protected _strokeBoundingRect(): void;
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
     canPointerEvents(): boolean;
     input(event: InputEvent, key: InputEventKey): void;