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

package/dist/index.d.ts

@@ -3,9 +3,8 @@ import { WritableSignal, Signal } from '@signe/reactive';
 export * from '@signe/reactive';
 import { Subscription, Subject, Observable } from 'rxjs';
 export { isObservable } from 'rxjs';
-import { Node } from 'yoga-layout';
 import * as PIXI from 'pixi.js';
-import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
+import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Application, Matrix } from 'pixi.js';
 import * as howler from 'howler';
 export { howler as Howl };
 export { Howler } from 'howler';
@@ -96,6 +95,10 @@ type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | '
 type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 type Size = number | `${number}%`;
 type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>;
+type ObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+type ObjectPosition = string;
+type TransformOrigin = string;
+type PositionType = 'relative' | 'absolute' | 'static';
 interface DisplayObjectProps {
     attach?: any;
     ref?: string;
@@ -103,6 +106,24 @@ interface DisplayObjectProps {
     y?: SignalOrPrimitive<number>;
     width?: SignalOrPrimitive<Size>;
     height?: SignalOrPrimitive<Size>;
+    minWidth?: SignalOrPrimitive<Size>;
+    minHeight?: SignalOrPrimitive<Size>;
+    maxWidth?: SignalOrPrimitive<Size>;
+    maxHeight?: SignalOrPrimitive<Size>;
+    aspectRatio?: SignalOrPrimitive<number>;
+    flexGrow?: SignalOrPrimitive<number>;
+    flexShrink?: SignalOrPrimitive<number>;
+    flexBasis?: SignalOrPrimitive<Size>;
+    rowGap?: SignalOrPrimitive<number>;
+    columnGap?: SignalOrPrimitive<number>;
+    positionType?: PositionType;
+    top?: SignalOrPrimitive<Size>;
+    right?: SignalOrPrimitive<Size>;
+    bottom?: SignalOrPrimitive<Size>;
+    left?: SignalOrPrimitive<Size>;
+    objectFit?: ObjectFit;
+    objectPosition?: ObjectPosition;
+    transformOrigin?: TransformOrigin;
     children?: any[];
     flexDirection?: FlexDirection;
     justifyContent?: JustifyContent;
@@ -176,12 +197,13 @@ interface ComponentInstance extends PixiMixins.ContainerOptions {
     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;
 }
 declare const EVENTS: string[];
+type OnHook = (() => void) | (() => Promise<void> | void);
 declare function DisplayObject(extendClass: any): {
     new (): {
         [x: string]: any;
@@ -196,34 +218,20 @@ declare function DisplayObject(extendClass: any): {
         displayWidth: _signe_reactive.WritableSignal<number>;
         displayHeight: _signe_reactive.WritableSignal<number>;
         overrideProps: string[];
-        node: Node;
-        readonly yoga: any;
+        layout: any;
+        onBeforeDestroy: OnHook | null;
+        onAfterMount: OnHook | null;
         readonly deltaRatio: any;
         onInit(props: any): void;
-        onMount({ parent, props }: Element</*elided*/ any>, index?: number): void;
-        effectSize(width: Size, height: Size): void;
-        applyFlexLayout(): void;
-        "__#1@#flexRender"(props: any): void;
+        onMount({ parent, props }: Element</*elided*/ any>, index?: number): Promise<void>;
         onUpdate(props: any): void;
-        onDestroy(): void;
-        getComputedLayout(): {
-            left: number;
-            right: number;
-            top: number;
-            bottom: number;
-            width: number;
-            height: number;
-        };
-        applyComputedLayout(): void;
-        calculateLayout(): void;
+        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
         setFlexDirection(direction: FlexDirection): void;
         setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
-        "__#1@#setAlign"(methodName: string, align: AlignContent): void;
         setAlignContent(align: AlignContent): void;
         setAlignSelf(align: AlignContent): void;
         setAlignItems(align: AlignContent): void;
         setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
-        "__#1@#setEdgeSize"(methodName: string, size: EdgeSize): void;
         setPosition(position: EdgeSize): void;
         setX(x: number): void;
         setY(y: number): void;
@@ -232,11 +240,27 @@ declare function DisplayObject(extendClass: any): {
         setGap(gap: EdgeSize): void;
         setBorder(border: EdgeSize): void;
         setPositionType(positionType: "relative" | "absolute"): void;
-        calculateBounds(): void;
         setWidth(width: number): void;
         setHeight(height: number): void;
         getWidth(): number;
         getHeight(): number;
+        setMinWidth(minWidth: number | string): void;
+        setMinHeight(minHeight: number | string): void;
+        setMaxWidth(maxWidth: number | string): void;
+        setMaxHeight(maxHeight: number | string): void;
+        setAspectRatio(aspectRatio: number): void;
+        setFlexGrow(flexGrow: number): void;
+        setFlexShrink(flexShrink: number): void;
+        setFlexBasis(flexBasis: number | string): void;
+        setRowGap(rowGap: number): void;
+        setColumnGap(columnGap: number): void;
+        setTop(top: number | string): void;
+        setLeft(left: number | string): void;
+        setRight(right: number | string): void;
+        setBottom(bottom: number | string): void;
+        setObjectFit(objectFit: ObjectFit): void;
+        setObjectPosition(objectPosition: ObjectPosition): void;
+        setTransformOrigin(transformOrigin: TransformOrigin): void;
     };
     [x: string]: any;
 };
@@ -393,6 +417,7 @@ interface CanvasProps extends Props {
     isRoot?: boolean;
     tick?: any;
     class?: SignalOrPrimitive<string>;
+    background?: string;
 }
 declare const Canvas: ComponentFunction<CanvasProps>;
 
@@ -826,6 +851,7 @@ interface TextProps extends DisplayObjectProps {
         onComplete?: () => void;
         skip?: () => void;
     };
+    context?: any;
 }
 declare function Text(props: TextProps): Element<ComponentInstance>;
 
@@ -844,7 +870,7 @@ interface TilingSpriteProps extends DisplayObjectProps {
 }
 declare function TilingSprite(props: TilingSpriteProps): Element<ComponentInstance>;
 
-interface ViewportProps {
+interface ViewportProps extends Props {
     screenWidth?: number;
     screenHeight?: number;
     worldWidth?: number;
@@ -855,6 +881,7 @@ interface ViewportProps {
         top?: number;
         bottom?: number;
     };
+    context?: any;
     [key: string]: any;
 }
 declare function Viewport(props: ViewportProps): Element<ComponentInstance>;
@@ -930,7 +957,10 @@ declare function on(triggerSignal: any, callback: (config: any) => void | Promis
  * @returns A Promise that resolves to the rendered canvas element.
  * @throws {Error} If the provided element is not a Canvas component.
  */
-declare const bootstrapCanvas: (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => Promise<Element<ComponentInstance>>;
+declare const bootstrapCanvas: (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => Promise<{
+    canvasElement: Element<ComponentInstance>;
+    app: Application<PIXI.Renderer>;
+}>;
 
 /**
  * Converts props into reactive signals if they are primitive values.