canvasengine 2.0.0-beta.60 → 2.0.0-beta.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.60",
+  "version": "2.0.0-beta.61",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
+    "@chenglou/pretext": "^0.0.6",
     "@pixi/layout": "^3.2.0",
     "@signe/reactive": "^2.9.0",
     "howler": "^2.2.4",

package/src/components/Canvas.ts

@@ -91,7 +91,7 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
 
     if (props.tickStart !== false) canvasElement.directives.tick.start()
 
-    effect(() => {
+    const renderEffect = effect(() => {
       canvasElement.propObservables!.tick();
       renderer.render(canvasElement.componentInstance as any);
     });
@@ -107,7 +107,7 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
 
     canvasSize.set({ width: app.screen.width, height: app.screen.height })
 
-    app.renderer.on('resize', (width: number, height: number) => {
+    const resizeHandler = (width: number, height: number) => {
       canvasSize.set({ width, height });
 
       if (app.stage.layout) {
@@ -116,33 +116,48 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
           height
         }
       }
-    });
+    };
+
+    app.renderer.on('resize', resizeHandler);
 
     if (props.tickStart !== false) canvasElement.directives.tick.start();
 
-    app.ticker.add(() => {
+    const tickerHandler = () => {
       canvasElement.propObservables!.tick();
-    });
+    };
+
+    app.ticker.add(tickerHandler);
 
+    let cursorEffect: any;
     if (cursorStyles) {
-      effect(() => {
+      cursorEffect = effect(() => {
         renderer.events.cursorStyles = cursorStyles();
       });
     }
 
+    let classEffect: any;
     if (className) {
-      effect(() => {
+      classEffect = effect(() => {
         canvasEl.classList.add(className());
       });
     }
 
     const existingCanvas = rootElement.querySelector("canvas");
-    if (existingCanvas) {
+    if (existingCanvas && existingCanvas !== canvasEl) {
       rootElement.replaceChild(canvasEl, existingCanvas);
-    } else {
+    } else if (!existingCanvas) {
       rootElement.appendChild(canvasEl);
     }
 
+    canvasElement.effectUnmounts.push(() => {
+      renderEffect?.subscription?.unsubscribe?.();
+      cursorEffect?.subscription?.unsubscribe?.();
+      classEffect?.subscription?.unsubscribe?.();
+      app.ticker.remove(tickerHandler);
+      app.renderer.off?.('resize', resizeHandler);
+      canvasElement.directives.tick?.stop();
+    });
+
     options.context!.app.set(app)
   };
 

package/src/components/DisplayObject.ts

@@ -395,6 +395,9 @@ export function DisplayObject(extendClass) {
         await this.onBeforeDestroy();
       }
       if (afterDestroy) afterDestroy();
+      if (this.parent && typeof this.parent.removeChild === "function") {
+        this.parent.removeChild(this);
+      }
       super.destroy();
     }
 

package/src/components/Graphic.ts

@@ -184,6 +184,8 @@ const graphicsAnchor = (anchor, width, height) => {
   return { x: -ax * width, y: -ay * height };
 }
 
+const propValue = (value: any) => isSignal(value) ? value() : value;
+
 export function Rect(props: RectProps) {
   const { color, borderRadius, border } = useProps(props, {
     borderRadius: null,
@@ -198,10 +200,11 @@ export function Rect(props: RectProps) {
       } else {
         g.rect(x, y, width, height);
       }
-      if (border) {
-        g.stroke(border);
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
       }
-      g.fill(color());
+      g.fill(propValue(color));
     },
     ...props
   })
@@ -216,14 +219,15 @@ export function Circle(props: CircleProps) {
     draw: (g, width, height, anchor) => {
       const { x, y } = graphicsAnchor(anchor, width, height);
       if (width == height || height == 0) {
-        g.circle(x, y, radius() || width);
+        g.circle(x, y, propValue(radius) || width);
       } else {
         g.ellipse(x, y, width, height);
       }
-      if (border()) {
-        g.stroke(border());
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
       }
-      g.fill(color());
+      g.fill(propValue(color));
     },
     ...props
   })
@@ -245,9 +249,10 @@ export function Triangle(props: TriangleProps) {
       g.lineTo(x + gWidth / 2, y);
       g.lineTo(x + gWidth, y + gHeight);
       g.lineTo(x, y + gHeight);
-      g.fill(color());
-      if (border) {
-        g.stroke(border);
+      g.fill(propValue(color));
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
       }
     },
     ...props
@@ -305,4 +310,4 @@ export function Svg(props: SvgProps) {
     },
     ...props
   })
-}
+}

package/src/components/Text.ts

@@ -1,6 +1,7 @@
+import { layout as layoutPretext, prepare as preparePretext, type PreparedText, type PrepareOptions } from "@chenglou/pretext";
 import { Text as PixiText, TextStyle } from "pixi.js";
-import { createComponent, registerComponent, Element, Props } from "../engine/reactive";
-import { DisplayObject, ComponentInstance } from "./DisplayObject";
+import { createComponent, registerComponent, Element } from "../engine/reactive";
+import { DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { Signal } from "@signe/reactive";
 import { on, isTrigger } from "../engine/trigger";
@@ -14,7 +15,7 @@ export interface TextProps extends DisplayObjectProps {
   text?: string;
   style?: Partial<TextStyle>;
   color?: string;
-  size?: string;
+  size?: string | number;
   fontFamily?: string;
   typewriter?: {
     speed?: number;
@@ -30,6 +31,22 @@ export interface TextProps extends DisplayObjectProps {
   context?: any; // Ensure context is available, ideally typed from a base prop or injected
 }
 
+type PretextMeasurement = {
+  width: number;
+  height: number;
+};
+
+const toFiniteNumber = (value: unknown): number | null => {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+
 class CanvasText extends DisplayObject(PixiText) {
   private subscriptionTick: any;
   private fullText: string = "";
@@ -41,6 +58,9 @@ class CanvasText extends DisplayObject(PixiText) {
   private typewriterSound?: Howl;
   private lastSoundTime: number = 0;
   private soundDuration: number = 0; // Duration of the sound in milliseconds
+  private pretextPrepared: PreparedText | null = null;
+  private pretextPrepareKey: string = "";
+  private measuredLayout: PretextMeasurement | null = null;
 
   /**
    * Called when the component is mounted to the scene graph.
@@ -102,12 +122,7 @@ class CanvasText extends DisplayObject(PixiText) {
       this.updateLayout();
     }
     if (props.style) {
-      for (const key in props.style) {
-        this.style[key] = props.style[key];
-      }
-      if (props.style.wordWrapWidth) {
-        this._wordWrapWidth = props.style.wordWrapWidth;
-      }
+      this.applyTextStyle(props.style);
     }
     if (props.color) {
       this.style.fill = props.color;
@@ -118,6 +133,7 @@ class CanvasText extends DisplayObject(PixiText) {
     if (props.fontFamily) {
       this.style.fontFamily = props.fontFamily;
     }
+    this.updateWordWrapWidth();
     
     // Use the centralized layout update method
     this.updateLayout();
@@ -171,12 +187,130 @@ class CanvasText extends DisplayObject(PixiText) {
    * This method ensures consistent width, height and word wrap behavior.
    */
   private updateLayout() {
-    if (this._wordWrapWidth) {
-      this.setWidth(this._wordWrapWidth);
-    } else {
-      this.setWidth(this.width);
+    const measured = this.measurePretextLayout();
+    const width = measured?.width ?? this.width;
+    const height = measured?.height ?? this.height;
+
+    this.measuredLayout = measured ?? { width, height };
+    this.setMeasuredLayout(width, height);
+  }
+
+  private applyTextStyle(style: Partial<TextStyle>) {
+    const assign = (this.style as TextStyle & { assign?: (values: any) => TextStyle }).assign;
+    if (typeof assign === "function") {
+      assign.call(this.style, style);
+      return;
+    }
+
+    for (const key in style) {
+      (this.style as any)[key] = (style as any)[key];
+    }
+  }
+
+  private updateWordWrapWidth() {
+    if (!this.style.wordWrap) {
+      this._wordWrapWidth = 0;
+      return;
+    }
+    const wordWrapWidth = toFiniteNumber(this.style.wordWrapWidth);
+    this._wordWrapWidth = wordWrapWidth !== null && wordWrapWidth > 0 ? wordWrapWidth : 0;
+  }
+
+  private measurePretextLayout(): PretextMeasurement | null {
+    if (!this.style.wordWrap || this._wordWrapWidth <= 0) {
+      this.pretextPrepared = null;
+      this.pretextPrepareKey = "";
+      return null;
+    }
+
+    const text = `${this.text ?? ""}`;
+    const font = this.resolvePretextFont();
+    const lineHeight = this.resolveLineHeight();
+    const options = this.resolvePretextOptions();
+    const prepareKey = JSON.stringify([text, font, options.whiteSpace, options.wordBreak, options.letterSpacing]);
+
+    try {
+      if (this.pretextPrepareKey !== prepareKey || !this.pretextPrepared) {
+        this.pretextPrepared = preparePretext(text, font, options);
+        this.pretextPrepareKey = prepareKey;
+      }
+
+      const result = layoutPretext(this.pretextPrepared, this._wordWrapWidth, lineHeight);
+      return {
+        width: this._wordWrapWidth,
+        height: result.height,
+      };
+    } catch {
+      this.pretextPrepared = null;
+      this.pretextPrepareKey = "";
+      return null;
+    }
+  }
+
+  private resolvePretextFont(): string {
+    const fontString = (this.style as TextStyle & { _fontString?: string })._fontString;
+    if (fontString) return fontString;
+
+    const fontSize = this.resolveFontSize();
+    const fontFamily = Array.isArray(this.style.fontFamily)
+      ? this.style.fontFamily.join(",")
+      : this.style.fontFamily;
+
+    return `${this.style.fontStyle} ${this.style.fontVariant} ${this.style.fontWeight} ${fontSize}px ${fontFamily}`;
+  }
+
+  private resolvePretextOptions(): PrepareOptions {
+    return {
+      whiteSpace: this.style.whiteSpace === "normal" ? "normal" : "pre-wrap",
+      letterSpacing: this.style.letterSpacing || undefined,
+    };
+  }
+
+  private resolveLineHeight(): number {
+    const lineHeight = toFiniteNumber(this.style.lineHeight);
+    if (lineHeight !== null && lineHeight > 0) return lineHeight;
+    return this.resolveFontSize();
+  }
+
+  private resolveFontSize(): number {
+    const fontSize = toFiniteNumber(this.style.fontSize);
+    return fontSize !== null && fontSize > 0 ? fontSize : 16;
+  }
+
+  private setMeasuredLayout(width: number, height: number) {
+    const layout: { width?: number; height?: number } = {};
+
+    if (this.fullProps.width === undefined) {
+      this.displayWidth.set(width);
+      if (this.parentIsFlex) {
+        layout.width = width;
+      }
+    }
+
+    if (this.fullProps.height === undefined) {
+      this.displayHeight.set(height);
+      if (this.parentIsFlex) {
+        layout.height = height;
+      }
+    }
+
+    if (this.parentIsFlex && (layout.width !== undefined || layout.height !== undefined)) {
+      (this as any).layout = layout;
+    }
+  }
+
+  getWidth(): number {
+    if (this.fullProps.width === undefined && this.measuredLayout) {
+      return this.measuredLayout.width;
+    }
+    return super.getWidth();
+  }
+
+  getHeight(): number {
+    if (this.fullProps.height === undefined && this.measuredLayout) {
+      return this.measuredLayout.height;
     }
-    this.setHeight(this.height);
+    return super.getHeight();
   }
 
   private typewriterEffect() {
@@ -235,6 +369,9 @@ class CanvasText extends DisplayObject(PixiText) {
         this.typewriterSound.unload();
         this.typewriterSound = undefined;
       }
+      this.pretextPrepared = null;
+      this.pretextPrepareKey = "";
+      this.measuredLayout = null;
       if (afterDestroy) {
         afterDestroy();
       }

package/src/directives/Scheduler.ts

@@ -19,13 +19,16 @@ export class Scheduler extends Directive {
     private requestedDelay: number = 0
     private lastTimestamp: number = 0
     private _stop: boolean = false
+    private running: boolean = false
     private tick: WritableSignal<Tick | null>
     
     onInit(element: Element) { 
         this.tick = element.propObservables?.tick as any
     }
 
-    onDestroy() { }
+    onDestroy() {
+        this.stop()
+    }
     onMount(element: Element) { }
     onUpdate(props: any) { }
 
@@ -59,6 +62,9 @@ export class Scheduler extends Directive {
         fps?: number,
         delay?: number
     } = {}) {
+        if (this.running) return this
+        this._stop = false
+        this.running = true
         if (options.maxFps) this.maxFps = options.maxFps
         if (options.fps) this.fps = options.fps
         if (options.delay) this.requestedDelay = options.delay
@@ -76,6 +82,7 @@ export class Scheduler extends Directive {
 
         if (!this.maxFps) {
             const loop = (timestamp: number) => {
+                if (this._stop) return
                 requestAnimationFrame(loop)
                 this.nextTick(timestamp)
             }
@@ -103,6 +110,7 @@ export class Scheduler extends Directive {
 
     stop() {
         this._stop = true
+        this.running = false
     }
 }
 

package/src/engine/bootstrap.ts

@@ -1,4 +1,5 @@
 import { Application, ApplicationOptions } from "pixi.js";
+import { Observable, Subscription } from "rxjs";
 import { ComponentFunction, h } from "./signal";
 import { useProps } from '../hooks/useProps';
 import { registerAllComponents, registerComponent } from './reactive';
@@ -33,6 +34,12 @@ export interface BootstrapOptions extends ApplicationOptions {
   enableLayout?: boolean; // true by default
 }
 
+type BootstrapResult = {
+  canvasElement: any;
+  app: Application;
+  hmrSubscription?: Subscription;
+};
+
 /**
  * Bootstraps a canvas element and renders it to the DOM.
  * 
@@ -61,7 +68,7 @@ export interface BootstrapOptions extends ApplicationOptions {
  * });
  * ```
  */
-export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => {
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions): Promise<BootstrapResult> => {
   // Extract component registration options
   const { components, autoRegister, enableLayout, ...appOptions } = options ?? {};
   if (enableLayout !== false) {
@@ -90,20 +97,57 @@ export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: C
     antialias: true,
     ...appOptions
   });
-  const canvasElement = await h(canvas);
-  if (canvasElement.tag != 'Canvas') {
-    throw new Error('Canvas is required');
-  }
-  (canvasElement as any).render(rootElement, app);
 
-  const { backgroundColor } = useProps(canvasElement.props, {
-    backgroundColor: 'black'
-  });
+  const renderCanvasElement = (canvasElement: any) => {
+    if (canvasElement.tag != 'Canvas') {
+      throw new Error('Canvas is required');
+    }
+    canvasElement.render(rootElement, app);
+
+    const { backgroundColor } = useProps(canvasElement.props, {
+      backgroundColor: 'black'
+    });
 
-  app.renderer.background.color = backgroundColor()
+    app.renderer.background.color = backgroundColor()
 
-  return {
-    canvasElement,
-    app
+    return {
+      canvasElement,
+      app
+    };
   };
+
+  const canvasElement = h(canvas) as any;
+
+  if (canvasElement instanceof Observable) {
+    return new Promise<BootstrapResult>((resolve, reject) => {
+      let resolved = false;
+      let hmrSubscription: Subscription;
+
+      hmrSubscription = canvasElement.subscribe({
+        next(value: any) {
+          try {
+            const nextCanvasElement = value?.elements?.[0] ?? value;
+            if (!nextCanvasElement) return;
+
+            const result = renderCanvasElement(nextCanvasElement);
+
+            if (!resolved) {
+              resolved = true;
+              Promise.resolve().then(() => {
+                resolve({
+                  ...result,
+                  hmrSubscription
+                });
+              });
+            }
+          } catch (error) {
+            reject(error);
+          }
+        },
+        error: reject
+      });
+    });
+  }
+
+  return renderCanvasElement(await canvasElement);
 };

package/src/engine/reactive.ts

@@ -294,7 +294,7 @@ function handleAnimatedSignalsFreeze(element: Element, shouldPause: boolean) {
   Object.values(element.propObservables).forEach(processValue);
 }
 
-function destroyElement(element: Element | Element[]) {
+export function destroyElement(element: Element | Element[]) {
   if (Array.isArray(element)) {
     element.forEach((e) => destroyElement(e));
     return;