canvasengine 2.0.0-beta.15 → 2.0.0-beta.17

package/src/components/Text.ts

@@ -1,6 +1,6 @@
 import { Text as PixiText, TextStyle } from "pixi.js";
-import { createComponent, registerComponent } from "../engine/reactive";
-import { DisplayObject } from "./DisplayObject";
+import { createComponent, registerComponent, Element, Props } from "../engine/reactive";
+import { DisplayObject, ComponentInstance } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { Signal } from "@signe/reactive";
 import { on } from "../engine/trigger";
@@ -9,7 +9,7 @@ enum TextEffect {
   Typewriter = "typewriter",
 }
 
-interface TextProps extends DisplayObjectProps {
+export interface TextProps extends DisplayObjectProps {
   text?: string;
   style?: Partial<TextStyle>;
   color?: string;
@@ -21,6 +21,7 @@ interface TextProps extends DisplayObjectProps {
     onComplete?: () => void;
     skip?: () => void;
   };
+  context?: any; // Ensure context is available, ideally typed from a base prop or injected
 }
 
 class CanvasText extends DisplayObject(PixiText) {
@@ -32,9 +33,15 @@ class CanvasText extends DisplayObject(PixiText) {
   private typewriterOptions: any = {};
   private skipSignal?: () => void;
 
-  onMount(args) {
-    super.onMount(args);
-    const { props } = args;
+  /**
+   * Called when the component is mounted to the scene graph.
+   * Initializes the typewriter effect if configured.
+   * @param {Element<CanvasText>} element - The element being mounted. Its `props` property (of type TextProps) contains component properties and context.
+   * @param {number} [index] - The index of the component among its siblings.
+   */
+  async onMount(element: Element<CanvasText>, index?: number): Promise<void> {
+    await super.onMount(element, index);
+    const { props } = element; // props here will be of type TextProps due to Element<CanvasText>
     const tick: Signal = props.context.tick;
 
     if (props.text && props.typewriter) {
@@ -130,13 +137,22 @@ class CanvasText extends DisplayObject(PixiText) {
     this.currentIndex = this.fullText.length;
   }
 
-  onDestroy(): void {
-    super.onDestroy();
-    this.subscriptionTick.unsubscribe();
+  /**
+   * Called when the component is about to be destroyed.
+   * Unsubscribes from the tick observable.
+   * @param {Element<any>} parent - The parent element.
+   * @param {() => void} [afterDestroy] - An optional callback function to be executed after the component's own destruction logic.
+   */
+  async onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void> {
+    const _afterDestroy = async () => {
+      this.subscriptionTick.unsubscribe();
+      afterDestroy();
+    }
+    await super.onDestroy(parent, _afterDestroy);
   }
 }
 
-interface CanvasText extends PixiText {}
+// interface CanvasText extends PixiText {} // Removed as it's redundant and causes type conflicts
 
 registerComponent("Text", CanvasText);
 

package/src/components/Viewport.ts

@@ -1,8 +1,8 @@
 import { Viewport as PixiViewport } from 'pixi-viewport';
 import { Subscription } from 'rxjs';
-import { createComponent, registerComponent } from '../engine/reactive';
-import { DisplayObject } from './DisplayObject';
-import { effect } from '@signe/reactive';
+import { createComponent, registerComponent, Element, Props } from '../engine/reactive';
+import { DisplayObject, ComponentInstance } from './DisplayObject';
+import { effect, Signal } from '@signe/reactive';
 
 const EVENTS = [
     'bounce-x-end',
@@ -28,6 +28,21 @@ const EVENTS = [
     'zoomed-end'
 ]
 
+export interface ViewportProps extends Props {
+    screenWidth?: number;
+    screenHeight?: number;
+    worldWidth?: number;
+    worldHeight?: number;
+    clamp?: boolean | {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    context?: any;
+    [key: string]: any;
+}
+
 export class CanvasViewport extends DisplayObject(PixiViewport) {
     private tickSubscription: Subscription
     overrideProps = ['wheel']
@@ -52,9 +67,16 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
         }
     }
 
-    onMount(element) {
-        super.onMount(element)
-        const { tick, renderer, canvasSize } = element.props.context
+    /**
+     * Called when the component is mounted to the scene graph.
+     * Initializes viewport settings and subscriptions.
+     * @param {Element<CanvasViewport>} element - The element being mounted. Its `props` property (of type ViewportProps) contains component properties and context.
+     * @param {number} [index] - The index of the component among its siblings.
+     */
+    async onMount(element: Element<CanvasViewport>, index?: number): Promise<void> {
+        await super.onMount(element, index);
+        const { props } = element;
+        const { tick, app, canvasSize } = props.context;
         let isDragging = false
         
         effect(() => {
@@ -62,19 +84,26 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
             this.screenHeight = canvasSize().height
         })
 
-        renderer.events.domElement.addEventListener(
-            'wheel',
-            this.input.wheelFunction
-        );
+        effect(() => {
+            const _app = app()
+            if (!_app) return
+
+            const renderer = _app.renderer
+            
+            renderer.events.domElement.addEventListener(
+                'wheel',
+                this.input.wheelFunction
+            );
 
-        this.options.events = renderer.events
+            this.options.events = renderer.events
+        })
  
         this.tickSubscription = tick.observable.subscribe(({ value }) => {
             this.update(value.timestamp)
         })
 
         element.props.context.viewport = this
-        this.updateViewportSettings(element.props)
+        this.updateViewportSettings(props)
     }
 
     onUpdate(props) {
@@ -124,30 +153,23 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
         }
     }
 
-    onDestroy(): void {
-        super.onDestroy()
-        this.tickSubscription.unsubscribe()
+    /**
+     * Called when the component is about to be destroyed.
+     * Unsubscribes from the tick observable.
+     * @param {Element<any>} parent - The parent element.
+     * @param {() => void} [afterDestroy] - An optional callback function to be executed after the component's own destruction logic.
+     */
+    async onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void> {
+        const _afterDestroy = async () => {
+            this.tickSubscription.unsubscribe()
+            afterDestroy()
+        }
+        await super.onDestroy(parent, _afterDestroy);
     }
 }
 
-export interface CanvasViewport extends PixiViewport { }
-
 registerComponent('Viewport', CanvasViewport)
 
-export interface ViewportProps {
-    screenWidth?: number;
-    screenHeight?: number;
-    worldWidth?: number;
-    worldHeight?: number;
-    clamp?: boolean | {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
-    [key: string]: any;
-}
-
 export function Viewport(props: ViewportProps) {
     return createComponent('Viewport', props);
 }

package/src/components/types/DisplayObject.ts

@@ -8,6 +8,10 @@ export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-betwe
 export type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 export type Size = number | `${number}%`
 export type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>
+export type ObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export type ObjectPosition = string;
+export type TransformOrigin = string;
+export type PositionType = 'relative' | 'absolute' | 'static';
 
 export interface DisplayObjectProps {
     attach?: any;
@@ -16,6 +20,24 @@ export 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;

package/src/directives/ViewportFollow.ts

@@ -40,7 +40,7 @@ export class ViewportFollow extends Directive {
                     radius: options.radius()
                 })
             }
-        } else {
+        } else if (viewportFollow === null) {
             viewport.plugins.remove('follow')
         }
     }

package/src/engine/bootstrap.ts

@@ -1,3 +1,5 @@
+import '@pixi/layout';
+import { Application } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
 
 /**
@@ -9,11 +11,21 @@ import { ComponentFunction, h } from "./signal";
  * @throws {Error} If the provided element is not a Canvas component.
  */
 export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => {
+  
+  const app = new Application();
+  await app.init({
+    resizeTo: rootElement,
+    autoStart: false,
+  });
+
   const canvasElement = await h(canvas);
   if (canvasElement.tag != 'Canvas') {
     throw new Error('Canvas is required');
   }
-  (canvasElement as any).render(rootElement);
+  (canvasElement as any).render(rootElement, app);
 
-  return canvasElement;
+  return {
+    canvasElement,
+    app
+  };
 };

package/src/engine/reactive.ts

@@ -83,13 +83,14 @@ function destroyElement(element: Element | Element[]) {
   if (!element) {
     return;
   }
-  element.propSubscriptions.forEach((sub) => sub.unsubscribe());
-  element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
-  element.effectUnmounts.forEach((fn) => fn?.());
   for (let name in element.directives) {
     element.directives[name].onDestroy?.(element);
   }
-  element.componentInstance.onDestroy?.(element.parent as any);
+  element.componentInstance.onDestroy(element.parent as any, () => {
+    element.propSubscriptions.forEach((sub) => sub.unsubscribe());
+    element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+    element.effectUnmounts.forEach((fn) => fn?.());
+  });
 }
 
 /**

package/src/index.ts

@@ -1,3 +1,4 @@
+
 import './directives'
 export * from '@signe/reactive'
 export { Howler } from 'howler'

package/src/utils/functions.ts

@@ -0,0 +1,7 @@
+export function isPercent(value?: string | number) {
+    if (!value) return false
+    if (typeof value === "string") {
+        return value.endsWith("%")
+    }
+    return false
+}

package/testing/index.ts

@@ -5,7 +5,8 @@ export class TestBed {
         const comp = () => h(Canvas, {
             tickStart: false
         }, h(component, props, children))
-        const canvas = await bootstrapCanvas(document.getElementById('root'), comp)
-        return canvas.props.children?.[0]
+        const { canvasElement, app } = await bootstrapCanvas(document.getElementById('root'), comp)
+        app.render()
+        return canvasElement.props.children?.[0]
     }
 }