modern-canvas 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -1924,6 +1924,12 @@ class Rect2 {
   get top() {
     return this.position.y;
   }
+  get right() {
+    return this.x + this.width;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
   get width() {
     return this.size.x;
   }
@@ -1964,6 +1970,9 @@ class Rect2 {
     );
     return this;
   }
+  toArray() {
+    return [this.x, this.y, this.width, this.height];
+  }
 }
 
 class Transform2D extends Matrix3 {
@@ -5269,10 +5278,10 @@ class CanvasTexture extends Texture2D {
   _updateProperty(key, value, oldValue, declaration) {
     switch (key) {
       case "width":
-        this.source.width = value * this.pixelRatio;
+        this.source.width = Math.max(1, Math.ceil(value * this.pixelRatio));
         break;
       case "height":
-        this.source.height = value * this.pixelRatio;
+        this.source.height = Math.max(1, Math.ceil(value * this.pixelRatio));
         break;
     }
     super._updateProperty(key, value, oldValue, declaration);
@@ -5966,9 +5975,6 @@ exports.Node = class Node extends CoreObject {
   }
   /** Children */
   _children = [];
-  get children() {
-    return this.getChildren();
-  }
   get siblingIndex() {
     return this.getIndex();
   }
@@ -6233,17 +6239,17 @@ exports.Node = class Node extends CoreObject {
     return this;
   }
   removeChildren() {
-    this.children.forEach((child) => this.removeChild(child));
+    this.getChildren().forEach((child) => this.removeChild(child));
   }
   remove() {
     this._parent?.removeChild(this);
   }
   forEach(fn) {
-    this.children.forEach(fn);
+    this.getChildren().forEach(fn);
     return this;
   }
   deepForEach(fn) {
-    this.children.forEach((child) => {
+    this.getChildren().forEach((child) => {
       fn(child);
       child.deepForEach(fn);
     });
@@ -6280,7 +6286,7 @@ exports.Node = class Node extends CoreObject {
     return {
       tag: this.tag,
       props: super.toJSON(),
-      children: this.children.map((child) => child.toJSON())
+      children: this.getChildren().map((child) => child.toJSON())
     };
   }
   static parse(JSON) {
@@ -6417,7 +6423,6 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   }
   /** @internal */
   opacity = 1;
-  size = { width: 0, height: 0 };
   _parentOpacity;
   _modulate = new Color(4294967295);
   _backgroundImage;
@@ -6481,19 +6486,6 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
       case "visibility":
         this.visible = value === "visible";
         break;
-      case "width":
-      case "height":
-        this._updateSize();
-        break;
-    }
-  }
-  _updateSize() {
-    if (this.inheritSize) {
-      this.size.width = this.style.width || this._parent?.size?.width || this._parent?.width;
-      this.size.height = this.style.height || this._parent?.size?.height || this._parent?.height;
-    } else {
-      this.size.width = this.style.width;
-      this.size.height = this.style.height;
     }
   }
   _updateBackgroundColor() {
@@ -6509,14 +6501,10 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     this.requestRedraw();
   }
   _updateOpacity() {
-    const parentOpacity = this._parent?.opacity;
-    if (parentOpacity !== this._parentOpacity) {
-      this._parentOpacity = parentOpacity;
-      const opacity = this.style.getComputedOpacity() * (this._parent?.opacity ?? 1);
-      if (this.opacity !== opacity) {
-        this.opacity = opacity;
-        this.requestRepaint();
-      }
+    const opacity = this.style.getComputedOpacity() * (this._parent?.opacity ?? 1);
+    if (this.opacity !== opacity) {
+      this.opacity = opacity;
+      this.requestRepaint();
     }
   }
   _updateVisible() {
@@ -6549,9 +6537,10 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
   }
   _process(delta) {
     this._updateVisible();
-    this._updateOpacity();
-    if (this.inheritSize && (!this.size.width || !this.size.height || this.size.width !== this.style.width || this.size.height !== this.style.height)) {
-      this._updateSize();
+    const parentOpacity = this._parent?.opacity;
+    if (parentOpacity !== this._parentOpacity) {
+      this._parentOpacity = parentOpacity;
+      this._updateOpacity();
     }
     super._process(delta);
   }
@@ -6590,8 +6579,7 @@ exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
     }
   }
   _drawBoundingRect() {
-    const { borderRadius } = this.style;
-    const { width, height } = this.size;
+    const { borderRadius, width, height } = this.style;
     if (width && height) {
       if (borderRadius) {
         this.context.roundRect(0, 0, width, height, borderRadius);
@@ -6679,9 +6667,6 @@ __decorateClass$y([
 __decorateClass$y([
   property()
 ], exports.CanvasItem.prototype, "blendMode", 2);
-__decorateClass$y([
-  property()
-], exports.CanvasItem.prototype, "inheritSize", 2);
 exports.CanvasItem = __decorateClass$y([
   customNode("CanvasItem")
 ], exports.CanvasItem);
@@ -6843,11 +6828,13 @@ exports.Viewport = class Viewport extends exports.Node {
       case "y":
         this.requestUpload();
         this._projection.translate(this.x, this.y);
+        this.emit("updateRect");
         break;
       case "width":
       case "height":
         this.requestUpload();
         this._projection.resize(this.width, this.height);
+        this.emit("updateRect");
         break;
     }
   }
@@ -6916,6 +6903,9 @@ exports.Viewport = class Viewport extends exports.Node {
       this._tree?.setCurrentViewport(undefined);
     }
   }
+  getRect() {
+    return new Rect2(this.x, this.y, this.width, this.height);
+  }
   toProjectionArray(transpose = false) {
     return this._projection.toArray(transpose);
   }
@@ -7660,7 +7650,7 @@ exports.Text2D = class Text2D extends TextureRect2D {
   }
   _drawContent() {
     if (!this.split) {
-      const onText2DRender = this.children?.find((child) => "onText2DRender" in child)?.onText2DRender;
+      const onText2DRender = this.getChildren()?.find((child) => "onText2DRender" in child)?.onText2DRender;
       if (onText2DRender) {
         onText2DRender();
       } else {
@@ -7850,7 +7840,7 @@ exports.Animation = class Animation extends exports.TimelineNode {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "mode":
+      case "animationMode":
       case "keyframes":
         this._updateKeyframes();
         break;
@@ -9508,7 +9498,7 @@ exports.Effect = class Effect extends exports.TimelineNode {
   _parseTargetArea() {
     if (this._mode === "parent" && this._parent && "getRect" in this._parent) {
       const rect = this._parent.getRect();
-      if (rect instanceof Rect2) {
+      if (rect) {
         return [
           rect.left / this.viewport1.width,
           rect.top / this.viewport1.height,
@@ -11363,13 +11353,40 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
 exports.Control = class Control extends exports.CanvasItem {
   constructor(properties, children = []) {
     super();
+    this._parentUpdateRect = this._parentUpdateRect.bind(this);
     this.setProperties(properties);
     this.append(children);
   }
+  _parented(parent) {
+    super._parented(parent);
+    parent.on("updateRect", this._parentUpdateRect);
+  }
+  _unparented(oldParent) {
+    super._unparented(oldParent);
+    oldParent.off("updateRect", this._parentUpdateRect);
+  }
+  _parentUpdateRect() {
+    const rect = this._parent.getRect();
+    this.style.left = rect.left;
+    this.style.top = rect.top;
+    this.style.width = rect.width;
+    this.style.height = rect.height;
+  }
   _input(event, key) {
     super._input(event, key);
     this._guiInput(event, key);
   }
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    super._updateStyleProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "width":
+      case "height":
+      case "left":
+      case "top":
+        this.emit("updateRect");
+        break;
+    }
+  }
   // eslint-disable-next-line unused-imports/no-unused-vars
   _guiInput(event, key) {
   }
@@ -11414,7 +11431,6 @@ exports.Ruler = class Ruler extends exports.Control {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "pixelRatio":
       case "offsetX":
       case "offsetY":
       case "thickness":
@@ -11423,20 +11439,27 @@ exports.Ruler = class Ruler extends exports.Control {
       case "markBackgroundColor":
       case "markColor":
       case "gap":
+      case "scale":
         this.requestRedraw();
         break;
     }
   }
-  _updateSize() {
-    super._updateSize();
-    this.requestRedraw();
+  _updateStyleProperty(key, value, oldValue, declaration) {
+    super._updateStyleProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "width":
+      case "height":
+        this.texture[key] = value;
+        this.requestRedraw();
+        break;
+    }
   }
   _drawTexture() {
-    const { width, height } = this.size;
-    this.style.width = width;
-    this.style.height = height;
     const {
-      pixelRatio,
+      width,
+      height
+    } = this.style;
+    const {
       offsetX,
       offsetY,
       thickness,
@@ -11444,14 +11467,13 @@ exports.Ruler = class Ruler extends exports.Control {
       markBackgroundColor,
       markColor,
       color,
-      gap: _gap
+      gap: _gap,
+      scale: _scale
     } = this;
-    const _scale = 1;
     const canvas = this.texture.source;
-    canvas.width = Math.max(1, Math.ceil(width * pixelRatio));
-    canvas.height = Math.max(1, Math.ceil(height * pixelRatio));
     const ctx = canvas.getContext("2d");
-    ctx.scale(this.pixelRatio, this.pixelRatio);
+    ctx.reset();
+    ctx.scale(this.texture.pixelRatio, this.texture.pixelRatio);
     const x = Math.round(offsetX);
     const y = Math.round(offsetY);
     ctx.beginPath();
@@ -11533,7 +11555,7 @@ exports.Ruler = class Ruler extends exports.Control {
     ctx.stroke();
     this.texture.requestUpload();
   }
-  _drawContent() {
+  _draw() {
     this._drawTexture();
     const texture = this.texture;
     if (texture?.valid) {
@@ -11542,13 +11564,11 @@ exports.Ruler = class Ruler extends exports.Control {
         this.style.width / texture.width,
         this.style.height / texture.height
       );
-      super._drawContent();
+      this.context.rect(0, 0, texture.width, texture.height);
+      this.context.fill();
     }
   }
 };
-__decorateClass$2([
-  property({ default: 2 })
-], exports.Ruler.prototype, "pixelRatio", 2);
 __decorateClass$2([
   property({ default: 0 })
 ], exports.Ruler.prototype, "offsetX", 2);
@@ -11573,6 +11593,9 @@ __decorateClass$2([
 __decorateClass$2([
   property({ default: 300 })
 ], exports.Ruler.prototype, "gap", 2);
+__decorateClass$2([
+  property({ default: 1 })
+], exports.Ruler.prototype, "scale", 2);
 exports.Ruler = __decorateClass$2([
   customNode("Ruler")
 ], exports.Ruler);
@@ -11588,8 +11611,49 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   return result;
 };
 exports.ScrollBar = class ScrollBar extends exports.Control {
-  //
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
+  _parentUpdateRect() {
+    super._parentUpdateRect();
+    const rect = this._parent.getRect();
+    if (rect && rect.width && rect.height) {
+      if (this.direction === "vertical") {
+        this.style.width = 10;
+        this.style.height = rect.height - this.padding * 2;
+        this.style.left = rect.right - this.style.width;
+        this.style.top = this.padding;
+      } else {
+        this.style.height = 10;
+        this.style.width = rect.width - this.padding * 2;
+        this.style.left = this.padding;
+        this.style.top = rect.bottom - this.style.height;
+      }
+    }
+    this.requestRedraw();
+  }
+  _guiInput(event, key) {
+    super._guiInput(event, key);
+  }
+  _draw() {
+    this.context.roundRect(
+      this.style.left,
+      this.style.top,
+      this.style.width,
+      this.style.height,
+      this.style.borderRadius ?? 20
+    );
+    this.context.fillStyle = 15;
+    this.context.fill();
+  }
 };
+__decorateClass$1([
+  property({ default: "vertical" })
+], exports.ScrollBar.prototype, "direction", 2);
+__decorateClass$1([
+  property({ default: 10 })
+], exports.ScrollBar.prototype, "padding", 2);
 exports.ScrollBar = __decorateClass$1([
   customNode("ScrollBar")
 ], exports.ScrollBar);
@@ -12008,7 +12072,7 @@ class Assets {
 }
 const assets = new Assets().use(new FontLoader()).use(new GifLoader()).use(new JsonLoader()).use(new LottieLoader()).use(new TextLoader()).use(new TextureLoader()).use(new VideoLoader());
 
-class CanvasEditor extends exports.CanvasItem {
+class CanvasEditor extends exports.Control {
   name = "CanvasEditor";
   hover = new exports.Node2D({
     name: "hover",
@@ -12041,13 +12105,15 @@ class CanvasEditor extends exports.CanvasItem {
   scaler = new exports.Scaler({
     internalMode: "back"
   }).on("updateScale", (scale) => {
-    this.ruler.gap = scale * 300;
+    this.ruler.scale = scale;
   });
   xScrollBar = new exports.ScrollBar({
-    internalMode: "back"
+    internalMode: "back",
+    direction: "horizontal"
   });
   yScrollBar = new exports.ScrollBar({
-    internalMode: "back"
+    internalMode: "back",
+    direction: "vertical"
   });
   drawboard = new exports.Node2D({
     name: "drawboard",
@@ -12069,8 +12135,7 @@ class CanvasEditor extends exports.CanvasItem {
   ruler = new exports.Ruler({
     name: "ruler",
     offsetX: 100,
-    offsetY: 100,
-    inheritSize: true
+    offsetY: 100
   }).append(
     this.drawboard,
     this.hover,
@@ -12087,10 +12152,9 @@ class CanvasEditor extends exports.CanvasItem {
     this._onPointermove = this._onPointermove.bind(this);
     this._onPointerup = this._onPointerup.bind(this);
     this.append(this.ruler);
-    this.inheritSize = true;
   }
-  _input(event, key) {
-    super._input(event, key);
+  _guiInput(event, key) {
+    super._guiInput(event, key);
     switch (key) {
       case "pointerdown":
         this._onPointerdown(event);

package/dist/index.d.cts

@@ -474,6 +474,8 @@ declare class Rect2 {
     get y(): number;
     get left(): number;
     get top(): number;
+    get right(): number;
+    get bottom(): number;
     get width(): number;
     get height(): number;
     readonly end: Vector2;
@@ -483,6 +485,7 @@ declare class Rect2 {
     constructor(position: Vector2, size: Vector2);
     constructor(x: number, y: number, width: number, height: number);
     update(): this;
+    toArray(): number[];
 }
 
 interface Transform2DObject {
@@ -1350,7 +1353,7 @@ declare class ImageTexture extends Texture2D<HTMLImageElement> {
 }
 
 declare class PixelsTexture extends Texture2D<Texture2DPixelsSource> {
-    constructor(pixels?: ArrayLike<number> | ArrayBufferLike | ArrayBufferView | null, width?: number, height?: number);
+    constructor(pixels?: number[] | ArrayBufferLike | ArrayBufferView | null, width?: number, height?: number);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
 }
 
@@ -1540,11 +1543,30 @@ declare class Timeline extends Node {
     protected _process(delta: number): void;
 }
 
+interface RectangulableEventMap {
+    updateRect: () => void;
+}
+interface Rectangulable {
+    on: (<K extends keyof RectangulableEventMap>(type: K, listener: RectangulableEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof RectangulableEventMap>(type: K, listener: RectangulableEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof RectangulableEventMap>(type: K, ...args: Parameters<RectangulableEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+interface Rectangulable {
+    getRect: () => Rect2;
+}
+
+interface ViewportEventMap extends NodeEventMap, RectangulableEventMap {
+}
 interface ViewportFramebuffer {
     texture: ViewportTexture;
     needsUpload: boolean;
 }
-declare class Viewport extends Node {
+interface Viewport {
+    on: (<K extends keyof ViewportEventMap>(type: K, listener: ViewportEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof ViewportEventMap>(type: K, listener: ViewportEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof ViewportEventMap>(type: K, ...args: Parameters<ViewportEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class Viewport extends Node implements Rectangulable {
     flipY: boolean;
     x: number;
     y: number;
@@ -1569,6 +1591,7 @@ declare class Viewport extends Node {
     redraw(renderer: WebGLRenderer, cb: () => void): boolean;
     activateWithCopy(renderer: WebGLRenderer, target: Viewport): void;
     render(renderer: WebGLRenderer, next?: () => void): void;
+    getRect(): Rect2;
     toProjectionArray(transpose?: boolean): number[];
 }
 
@@ -1663,7 +1686,6 @@ declare class Node extends CoreObject {
     setParent(parent: Node | undefined): this;
     /** Children */
     protected _children: Node[];
-    get children(): Node[];
     get siblingIndex(): number;
     set siblingIndex(toIndex: number);
     get previousSibling(): Node | undefined;
@@ -1758,10 +1780,9 @@ interface CanvasItemProperties extends TimelineNodeProperties {
     style: Partial<CanvasItemStyleProperties>;
     modulate: ColorValue;
     blendMode: WebGLBlendMode;
-    inheritSize: boolean;
 }
 interface CanvasItemEventMap extends TimelineNodeEventMap {
-    updateStyleProperty: (key: PropertyKey, newValue: any, oldValue: any, declaration?: PropertyDeclaration) => void;
+    updateStyleProperty: (key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration) => void;
     draw: () => void;
 }
 interface CanvasItem {
@@ -1773,16 +1794,11 @@ declare class CanvasItem extends TimelineNode {
     visible: boolean;
     modulate?: ColorValue;
     blendMode?: WebGLBlendMode;
-    inheritSize?: boolean;
     protected _style: CanvasItemStyle;
     get style(): CanvasItemStyle;
     set style(style: CanvasItemStyle);
     /** @internal */
     opacity: number;
-    size: {
-        width: number;
-        height: number;
-    };
     protected _parentOpacity?: number;
     protected _modulate: Color;
     protected _backgroundImage?: Texture2D;
@@ -1799,7 +1815,6 @@ declare class CanvasItem extends TimelineNode {
     setProperties(properties?: Record<PropertyKey, any>): this;
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _updateSize(): void;
     protected _updateBackgroundColor(): void;
     protected _updateBackgroundImage(): Promise<void>;
     protected _updateOpacity(): void;
@@ -1909,13 +1924,13 @@ declare class Image2D extends Node2D {
 
 interface TextureRect2DProperties extends Node2DProperties {
 }
-declare class TextureRect2D<T extends Texture2D = Texture2D> extends Node2D {
+declare class TextureRect2D<T extends Texture2D = Texture2D> extends Node2D implements Rectangulable {
     texture?: T;
     getRect(): Rect2;
     protected _drawContent(): void;
 }
 
-interface Lottie2DProperties extends Node2DProperties {
+interface Lottie2DProperties extends TextureRect2DProperties {
     src: string;
 }
 declare class Lottie2D extends TextureRect2D {
@@ -1929,7 +1944,7 @@ declare class Lottie2D extends TextureRect2D {
     protected _process(delta: number): void;
 }
 
-interface Text2DProperties extends Node2DProperties, Omit<TextOptions, 'style'> {
+interface Text2DProperties extends TextureRect2DProperties, Omit<TextOptions, 'style'> {
     split: boolean;
 }
 /**
@@ -1962,7 +1977,7 @@ declare class Text2D extends TextureRect2D<CanvasTexture> {
     protected _drawContent(): void;
 }
 
-interface Video2DProperties extends Node2DProperties {
+interface Video2DProperties extends TextureRect2DProperties {
     src: string;
 }
 declare class Video2D extends TextureRect2D<VideoTexture> {
@@ -2560,17 +2575,27 @@ declare class ZoomBlurEffect extends Effect {
     apply(renderer: WebGLRenderer, source: Viewport): void;
 }
 
+interface ControlEventMap extends CanvasItemEventMap, RectangulableEventMap {
+}
 interface ControlProperties extends CanvasItemProperties {
 }
-declare class Control extends CanvasItem {
+interface Control {
+    on: (<K extends keyof ControlEventMap>(type: K, listener: ControlEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof ControlEventMap>(type: K, listener: ControlEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof ControlEventMap>(type: K, ...args: Parameters<ControlEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class Control extends CanvasItem implements Rectangulable {
     constructor(properties?: Partial<ControlProperties>, children?: Node[]);
+    protected _parented(parent: any): void;
+    protected _unparented(oldParent: any): void;
+    protected _parentUpdateRect(): void;
     protected _input(event: InputEvent, key: InputEventKey): void;
+    protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _guiInput(event: InputEvent, key: InputEventKey): void;
     getRect(): Rect2;
 }
 
 interface RulerProperties extends ControlProperties {
-    pixelRatio: number;
     offsetX: number;
     offsetY: number;
     thickness: number;
@@ -2579,9 +2604,9 @@ interface RulerProperties extends ControlProperties {
     markBackgroundColor: string;
     markColor: string;
     gap: number;
+    scale: number;
 }
 declare class Ruler extends Control {
-    pixelRatio: number;
     offsetX: number;
     offsetY: number;
     thickness: number;
@@ -2590,17 +2615,25 @@ declare class Ruler extends Control {
     markBackgroundColor: string;
     markColor: string;
     gap: number;
+    scale: number;
     texture: CanvasTexture;
     constructor(properties?: Partial<RulerProperties>, children?: Node[]);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _updateSize(): void;
+    protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _drawTexture(): void;
-    protected _drawContent(): void;
+    protected _draw(): void;
 }
 
 interface ScrollBarProperties extends ControlProperties {
+    direction: 'vertical' | 'horizontal';
 }
 declare class ScrollBar extends Control {
+    direction: 'vertical' | 'horizontal';
+    padding: number;
+    constructor(properties: Partial<ScrollBarProperties>, children?: Node[]);
+    protected _parentUpdateRect(): void;
+    protected _guiInput(event: InputEvent, key: InputEventKey): void;
+    protected _draw(): void;
 }
 
 interface ScalerEventMap extends NodeEventMap {
@@ -2686,7 +2719,7 @@ declare class Assets {
 }
 declare const assets: Assets;
 
-declare class CanvasEditor extends CanvasItem {
+declare class CanvasEditor extends Control {
     name: string;
     hover: Node2D;
     selectionRect: Node2D;
@@ -2703,7 +2736,7 @@ declare class CanvasEditor extends CanvasItem {
     };
     selected?: CanvasItem;
     constructor();
-    protected _input(event: InputEvent, key: InputEventKey): void;
+    protected _guiInput(event: InputEvent, key: InputEventKey): void;
     protected _onPointerdown(e: PointerInputEvent): void;
     protected _onPointermove(e: PointerInputEvent): void;
     protected _onPointerup(): void;
@@ -2777,4 +2810,4 @@ interface RenderOptions {
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 
-export { Animation, type AnimationMode, type AnimationProperties, type AssetHandler, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, type AudioWaveformProperties, type Batchable2D, BlurEffect, type CanvasBatchable, CanvasContext, CanvasEditor, CanvasItem, type CanvasItemEventMap, type CanvasItemProperties, CanvasItemStyle, type CanvasItemStyleFilter, type CanvasItemStyleFilterKey, type CanvasItemStyleProperties, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, type ColorFilterEffectProperties, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, type ColorValue, Control, type ControlProperties, CoreObject, type CoreObjectEventMap, type CssFunction, type CssFunctionArg, type Cursor, DEG_TO_RAD, DEVICE_PIXEL_RATIO, type Easing, Effect, type EffectContext, EffectMaterial, type EffectMode, type EffectOptions, EmbossEffect, Engine, type EngineOptions, EventEmitter, type EventListener, type EventListenerOptions, type EventListenerValue, type FilledGraphics, FontLoader, Geometry, type GeometryOptions, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, type IAudioContext, type IAudioNode, IN_BROWSER, type IPlayOptions, Image2D, type Image2DProperties, Image2DResource, type ImageFrame, ImageTexture, type ImageTextureOptions, IndexBuffer, type IndexBufferOptions, Input, InputEvent, type InputEventKey, type InputEventMap, type InternalMode, JsonLoader, KawaseEffect, type Keyframe, LeftEraseEffect, Loader, Lottie2D, type Lottie2DProperties, LottieLoader, MainLoop, type MainLoopEventMap, type MaskColor, type MaskData, MaskEffect, type MaskEffectOptions, type MaskObject, type MaskRect, type Maskable, Material, type MaterialOptions, Matrix, Matrix2, Matrix3, Matrix4, type MatrixLike, type MatrixOperateOutput, MouseInputEvent, Node, Node2D, type Node2DProperties, type NodeEventMap, type NodeProperties, type NormalizedKeyframe, PI, PI_2, PixelateEffect, PixelsTexture, type PlatformAudio, type PlatformSound, type PointerEvents, PointerInputEvent, type ProcessMode, Projection2D, type PropertyDeclaration, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, type RefCountedEventMap, type RenderMode, type RenderOptions, type Renderable, Renderer, Resource, type ResourceEventMap, Ruler, type RulerProperties, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, type ScalerEventMap, type ScalerProperties, SceneTree, type SceneTreeEventMap, ScrollBar, type ScrollBarProperties, ShadowEffect, type StrokedGraphics, Text2D, type Text2DProperties, TextLoader, Texture2D, type Texture2DFilterMode, type Texture2DPixelsSource, type Texture2DSource, type Texture2DWrapMode, TextureLoader, TextureRect2D, type TextureRect2DProperties, Ticker, TiltShiftEffect, Timeline, type TimelineEventMap, TimelineNode, type TimelineNodeEventMap, type TimelineNodeProperties, type TimelineProperties, type TimingFunctions, Transform2D, type Transform2DObject, TwistEffect, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, type VectorLike, type VectorOperateOutput, VertexAttribute, type VertexAttributeOptions, VertexBuffer, type VertexBufferOptions, Video2D, type Video2DProperties, VideoLoader, VideoTexture, type VideoTextureOptions, type VideoTextureSource, Viewport, type ViewportFramebuffer, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, type WebGLBufferMeta, WebGLBufferModule, type WebGLBufferOptions, type WebGLBufferTarget, type WebGLBufferUsage, type WebGLDrawMode, type WebGLDrawOptions, type WebGLExtensions, type WebGLFramebufferMeta, WebGLFramebufferModule, type WebGLFramebufferOptions, WebGLMaskModule, WebGLModule, type WebGLProgramMeta, WebGLProgramModule, type WebGLProgramOptions, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, type WebGLTarget, type WebGLTextureFilterMode, type WebGLTextureLocation, type WebGLTextureMeta, WebGLTextureModule, type WebGLTextureOptions, type WebGLTextureSource, type WebGLTextureTarget, type WebGLTextureWrapMode, WebGLVertexArrayModule, type WebGLVertexArrayObjectMeta, type WebGLVertexArrayObjectOptions, type WebGLVertexAttrib, type WebGLVertexAttribType, type WebGLViewport, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { Animation, type AnimationMode, type AnimationProperties, type AssetHandler, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, type AudioWaveformProperties, type Batchable2D, BlurEffect, type CanvasBatchable, CanvasContext, CanvasEditor, CanvasItem, type CanvasItemEventMap, type CanvasItemProperties, CanvasItemStyle, type CanvasItemStyleFilter, type CanvasItemStyleFilterKey, type CanvasItemStyleProperties, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, type ColorFilterEffectProperties, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, type ColorValue, Control, type ControlEventMap, type ControlProperties, CoreObject, type CoreObjectEventMap, type CssFunction, type CssFunctionArg, type Cursor, DEG_TO_RAD, DEVICE_PIXEL_RATIO, type Easing, Effect, type EffectContext, EffectMaterial, type EffectMode, type EffectOptions, EmbossEffect, Engine, type EngineOptions, EventEmitter, type EventListener, type EventListenerOptions, type EventListenerValue, type FilledGraphics, FontLoader, Geometry, type GeometryOptions, GifLoader, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, type IAudioContext, type IAudioNode, IN_BROWSER, type IPlayOptions, Image2D, type Image2DProperties, Image2DResource, type ImageFrame, ImageTexture, type ImageTextureOptions, IndexBuffer, type IndexBufferOptions, Input, InputEvent, type InputEventKey, type InputEventMap, type InternalMode, JsonLoader, KawaseEffect, type Keyframe, LeftEraseEffect, Loader, Lottie2D, type Lottie2DProperties, LottieLoader, MainLoop, type MainLoopEventMap, type MaskColor, type MaskData, MaskEffect, type MaskEffectOptions, type MaskObject, type MaskRect, type Maskable, Material, type MaterialOptions, Matrix, Matrix2, Matrix3, Matrix4, type MatrixLike, type MatrixOperateOutput, MouseInputEvent, Node, Node2D, type Node2DProperties, type NodeEventMap, type NodeProperties, type NormalizedKeyframe, PI, PI_2, PixelateEffect, PixelsTexture, type PlatformAudio, type PlatformSound, type PointerEvents, PointerInputEvent, type ProcessMode, Projection2D, type PropertyDeclaration, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RawWeakMap, Rect2, RefCounted, type RefCountedEventMap, type RenderMode, type RenderOptions, type Renderable, Renderer, Resource, type ResourceEventMap, Ruler, type RulerProperties, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, type ScalerEventMap, type ScalerProperties, SceneTree, type SceneTreeEventMap, ScrollBar, type ScrollBarProperties, ShadowEffect, type StrokedGraphics, Text2D, type Text2DProperties, TextLoader, Texture2D, type Texture2DFilterMode, type Texture2DPixelsSource, type Texture2DSource, type Texture2DWrapMode, TextureLoader, TextureRect2D, type TextureRect2DProperties, Ticker, TiltShiftEffect, Timeline, type TimelineEventMap, TimelineNode, type TimelineNodeEventMap, type TimelineNodeProperties, type TimelineProperties, type TimingFunctions, Transform2D, type Transform2DObject, TwistEffect, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, type VectorLike, type VectorOperateOutput, VertexAttribute, type VertexAttributeOptions, VertexBuffer, type VertexBufferOptions, Video2D, type Video2DProperties, VideoLoader, VideoTexture, type VideoTextureOptions, type VideoTextureSource, Viewport, type ViewportEventMap, type ViewportFramebuffer, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, type WebGLBufferMeta, WebGLBufferModule, type WebGLBufferOptions, type WebGLBufferTarget, type WebGLBufferUsage, type WebGLDrawMode, type WebGLDrawOptions, type WebGLExtensions, type WebGLFramebufferMeta, WebGLFramebufferModule, type WebGLFramebufferOptions, WebGLMaskModule, WebGLModule, type WebGLProgramMeta, WebGLProgramModule, type WebGLProgramOptions, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, type WebGLTarget, type WebGLTextureFilterMode, type WebGLTextureLocation, type WebGLTextureMeta, WebGLTextureModule, type WebGLTextureOptions, type WebGLTextureSource, type WebGLTextureTarget, type WebGLTextureWrapMode, WebGLVertexArrayModule, type WebGLVertexArrayObjectMeta, type WebGLVertexArrayObjectOptions, type WebGLVertexAttrib, type WebGLVertexAttribType, type WebGLViewport, WebGLViewportModule, WebSound, WheelInputEvent, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };