modern-canvas 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1918,6 +1918,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;
   }
@@ -1958,6 +1964,9 @@ class Rect2 {
     );
     return this;
   }
+  toArray() {
+    return [this.x, this.y, this.width, this.height];
+  }
 }
 
 class Transform2D extends Matrix3 {
@@ -5263,10 +5272,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);
@@ -5960,9 +5969,6 @@ let Node = class extends CoreObject {
   }
   /** Children */
   _children = [];
-  get children() {
-    return this.getChildren();
-  }
   get siblingIndex() {
     return this.getIndex();
   }
@@ -6227,17 +6233,17 @@ let Node = class 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);
     });
@@ -6274,7 +6280,7 @@ let Node = class 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) {
@@ -6411,7 +6417,6 @@ let CanvasItem = class extends TimelineNode {
   }
   /** @internal */
   opacity = 1;
-  size = { width: 0, height: 0 };
   _parentOpacity;
   _modulate = new Color(4294967295);
   _backgroundImage;
@@ -6475,19 +6480,6 @@ let CanvasItem = class extends 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() {
@@ -6503,14 +6495,10 @@ let CanvasItem = class extends 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() {
@@ -6543,9 +6531,10 @@ let CanvasItem = class extends 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);
   }
@@ -6584,8 +6573,7 @@ let CanvasItem = class extends 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);
@@ -6673,9 +6661,6 @@ __decorateClass$y([
 __decorateClass$y([
   property()
 ], CanvasItem.prototype, "blendMode", 2);
-__decorateClass$y([
-  property()
-], CanvasItem.prototype, "inheritSize", 2);
 CanvasItem = __decorateClass$y([
   customNode("CanvasItem")
 ], CanvasItem);
@@ -6837,11 +6822,13 @@ let Viewport = class extends 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;
     }
   }
@@ -6910,6 +6897,9 @@ let Viewport = class extends 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);
   }
@@ -7654,7 +7644,7 @@ let Text2D = class 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 {
@@ -7844,7 +7834,7 @@ let Animation = class extends TimelineNode {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "mode":
+      case "animationMode":
       case "keyframes":
         this._updateKeyframes();
         break;
@@ -9502,7 +9492,7 @@ let Effect = class extends 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,
@@ -11357,13 +11347,40 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
 let Control = class extends 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) {
   }
@@ -11408,7 +11425,6 @@ let Ruler = class extends Control {
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "pixelRatio":
       case "offsetX":
       case "offsetY":
       case "thickness":
@@ -11417,20 +11433,27 @@ let Ruler = class extends 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,
@@ -11438,14 +11461,13 @@ let Ruler = class extends 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();
@@ -11527,7 +11549,7 @@ let Ruler = class extends Control {
     ctx.stroke();
     this.texture.requestUpload();
   }
-  _drawContent() {
+  _draw() {
     this._drawTexture();
     const texture = this.texture;
     if (texture?.valid) {
@@ -11536,13 +11558,11 @@ let Ruler = class extends 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 })
-], Ruler.prototype, "pixelRatio", 2);
 __decorateClass$2([
   property({ default: 0 })
 ], Ruler.prototype, "offsetX", 2);
@@ -11567,6 +11587,9 @@ __decorateClass$2([
 __decorateClass$2([
   property({ default: 300 })
 ], Ruler.prototype, "gap", 2);
+__decorateClass$2([
+  property({ default: 1 })
+], Ruler.prototype, "scale", 2);
 Ruler = __decorateClass$2([
   customNode("Ruler")
 ], Ruler);
@@ -11582,8 +11605,49 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   return result;
 };
 let ScrollBar = class extends 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" })
+], ScrollBar.prototype, "direction", 2);
+__decorateClass$1([
+  property({ default: 10 })
+], ScrollBar.prototype, "padding", 2);
 ScrollBar = __decorateClass$1([
   customNode("ScrollBar")
 ], ScrollBar);
@@ -12002,7 +12066,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 CanvasItem {
+class CanvasEditor extends Control {
   name = "CanvasEditor";
   hover = new Node2D({
     name: "hover",
@@ -12035,13 +12099,15 @@ class CanvasEditor extends CanvasItem {
   scaler = new Scaler({
     internalMode: "back"
   }).on("updateScale", (scale) => {
-    this.ruler.gap = scale * 300;
+    this.ruler.scale = scale;
   });
   xScrollBar = new ScrollBar({
-    internalMode: "back"
+    internalMode: "back",
+    direction: "horizontal"
   });
   yScrollBar = new ScrollBar({
-    internalMode: "back"
+    internalMode: "back",
+    direction: "vertical"
   });
   drawboard = new Node2D({
     name: "drawboard",
@@ -12063,8 +12129,7 @@ class CanvasEditor extends CanvasItem {
   ruler = new Ruler({
     name: "ruler",
     offsetX: 100,
-    offsetY: 100,
-    inheritSize: true
+    offsetY: 100
   }).append(
     this.drawboard,
     this.hover,
@@ -12081,10 +12146,9 @@ class CanvasEditor extends 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/package.json

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