modern-canvas 0.4.5 → 0.4.7

package/dist/index.mjs

@@ -6133,6 +6133,7 @@ let TimelineNode = class extends Node {
       this.computedDuration = parent?.computedDuration ? Math.min(this._startTime + this.duration, parent.endTime) - this._startTime : this.duration;
       this._currentTime = this.timelineCurrentTime - this._startTime;
       this.emit("updateCurrentTime", this._currentTime);
+      this.insideTimeRange = this.isInsideTimeRange();
     }
   }
   _process(delta) {
@@ -6149,6 +6150,9 @@ __decorateClass$H([
 __decorateClass$H([
   property({ default: false })
 ], TimelineNode.prototype, "paused", 2);
+__decorateClass$H([
+  protectedProperty()
+], TimelineNode.prototype, "insideTimeRange", 2);
 TimelineNode = __decorateClass$H([
   customNode("TimelineNode")
 ], TimelineNode);
@@ -7246,7 +7250,7 @@ let GlitchEffect = class extends Effect {
   _texture;
   _sizes;
   _offsets;
-  _redraw = false;
+  _needsRedraw = false;
   slices = 10;
   sampleSize = 512;
   offset = 100;
@@ -7284,8 +7288,8 @@ let GlitchEffect = class extends Effect {
     texture.requestUpload();
   }
   apply(renderer, source) {
-    if (!this._redraw) {
-      this._redraw = true;
+    if (!this._needsRedraw) {
+      this._needsRedraw = true;
       this.redraw();
     }
     const width = source.width;
@@ -8034,6 +8038,7 @@ let CanvasItem = class extends TimelineNode {
         this._updateGlobalOpacity();
         break;
       case "visible":
+      case "insideTimeRange":
         this._updateGlobalVisible();
         break;
     }
@@ -8064,7 +8069,7 @@ let CanvasItem = class extends TimelineNode {
   }
   _updateGlobalVisible() {
     this._parentGlobalVisible = this.getParent()?.globalVisible;
-    this._globalVisible = this.visible && (this._parentGlobalVisible ?? true);
+    this._globalVisible = (this._parentGlobalVisible ?? true) && this.visible && this.insideTimeRange;
   }
   _updateGlobalOpacity() {
     this._parentGlobalOpacity = this.getParent()?.opacity;
@@ -8074,23 +8079,28 @@ let CanvasItem = class extends TimelineNode {
       this.requestRepaint();
     }
   }
+  _draw() {
+    this.emit("draw");
+  }
+  _redraw() {
+    this._tree?.log(this.name, "redrawing");
+    this._draw();
+    return this.context.toBatchables();
+  }
   _relayout(batchables) {
-    return this._repaint(batchables);
+    this._tree?.log(this.name, "relayouting");
+    return batchables;
   }
   _repaint(batchables) {
+    this._tree?.log(this.name, "repainting");
     return batchables.map((batchable) => {
       return {
         ...batchable,
         modulate: this._modulate.toArgb(this.globalOpacity, true),
-        // backgroundColor: this.style.getComputedBackgroundColor().abgr,
-        // colorMatrix: colorMatrix.toMatrix4().toArray(true),
-        // colorMatrixOffset: colorMatrix.toVector4().toArray(),
         blendMode: this.blendMode
       };
     });
   }
-  _draw() {
-  }
   _update() {
     const parent = this.getParent();
     if (this._parentGlobalVisible !== parent?.globalVisible) {
@@ -8099,20 +8109,25 @@ let CanvasItem = class extends TimelineNode {
     if (this._parentGlobalOpacity !== parent?.globalOpacity) {
       this._updateGlobalOpacity();
     }
+    const redrawing = this._redrawing;
+    let relayouting = this._relayouting;
+    let repainting = this._repainting;
     let batchables;
-    if (this._redrawing) {
-      this.emit("draw");
-      this._draw();
-      this._originalBatchables = this.context.toBatchables();
-      batchables = this._relayout(this._originalBatchables);
+    if (redrawing) {
+      this._originalBatchables = this._redraw();
+      relayouting = true;
+    }
+    if (relayouting) {
+      this._layoutedBatchables = this._relayout(this._originalBatchables);
+      repainting = true;
+    }
+    if (repainting) {
+      batchables = this._repaint(this._layoutedBatchables);
+    }
+    if (redrawing) {
       if (this._resetContext) {
         this.context.reset();
       }
-    } else if (this._relayouting) {
-      this._layoutedBatchables = this._relayout(this._originalBatchables);
-      batchables = this._layoutedBatchables;
-    } else if (this._repainting) {
-      batchables = this._repaint(this._layoutedBatchables);
     }
     if (batchables) {
       this._batchables = batchables;
@@ -8276,6 +8291,11 @@ class SceneTree extends MainLoop {
         break;
     }
   }
+  log(...args) {
+    if (this.debug) {
+      console.log(`[modern-canvas]`, ...args);
+    }
+  }
   _render(renderer, delta = 0) {
     this.timeline.addTime(delta);
     this.emit("processing");
@@ -8321,6 +8341,9 @@ __decorateClass$r([
 __decorateClass$r([
   property()
 ], SceneTree.prototype, "backgroundColor");
+__decorateClass$r([
+  protectedProperty({ default: false })
+], SceneTree.prototype, "debug");
 
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
 var __decorateClass$q = (decorators, target, key, kind) => {
@@ -8656,18 +8679,16 @@ let Node2D = class extends CanvasItem {
   _relayout(batchables) {
     this._updateTransform();
     this._updateGlobalTransform();
-    return super._relayout(
-      batchables.map((batchable) => {
-        return {
-          ...batchable,
-          vertices: this._transformVertices(batchable.vertices)
-        };
-      })
-    );
+    return super._relayout(batchables).map((batchable) => {
+      return {
+        ...batchable,
+        vertices: this._transformVertices(batchable.vertices)
+      };
+    });
   }
   _process(delta) {
     const parent = this.getParent();
-    if (parent?.transform?.dirtyId !== this._parentTransformDirtyId) {
+    if (this._parentTransformDirtyId !== parent?.globalTransform?.dirtyId) {
       this.requestRelayout();
     }
     super._process(delta);
@@ -8881,6 +8902,7 @@ let BaseElement2D = class extends Node2D {
     }
   }
   _draw() {
+    super._draw();
     this._drawBackground();
     this._drawContent();
     this._drawBorder();
@@ -8936,14 +8958,12 @@ let BaseElement2D = class extends Node2D {
   }
   _repaint(batchables) {
     const colorMatrix = parseCSSFilter(this.style.filter);
-    return batchables.map((batchable) => {
+    return super._repaint(batchables).map((batchable) => {
       return {
         ...batchable,
         backgroundColor: this.style.getComputedBackgroundColor().abgr,
-        modulate: this._modulate.toArgb(this.globalOpacity, true),
         colorMatrix: colorMatrix.toMatrix4().toArray(true),
-        colorMatrixOffset: colorMatrix.toVector4().toArray(),
-        blendMode: this.blendMode
+        colorMatrixOffset: colorMatrix.toVector4().toArray()
       };
     });
   }
@@ -13038,6 +13058,7 @@ class Engine extends SceneTree {
   }) : void 0;
   constructor(options = {}) {
     const {
+      debug = false,
       view,
       width,
       height,
@@ -13049,6 +13070,7 @@ class Engine extends SceneTree {
       ...glOptions
     } = options;
     super(timeline);
+    this.debug = debug;
     this.renderer = new WebGLRenderer(view, {
       ...defaultOptions,
       ...glOptions
@@ -13136,25 +13158,25 @@ class Engine extends SceneTree {
   }
   toCanvas2D() {
     const imageData = this.toImageData();
-    const canvas0 = document.createElement("canvas");
-    canvas0.width = imageData.width;
-    canvas0.height = imageData.height;
-    canvas0.getContext("2d")?.putImageData(imageData, 0, 0);
-    const canvas = document.createElement("canvas");
-    canvas.width = this.width;
-    canvas.height = this.height;
-    canvas.getContext("2d")?.drawImage(
-      canvas0,
+    const canvas1 = document.createElement("canvas");
+    canvas1.width = imageData.width;
+    canvas1.height = imageData.height;
+    canvas1.getContext("2d")?.putImageData(imageData, 0, 0);
+    const canvas2 = document.createElement("canvas");
+    canvas2.width = this.width;
+    canvas2.height = this.height;
+    canvas2.getContext("2d")?.drawImage(
+      canvas1,
       0,
       0,
-      canvas0.width,
-      canvas0.height,
+      canvas1.width,
+      canvas1.height,
       0,
       0,
-      canvas.width,
-      canvas.height
+      canvas2.width,
+      canvas2.height
     );
-    return canvas;
+    return canvas2;
   }
 }
 
@@ -13189,6 +13211,7 @@ async function performRender(options) {
     }
   });
   await engine.waitUntilLoad();
+  await options.onBeforeRender?.(engine);
   return engine.toCanvas2D();
 }
 async function render(options) {

package/package.json

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