canvasengine 2.0.0-beta.16 → 2.0.0-beta.18

package/src/components/DisplayObject.ts

@@ -1,22 +1,24 @@
-import { Node } from "yoga-layout";
 import { Element, isElement, Props } from "../engine/reactive";
 import { setObservablePoint } from "../engine/utils";
 import type {
   AlignContent,
   EdgeSize,
   FlexDirection,
-  Size,
+  ObjectFit,
+  ObjectPosition,
+  TransformOrigin,
 } from "./types/DisplayObject";
-import { effect, Signal, signal } from "@signe/reactive";
+import { signal } from "@signe/reactive";
 import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
+import { isPercent } from "../utils/functions";
 
 export interface ComponentInstance extends PixiMixins.ContainerOptions {
   id?: string;
   children?: ComponentInstance[];
   onInit?(props: Props): void;
   onUpdate?(props: Props): void;
-  onDestroy?(parent: Element): void;
+  onDestroy?(parent: Element, afterDestroy: () => void): void;
   onMount?(context: Element, index?: number): void;
   setWidth(width: number): void;
   setHeight(height: number): void;
@@ -93,6 +95,8 @@ export const EVENTS = [
   "wheelcapture",
 ];
 
+type OnHook = (() => void) | (() => Promise<void> | void);
+
 export function DisplayObject(extendClass) {
   return class DisplayObject extends extendClass {
     #canvasContext: {
@@ -101,20 +105,14 @@ export function DisplayObject(extendClass) {
     isFlex: boolean = false;
     fullProps: Props = {};
     isMounted: boolean = false;
-    _anchorPoints = new ObservablePoint(
-      { _onUpdate: () => {} },
-      0,
-      0
-    );
+    _anchorPoints = new ObservablePoint({ _onUpdate: () => {} }, 0, 0);
     isCustomAnchor: boolean = false;
     displayWidth = signal(0);
     displayHeight = signal(0);
     overrideProps: string[] = [];
-    node: Node;
-
-    get yoga() {
-      return this.#canvasContext?.Yoga;
-    }
+    layout = null;
+    onBeforeDestroy: OnHook | null = null;
+    onAfterMount: OnHook | null = null;
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
@@ -128,80 +126,45 @@ export function DisplayObject(extendClass) {
           this.on(event, props[event]);
         }
       }
+      if (props.onBeforeDestroy || props['on-before-destroy']) {
+        this.onBeforeDestroy = props.onBeforeDestroy || props['on-before-destroy'];
+      }
+      if (props.onAfterMount || props['on-after-mount']) {
+        this.onAfterMount = props.onAfterMount || props['on-after-mount'];
+      }
+      if (
+        props.justifyContent ||
+        props.alignItems ||
+        props.flexDirection ||
+        props.flexWrap ||
+        props.alignContent ||
+        props.display == "flex" ||
+        isPercent(props.width) ||
+        isPercent(props.height) ||
+        props.isRoot
+      ) {
+        this.layout = {};
+        this.isFlex = true;
+      }
     }
 
-    onMount({ parent, props }: Element<DisplayObject>, index?: number) {
+    async onMount({ parent, props }: Element<DisplayObject>, index?: number) {
       this.#canvasContext = props.context;
-      this.node = this.yoga.Node.create();
       if (parent) {
         const instance = parent.componentInstance as DisplayObject;
+        if (instance.isFlex && !this.layout) {
+          this.layout = {};
+        }
         if (index === undefined) {
           instance.addChild(this);
         } else {
           instance.addChildAt(this, index);
         }
-        if (instance.layer) this.parentLayer = instance.layer;
         this.isMounted = true;
-        this.effectSize(props.width, props.height);
         this.onUpdate(props);
-        this.parent.node.insertChild(
-          this.node,
-          this.parent.node.getChildCount()
-        );
-        if (parent.props.flexDirection) {
-          this.parent.node.calculateLayout();
-          for (let child of this.parent.children) {
-            const { left, top } = child.getComputedLayout();
-            child.x = left;
-            child.y = top;
-          }
-        }
-      
-      }
-    }
-
-    effectSize(width: Size, height: Size) {
-      const handleSize = (
-        size: Size,
-        setter: (value: number) => void,
-        parentSize: Signal<number>
-      ) => {
-        if (typeof size === "string" && size.endsWith("%")) {
-          effect(() => {
-            setter(parentSize() * (parseInt(size) / 100));
-            if (this.isFlex) {
-              this.applyFlexLayout();
-            }
-          });
-        } else {
-          setter(+size);
+        if (this.onAfterMount) {
+          await this.onAfterMount();
         }
-      };
-
-      if (width != undefined)
-        handleSize(width, this.setWidth.bind(this), this.parent.displayWidth);
-      if (height != undefined)
-        handleSize(
-          height,
-          this.setHeight.bind(this),
-          this.parent.displayHeight
-        );
-    }
-
-    applyFlexLayout() {
-      this.calculateLayout();
-      for (let child of this.children) {
-        const { left, top } = child.node.getComputedLayout();
-        child.x = left;
-        child.y = top;
-      }
-    }
-
-    #flexRender(props) {
-      if (!this.parent) return;
-      if (props.flexDirection || props.justifyContent) {
-        this.isFlex = true;
-        this.applyFlexLayout();
       }
     }
 
@@ -212,6 +175,7 @@ export function DisplayObject(extendClass) {
       };
 
       if (!this.#canvasContext || !this.parent) return;
+
       if (props.x !== undefined) this.setX(props.x);
       if (props.y !== undefined) this.setY(props.y);
       if (props.scale !== undefined)
@@ -219,6 +183,28 @@ export function DisplayObject(extendClass) {
       if (props.anchor !== undefined && !this.isCustomAnchor) {
         setObservablePoint(this.anchor, props.anchor);
       }
+      if (props.width !== undefined) this.setWidth(props.width);
+      if (props.height !== undefined) this.setHeight(props.height);
+      if (props.minWidth !== undefined) this.setMinWidth(props.minWidth);
+      if (props.minHeight !== undefined) this.setMinHeight(props.minHeight);
+      if (props.maxWidth !== undefined) this.setMaxWidth(props.maxWidth);
+      if (props.maxHeight !== undefined) this.setMaxHeight(props.maxHeight);
+      if (props.aspectRatio !== undefined)
+        this.setAspectRatio(props.aspectRatio);
+      if (props.flexGrow !== undefined) this.setFlexGrow(props.flexGrow);
+      if (props.flexShrink !== undefined) this.setFlexShrink(props.flexShrink);
+      if (props.flexBasis !== undefined) this.setFlexBasis(props.flexBasis);
+      if (props.rowGap !== undefined) this.setRowGap(props.rowGap);
+      if (props.columnGap !== undefined) this.setColumnGap(props.columnGap);
+      if (props.top !== undefined) this.setTop(props.top);
+      if (props.left !== undefined) this.setLeft(props.left);
+      if (props.right !== undefined) this.setRight(props.right);
+      if (props.bottom !== undefined) this.setBottom(props.bottom);
+      if (props.objectFit !== undefined) this.setObjectFit(props.objectFit);
+      if (props.objectPosition !== undefined)
+        this.setObjectPosition(props.objectPosition);
+      if (props.transformOrigin !== undefined)
+        this.setTransformOrigin(props.transformOrigin);
       if (props.skew !== undefined) setObservablePoint(this.skew, props.skew);
       if (props.tint) this.tint = props.tint;
       if (props.rotation !== undefined) this.rotation = props.rotation;
@@ -279,73 +265,34 @@ export function DisplayObject(extendClass) {
       }
 
       this.filters = currentFilters;
-
-      this.#flexRender(props);
     }
 
-    onDestroy() {
+    async onDestroy(parent: Element, afterDestroy?: () => void) {
+      if (this.onBeforeDestroy) {
+        await this.onBeforeDestroy();
+      }
       super.destroy();
-      this.node?.freeRecursive();
-    }
-
-    getComputedLayout() {
-      return this.node.getComputedLayout();
-    }
-
-    applyComputedLayout() {
-      const layout = this.getComputedLayout();
-      this.x = layout.left;
-      this.y = layout.top;
-    }
-
-    calculateLayout() {
-      this.node.calculateLayout();
+      if (this.onAfterDestroy) this.onAfterDestroy()
     }
 
     setFlexDirection(direction: FlexDirection) {
-      const mapping = {
-        row: this.yoga.FLEX_DIRECTION_ROW,
-        column: this.yoga.FLEX_DIRECTION_COLUMN,
-        "row-reverse": this.yoga.FLEX_DIRECTION_ROW_REVERSE,
-        "column-reverse": this.yoga.FLEX_DIRECTION_COLUMN_REVERSE,
-      };
-      this.node.setFlexDirection(mapping[direction]);
+      this.layout = { flexDirection: direction };
     }
 
     setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse") {
-      const mapping = {
-        wrap: this.yoga.WRAP_WRAP,
-        nowrap: this.yoga.WRAP_NO_WRAP,
-        "wrap-reverse": this.yoga.WRAP_WRAP_REVERSE,
-      };
-      this.node.setFlexWrap(mapping[wrap]);
-    }
-
-    #setAlign(methodName: string, align: AlignContent) {
-      const mapping = {
-        auto: this.yoga.ALIGN_AUTO,
-        "flex-start": this.yoga.ALIGN_FLEX_START,
-        "flex-end": this.yoga.ALIGN_FLEX_END,
-        center: this.yoga.ALIGN_CENTER,
-        stretch: this.yoga.ALIGN_STRETCH,
-        baseline: this.yoga.ALIGN_BASELINE,
-        "space-between": this.yoga.ALIGN_SPACE_BETWEEN,
-        "space-around": this.yoga.ALIGN_SPACE_AROUND,
-      };
-      const method = (this.node as any)[methodName].bind(this.node);
-      method(mapping[align]);
+      this.layout = { flexWrap: wrap };
     }
 
     setAlignContent(align: AlignContent) {
-      this.#setAlign("setAlignContent", align);
+      this.layout = { alignContent: align };
     }
 
     setAlignSelf(align: AlignContent) {
-      this.#setAlign("setAlignSelf", align);
+      this.layout = { alignSelf: align };
     }
 
     setAlignItems(align: AlignContent) {
-      this.#setAlign("setAlignItems", align);
+      this.layout = { alignItems: align };
     }
 
     setJustifyContent(
@@ -356,95 +303,133 @@ export function DisplayObject(extendClass) {
         | "space-between"
         | "space-around"
     ) {
-      const mapping = {
-        "flex-start": this.yoga.JUSTIFY_FLEX_START,
-        "flex-end": this.yoga.JUSTIFY_FLEX_END,
-        center: this.yoga.JUSTIFY_CENTER,
-        "space-between": this.yoga.JUSTIFY_SPACE_BETWEEN,
-        "space-around": this.yoga.JUSTIFY_SPACE_AROUND,
-      };
-      this.node.setJustifyContent(mapping[justifyContent]);
-    }
-
-    #setEdgeSize(methodName: string, size: EdgeSize) {
-      const method = (this.node as any)[methodName].bind(this.node);
-      if (size instanceof Array) {
-        if (size.length === 2) {
-          method(this.yoga.EDGE_VERTICAL, size[0]);
-          method(this.yoga.EDGE_HORIZONTAL, size[1]);
-        } else if (size.length === 4) {
-          method(this.yoga.EDGE_TOP, size[0]);
-          method(this.yoga.EDGE_RIGHT, size[1]);
-          method(this.yoga.EDGE_BOTTOM, size[2]);
-          method(this.yoga.EDGE_LEFT, size[3]);
-        }
-      } else {
-        method(this.yoga.EDGE_ALL, size);
-      }
+      this.layout = { justifyContent };
     }
 
     setPosition(position: EdgeSize) {
-      this.#setEdgeSize("setPosition", position);
+      if (position instanceof Array) {
+        if (position.length === 2) {
+          this.layout = {
+            positionY: position[0],
+            positionX: position[1],
+          };
+        } else if (position.length === 4) {
+          this.layout = {
+            positionTop: position[0],
+            positionRight: position[1],
+            positionBottom: position[2],
+            positionLeft: position[3],
+          };
+        }
+      } else {
+        this.layout = { position };
+      }
     }
 
     setX(x: number) {
       x = x + this.getWidth() * this._anchorPoints.x;
       if (!this.parent.isFlex) {
         this.x = x;
+      } else {
+        this.x = x;
+        this.layout = { x };
       }
-      this.node.setPosition(this.yoga.EDGE_LEFT, x);
     }
 
     setY(y: number) {
       y = y + this.getHeight() * this._anchorPoints.y;
       if (!this.parent.isFlex) {
         this.y = y;
+      } else {
+        this.y = y;
+        this.layout = { y };
       }
-      this.node.setPosition(this.yoga.EDGE_TOP, y);
     }
 
     setPadding(padding: EdgeSize) {
-      this.#setEdgeSize("setPadding", padding);
+      if (padding instanceof Array) {
+        if (padding.length === 2) {
+          this.layout = {
+            paddingVertical: padding[0],
+            paddingHorizontal: padding[1],
+          };
+        } else if (padding.length === 4) {
+          this.layout = {
+            paddingTop: padding[0],
+            paddingRight: padding[1],
+            paddingBottom: padding[2],
+            paddingLeft: padding[3],
+          };
+        }
+      } else {
+        this.layout = { padding };
+      }
     }
 
     setMargin(margin: EdgeSize) {
-      this.#setEdgeSize("setMargin", margin);
+      if (margin instanceof Array) {
+        if (margin.length === 2) {
+          this.layout = {
+            marginVertical: margin[0],
+            marginHorizontal: margin[1],
+          };
+        } else if (margin.length === 4) {
+          this.layout = {
+            marginTop: margin[0],
+            marginRight: margin[1],
+            marginBottom: margin[2],
+            marginLeft: margin[3],
+          };
+        }
+      } else {
+        this.layout = { margin };
+      }
     }
 
     setGap(gap: EdgeSize) {
-      this.node.setGap(this.yoga.GAP_ALL, +gap);
+      this.layout = { gap };
     }
 
     setBorder(border: EdgeSize) {
-      this.#setEdgeSize("setBorder", border);
+      if (border instanceof Array) {
+        if (border.length === 2) {
+          this.layout = {
+            borderVertical: border[0],
+            borderHorizontal: border[1],
+          };
+        } else if (border.length === 4) {
+          this.layout = {
+            borderTop: border[0],
+            borderRight: border[1],
+            borderBottom: border[2],
+            borderLeft: border[3],
+          };
+        }
+      } else {
+        this.layout = { border };
+      }
     }
 
     setPositionType(positionType: "relative" | "absolute") {
-      const mapping = {
-        relative: this.yoga.POSITION_TYPE_RELATIVE,
-        absolute: this.yoga.POSITION_TYPE_ABSOLUTE,
-      };
-      this.node.setPositionType(mapping[positionType]);
-    }
-
-    calculateBounds() {
-      super.calculateBounds();
-      if (!this._geometry) return;
-      const bounds = this._geometry.bounds;
-      const width = Math.abs(bounds.minX - bounds.maxX);
-      const height = Math.abs(bounds.minY - bounds.maxY);
-      // this.node.setWidth(width);
-      // this.node.setHeight(height);
+      this.layout = { position: positionType };
     }
 
     setWidth(width: number) {
       this.displayWidth.set(width);
-      this.node?.setWidth(width);
+      if (!this.parent?.isFlex) {
+        this.width = width;
+      } else {
+        this.layout = { width };
+      }
     }
 
     setHeight(height: number) {
       this.displayHeight.set(height);
-      this.node?.setHeight(height);
+      if (!this.parent?.isFlex) {
+        this.height = height;
+      } else {
+        this.layout = { height };
+      }
     }
 
     getWidth() {
@@ -454,5 +439,79 @@ export function DisplayObject(extendClass) {
     getHeight() {
       return this.displayHeight();
     }
+
+    // Min/Max constraints
+    setMinWidth(minWidth: number | string) {
+      this.layout = { minWidth };
+    }
+
+    setMinHeight(minHeight: number | string) {
+      this.layout = { minHeight };
+    }
+
+    setMaxWidth(maxWidth: number | string) {
+      this.layout = { maxWidth };
+    }
+
+    setMaxHeight(maxHeight: number | string) {
+      this.layout = { maxHeight };
+    }
+
+    // Aspect ratio
+    setAspectRatio(aspectRatio: number) {
+      this.layout = { aspectRatio };
+    }
+
+    // Flex properties
+    setFlexGrow(flexGrow: number) {
+      this.layout = { flexGrow };
+    }
+
+    setFlexShrink(flexShrink: number) {
+      this.layout = { flexShrink };
+    }
+
+    setFlexBasis(flexBasis: number | string) {
+      this.layout = { flexBasis };
+    }
+
+    // Gap properties
+    setRowGap(rowGap: number) {
+      this.layout = { rowGap };
+    }
+
+    setColumnGap(columnGap: number) {
+      this.layout = { columnGap };
+    }
+
+    // Position insets
+    setTop(top: number | string) {
+      this.layout = { top };
+    }
+
+    setLeft(left: number | string) {
+      this.layout = { left };
+    }
+
+    setRight(right: number | string) {
+      this.layout = { right };
+    }
+
+    setBottom(bottom: number | string) {
+      this.layout = { bottom };
+    }
+
+    // Object properties
+    setObjectFit(objectFit: ObjectFit) {
+      this.layout = { objectFit };
+    }
+
+    setObjectPosition(objectPosition: ObjectPosition) {
+      this.layout = { objectPosition };
+    }
+
+    setTransformOrigin(transformOrigin: TransformOrigin) {
+      this.layout = { transformOrigin };
+    }
   };
 }

package/src/components/Graphic.ts

@@ -1,7 +1,7 @@
 import { Effect, effect, Signal } from "@signe/reactive";
 import { Graphics as PixiGraphics } from "pixi.js";
-import { createComponent, registerComponent } from "../engine/reactive";
-import { DisplayObject } from "./DisplayObject";
+import { createComponent, Element, registerComponent } from "../engine/reactive";
+import { ComponentInstance, DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { useProps } from "../hooks/useProps";
 import { SignalOrPrimitive } from "./types";
@@ -44,14 +44,25 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
     }
   }
 
-  onDestroy() {
-    this.clearEffect.subscription.unsubscribe();
-    super.onDestroy();
+  /**
+   * Called when the component is about to be destroyed.
+   * This method should be overridden by subclasses to perform any cleanup.
+   * It ensures that the clearEffect subscription is unsubscribed before calling the original afterDestroy callback.
+   * @param parent The parent element.
+   * @param afterDestroy A callback function to be executed after the component's own destruction logic.
+   * @example
+   * // This method is typically called by the engine internally.
+   * // await component.onDestroy(parentElement, () => console.log('Component destroyed'));
+   */
+  async onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void): Promise<void> {
+    const _afterDestroyCallback = async () => {
+      this.clearEffect.subscription.unsubscribe();
+      afterDestroy();
+    }
+    await super.onDestroy(parent, _afterDestroyCallback);
   }
 }
 
-interface CanvasGraphics extends PixiGraphics {}
-
 registerComponent("Graphics", CanvasGraphics);
 
 export function Graphics(props: GraphicsProps) {

package/src/components/NineSliceSprite.ts

@@ -2,6 +2,7 @@ import { Assets, NineSliceSprite as PixiNineSliceSprite, Texture } from "pixi.js
 import { createComponent, registerComponent } from "../engine/reactive";
 import { DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
+import { Layout } from "@pixi/layout";
 
 interface NineSliceSpriteProps extends DisplayObjectProps {
     image?: string;
@@ -37,7 +38,9 @@ class CanvasNineSliceSprite extends DisplayObject(PixiNineSliceSprite) {
   }
 }
 
-interface CanvasNineSliceSprite extends PixiNineSliceSprite {}
+interface CanvasNineSliceSprite extends PixiNineSliceSprite {
+  layout: Layout | null;
+}
 
 registerComponent("NineSliceSprite", CanvasNineSliceSprite);
 

package/src/components/ParticleEmitter.ts

@@ -1,14 +1,15 @@
 import * as particles from "@barvynkoa/particle-emitter";
-import { createComponent, registerComponent } from "../engine/reactive";
+import { createComponent, Element, registerComponent } from "../engine/reactive";
 import { CanvasContainer } from "./Container";
 import { Signal } from "@signe/reactive";
+import { ComponentInstance } from "./DisplayObject";
 
 class CanvasParticlesEmitter extends CanvasContainer {
   private emitter: particles.Emitter | null;
   private elapsed: number = Date.now();
 
-  onMount(params) {
-    super.onMount(params);
+  async onMount(params) {
+    await super.onMount(params);
     const { props } = params;
     const tick: Signal = props.context.tick;
     this.emitter = new particles.Emitter(this as any, props.config);
@@ -24,11 +25,14 @@ class CanvasParticlesEmitter extends CanvasContainer {
 
   onUpdate(props) {}
 
-  onDestroy(): void {
-    super.onDestroy();
-    this.emitter?.destroy();
-    this.emitter = null;
-    this.subscriptionTick.unsubscribe();
+  async onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void) {
+    const _afterDestroy = async () => {
+      this.emitter?.destroy();
+      this.emitter = null;
+      this.subscriptionTick.unsubscribe();
+      afterDestroy();
+    }
+    await super.onDestroy(parent, _afterDestroy);
   }
 }
 

package/src/components/Sprite.ts

@@ -25,6 +25,7 @@ import {
 import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { AnimatedSignal, isAnimatedSignal } from "../engine/animation";
+import { Layout } from '@pixi/layout';
 
 const log = console.log;
 
@@ -219,7 +220,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         this.sheetCurrentAnimation = StandardAnimation.Stand;
       }
 
-      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+      if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     });
 
     super.onMount(params);
@@ -272,8 +273,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     }
   }
 
-  onDestroy(): void {
-    super.onDestroy();
+  async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
+    await super.onDestroy(parent);
     this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
     this.subscriptionTick.unsubscribe();
     if (this.currentAnimationContainer && this.parent instanceof Container) {
@@ -463,7 +464,9 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   }
 }
 
-export interface CanvasSprite extends PixiSprite {}
+export interface CanvasSprite extends PixiSprite {
+  layout: Layout | null;
+}
 
 registerComponent("Sprite", CanvasSprite);