modern-canvas 0.4.7 → 0.4.9

package/dist/index.mjs

@@ -2231,14 +2231,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;
@@ -5767,9 +5765,9 @@ let Node = class 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":
@@ -5892,6 +5890,17 @@ let Node = class 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])) {
@@ -5903,6 +5912,35 @@ let Node = class 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;
@@ -8101,6 +8139,16 @@ let CanvasItem = class extends 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) {
@@ -8296,15 +8344,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();
@@ -8337,7 +8386,7 @@ class SceneTree extends MainLoop {
 }
 __decorateClass$r([
   property({ default: false })
-], SceneTree.prototype, "paused");
+], SceneTree.prototype, "processPaused");
 __decorateClass$r([
   property()
 ], SceneTree.prototype, "backgroundColor");
@@ -8687,11 +8736,11 @@ let Node2D = class extends CanvasItem {
     });
   }
   _process(delta) {
+    super._process(delta);
     const parent = this.getParent();
     if (this._parentTransformDirtyId !== parent?.globalTransform?.dirtyId) {
       this.requestRelayout();
     }
-    super._process(delta);
   }
 };
 Node2D = __decorateClass$n([
@@ -13135,13 +13184,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() {
@@ -13150,7 +13206,6 @@ class Engine extends SceneTree {
     this.renderer.free();
   }
   toPixels() {
-    this.render();
     return this.renderer.toPixels();
   }
   toImageData() {
@@ -13181,10 +13236,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 {
@@ -13196,28 +13255,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 Node) {
-      root.appendChild(v);
+      engine.root.appendChild(v);
     } else {
-      root.appendChild(Node.parse(v));
+      engine.root.appendChild(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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-canvas",
   "type": "module",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "packageManager": "pnpm@9.15.1",
   "description": "A JavaScript WebGL rendering engine.",
   "author": "wxm",