modern-canvas 0.4.8 → 0.4.10

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":
@@ -8352,15 +8350,16 @@ class SceneTree extends MainLoop {
       console.log(`[modern-canvas]`, ...args);
     }
   }
-  _render(renderer, delta = 0) {
-    this.timeline.addTime(delta);
+  _process(delta = 0) {
+    this.timeline.emit("process", 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();
@@ -8393,7 +8392,7 @@ class SceneTree extends MainLoop {
 }
 __decorateClass$r([
   property({ default: false })
-], SceneTree.prototype, "paused");
+], SceneTree.prototype, "processPaused");
 __decorateClass$r([
   property()
 ], SceneTree.prototype, "backgroundColor");
@@ -13191,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() {
@@ -13206,7 +13212,6 @@ class Engine extends SceneTree {
     this.renderer.free();
   }
   toPixels() {
-    this.render();
     return this.renderer.toPixels();
   }
   toImageData() {
@@ -13237,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 {
@@ -13252,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;
 }
@@ -3042,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;
@@ -3054,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;
 }
@@ -3042,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;
@@ -3054,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;
 }
@@ -3042,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;
@@ -3054,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>;