canvasengine 2.0.0-beta.4 → 2.0.0-beta.41

package/src/components/DisplayObject.ts

@@ -1,22 +1,25 @@
-import { Node } from "yoga-layout";
-import { Element, isElement, Props } from "../engine/reactive";
+import { Element, isElement, Props, isElementFrozen } 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 { DropShadowFilter } from "pixi-filters";
+import { signal } from "@signe/reactive";
 import { BlurFilter, ObservablePoint } from "pixi.js";
+import * as FILTERS from "pixi-filters";
+import { isPercent } from "../utils/functions";
+import { BehaviorSubject, filter, Subject } from "rxjs";
 
 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 +96,8 @@ export const EVENTS = [
   "wheelcapture",
 ];
 
+export type OnHook = (() => void) | (() => Promise<void> | void);
+
 export function DisplayObject(extendClass) {
   return class DisplayObject extends extendClass {
     #canvasContext: {
@@ -101,117 +106,138 @@ 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;
+    subjectInit = new BehaviorSubject(null);
+    disableLayout: boolean = false;
+    // Store registered event listeners for cleanup
+    #registeredEvents: Map<string, Function> = new Map();
+    // Store computed layout box dimensions
+    #computedLayoutBox: { width?: number; height?: number } | null = null;
+    // Store reference to element for freeze checking
+    #element: Element<DisplayObject> | null = null;
+
+    /**
+     * Get the element reference for freeze checking
+     * @returns The element reference or null
+     */
+    protected getElement(): Element<DisplayObject> | null {
+      return this.#element;
     }
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
     }
 
-    onInit(props) {
+    get parentIsFlex() {
+      if (this.disableLayout) return false;
+      return this.parent?.isFlex;
+    }
+
+    onInit(props: Props) {
       this._id = props.id;
       for (let event of EVENTS) {
         if (props[event] && !this.overrideProps.includes(event)) {
           this.eventMode = "static";
-          this.on(event, props[event]);
+          const originalEventHandler = props[event];
+          
+          // Wrap event handler to check freeze state
+          const wrappedHandler = (...args: any[]) => {
+            // Check if element is frozen before executing handler
+            if (this.#element && isElementFrozen(this.#element)) {
+              return;
+            }
+            return originalEventHandler(...args);
+          };
+          
+          // Store the wrapped event handler for cleanup
+          if (event === 'click') {
+            this.on('pointertap', wrappedHandler);
+            this.#registeredEvents.set('pointertap', wrappedHandler);
+          } else {
+            this.on(event, wrappedHandler);
+            this.#registeredEvents.set(event, wrappedHandler);
+          }
         }
       }
+      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;
+      }
+
+      this.subjectInit.next(this);
     }
 
-    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;
+    async onMount(element: Element<DisplayObject>, index?: number) {
+      if (this.destroyed) return
+      this.#element = element;
+      this.#canvasContext = element.props.context;
+      if (element.parent) {
+        const instance = element.parent.componentInstance as DisplayObject;
+        if (instance.isFlex && !this.layout && !this.disableLayout) {
+          try {
+            this.layout = {};
+          } catch (error) {
+            console.warn('Failed to set layout:', error);
+          }
+        }
         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;
+        this.onUpdate(element.props);
+        
+        // Listen to layout events to store computed layout dimensions
+        const layoutHandler = (event: any) => {
+          if (event.computedLayout) {
+            this.#computedLayoutBox = {
+              width: event.computedLayout.width,
+              height: event.computedLayout.height,
+            };
           }
+        };
+        this.on('layout', layoutHandler);
+        this.#registeredEvents.set('layout', layoutHandler);
+        
+        if (this.onAfterMount) {
+          await this.onAfterMount();
         }
-      
       }
     }
 
-    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 (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();
-      }
-    }
-
-    onUpdate(props) {
+    onUpdate(props: Props) {
       this.fullProps = {
         ...this.fullProps,
         ...props,
       };
 
+      if (this.destroyed) return
       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 +245,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;
@@ -243,23 +291,24 @@ export function DisplayObject(extendClass) {
       if (props.filters) this.filters = props.filters;
       if (props.maskOf) {
         if (isElement(props.maskOf)) {
-          props.maskOf.componentInstance.mask = this;
+          props.maskOf.componentInstance.mask = this as any;
         }
       }
       if (props.blendMode) this.blendMode = props.blendMode;
       if (props.filterArea) this.filterArea = props.filterArea;
       const currentFilters = this.filters || [];
 
-      if (props.shadow) {
-        let dropShadowFilter = currentFilters.find(
-          (filter) => filter instanceof DropShadowFilter
-        );
-        if (!dropShadowFilter) {
-          dropShadowFilter = new DropShadowFilter();
-          currentFilters.push(dropShadowFilter);
-        }
-        Object.assign(dropShadowFilter, props.shadow);
-      }
+      // TODO: Fix DropShadowFilter import issue
+      // if (props.shadow) {
+      //   let dropShadowFilter = currentFilters.find(
+      //     (filter) => filter instanceof FILTERS.DropShadowFilter
+      //   );
+      //   if (!dropShadowFilter) {
+      //     dropShadowFilter = new FILTERS.DropShadowFilter();
+      //     currentFilters.push(dropShadowFilter);
+      //   }
+      //   Object.assign(dropShadowFilter, props.shadow);
+      // }
 
       if (props.blur) {
         let blurFilter = currentFilters.find(
@@ -279,73 +328,41 @@ export function DisplayObject(extendClass) {
       }
 
       this.filters = currentFilters;
-
-      this.#flexRender(props);
-    }
-
-    onDestroy() {
-      super.destroy();
-      this.node?.freeRecursive();
-    }
-
-    getComputedLayout() {
-      return this.node.getComputedLayout();
     }
 
-    applyComputedLayout() {
-      const layout = this.getComputedLayout();
-      this.x = layout.left;
-      this.y = layout.top;
-    }
+    async onDestroy(parent: Element, afterDestroy?: () => void) {
+      // Remove all registered event listeners
+      for (const [eventName, eventHandler] of this.#registeredEvents) {
+        this.off(eventName, eventHandler);
+      }
+      this.#registeredEvents.clear();
+      this.#element = null;
 
-    calculateLayout() {
-      this.node.calculateLayout();
+      if (this.onBeforeDestroy) {
+        await this.onBeforeDestroy();
+      }
+      if (afterDestroy) afterDestroy();
+      super.destroy();
     }
 
     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,103 +373,239 @@ 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) {
+      if (!this.parentIsFlex) {
+        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) {
+      if (!this.parentIsFlex) {
         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.parentIsFlex) {
+        this.width = width;
+      } else {
+        this.layout = { width };
+      }
     }
 
     setHeight(height: number) {
       this.displayHeight.set(height);
-      this.node?.setHeight(height);
+      if (!this.parentIsFlex) {
+        this.height = height;
+      } else {
+        this.layout = { height };
+      }
+    }
+
+    getWidth(): number {
+      // If width is a percentage, use computed layout box
+      if (isPercent(this.fullProps.width)) {
+        if (this.#computedLayoutBox?.width !== undefined) {
+          return this.#computedLayoutBox.width;
+        }
+        // Fallback to native width if layout not yet computed
+        return typeof this.width === 'number' ? this.width : 0;
+      }
+      // For static values, use native PixiJS width or displayWidth signal
+      const staticWidth = typeof this.width === 'number' && this.width > 0 
+        ? this.width 
+        : (typeof this.displayWidth() === 'number' ? this.displayWidth() : 0);
+      return staticWidth;
+    }
+
+    getHeight(): number {
+      // If height is a percentage, use computed layout box
+      if (isPercent(this.fullProps.height)) {
+        if (this.#computedLayoutBox?.height !== undefined) {
+          return this.#computedLayoutBox.height;
+        }
+        // Fallback to native height if layout not yet computed
+        return typeof this.height === 'number' ? this.height : 0;
+      }
+      // For static values, use native PixiJS height or displayHeight signal
+      const staticHeight = typeof this.height === 'number' && this.height > 0 
+        ? this.height 
+        : (typeof this.displayHeight() === 'number' ? this.displayHeight() : 0);
+      return staticHeight;
+    }
+
+    // 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 };
     }
 
-    getWidth() {
-      return this.displayWidth();
+    setObjectPosition(objectPosition: ObjectPosition) {
+      this.layout = { objectPosition };
     }
 
-    getHeight() {
-      return this.displayHeight();
+    setTransformOrigin(transformOrigin: TransformOrigin) {
+      this.layout = { transformOrigin };
     }
   };
 }