modern-canvas 0.4.50 → 0.4.52

package/dist/index.cjs

@@ -7150,13 +7150,15 @@ exports.ColorReplaceEffect = __decorateClass$J([
 ], exports.ColorReplaceEffect);
 
 class CanvasContext extends modernPath2d.Path2D {
-  textureTransform;
   fillStyle;
   strokeStyle;
   lineCap;
   lineJoin;
   lineWidth;
   miterLimit;
+  // custom
+  uvTransform;
+  vertTransform;
   _defaultStyle = Texture2D.EMPTY;
   _draws = [];
   _toTexture(source) {
@@ -7178,7 +7180,8 @@ class CanvasContext extends modernPath2d.Path2D {
         type: "stroke",
         path,
         texture,
-        textureTransform: this.textureTransform,
+        uvTransform: this.uvTransform,
+        vertTransform: this.vertTransform,
         style: {
           alignment: 0.5,
           cap: this.lineCap ?? "butt",
@@ -7207,7 +7210,8 @@ class CanvasContext extends modernPath2d.Path2D {
       type: "fill",
       path,
       texture,
-      textureTransform: this.textureTransform
+      uvTransform: this.uvTransform,
+      vertTransform: this.vertTransform
     });
     super.reset();
   }
@@ -7215,7 +7219,8 @@ class CanvasContext extends modernPath2d.Path2D {
     super.copy(source);
     this.strokeStyle = source.strokeStyle;
     this.fillStyle = source.fillStyle;
-    this.textureTransform = source.textureTransform;
+    this.uvTransform = source.uvTransform;
+    this.vertTransform = source.vertTransform;
     this.lineCap = source.lineCap;
     this.lineJoin = source.lineJoin;
     this.lineWidth = source.lineWidth;
@@ -7227,7 +7232,8 @@ class CanvasContext extends modernPath2d.Path2D {
     super.reset();
     this.strokeStyle = void 0;
     this.fillStyle = void 0;
-    this.textureTransform = void 0;
+    this.uvTransform = void 0;
+    this.vertTransform = void 0;
     this.lineCap = void 0;
     this.lineJoin = void 0;
     this.lineWidth = void 0;
@@ -7235,8 +7241,9 @@ class CanvasContext extends modernPath2d.Path2D {
     this._draws.length = 0;
     return this;
   }
-  buildUvs(start, vertices, uvs, texture, textureTransform) {
+  buildUvs(start, vertices, uvs, texture, uvTransform) {
     if (texture) {
+      const _uvTransform = uvTransform ? typeof uvTransform === "function" ? uvTransform : (x, y) => uvTransform.applyToPoint(x, y) : uvTransform;
       const w = texture.width;
       const h = texture.height;
       for (let len = vertices.length, i = start; i < len; i += 2) {
@@ -7244,8 +7251,8 @@ class CanvasContext extends modernPath2d.Path2D {
         const y = vertices[i + 1];
         let uvX;
         let uvY;
-        if (textureTransform) {
-          [uvX, uvY] = textureTransform?.applyToPoint(x, y);
+        if (_uvTransform) {
+          [uvX, uvY] = _uvTransform(x, y);
         } else {
           [uvX, uvY] = [x / w, y / h];
         }
@@ -7259,59 +7266,35 @@ class CanvasContext extends modernPath2d.Path2D {
   }
   toBatchables() {
     const batchables = [];
-    let vertices = [];
-    let indices = [];
-    let uvs = [];
-    let texture;
-    const push = (draw) => {
-      batchables.push({
-        vertices,
-        indices,
-        uvs,
-        texture,
-        type: draw.type,
-        disableWrapMode: draw.disableWrapMode
-      });
-      vertices = [];
-      indices = [];
-      uvs = [];
-      texture = void 0;
-    };
     for (let len = this._draws.length, i = 0; i < len; i++) {
-      const draw = this._draws[i];
-      const prev = this._draws[i - 1];
-      if (vertices.length && prev && prev?.type !== draw.type) {
-        push(prev);
-      }
-      const oldTexture = texture;
-      if (!oldTexture) {
-        texture = draw.texture;
-      }
-      if (vertices.length && oldTexture !== draw.texture && !oldTexture?.is(draw.texture)) {
-        push(draw);
-        texture = draw.texture;
-      }
-      const start = vertices.length;
-      if (draw.type === "fill") {
-        draw.path.fillTriangulate({
+      const current = this._draws[i];
+      const vertices = [];
+      const indices = [];
+      const uvs = [];
+      if (current.type === "fill") {
+        current.path.fillTriangulate({
           vertices,
           indices
         });
-        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
       } else {
-        draw.path.strokeTriangulate({
+        current.path.strokeTriangulate({
           vertices,
           indices,
-          lineStyle: draw.style,
+          lineStyle: current.style,
           flipAlignment: false,
           closed: true
         });
-        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
       }
-    }
-    const last = this._draws[this._draws.length - 1];
-    if (last && vertices.length) {
-      push(last);
+      this.buildUvs(0, vertices, uvs, current.texture, current.uvTransform);
+      batchables.push({
+        vertices,
+        indices,
+        uvs,
+        texture: current.texture,
+        type: current.type,
+        disableWrapMode: current.disableWrapMode,
+        vertTransform: current.vertTransform
+      });
     }
     return batchables;
   }
@@ -7390,11 +7373,6 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   requestRelayout() {
     this._relayouting = true;
     this.requestUpdate();
-    this.forEachChild((node) => {
-      if (node instanceof exports.CanvasItem) {
-        node.requestRelayout();
-      }
-    });
   }
   requestRepaint() {
     this._repainting = true;
@@ -9024,7 +9002,7 @@ class BaseElement2DFill extends CoreObject {
   _getDrawOptions() {
     let disableWrapMode = false;
     const { width, height } = this.parent.size;
-    const textureTransform = new Transform2D().scale(1 / width, 1 / height);
+    const uvTransform = new Transform2D().scale(1 / width, 1 / height);
     if (this.cropRect) {
       const {
         left = 0,
@@ -9032,7 +9010,7 @@ class BaseElement2DFill extends CoreObject {
         right = 0,
         bottom = 0
       } = this.cropRect;
-      textureTransform.scale(
+      uvTransform.scale(
         Math.abs(1 - (left + right)),
         Math.abs(1 - (top + bottom))
       ).translate(left, top);
@@ -9047,24 +9025,26 @@ class BaseElement2DFill extends CoreObject {
         // flip, TODO
         // alignment, TODO
       } = this.tile;
-      textureTransform.translate(-translateX / width, -translateY / height).scale(1 / scaleX, 1 / scaleY);
+      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;
-      textureTransform.scale(
+      uvTransform.scale(
         Math.abs(1 - (-left + -right)),
         Math.abs(1 - (-top + -bottom))
       ).translate(-left, -top);
       disableWrapMode = true;
     }
-    return { disableWrapMode, textureTransform };
+    return { disableWrapMode, uvTransform };
   }
   draw() {
     const ctx = this.parent.context;
-    const { textureTransform, disableWrapMode } = this._getDrawOptions();
-    ctx.textureTransform = textureTransform;
+    const { uvTransform, disableWrapMode } = this._getDrawOptions();
+    ctx.uvTransform = uvTransform;
     ctx.fillStyle = this._texture ?? this.color;
-    ctx.fill({ disableWrapMode });
+    ctx.fill({
+      disableWrapMode
+    });
   }
 }
 __decorateClass$u([
@@ -9164,14 +9144,14 @@ class BaseElement2DOutline extends BaseElement2DFill {
   }
   canDraw() {
     return Boolean(
-      this.width || super.canDraw()
+      this.width || this.color || super.canDraw()
     );
   }
   draw() {
     const ctx = this.parent.context;
-    const { textureTransform, disableWrapMode } = this._getDrawOptions();
+    const { uvTransform, disableWrapMode } = this._getDrawOptions();
     ctx.lineWidth = this.width || 1;
-    ctx.textureTransform = textureTransform;
+    ctx.uvTransform = uvTransform;
     ctx.strokeStyle = this._texture ?? this.color;
     ctx.stroke({ disableWrapMode });
   }
@@ -9411,13 +9391,6 @@ class BaseElement2DText extends CoreObject {
   }
   updateMeasure() {
     this.measureResult = this.measure();
-    const textWidth = this.measureResult.boundingBox.width;
-    const textHeight = this.measureResult.boundingBox.height;
-    const { left, top, width, height = textHeight } = this.parent.style;
-    this.parent.position.x = left + Math.min(0, ((width || textWidth) - textWidth) / 2);
-    this.parent.position.y = top + Math.min(0, ((height || textHeight) - textHeight) / 2);
-    this.parent.size.width = textWidth;
-    this.parent.size.height = textHeight;
     return this;
   }
   canDraw() {
@@ -9426,15 +9399,24 @@ class BaseElement2DText extends CoreObject {
     );
   }
   draw() {
-    const ctx = this.parent.context;
     this.baseText.render({
       pixelRatio: this.texture.pixelRatio,
       view: this.texture.source
     });
     this.texture.requestUpload();
-    const { width, height } = this.parent.size;
+    const textWidth = this.measureResult?.boundingBox.width ?? this.parent.size.width;
+    const textHeight = this.measureResult?.boundingBox.height ?? this.parent.size.height;
+    const ctx = this.parent.context;
     ctx.fillStyle = this.texture;
-    ctx.textureTransform = new Transform2D().scale(1 / width, 1 / height);
+    ctx.uvTransform = new Transform2D().scale(1 / textWidth, 1 / textHeight);
+    ctx.vertTransform = () => {
+      const parent = this.parent;
+      const origin = parent.getTransformOrigin();
+      return new Transform2D().translate(-origin.x, -origin.y).scale(
+        parent.globalScale.x > 0 ? 1 : -1,
+        parent.globalScale.y > 0 ? 1 : -1
+      ).translate(origin.x, origin.y);
+    };
     ctx.fill();
   }
 }
@@ -9475,8 +9457,19 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     super();
     this.setProperties(properties).append(nodes);
   }
+  getTransformOrigin() {
+    return new Vector2(0, 0);
+  }
+  getTransform(cb) {
+    const origin = this.getTransformOrigin();
+    const transform = new Transform2D();
+    transform.translate(-origin.x, -origin.y).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
+    cb?.(transform);
+    transform.translate(this.position.x, this.position.y).translate(origin.x, origin.y);
+    return transform;
+  }
   _updateTransform() {
-    this.transform.identity().scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation).translate(this.position.x, this.position.y);
+    this.transform.copy(this.getTransform());
   }
   _updateGlobalTransform() {
     const parent = this.getParent();
@@ -9503,8 +9496,17 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     this.globalSkew.y = Math.atan2(b, d) - this.globalRotation;
     this.requestRelayout();
   }
-  _transformVertices(vertices) {
-    const [a, c, tx, b, d, ty] = this.globalTransform.toArray();
+  _transformVertices(vertices, vertTransform) {
+    let a, c, tx, b, d, ty;
+    if (vertTransform) {
+      const globalTransform = this.globalTransform.clone();
+      globalTransform.multiply(
+        typeof vertTransform === "function" ? vertTransform?.() : vertTransform
+      );
+      [a, c, tx, b, d, ty] = globalTransform.toArray();
+    } else {
+      [a, c, tx, b, d, ty] = this.globalTransform.toArray();
+    }
     const newVertices = vertices.slice();
     for (let len = vertices.length, i = 0; i < len; i += 2) {
       const x = vertices[i];
@@ -9520,7 +9522,7 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     return super._relayout(batchables).map((batchable) => {
       return {
         ...batchable,
-        vertices: this._transformVertices(batchable.vertices)
+        vertices: this._transformVertices(batchable.vertices, batchable.vertTransform)
       };
     });
   }
@@ -9727,14 +9729,17 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
       }
     }
   }
-  _updateTransform() {
+  getTransformOrigin() {
     const { width, height } = this.size;
     const [originX, originY] = parseCSSTransformOrigin(this.style.transformOrigin);
-    const offsetX = originX * width;
-    const offsetY = originY * height;
-    this.transform.identity().translate(-offsetX, -offsetY).scale(this.scale.x, this.scale.y).skew(this.skew.x, this.skew.y).rotate(this.rotation);
-    parseCSSTransform(this.style.transform ?? "", width, height, this.transform);
-    this.transform.translate(this.position.x, this.position.y).translate(offsetX, offsetY);
+    return new Vector2(originX * width, originY * height);
+  }
+  getTransform(cb) {
+    const { width, height } = this.size;
+    return super.getTransform((transform) => {
+      parseCSSTransform(this.style.transform ?? "", width, height, transform);
+      cb?.(transform);
+    });
   }
   _updateGlobalTransform() {
     super._updateGlobalTransform();
@@ -10526,7 +10531,7 @@ exports.Image2D = class Image2D extends exports.Element2D {
       const sy = 1 / h;
       const tx = left * width * sx;
       const ty = top * height * sy;
-      this.context.textureTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
+      this.context.uvTransform = new Transform2D().scale(sx, sy).translate(tx, ty);
       this.shape.draw();
       this.context.fill();
     }
@@ -10566,7 +10571,7 @@ class TextureRect2D extends exports.Element2D {
     if (this.texture?.valid) {
       const { width, height } = this.size;
       this.context.fillStyle = this.texture;
-      this.context.textureTransform = new Transform2D().scale(
+      this.context.uvTransform = new Transform2D().scale(
         1 / width,
         1 / height
       );
@@ -10785,15 +10790,10 @@ exports.Text2D = class Text2D extends TextureRect2D {
   }
   _drawContent() {
     if (!this.split) {
-      const onText2DRender = this.children?.find((child) => "onText2DRender" in child)?.onText2DRender;
-      if (onText2DRender) {
-        onText2DRender();
-      } else {
-        this.base.render({
-          pixelRatio: this.texture.pixelRatio,
-          view: this.texture.source
-        });
-      }
+      this.base.render({
+        pixelRatio: this.texture.pixelRatio,
+        view: this.texture.source
+      });
       this.texture.requestUpload();
       super._drawContent();
     }
@@ -12481,7 +12481,7 @@ exports.AudioWaveform = class AudioWaveform extends exports.Element2D {
     const src = this._src;
     if (src?.valid) {
       this.context.fillStyle = src;
-      this.context.textureTransform = new Transform2D().scale(
+      this.context.uvTransform = new Transform2D().scale(
         1 / this.style.width,
         1 / this.style.height
       );
@@ -12755,7 +12755,7 @@ exports.Ruler = class Ruler extends exports.Control {
     const texture = this.texture;
     if (texture?.valid) {
       this.context.fillStyle = texture;
-      this.context.textureTransform = new Transform2D().scale(
+      this.context.uvTransform = new Transform2D().scale(
         1 / this.size.width,
         1 / this.size.height
       );

package/dist/index.d.cts

@@ -1419,33 +1419,35 @@ declare class VideoTexture extends Texture2D<HTMLVideoElement> {
 declare class ViewportTexture extends PixelsTexture {
 }
 
+type UVTransform = Transform2D | ((x: number, y: number) => [number, number]);
+type VertTransform = Transform2D | (() => Transform2D);
 interface CanvasBatchable extends Batchable2D {
     type: 'stroke' | 'fill';
     texture?: Texture2D;
+    vertTransform?: VertTransform;
 }
 interface StrokeDraw extends Partial<CanvasBatchable> {
     type: 'stroke';
     path: Path2D;
-    texture?: Texture2D;
-    textureTransform?: Transform2D;
     style: LineStyle;
+    uvTransform?: UVTransform;
 }
 interface FillDraw extends Partial<CanvasBatchable> {
     type: 'fill';
     path: Path2D;
-    texture?: Texture2D;
-    textureTransform?: Transform2D;
+    uvTransform?: UVTransform;
 }
 declare class CanvasContext extends Path2D {
-    textureTransform?: Transform2D;
     fillStyle?: Color$1 | Texture2D;
     strokeStyle?: Color$1 | Texture2D;
     lineCap?: LineCap;
     lineJoin?: LineJoin;
     lineWidth?: number;
     miterLimit?: number;
-    _defaultStyle: Texture2D<Texture2DSource>;
-    _draws: (StrokeDraw | FillDraw)[];
+    uvTransform?: UVTransform;
+    vertTransform?: VertTransform;
+    protected _defaultStyle: Texture2D<Texture2DSource>;
+    protected _draws: (StrokeDraw | FillDraw)[];
     protected _toTexture(source: Color$1 | Texture2D): Texture2D;
     stroke(options?: Partial<StrokeDraw>): void;
     fillRect(x: number, y: number, width: number, height: number): void;
@@ -1453,7 +1455,7 @@ declare class CanvasContext extends Path2D {
     fill(options?: Partial<FillDraw>): void;
     copy(source: CanvasContext): this;
     reset(): this;
-    buildUvs(start: number, vertices: number[], uvs: number[], texture?: Texture2D, textureTransform?: Transform2D): void;
+    buildUvs(start: number, vertices: number[], uvs: number[], texture?: Texture2D, uvTransform?: UVTransform): void;
     toBatchables(): CanvasBatchable[];
 }
 
@@ -1882,9 +1884,11 @@ declare class Node2D extends CanvasItem {
     globalTransform: Transform2D;
     protected _parentTransformDirtyId?: number;
     constructor(properties?: Partial<Node2DProperties>, nodes?: Node[]);
+    getTransformOrigin(): Vector2;
+    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
     protected _updateTransform(): void;
     protected _updateGlobalTransform(): void;
-    protected _transformVertices(vertices: number[]): number[];
+    protected _transformVertices(vertices: number[], vertTransform?: VertTransform): number[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _process(delta: number): void;
 }
@@ -1913,7 +1917,7 @@ declare class BaseElement2DFill extends CoreObject {
     canDraw(): boolean;
     protected _getDrawOptions(): {
         disableWrapMode: boolean;
-        textureTransform: Transform2D;
+        uvTransform: Transform2D;
     };
     draw(): void;
 }
@@ -2051,7 +2055,8 @@ 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 _updateTransform(): void;
+    getTransformOrigin(): Vector2;
+    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
     protected _updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _updateOverflow(): void;
@@ -3267,4 +3272,4 @@ interface RenderOptions {
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEventMap, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, CanvasBatchable, CanvasItemEventMap, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEventMap, ControlProperties, CoreObjectEventMap, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEventMap, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineOptions, EventListener, EventListenerOptions, EventListenerValue, FillDraw, FlexBaseElement2DEventMap, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEventMap, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEventMap, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DProperties, NodeEventMap, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, PropertyDeclaration, RangeProperties, Rectangulable, RectangulableEventMap, RefCountedEventMap, RenderMode, RenderOptions, Renderable, ResourceEventMap, RulerProperties, ScalerEventMap, ScalerProperties, SceneTreeEventMap, ScrollBarProperties, StrokeDraw, Text2DEventMap, Text2DProperties, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEventMap, TimelineNodeEventMap, TimelineNodeProperties, TimelineProperties, TimingFunctions, Transform2DObject, TransformRect2DProperties, TransitionProperties, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEventMap, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEventMap, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, CanvasBatchable, CanvasItemEventMap, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEventMap, ControlProperties, CoreObjectEventMap, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEventMap, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineOptions, EventListener, EventListenerOptions, EventListenerValue, FillDraw, FlexBaseElement2DEventMap, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEventMap, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEventMap, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DProperties, NodeEventMap, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, PropertyDeclaration, RangeProperties, Rectangulable, RectangulableEventMap, RefCountedEventMap, RenderMode, RenderOptions, Renderable, ResourceEventMap, RulerProperties, ScalerEventMap, ScalerProperties, SceneTreeEventMap, ScrollBarProperties, StrokeDraw, Text2DEventMap, Text2DProperties, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEventMap, TimelineNodeEventMap, TimelineNodeProperties, TimelineProperties, TimingFunctions, Transform2DObject, TransformRect2DProperties, TransitionProperties, UVTransform, VectorLike, VectorOperateOutput, VertTransform, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEventMap, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };

package/dist/index.d.mts

@@ -1419,33 +1419,35 @@ declare class VideoTexture extends Texture2D<HTMLVideoElement> {
 declare class ViewportTexture extends PixelsTexture {
 }
 
+type UVTransform = Transform2D | ((x: number, y: number) => [number, number]);
+type VertTransform = Transform2D | (() => Transform2D);
 interface CanvasBatchable extends Batchable2D {
     type: 'stroke' | 'fill';
     texture?: Texture2D;
+    vertTransform?: VertTransform;
 }
 interface StrokeDraw extends Partial<CanvasBatchable> {
     type: 'stroke';
     path: Path2D;
-    texture?: Texture2D;
-    textureTransform?: Transform2D;
     style: LineStyle;
+    uvTransform?: UVTransform;
 }
 interface FillDraw extends Partial<CanvasBatchable> {
     type: 'fill';
     path: Path2D;
-    texture?: Texture2D;
-    textureTransform?: Transform2D;
+    uvTransform?: UVTransform;
 }
 declare class CanvasContext extends Path2D {
-    textureTransform?: Transform2D;
     fillStyle?: Color$1 | Texture2D;
     strokeStyle?: Color$1 | Texture2D;
     lineCap?: LineCap;
     lineJoin?: LineJoin;
     lineWidth?: number;
     miterLimit?: number;
-    _defaultStyle: Texture2D<Texture2DSource>;
-    _draws: (StrokeDraw | FillDraw)[];
+    uvTransform?: UVTransform;
+    vertTransform?: VertTransform;
+    protected _defaultStyle: Texture2D<Texture2DSource>;
+    protected _draws: (StrokeDraw | FillDraw)[];
     protected _toTexture(source: Color$1 | Texture2D): Texture2D;
     stroke(options?: Partial<StrokeDraw>): void;
     fillRect(x: number, y: number, width: number, height: number): void;
@@ -1453,7 +1455,7 @@ declare class CanvasContext extends Path2D {
     fill(options?: Partial<FillDraw>): void;
     copy(source: CanvasContext): this;
     reset(): this;
-    buildUvs(start: number, vertices: number[], uvs: number[], texture?: Texture2D, textureTransform?: Transform2D): void;
+    buildUvs(start: number, vertices: number[], uvs: number[], texture?: Texture2D, uvTransform?: UVTransform): void;
     toBatchables(): CanvasBatchable[];
 }
 
@@ -1882,9 +1884,11 @@ declare class Node2D extends CanvasItem {
     globalTransform: Transform2D;
     protected _parentTransformDirtyId?: number;
     constructor(properties?: Partial<Node2DProperties>, nodes?: Node[]);
+    getTransformOrigin(): Vector2;
+    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
     protected _updateTransform(): void;
     protected _updateGlobalTransform(): void;
-    protected _transformVertices(vertices: number[]): number[];
+    protected _transformVertices(vertices: number[], vertTransform?: VertTransform): number[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _process(delta: number): void;
 }
@@ -1913,7 +1917,7 @@ declare class BaseElement2DFill extends CoreObject {
     canDraw(): boolean;
     protected _getDrawOptions(): {
         disableWrapMode: boolean;
-        textureTransform: Transform2D;
+        uvTransform: Transform2D;
     };
     draw(): void;
 }
@@ -2051,7 +2055,8 @@ 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 _updateTransform(): void;
+    getTransformOrigin(): Vector2;
+    getTransform(cb?: (transform: Transform2D) => void): Transform2D;
     protected _updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _updateOverflow(): void;
@@ -3267,4 +3272,4 @@ interface RenderOptions {
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEventMap, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, CanvasBatchable, CanvasItemEventMap, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEventMap, ControlProperties, CoreObjectEventMap, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEventMap, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineOptions, EventListener, EventListenerOptions, EventListenerValue, FillDraw, FlexBaseElement2DEventMap, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEventMap, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEventMap, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DProperties, NodeEventMap, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, PropertyDeclaration, RangeProperties, Rectangulable, RectangulableEventMap, RefCountedEventMap, RenderMode, RenderOptions, Renderable, ResourceEventMap, RulerProperties, ScalerEventMap, ScalerProperties, SceneTreeEventMap, ScrollBarProperties, StrokeDraw, Text2DEventMap, Text2DProperties, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEventMap, TimelineNodeEventMap, TimelineNodeProperties, TimelineProperties, TimingFunctions, Transform2DObject, TransformRect2DProperties, TransitionProperties, VectorLike, VectorOperateOutput, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEventMap, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEventMap, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, CanvasBatchable, CanvasItemEventMap, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEventMap, ControlProperties, CoreObjectEventMap, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEventMap, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineOptions, EventListener, EventListenerOptions, EventListenerValue, FillDraw, FlexBaseElement2DEventMap, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEventMap, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEventMap, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DProperties, NodeEventMap, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, PropertyDeclaration, RangeProperties, Rectangulable, RectangulableEventMap, RefCountedEventMap, RenderMode, RenderOptions, Renderable, ResourceEventMap, RulerProperties, ScalerEventMap, ScalerProperties, SceneTreeEventMap, ScrollBarProperties, StrokeDraw, Text2DEventMap, Text2DProperties, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEventMap, TimelineNodeEventMap, TimelineNodeProperties, TimelineProperties, TimingFunctions, Transform2DObject, TransformRect2DProperties, TransitionProperties, UVTransform, VectorLike, VectorOperateOutput, VertTransform, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEventMap, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };