modern-canvas 0.4.6 → 0.4.8

package/dist/index.cjs

@@ -5898,6 +5898,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 +5920,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;
@@ -7256,7 +7296,7 @@ exports.GlitchEffect = class GlitchEffect extends exports.Effect {
   _texture;
   _sizes;
   _offsets;
-  _redraw = false;
+  _needsRedraw = false;
   slices = 10;
   sampleSize = 512;
   offset = 100;
@@ -7294,8 +7334,8 @@ exports.GlitchEffect = class GlitchEffect extends exports.Effect {
     texture.requestUpload();
   }
   apply(renderer, source) {
-    if (!this._redraw) {
-      this._redraw = true;
+    if (!this._needsRedraw) {
+      this._needsRedraw = true;
       this.redraw();
     }
     const width = source.width;
@@ -8085,22 +8125,37 @@ exports.CanvasItem = class CanvasItem extends exports.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() {
+  _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();
@@ -8110,20 +8165,25 @@ exports.CanvasItem = class CanvasItem extends exports.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;
@@ -8287,6 +8347,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");
@@ -8332,6 +8397,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) => {
@@ -8667,21 +8735,19 @@ exports.Node2D = class Node2D extends exports.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) {
+    super._process(delta);
     const parent = this.getParent();
-    if (parent?.transform?.dirtyId !== this._parentTransformDirtyId) {
+    if (this._parentTransformDirtyId !== parent?.globalTransform?.dirtyId) {
       this.requestRelayout();
     }
-    super._process(delta);
   }
 };
 exports.Node2D = __decorateClass$n([
@@ -8892,6 +8958,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     }
   }
   _draw() {
+    super._draw();
     this._drawBackground();
     this._drawContent();
     this._drawBorder();
@@ -8947,14 +9014,12 @@ exports.BaseElement2D = class BaseElement2D extends exports.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()
       };
     });
   }
@@ -13049,6 +13114,7 @@ class Engine extends SceneTree {
   }) : void 0;
   constructor(options = {}) {
     const {
+      debug = false,
       view,
       width,
       height,
@@ -13060,6 +13126,7 @@ class Engine extends SceneTree {
       ...glOptions
     } = options;
     super(timeline);
+    this.debug = debug;
     this.renderer = new WebGLRenderer(view, {
       ...defaultOptions,
       ...glOptions

package/dist/index.d.cts

@@ -1571,6 +1571,7 @@ interface SceneTree {
 declare class SceneTree extends MainLoop {
     paused: boolean;
     backgroundColor?: ColorValue;
+    debug: boolean;
     readonly input: Input;
     readonly renderStack: RenderStack;
     readonly root: Viewport;
@@ -1581,6 +1582,7 @@ declare class SceneTree extends MainLoop {
     setCurrentViewport(viewport: Viewport | undefined): void;
     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 _renderScreen(renderer: WebGLRenderer): void;
     free(): void;
@@ -1681,8 +1683,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;
@@ -1787,9 +1796,11 @@ declare class CanvasItem extends TimelineNode {
     requestRepaint(): void;
     protected _updateGlobalVisible(): void;
     protected _updateGlobalOpacity(): void;
+    protected _draw(): void;
+    protected _redraw(): CanvasBatchable[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _draw(): void;
+    protected _process(delta: number): void;
     protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
 }
@@ -2662,7 +2673,7 @@ declare class GlitchEffect extends Effect {
     protected _texture: Texture2D;
     protected _sizes: Float32Array;
     protected _offsets: Float32Array;
-    protected _redraw: boolean;
+    protected _needsRedraw: boolean;
     slices: number;
     sampleSize: number;
     offset: number;
@@ -2979,6 +2990,7 @@ declare class CanvasItemEditor extends Control {
 }
 
 interface EngineOptions extends WebGLContextAttributes {
+    debug?: boolean;
     view?: HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext;
     width?: number;
     height?: number;

package/dist/index.d.mts

@@ -1571,6 +1571,7 @@ interface SceneTree {
 declare class SceneTree extends MainLoop {
     paused: boolean;
     backgroundColor?: ColorValue;
+    debug: boolean;
     readonly input: Input;
     readonly renderStack: RenderStack;
     readonly root: Viewport;
@@ -1581,6 +1582,7 @@ declare class SceneTree extends MainLoop {
     setCurrentViewport(viewport: Viewport | undefined): void;
     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 _renderScreen(renderer: WebGLRenderer): void;
     free(): void;
@@ -1681,8 +1683,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;
@@ -1787,9 +1796,11 @@ declare class CanvasItem extends TimelineNode {
     requestRepaint(): void;
     protected _updateGlobalVisible(): void;
     protected _updateGlobalOpacity(): void;
+    protected _draw(): void;
+    protected _redraw(): CanvasBatchable[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _draw(): void;
+    protected _process(delta: number): void;
     protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
 }
@@ -2662,7 +2673,7 @@ declare class GlitchEffect extends Effect {
     protected _texture: Texture2D;
     protected _sizes: Float32Array;
     protected _offsets: Float32Array;
-    protected _redraw: boolean;
+    protected _needsRedraw: boolean;
     slices: number;
     sampleSize: number;
     offset: number;
@@ -2979,6 +2990,7 @@ declare class CanvasItemEditor extends Control {
 }
 
 interface EngineOptions extends WebGLContextAttributes {
+    debug?: boolean;
     view?: HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext;
     width?: number;
     height?: number;

package/dist/index.d.ts

@@ -1571,6 +1571,7 @@ interface SceneTree {
 declare class SceneTree extends MainLoop {
     paused: boolean;
     backgroundColor?: ColorValue;
+    debug: boolean;
     readonly input: Input;
     readonly renderStack: RenderStack;
     readonly root: Viewport;
@@ -1581,6 +1582,7 @@ declare class SceneTree extends MainLoop {
     setCurrentViewport(viewport: Viewport | undefined): void;
     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 _renderScreen(renderer: WebGLRenderer): void;
     free(): void;
@@ -1681,8 +1683,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;
@@ -1787,9 +1796,11 @@ declare class CanvasItem extends TimelineNode {
     requestRepaint(): void;
     protected _updateGlobalVisible(): void;
     protected _updateGlobalOpacity(): void;
+    protected _draw(): void;
+    protected _redraw(): CanvasBatchable[];
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _draw(): void;
+    protected _process(delta: number): void;
     protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
 }
@@ -2662,7 +2673,7 @@ declare class GlitchEffect extends Effect {
     protected _texture: Texture2D;
     protected _sizes: Float32Array;
     protected _offsets: Float32Array;
-    protected _redraw: boolean;
+    protected _needsRedraw: boolean;
     slices: number;
     sampleSize: number;
     offset: number;
@@ -2979,6 +2990,7 @@ declare class CanvasItemEditor extends Control {
 }
 
 interface EngineOptions extends WebGLContextAttributes {
+    debug?: boolean;
     view?: HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext;
     width?: number;
     height?: number;