canvasengine 2.0.0-beta.42 → 2.0.0-beta.44

package/src/components/FocusContainer.ts

@@ -0,0 +1,372 @@
+import { Container as PixiContainer } from "pixi.js";
+import { createComponent, registerComponent, type Element } from "../engine/reactive";
+import { applyDirective } from "../engine/directive";
+import { ComponentInstance, DisplayObject } from "./DisplayObject";
+import { ComponentFunction, h } from "../engine/signal";
+import { DisplayObjectProps } from "./types/DisplayObject";
+import { Container } from "./Container";
+import { focusManager, ScrollOptions } from "../engine/FocusManager";
+import { signal, Signal, isSignal } from "@signe/reactive";
+import { CanvasViewport } from "./Viewport";
+import { Controls } from "../directives/ControlsBase";
+// Import FocusNavigation directive to ensure it's registered
+import "../directives/FocusNavigation";
+
+/**
+ * Properties for FocusContainer component
+ * 
+ * @property tabindex - Focus index for the container (default: 0 if present)
+ * @property controls - Controls configuration for automatic navigation
+ * @property onFocusChange - Callback when focus changes
+ * @property autoScroll - Enable automatic scrolling to focused element (default: false)
+ * @property viewport - Viewport instance to use for scrolling (optional, uses context viewport by default)
+ */
+export interface FocusContainerProps extends DisplayObjectProps {
+  tabindex?: number;
+  controls?: Controls | Signal<Controls>;
+  onFocusChange?: (index: number, element: Element | null) => void;
+  autoScroll?: boolean | ScrollOptions;
+  viewport?: CanvasViewport;
+  throttle?: number;
+}
+
+/**
+ * FocusContainer component for managing focus navigation
+ * 
+ * This component provides a container that manages focus navigation between
+ * focusable child elements. It supports automatic navigation via Controls
+ * (keyboard/gamepad) and automatic scrolling with Viewport.
+ * 
+ * ## Features
+ * 
+ * - **Focus Management**: Automatically registers focusable children
+ * - **Navigation**: Supports keyboard/gamepad navigation via Controls
+ * - **Auto-scroll**: Automatically scrolls viewport to show focused element
+ * - **Hooks**: Provides reactive signals for focus state
+ * 
+ * @example
+ * ```typescript
+ * // Basic usage
+ * <FocusContainer tabindex={0}>
+ *   <Button tabindex={0} text="Button 1" />
+ *   <Button tabindex={1} text="Button 2" />
+ * </FocusContainer>
+ * 
+ * // With Controls
+ * <FocusContainer tabindex={0} controls={controlsConfig}>
+ *   <Button tabindex={0} text="Button 1" />
+ *   <Button tabindex={1} text="Button 2" />
+ * </FocusContainer>
+ * 
+ * // With auto-scroll
+ * <Viewport worldWidth={2000} worldHeight={5000}>
+ *   <FocusContainer tabindex={0} autoScroll={true}>
+ *     <Button tabindex={0} y={0} text="Item 1" />
+ *     <Button tabindex={1} y={100} text="Item 2" />
+ *   </FocusContainer>
+ * </Viewport>
+ * ```
+ */
+export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
+  private containerId: string = '';
+  private currentIndexSignal: Signal<number | null> | null = null;
+  private focusedElementSignal: Signal<Element | null> | null = null;
+  private registeredFocusables: Set<number> = new Set();
+
+  /**
+   * Initialize the focus container
+   * 
+   * @param props - Component properties
+   */
+  onInit(props: FocusContainerProps) {
+    super.onInit(props);
+
+    // Generate unique container ID
+    this.containerId = `focus-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    // Create signals for current index and focused element
+    const currentIndex = signal<number | null>(null);
+    const focusedElement = signal<Element | null>(null);
+
+    this.currentIndexSignal = currentIndex;
+    this.focusedElementSignal = focusedElement;
+
+    // Get viewport from context or props
+    const viewport = props.viewport || (props.context?.viewport as CanvasViewport | undefined);
+
+    // Register container with FocusManager
+    focusManager.registerContainer(this.containerId, {
+      focusables: new Map(),
+      currentIndex,
+      focusedElement,
+      onFocusChange: props.onFocusChange,
+      autoScroll: props.autoScroll,
+      viewport,
+      throttle: props.throttle ?? 150
+    });
+  }
+
+  /**
+   * Mount hook - register focusable children
+   * 
+   * @param element - The element being mounted
+   */
+  async onMount(element: Element<CanvasFocusContainer>): Promise<void> {
+    await super.onMount(element, undefined);
+
+    // Update container with element reference for freeze checking
+    focusManager.updateContainer(this.containerId, { element });
+
+    // Apply focusNavigation directive if controls are provided
+    if (element.props.controls) {
+      const focusNavDirective = applyDirective(element, 'focusNavigation');
+      if (focusNavDirective && !element.directives) {
+        element.directives = {};
+      }
+      if (focusNavDirective) {
+        element.directives.focusNavigation = focusNavDirective;
+        // Initialize the directive
+        focusNavDirective.onInit(element);
+        focusNavDirective.onMount(element);
+      }
+    }
+
+    // Subscribe to allElements to detect when children are mounted
+    if (element.allElements) {
+      const subscription = element.allElements.subscribe(() => {
+        // Register children when they are mounted
+        this.registerChildren(element);
+      });
+      // Store subscription for cleanup
+      if (!element.effectSubscriptions) {
+        element.effectSubscriptions = [];
+      }
+      element.effectSubscriptions.push(subscription);
+    }
+
+    // if (element.propObservables.tabindex) {
+    //   const subscription = element.propObservables.tabindex.observable.subscribe((value: any) => {
+    //     console.log("tabindex changed", value);
+    //     if (value !== null) {
+    //     //  focusManager.setIndex(this.containerId, value);
+    //     }
+    //   });
+    //   element.effectSubscriptions.push(subscription);
+    // }
+
+    focusManager.setTabindex(this.containerId, element.propObservables.tabindex);
+
+    // Register all focusable children initially
+    // Use setTimeout to ensure children are mounted
+    setTimeout(() => {
+      this.registerChildren(element);
+    }, 0);
+  }
+
+  /**
+   * Update hook - handle prop changes
+   * 
+   * @param props - Updated properties
+   */
+  onUpdate(props: FocusContainerProps) {
+    super.onUpdate(props);
+
+    // Update viewport if changed
+    const viewport = props.viewport || (props.context?.viewport as CanvasViewport | undefined);
+    focusManager.updateContainer(this.containerId, {
+      viewport,
+      autoScroll: props.autoScroll,
+      onFocusChange: props.onFocusChange,
+      throttle: props.throttle ?? 150
+    });
+  }
+
+  /**
+   * Destroy hook - cleanup
+   * 
+   * @param parent - Parent element
+   * @param afterDestroy - Callback after destruction
+   */
+  async onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void> {
+    // Unregister all focusables
+    for (const index of this.registeredFocusables) {
+      focusManager.unregisterFocusable(this.containerId, index);
+    }
+    this.registeredFocusables.clear();
+
+    // Unregister container
+    focusManager.unregisterContainer(this.containerId);
+
+    await super.onDestroy(parent, afterDestroy);
+  }
+
+  /**
+   * Register focusable children from element
+   * 
+   * @param element - Container element
+   */
+  private registerChildren(element: Element<CanvasFocusContainer>) {
+    if (!element.props.children) return;
+
+
+    let registeredCount = 0;
+    const processChildren = (children: any[]) => {
+      for (const child of children) {
+        if (!child) continue;
+
+        // Handle signals/observables
+        if (isSignal(child) || (child && typeof child.subscribe === 'function')) {
+
+          // Subscribe to changes
+          const subscription = (isSignal(child) ? child.observable : child).subscribe((value: any) => {
+            // Handle FlowObservable result (from loop, cond, etc.) - has 'elements' property
+            if (value && typeof value === 'object' && 'elements' in value) {
+              const elements = value.elements || [];
+              if (Array.isArray(elements)) {
+                processChildren(elements);
+              }
+            } else if (Array.isArray(value)) {
+              processChildren(value);
+            } else if (value) {
+              processChild(value);
+            }
+          });
+          // Note: We should track subscriptions for cleanup, but for now this works
+          continue;
+        }
+
+        // Handle arrays
+        if (Array.isArray(child)) {
+          processChildren(child);
+          continue;
+        }
+
+        // Handle single element
+        processChild(child);
+      }
+    };
+
+    const processChild = (child: Element) => {
+      if (!child || !child.componentInstance) return;
+
+      // Check for tabindex in props
+      let tabindex: number | undefined = undefined;
+
+      // For DOMElement/DOMContainer, check attrs.tabindex
+      if (child.props?.attrs?.tabindex !== undefined) {
+        const tabindexValue = child.props.attrs.tabindex;
+        tabindex = isSignal(tabindexValue) ? tabindexValue() : tabindexValue;
+      }
+      // For other components, check tabindex prop directly
+      else if (child.props?.tabindex !== undefined) {
+        const tabindexValue = child.props.tabindex;
+        tabindex = isSignal(tabindexValue) ? tabindexValue() : tabindexValue;
+      }
+
+      // Register if tabindex >= 0
+      if (tabindex !== undefined && tabindex >= 0) {
+        if (!this.registeredFocusables.has(tabindex)) {
+          focusManager.registerFocusable(this.containerId, child, tabindex);
+          this.registeredFocusables.add(tabindex);
+          registeredCount++;
+        }
+      }
+
+      // Recursively process children
+      if (child.props && child.props.children) {
+        if (Array.isArray(child.props.children)) {
+          processChildren(child.props.children);
+        } else if (isSignal(child.props.children) || (child.props.children && typeof child.props.children.subscribe === 'function')) {
+          const subscription = (isSignal(child.props.children) ? child.props.children.observable : child.props.children).subscribe((value: any) => {
+            // Handle FlowObservable result (from loop, cond, etc.) - has 'elements' property
+            if (value && typeof value === 'object' && 'elements' in value) {
+              const elements = value.elements || [];
+              if (Array.isArray(elements)) {
+                processChildren(elements);
+              }
+            } else if (Array.isArray(value)) {
+              processChildren(value);
+            } else if (value) {
+              processChild(value);
+            }
+          });
+          // Store subscription for cleanup if child has effectSubscriptions
+          if (child.effectSubscriptions) {
+            child.effectSubscriptions.push(subscription);
+          }
+        } else {
+          processChild(child.props.children as any);
+        }
+      }
+    };
+
+    if (Array.isArray(element.props.children)) {
+      processChildren(element.props.children);
+    } else if (element.props.children) {
+      if (isSignal(element.props.children) || (element.props.children && typeof element.props.children.subscribe === 'function')) {
+        const subscription = (isSignal(element.props.children) ? element.props.children.observable : element.props.children).subscribe((value: any) => {
+          // Handle FlowObservable result (from loop, cond, etc.) - has 'elements' property
+          if (value && typeof value === 'object' && 'elements' in value) {
+            const elements = value.elements || [];
+            if (Array.isArray(elements)) {
+              processChildren(elements);
+            }
+          } else if (Array.isArray(value)) {
+            processChildren(value);
+          } else if (value) {
+            processChild(value);
+          }
+        });
+        // Store subscription for cleanup
+        if (!element.effectSubscriptions) {
+          element.effectSubscriptions = [];
+        }
+        element.effectSubscriptions.push(subscription);
+      } else {
+        processChild(element.props.children as any);
+      }
+    }
+  }
+
+  /**
+   * Get the container ID
+   * 
+   * @returns Container identifier
+   */
+  getContainerId(): string {
+    return this.containerId;
+  }
+
+  /**
+   * Get current index signal
+   * 
+   * @returns Signal for current focus index
+   */
+  getCurrentIndexSignal(): Signal<number | null> | null {
+    return this.currentIndexSignal;
+  }
+
+  /**
+   * Get focused element signal
+   * 
+   * @returns Signal for current focused element
+   */
+  getFocusedElementSignal(): Signal<Element | null> | null {
+    return this.focusedElementSignal;
+  }
+}
+
+export interface CanvasFocusContainer extends DisplayObjectProps { }
+
+registerComponent("FocusContainer", CanvasFocusContainer);
+
+/**
+ * FocusContainer component function
+ * 
+ * @param props - Component properties
+ * @returns FocusContainer element
+ */
+export const FocusContainer: ComponentFunction<FocusContainerProps> = (props) => {
+  return createComponent("FocusContainer", props);
+};
+

package/src/components/Graphic.ts

@@ -1,14 +1,15 @@
 import { Effect, effect, isSignal, signal, Signal, WritableSignal } from "@signe/reactive";
-import { Assets, Graphics as PixiGraphics } from "pixi.js";
+import { Assets, ObservablePoint, Graphics as PixiGraphics } from "pixi.js";
 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";
 import { isPercent } from "../utils/functions";
+import { setObservablePoint } from "../engine/utils";
 
 interface GraphicsProps extends DisplayObjectProps {
-  draw?: (graphics: PixiGraphics, width: number, height: number) => void;
+  draw?: (graphics: PixiGraphics, width: number, height: number, anchor?: [number, number]) => void;
 }
 
 interface RectProps extends DisplayObjectProps {
@@ -42,6 +43,8 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
   clearEffect: Effect;
   _width: WritableSignal<number>;
   _height: WritableSignal<number>;
+
+  isCustomAnchor = true;
   
   /**
    * Initializes the graphics component with reactive width and height handling.
@@ -74,6 +77,7 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
    */
   async onInit(props) {
     await super.onInit(props);
+    this.setObjectFit('none');
   }
 
   /**
@@ -89,6 +93,7 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
     // Use original signals from propObservables if available, otherwise create new ones
     const width = (isSignal(propObservables?.width) ? propObservables.width : signal(props.width || 0)) as WritableSignal<number>;
     const height = (isSignal(propObservables?.height) ? propObservables.height : signal(props.height || 0)) as WritableSignal<number>;
+    const anchor = (isSignal(propObservables?.anchor) ? propObservables.anchor : signal(props.anchor || [0, 0])) as WritableSignal<[number, number]>;
 
     // Store as class properties for access in other methods
     this._width = width;
@@ -102,11 +107,12 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
       this.clearEffect = effect(() => {
         const w = width();
         const h = height();
+        const a = anchor();
         if (typeof w == 'string' || typeof h == 'string') {
           return
         }
         this.clear();
-        props.draw?.(this, w, h);
+        props.draw?.(this, w, h, a);
         this.subjectInit.next(this)
       });
     }
@@ -169,6 +175,15 @@ export function Graphics(props: GraphicsProps) {
   return createComponent("Graphics", props);
 }
 
+const graphicsAnchor = (anchor, width, height) => {
+  const observableAnchor = new ObservablePoint({ _onUpdate: () => {} }, 0, 0);
+  setObservablePoint(observableAnchor, anchor);
+  const ax = observableAnchor.x;
+  const ay = observableAnchor.y;
+
+  return { x: -ax * width, y: -ay * height };
+}
+
 export function Rect(props: RectProps) {
   const { color, borderRadius, border } = useProps(props, {
     borderRadius: null,
@@ -176,11 +191,12 @@ export function Rect(props: RectProps) {
   })
 
   return Graphics({
-    draw: (g, width, height) => {
+    draw: (g, width, height, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, width, height);
       if (borderRadius()) {
-        g.roundRect(0, 0, width, height, borderRadius());
+        g.roundRect(x, y, width, height, borderRadius());
       } else {
-        g.rect(0, 0, width, height);
+        g.rect(x, y, width, height);
       }
       if (border) {
         g.stroke(border);
@@ -191,45 +207,19 @@ export function Rect(props: RectProps) {
   })
 }
 
-function drawShape(g: PixiGraphics, shape: 'circle' | 'ellipse', props: {
-  radius: Signal<number>;
-  color: Signal<string>;
-  border: Signal<number>;
-} | {
-  width: Signal<number>;
-  height: Signal<number>;
-  color: Signal<string>;
-  border: Signal<number>;
-}) {
-  const { color, border } = props;
-  if ('radius' in props) {
-    g.circle(0, 0, props.radius());
-  } else {
-    g.ellipse(0, 0, props.width() / 2, props.height() / 2);
-  }
-  if (border()) {
-    g.stroke(border());
-  }
-  g.fill(color());
-}
-
 export function Circle(props: CircleProps) {  
-  const { radius, color, border } = useProps(props, {
-    border: null
-  })
-  return Graphics({
-    draw: (g) => drawShape(g, 'circle', { radius, color, border }),
-    ...props
-  })
-}
-
-export function Ellipse(props: EllipseProps) {
-  const { width, height, color, border } = useProps(props, {
-    border: null
+  const { color, border, radius } = useProps(props, {
+    border: null,
+    radius: null
   })
   return Graphics({
-    draw: (g, gWidth, gHeight) => {
-      g.ellipse(0, 0, gWidth / 2, gHeight / 2);
+    draw: (g, width, height, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, width, height);
+      if (width == height || height == 0) {
+        g.circle(x, y, radius() || width);
+      } else {
+        g.ellipse(x, y, width, height);
+      }
       if (border()) {
         g.stroke(border());
       }
@@ -239,17 +229,22 @@ export function Ellipse(props: EllipseProps) {
   })
 }
 
+export function Ellipse(props: EllipseProps) {
+  return Circle(props as CircleProps);
+}
+
 export function Triangle(props: TriangleProps) {
-  const { width, height, color, border } = useProps(props, {
+  const { color, border } = useProps(props, {
     border: null,
     color: '#000'
   })
   return Graphics({
-    draw: (g, gWidth, gHeight) => {
-      g.moveTo(0, gHeight);
-      g.lineTo(gWidth / 2, 0);
-      g.lineTo(gWidth, gHeight);
-      g.lineTo(0, gHeight);
+    draw: (g, gWidth, gHeight, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, gWidth, gHeight);
+      g.moveTo(x, y + gHeight);
+      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);

package/src/components/Sprite.ts

@@ -319,7 +319,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.update(value);
     });
     if (definition) {
-      this.spritesheet = definition.value ?? definition;
+      const resolvedDefinition = definition instanceof Promise ? await definition : definition;
+      this.spritesheet = resolvedDefinition.value ?? resolvedDefinition;
       await this.createAnimations();
     }
     if (sheet.params) {
@@ -420,7 +421,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const definition = props.sheet?.definition ?? {};
 
     if (definition?.type === 'reset') {
-      this.spritesheet = definition.value ?? definition;
+      const resolvedValue = definition.value instanceof Promise ? await definition.value : definition.value;
+      this.spritesheet = resolvedValue ?? definition;
       await this.resetAnimations();
     }