modern-canvas 0.4.7 → 0.4.9

package/dist/index.cjs

@@ -2237,14 +2237,12 @@ class MainLoop extends CoreObject {
       this.on("process", process);
       Ticker.on(this._onNextTick, { sort: 0 });
     }
-    return this;
   }
   stop() {
     if (this._starting) {
       this._starting = false;
       Ticker.off(this._onNextTick, { sort: 0 });
     }
-    return this;
   }
   _onNextTick() {
     const elapsed = Ticker.elapsed * this.speed;
@@ -5773,9 +5771,9 @@ exports.Node = class Node extends CoreObject {
       case "inherit":
         return this._parent?.canProcess() ?? true;
       case "pausable":
-        return !this._tree.paused;
+        return !this._tree.processPaused;
       case "when_paused":
-        return this._tree.paused;
+        return this._tree.processPaused;
       case "always":
         return true;
       case "disabled":
@@ -5898,6 +5896,17 @@ exports.Node = class Node extends CoreObject {
     this._parent.moveChild(sibling, this.getIndex(true) + 1);
     return this;
   }
+  prepend(...nodes) {
+    let _nodes;
+    if (Array.isArray(nodes[0])) {
+      _nodes = nodes[0];
+    } else {
+      _nodes = nodes;
+    }
+    _nodes.forEach((node) => {
+      this.moveChild(node, 0);
+    });
+  }
   append(...nodes) {
     let _nodes;
     if (Array.isArray(nodes[0])) {
@@ -5909,6 +5918,35 @@ exports.Node = class Node extends CoreObject {
       this.appendChild(node);
     });
   }
+  before(...nodes) {
+    let _nodes;
+    if (Array.isArray(nodes[0])) {
+      _nodes = nodes[0];
+    } else {
+      _nodes = nodes;
+    }
+    _nodes.forEach((node) => {
+      this._parent?.moveChild(node, this.getIndex(true));
+    });
+  }
+  after(...nodes) {
+    let _nodes;
+    if (Array.isArray(nodes[0])) {
+      _nodes = nodes[0];
+    } else {
+      _nodes = nodes;
+    }
+    _nodes.forEach((node) => {
+      this._parent?.moveChild(node, this.getIndex(true) + 1);
+    });
+  }
+  insertBefore(node, child) {
+    if (!child.hasParent() || !this.is(child.parent)) {
+      return node;
+    }
+    this.moveChild(node, child.getIndex(true));
+    return node;
+  }
   appendChild(node, internalMode = node.internalMode) {
     if (this.is(node) || node.hasParent()) {
       return node;
@@ -8107,6 +8145,16 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
       };
     });
   }
+  _process(delta) {
+    super._process(delta);
+    const parent = this.getParent();
+    if (this._parentGlobalVisible !== parent?.globalVisible) {
+      this.requestUpdate();
+    }
+    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
+      this.requestUpdate();
+    }
+  }
   _update() {
     const parent = this.getParent();
     if (this._parentGlobalVisible !== parent?.globalVisible) {
@@ -8302,15 +8350,16 @@ class SceneTree extends MainLoop {
       console.log(`[modern-canvas]`, ...args);
     }
   }
-  _render(renderer, delta = 0) {
+  _process(delta = 0) {
     this.timeline.addTime(delta);
     this.emit("processing");
     this.root.emit("process", delta);
     this.emit("processed");
+  }
+  _render(renderer) {
     renderer.program.uniforms.projectionMatrix = this.root.toProjectionArray(true);
     this.renderStack.render(renderer);
     this._renderScreen(renderer);
-    return this;
   }
   _renderScreen(renderer) {
     renderer.state.reset();
@@ -8343,7 +8392,7 @@ class SceneTree extends MainLoop {
 }
 __decorateClass$r([
   property({ default: false })
-], SceneTree.prototype, "paused");
+], SceneTree.prototype, "processPaused");
 __decorateClass$r([
   property()
 ], SceneTree.prototype, "backgroundColor");
@@ -8693,11 +8742,11 @@ exports.Node2D = class Node2D extends exports.CanvasItem {
     });
   }
   _process(delta) {
+    super._process(delta);
     const parent = this.getParent();
     if (this._parentTransformDirtyId !== parent?.globalTransform?.dirtyId) {
       this.requestRelayout();
     }
-    super._process(delta);
   }
 };
 exports.Node2D = __decorateClass$n([
@@ -13141,13 +13190,20 @@ class Engine extends SceneTree {
     await assets.waitUntilLoad();
     await this.nextTick();
   }
+  async waitAndRender(delta = 0) {
+    this._process(delta);
+    await this.waitUntilLoad();
+    this._render(this.renderer);
+  }
   render(delta = 0) {
-    return this._render(this.renderer, delta);
+    this._process(delta);
+    this._render(this.renderer);
   }
-  start() {
-    this.render();
-    return super.start((delta) => {
-      this.render(delta);
+  async start() {
+    await this.waitAndRender();
+    super.start((delta) => {
+      this._process(delta);
+      this._render(this.renderer);
     });
   }
   free() {
@@ -13156,7 +13212,6 @@ class Engine extends SceneTree {
     this.renderer.free();
   }
   toPixels() {
-    this.render();
     return this.renderer.toPixels();
   }
   toImageData() {
@@ -13187,10 +13242,14 @@ class Engine extends SceneTree {
 }
 
 let engine;
-let renderLoop;
 const queue = [];
-async function startRenderLoop(sleep = 100) {
-  while (true) {
+let starting = false;
+async function start(sleep = 100) {
+  if (starting) {
+    return;
+  }
+  starting = true;
+  while (queue.length) {
     const cb = queue.shift();
     if (cb) {
       try {
@@ -13202,28 +13261,29 @@ async function startRenderLoop(sleep = 100) {
       await new Promise((r) => setTimeout(r, sleep));
     }
   }
+  starting = false;
 }
-async function performRender(options) {
+async function task(options) {
+  const { data, width, height, time = 0 } = options;
   engine ??= new Engine({ width: 1, height: 1 });
-  const root = engine.root;
-  root.removeChildren();
-  const { data, width, height } = options;
+  engine.root.removeChildren();
+  engine.timeline.currentTime = time;
   engine.resize(width, height);
   (Array.isArray(data) ? data : [data]).forEach((v) => {
     if (v instanceof exports.Node) {
-      root.appendChild(v);
+      engine.root.appendChild(v);
     } else {
-      root.appendChild(exports.Node.parse(v));
+      engine.root.appendChild(exports.Node.parse(v));
     }
   });
-  await engine.waitUntilLoad();
   await options.onBeforeRender?.(engine);
+  await engine.waitAndRender();
   return engine.toCanvas2D();
 }
 async function render(options) {
-  renderLoop ??= startRenderLoop();
   return new Promise((r) => {
-    queue.push(async () => r(await performRender(options)));
+    queue.push(async () => r(await task(options)));
+    start();
   });
 }
 

package/dist/index.d.cts

@@ -595,8 +595,8 @@ declare class MainLoop extends CoreObject {
     get starting(): boolean;
     get spf(): number;
     constructor();
-    start(process: (delta: number) => void): this;
-    stop(): this;
+    start(process: (delta: number) => void): void;
+    stop(): void;
     protected _onNextTick(): void;
     free(): void;
 }
@@ -1569,7 +1569,7 @@ interface SceneTree {
     emit: (<K extends keyof SceneTreeEventMap>(type: K, ...args: Parameters<SceneTreeEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
 }
 declare class SceneTree extends MainLoop {
-    paused: boolean;
+    processPaused: boolean;
     backgroundColor?: ColorValue;
     debug: boolean;
     readonly input: Input;
@@ -1583,7 +1583,8 @@ declare class SceneTree extends MainLoop {
     constructor(timeline?: Timeline);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     log(...args: any[]): void;
-    protected _render(renderer: WebGLRenderer, delta?: number): this;
+    protected _process(delta?: number): void;
+    protected _render(renderer: WebGLRenderer): void;
     protected _renderScreen(renderer: WebGLRenderer): void;
     free(): void;
 }
@@ -1683,8 +1684,15 @@ declare class Node extends CoreObject {
     getNode<T extends Node>(path: string): T | undefined;
     removeNode(path: string): void;
     addSibling(sibling: Node): this;
-    append(nodes: Node[]): void;
-    append(...nodes: Node[]): void;
+    prepend<T extends Node>(nodes: T[]): void;
+    prepend<T extends Node>(...nodes: T[]): void;
+    append<T extends Node>(nodes: T[]): void;
+    append<T extends Node>(...nodes: T[]): void;
+    before<T extends Node>(nodes: T[]): void;
+    before<T extends Node>(...nodes: T[]): void;
+    after<T extends Node>(nodes: T[]): void;
+    after<T extends Node>(...nodes: T[]): void;
+    insertBefore<T extends Node>(node: T, child: Node): T;
     appendChild<T extends Node>(node: T, internalMode?: InternalMode): T;
     moveChild(child: Node, toIndex: number, internalMode?: InternalMode): this;
     removeChild<T extends Node>(child: T): T;
@@ -1793,6 +1801,7 @@ declare class CanvasItem extends TimelineNode {
     protected _redraw(): CanvasBatchable[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
+    protected _process(delta: number): void;
     protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
 }
@@ -3034,8 +3043,9 @@ declare class Engine extends SceneTree {
     resize(width: number, height: number, updateCss?: boolean): this;
     nextTick(): Promise<void>;
     waitUntilLoad(): Promise<void>;
-    render(delta?: number): this;
-    start(): this;
+    waitAndRender(delta?: number): Promise<void>;
+    render(delta?: number): void;
+    start(): Promise<void>;
     free(): void;
     toPixels(): Uint8ClampedArray;
     toImageData(): ImageData;
@@ -3046,6 +3056,7 @@ interface RenderOptions {
     data: Record<string, any> | Node | (Node | Record<string, any>)[];
     width: number;
     height: number;
+    time?: number;
     onBeforeRender?: (engine: Engine) => void | Promise<void>;
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;

package/dist/index.d.mts

@@ -595,8 +595,8 @@ declare class MainLoop extends CoreObject {
     get starting(): boolean;
     get spf(): number;
     constructor();
-    start(process: (delta: number) => void): this;
-    stop(): this;
+    start(process: (delta: number) => void): void;
+    stop(): void;
     protected _onNextTick(): void;
     free(): void;
 }
@@ -1569,7 +1569,7 @@ interface SceneTree {
     emit: (<K extends keyof SceneTreeEventMap>(type: K, ...args: Parameters<SceneTreeEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
 }
 declare class SceneTree extends MainLoop {
-    paused: boolean;
+    processPaused: boolean;
     backgroundColor?: ColorValue;
     debug: boolean;
     readonly input: Input;
@@ -1583,7 +1583,8 @@ declare class SceneTree extends MainLoop {
     constructor(timeline?: Timeline);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     log(...args: any[]): void;
-    protected _render(renderer: WebGLRenderer, delta?: number): this;
+    protected _process(delta?: number): void;
+    protected _render(renderer: WebGLRenderer): void;
     protected _renderScreen(renderer: WebGLRenderer): void;
     free(): void;
 }
@@ -1683,8 +1684,15 @@ declare class Node extends CoreObject {
     getNode<T extends Node>(path: string): T | undefined;
     removeNode(path: string): void;
     addSibling(sibling: Node): this;
-    append(nodes: Node[]): void;
-    append(...nodes: Node[]): void;
+    prepend<T extends Node>(nodes: T[]): void;
+    prepend<T extends Node>(...nodes: T[]): void;
+    append<T extends Node>(nodes: T[]): void;
+    append<T extends Node>(...nodes: T[]): void;
+    before<T extends Node>(nodes: T[]): void;
+    before<T extends Node>(...nodes: T[]): void;
+    after<T extends Node>(nodes: T[]): void;
+    after<T extends Node>(...nodes: T[]): void;
+    insertBefore<T extends Node>(node: T, child: Node): T;
     appendChild<T extends Node>(node: T, internalMode?: InternalMode): T;
     moveChild(child: Node, toIndex: number, internalMode?: InternalMode): this;
     removeChild<T extends Node>(child: T): T;
@@ -1793,6 +1801,7 @@ declare class CanvasItem extends TimelineNode {
     protected _redraw(): CanvasBatchable[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
+    protected _process(delta: number): void;
     protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
 }
@@ -3034,8 +3043,9 @@ declare class Engine extends SceneTree {
     resize(width: number, height: number, updateCss?: boolean): this;
     nextTick(): Promise<void>;
     waitUntilLoad(): Promise<void>;
-    render(delta?: number): this;
-    start(): this;
+    waitAndRender(delta?: number): Promise<void>;
+    render(delta?: number): void;
+    start(): Promise<void>;
     free(): void;
     toPixels(): Uint8ClampedArray;
     toImageData(): ImageData;
@@ -3046,6 +3056,7 @@ interface RenderOptions {
     data: Record<string, any> | Node | (Node | Record<string, any>)[];
     width: number;
     height: number;
+    time?: number;
     onBeforeRender?: (engine: Engine) => void | Promise<void>;
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;

package/dist/index.d.ts

@@ -595,8 +595,8 @@ declare class MainLoop extends CoreObject {
     get starting(): boolean;
     get spf(): number;
     constructor();
-    start(process: (delta: number) => void): this;
-    stop(): this;
+    start(process: (delta: number) => void): void;
+    stop(): void;
     protected _onNextTick(): void;
     free(): void;
 }
@@ -1569,7 +1569,7 @@ interface SceneTree {
     emit: (<K extends keyof SceneTreeEventMap>(type: K, ...args: Parameters<SceneTreeEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
 }
 declare class SceneTree extends MainLoop {
-    paused: boolean;
+    processPaused: boolean;
     backgroundColor?: ColorValue;
     debug: boolean;
     readonly input: Input;
@@ -1583,7 +1583,8 @@ declare class SceneTree extends MainLoop {
     constructor(timeline?: Timeline);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     log(...args: any[]): void;
-    protected _render(renderer: WebGLRenderer, delta?: number): this;
+    protected _process(delta?: number): void;
+    protected _render(renderer: WebGLRenderer): void;
     protected _renderScreen(renderer: WebGLRenderer): void;
     free(): void;
 }
@@ -1683,8 +1684,15 @@ declare class Node extends CoreObject {
     getNode<T extends Node>(path: string): T | undefined;
     removeNode(path: string): void;
     addSibling(sibling: Node): this;
-    append(nodes: Node[]): void;
-    append(...nodes: Node[]): void;
+    prepend<T extends Node>(nodes: T[]): void;
+    prepend<T extends Node>(...nodes: T[]): void;
+    append<T extends Node>(nodes: T[]): void;
+    append<T extends Node>(...nodes: T[]): void;
+    before<T extends Node>(nodes: T[]): void;
+    before<T extends Node>(...nodes: T[]): void;
+    after<T extends Node>(nodes: T[]): void;
+    after<T extends Node>(...nodes: T[]): void;
+    insertBefore<T extends Node>(node: T, child: Node): T;
     appendChild<T extends Node>(node: T, internalMode?: InternalMode): T;
     moveChild(child: Node, toIndex: number, internalMode?: InternalMode): this;
     removeChild<T extends Node>(child: T): T;
@@ -1793,6 +1801,7 @@ declare class CanvasItem extends TimelineNode {
     protected _redraw(): CanvasBatchable[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
+    protected _process(delta: number): void;
     protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
 }
@@ -3034,8 +3043,9 @@ declare class Engine extends SceneTree {
     resize(width: number, height: number, updateCss?: boolean): this;
     nextTick(): Promise<void>;
     waitUntilLoad(): Promise<void>;
-    render(delta?: number): this;
-    start(): this;
+    waitAndRender(delta?: number): Promise<void>;
+    render(delta?: number): void;
+    start(): Promise<void>;
     free(): void;
     toPixels(): Uint8ClampedArray;
     toImageData(): ImageData;
@@ -3046,6 +3056,7 @@ interface RenderOptions {
     data: Record<string, any> | Node | (Node | Record<string, any>)[];
     width: number;
     height: number;
+    time?: number;
     onBeforeRender?: (engine: Engine) => void | Promise<void>;
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;