@energy8platform/game-engine 0.20.0 → 0.22.0

package/src/ui/ScrollContainer.ts

@@ -1,478 +0,0 @@
-import { Container, Graphics, type ColorSource, Ticker } from 'pixi.js';
-import { resolveView } from './view';
-import type { ViewInput } from './view';
-
-// ─── Types ───────────────────────────────────────────────
-
-export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
-
-export interface ScrollContainerConfig {
-  /** Visible viewport width */
-  width: number;
-
-  /** Visible viewport height */
-  height: number;
-
-  /** Scroll direction (default: 'vertical') */
-  direction?: ScrollDirection;
-
-  /** Background color (undefined = transparent) */
-  backgroundColor?: ColorSource;
-
-  /** Border radius for the mask (default: 0) */
-  borderRadius?: number;
-
-  /** Gap between items (default: 0) */
-  elementsMargin?: number;
-
-  /** Padding */
-  padding?: number;
-
-  /** Disable easing/inertia */
-  disableEasing?: boolean;
-
-  /** Show scrollbar indicator (default: false) */
-  scrollbar?: boolean;
-
-  /** Custom scrollbar thumb view (string texture name, Texture, or Container) */
-  thumbView?: ViewInput;
-
-  /** Scrollbar width in px (default: 6) */
-  scrollbarWidth?: number;
-
-  /** Scrollbar padding from edge (default: 4) */
-  scrollbarPadding?: number;
-
-  /** Scrollbar color (when no thumbView, default: 0xaaaaaa) */
-  scrollbarColor?: number;
-
-  /** Scrollbar alpha (default: 0.5) */
-  scrollbarAlpha?: number;
-}
-
-const DECELERATION = 0.95;
-const MIN_VELOCITY = 0.5;
-
-/**
- * Scrollable container with touch/drag, mouse wheel, and inertia.
- *
- * @example
- * ```ts
- * const scroll = new ScrollContainer({
- *   width: 600,
- *   height: 400,
- *   direction: 'vertical',
- *   elementsMargin: 8,
- * });
- *
- * for (let i = 0; i < 50; i++) {
- *   scroll.addItem(createRow(i));
- * }
- *
- * scene.container.addChild(scroll);
- * ```
- */
-export class ScrollContainer extends Container {
-  readonly __uiComponent = true as const;
-
-  private _viewport: { width: number; height: number };
-  private _internalSetup = true;
-  private _content: Container;
-  private _maskGfx: Graphics;
-  private _bg: Graphics | null = null;
-  private _scrollConfig: Required<Pick<ScrollContainerConfig, 'direction' | 'elementsMargin' | 'padding' | 'borderRadius' | 'disableEasing'>>;
-  private _items: Container[] = [];
-
-  // Scrollbar
-  private _scrollbar: Container | null = null;
-  private _scrollbarConfig: { width: number; padding: number };
-
-  // Drag state
-  private _dragging = false;
-  private _dragStart = { x: 0, y: 0 };
-  private _contentStart = { x: 0, y: 0 };
-  private _velocity = { x: 0, y: 0 };
-  private _lastDragPos = { x: 0, y: 0 };
-  private _lastDragTime = 0;
-  private _inertiaActive = false;
-
-  // Bound handlers for cleanup
-  private _onTickBound: ((ticker: Ticker) => void) | null = null;
-  private _onWheelBound: ((e: WheelEvent) => void) | null = null;
-
-  constructor(config: ScrollContainerConfig) {
-    super();
-
-    this._viewport = { width: config.width, height: config.height };
-    this._scrollConfig = {
-      direction: config.direction ?? 'vertical',
-      elementsMargin: config.elementsMargin ?? 0,
-      padding: config.padding ?? 0,
-      borderRadius: config.borderRadius ?? 0,
-      disableEasing: config.disableEasing ?? false,
-    };
-
-    // Background
-    if (config.backgroundColor !== undefined) {
-      this._bg = new Graphics();
-      this._bg.roundRect(0, 0, config.width, config.height, this._scrollConfig.borderRadius)
-        .fill(config.backgroundColor);
-      this.addChild(this._bg);
-    }
-
-    // Mask
-    this._maskGfx = new Graphics();
-    this._maskGfx.roundRect(0, 0, config.width, config.height, this._scrollConfig.borderRadius)
-      .fill(0xffffff);
-    this.addChild(this._maskGfx);
-
-    // Content container
-    this._content = new Container();
-    this._content.mask = this._maskGfx;
-    this.addChild(this._content);
-
-    // Interaction
-    this.eventMode = 'static';
-    this.hitArea = { contains: (x: number, y: number) => x >= 0 && x <= config.width && y >= 0 && y <= config.height };
-
-    this.on('pointerdown', this._onPointerDown, this);
-    this.on('pointermove', this._onPointerMove, this);
-    this.on('pointerup', this._onPointerUp, this);
-    this.on('pointerupoutside', this._onPointerUp, this);
-
-    // Mouse wheel
-    this._onWheelBound = this._onWheel.bind(this);
-
-    // Scrollbar
-    const sbWidth = config.scrollbarWidth ?? 6;
-    const sbPadding = config.scrollbarPadding ?? 4;
-    this._scrollbarConfig = { width: sbWidth, padding: sbPadding };
-
-    if (config.scrollbar) {
-      const customThumb = resolveView(config.thumbView);
-      if (customThumb) {
-        this._scrollbar = customThumb;
-      } else {
-        const g = new Graphics();
-        g.roundRect(0, 0, sbWidth, 40, sbWidth / 2).fill(config.scrollbarColor ?? 0xaaaaaa);
-        g.alpha = config.scrollbarAlpha ?? 0.5;
-        this._scrollbar = g;
-      }
-      this._scrollbar.visible = false;
-      super.addChild(this._scrollbar);
-    }
-
-    this._internalSetup = false;
-  }
-
-  /**
-   * Override addChild so external children are routed to scroll content.
-   * Enables `<scrollContainer><label /><panel /></scrollContainer>` in React JSX.
-   */
-  override addChild<T extends Container>(...children: T[]): T {
-    if (this._internalSetup) {
-      return super.addChild(...children);
-    }
-    for (const child of children) {
-      this.addItem(child as any);
-    }
-    return children[0];
-  }
-
-  override removeChild<T extends Container>(...children: T[]): T {
-    if (this._internalSetup) {
-      return super.removeChild(...children);
-    }
-    for (const child of children) {
-      const idx = this._items.indexOf(child as any);
-      if (idx !== -1) {
-        this._items.splice(idx, 1);
-        this._content.removeChild(child);
-      }
-    }
-    this.layoutItems();
-    return children[0];
-  }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('width' in changed || 'height' in changed) {
-      this.setViewportSize(
-        changed.width ?? this._viewport.width,
-        changed.height ?? this._viewport.height,
-      );
-    }
-  }
-
-  /** Enable mouse wheel scrolling (call after adding to stage) */
-  enableWheel(canvas: HTMLCanvasElement): void {
-    if (this._onWheelBound) {
-      canvas.addEventListener('wheel', this._onWheelBound, { passive: false });
-    }
-  }
-
-  /** Set scrollable content. Replaces any existing items. */
-  setContent(content: Container): void {
-    this.clearItems();
-    const children = [...content.children] as Container[];
-    for (const child of children) {
-      this.addItem(child);
-    }
-  }
-
-  /** Add a single item */
-  addItem(child: Container): this {
-    this._items.push(child);
-    this._content.addChild(child);
-    this.layoutItems();
-    return this;
-  }
-
-  /** Remove all items */
-  clearItems(): void {
-    for (const item of this._items) {
-      this._content.removeChild(item);
-    }
-    this._items.length = 0;
-  }
-
-  /** Get items */
-  get items(): readonly Container[] {
-    return this._items;
-  }
-
-  /** Scroll to make a specific item index visible */
-  scrollToItem(index: number): void {
-    if (index < 0 || index >= this._items.length) return;
-    const item = this._items[index];
-    const isVert = this._scrollConfig.direction !== 'horizontal';
-
-    if (isVert) {
-      this._content.y = -item.y + this._scrollConfig.padding;
-    } else {
-      this._content.x = -item.x + this._scrollConfig.padding;
-    }
-    this.clampScroll();
-  }
-
-  /** Current scroll position */
-  get scrollPosition(): { x: number; y: number } {
-    return { x: this._content.x, y: this._content.y };
-  }
-
-  /** Resize the scroll viewport */
-  setViewportSize(width: number, height: number): void {
-    this._viewport.width = width;
-    this._viewport.height = height;
-
-    this._maskGfx.clear();
-    this._maskGfx.roundRect(0, 0, width, height, this._scrollConfig.borderRadius).fill(0xffffff);
-
-    if (this._bg) {
-      this._bg.clear();
-      this._bg.roundRect(0, 0, width, height, this._scrollConfig.borderRadius)
-        .fill(0xffffff); // color will be overridden if needed
-    }
-
-    this.clampScroll();
-  }
-
-  // ─── Layout ──────────────────────────────────────────
-
-  private layoutItems(): void {
-    const { direction, elementsMargin, padding } = this._scrollConfig;
-    const isVert = direction !== 'horizontal';
-    let pos = padding;
-
-    for (const item of this._items) {
-      if (isVert) {
-        item.x = padding;
-        item.y = pos;
-        pos += item.height + elementsMargin;
-      } else {
-        item.x = pos;
-        item.y = padding;
-        pos += item.width + elementsMargin;
-      }
-    }
-  }
-
-  // ─── Drag handling ───────────────────────────────────
-
-  private _onPointerDown(e: import('pixi.js').FederatedPointerEvent): void {
-    this._dragging = true;
-    this._inertiaActive = false;
-    this._dragStart.x = e.globalX;
-    this._dragStart.y = e.globalY;
-    this._contentStart.x = this._content.x;
-    this._contentStart.y = this._content.y;
-    this._lastDragPos.x = e.globalX;
-    this._lastDragPos.y = e.globalY;
-    this._lastDragTime = Date.now();
-    this._velocity.x = 0;
-    this._velocity.y = 0;
-
-    this.stopInertia();
-  }
-
-  private _onPointerMove(e: import('pixi.js').FederatedPointerEvent): void {
-    if (!this._dragging) return;
-
-    const dx = e.globalX - this._dragStart.x;
-    const dy = e.globalY - this._dragStart.y;
-    const { direction } = this._scrollConfig;
-
-    if (direction !== 'horizontal') {
-      this._content.y = this._contentStart.y + dy;
-    }
-    if (direction !== 'vertical') {
-      this._content.x = this._contentStart.x + dx;
-    }
-
-    // Track velocity
-    const now = Date.now();
-    const dt = now - this._lastDragTime;
-    if (dt > 0) {
-      this._velocity.x = (e.globalX - this._lastDragPos.x) / dt * 16;
-      this._velocity.y = (e.globalY - this._lastDragPos.y) / dt * 16;
-    }
-    this._lastDragPos.x = e.globalX;
-    this._lastDragPos.y = e.globalY;
-    this._lastDragTime = now;
-
-    this.clampScroll();
-  }
-
-  private _onPointerUp(): void {
-    if (!this._dragging) return;
-    this._dragging = false;
-
-    if (!this._scrollConfig.disableEasing &&
-      (Math.abs(this._velocity.x) > MIN_VELOCITY || Math.abs(this._velocity.y) > MIN_VELOCITY)) {
-      this.startInertia();
-    }
-  }
-
-  // ─── Inertia ─────────────────────────────────────────
-
-  private startInertia(): void {
-    this._inertiaActive = true;
-    this._onTickBound = this._inertiaTick.bind(this);
-    Ticker.shared.add(this._onTickBound);
-  }
-
-  private stopInertia(): void {
-    if (this._onTickBound && this._inertiaActive) {
-      Ticker.shared.remove(this._onTickBound);
-      this._inertiaActive = false;
-    }
-  }
-
-  private _inertiaTick(): void {
-    const { direction } = this._scrollConfig;
-
-    if (direction !== 'horizontal') {
-      this._content.y += this._velocity.y;
-      this._velocity.y *= DECELERATION;
-    }
-    if (direction !== 'vertical') {
-      this._content.x += this._velocity.x;
-      this._velocity.x *= DECELERATION;
-    }
-
-    this.clampScroll();
-
-    if (Math.abs(this._velocity.x) < MIN_VELOCITY && Math.abs(this._velocity.y) < MIN_VELOCITY) {
-      this.stopInertia();
-    }
-  }
-
-  // ─── Mouse wheel ─────────────────────────────────────
-
-  private _onWheel(e: WheelEvent): void {
-    const { direction } = this._scrollConfig;
-    e.preventDefault();
-
-    if (direction !== 'horizontal') {
-      this._content.y -= e.deltaY;
-    }
-    if (direction !== 'vertical') {
-      this._content.x -= e.deltaX;
-    }
-
-    this.clampScroll();
-  }
-
-  // ─── Scroll bounds ───────────────────────────────────
-
-  private clampScroll(): void {
-    const { direction } = this._scrollConfig;
-    const bounds = this._content.getLocalBounds();
-
-    if (direction !== 'horizontal') {
-      const contentHeight = bounds.height + bounds.y;
-      const maxScroll = Math.min(0, this._viewport.height - contentHeight);
-      this._content.y = Math.max(maxScroll, Math.min(0, this._content.y));
-    }
-
-    if (direction !== 'vertical') {
-      const contentWidth = bounds.width + bounds.x;
-      const maxScroll = Math.min(0, this._viewport.width - contentWidth);
-      this._content.x = Math.max(maxScroll, Math.min(0, this._content.x));
-    }
-
-    this.updateScrollbar();
-  }
-
-  private updateScrollbar(): void {
-    if (!this._scrollbar) return;
-    const { direction } = this._scrollConfig;
-    const { width: sbW, padding: sbPad } = this._scrollbarConfig;
-    const bounds = this._content.getLocalBounds();
-    const isVert = direction !== 'horizontal';
-
-    if (isVert) {
-      const contentH = bounds.height + bounds.y;
-      if (contentH <= this._viewport.height) {
-        this._scrollbar.visible = false;
-        return;
-      }
-      this._scrollbar.visible = true;
-      const ratio = this._viewport.height / contentH;
-      const thumbH = Math.max(20, this._viewport.height * ratio);
-      const scrollRange = this._viewport.height - thumbH;
-      const scrollProgress = -this._content.y / (contentH - this._viewport.height);
-
-      this._scrollbar.x = this._viewport.width - sbW - sbPad;
-      this._scrollbar.y = scrollProgress * scrollRange;
-      this._scrollbar.height = thumbH;
-      this._scrollbar.width = sbW;
-    } else {
-      const contentW = bounds.width + bounds.x;
-      if (contentW <= this._viewport.width) {
-        this._scrollbar.visible = false;
-        return;
-      }
-      this._scrollbar.visible = true;
-      const ratio = this._viewport.width / contentW;
-      const thumbW = Math.max(20, this._viewport.width * ratio);
-      const scrollRange = this._viewport.width - thumbW;
-      const scrollProgress = -this._content.x / (contentW - this._viewport.width);
-
-      this._scrollbar.y = this._viewport.height - sbW - sbPad;
-      this._scrollbar.x = scrollProgress * scrollRange;
-      this._scrollbar.width = thumbW;
-      this._scrollbar.height = sbW;
-    }
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    this.stopInertia();
-    this.off('pointerdown', this._onPointerDown, this);
-    this.off('pointermove', this._onPointerMove, this);
-    this.off('pointerup', this._onPointerUp, this);
-    this.off('pointerupoutside', this._onPointerUp, this);
-    this._items.length = 0;
-    super.destroy(options);
-  }
-}

package/src/ui/Slider.ts

@@ -1,241 +0,0 @@
-import { Container, Graphics, FederatedPointerEvent } from 'pixi.js';
-import { resolveView } from './view';
-import type { ViewInput } from './view';
-
-export interface SliderConfig {
-  /** Minimum value (default: 0) */
-  min?: number;
-  /** Maximum value (default: 1) */
-  max?: number;
-  /** Step increment (0 = continuous, default: 0) */
-  step?: number;
-  /** Initial value (default: min) */
-  value?: number;
-  /** Track width in pixels (default: 200) */
-  width?: number;
-  /** Track height in pixels (default: 8) */
-  height?: number;
-  /** Corner radius for Graphics-based track/fill (default: 4) */
-  borderRadius?: number;
-  /** Track background color (ignored when trackView provided) */
-  trackColor?: number;
-  /** Fill bar color (ignored when fillView provided) */
-  fillColor?: number;
-  /** Handle radius (for Graphics-based handle, default: 12) */
-  handleRadius?: number;
-  /** Handle color (for Graphics-based handle, ignored when handleView provided) */
-  handleColor?: number;
-
-  /** Custom track background view */
-  trackView?: ViewInput;
-  /** Custom fill bar view */
-  fillView?: ViewInput;
-  /** Custom handle view */
-  handleView?: ViewInput;
-
-  /** Called when value changes during drag */
-  onUpdate?: (value: number) => void;
-  /** Called when drag ends */
-  onChange?: (value: number) => void;
-}
-
-/**
- * Draggable slider with customizable track, fill, and handle views.
- *
- * @example
- * ```ts
- * const volume = new Slider({
- *   min: 0, max: 1, value: 0.5,
- *   width: 200, height: 8,
- *   fillColor: 0xffd700,
- *   onUpdate: (v) => console.log('Volume:', v),
- * });
- * ```
- */
-export class Slider extends Container {
-  readonly __uiComponent = true as const;
-
-  private _track: Container;
-  private _fill: Container;
-  private _fillMask: Graphics;
-  private _handle: Container;
-  private _config: Required<Pick<SliderConfig, 'min' | 'max' | 'step' | 'width' | 'height' | 'borderRadius' | 'trackColor' | 'fillColor' | 'handleRadius' | 'handleColor'>>;
-  private _value: number;
-  private _dragging = false;
-
-  onUpdate: ((value: number) => void) | null = null;
-  onChange: ((value: number) => void) | null = null;
-
-  constructor(config: SliderConfig = {}) {
-    super();
-
-    this._config = {
-      min: config.min ?? 0,
-      max: config.max ?? 1,
-      step: config.step ?? 0,
-      width: config.width ?? 200,
-      height: config.height ?? 8,
-      borderRadius: config.borderRadius ?? 4,
-      trackColor: config.trackColor ?? 0x333333,
-      fillColor: config.fillColor ?? 0xffd700,
-      handleRadius: config.handleRadius ?? 12,
-      handleColor: config.handleColor ?? 0xffffff,
-    };
-
-    this._value = config.value ?? this._config.min;
-    this.onUpdate = config.onUpdate ?? null;
-    this.onChange = config.onChange ?? null;
-
-    const { width, height, borderRadius, trackColor, fillColor, handleRadius, handleColor } = this._config;
-
-    // Track
-    const customTrack = resolveView(config.trackView);
-    if (customTrack) {
-      customTrack.width = width;
-      customTrack.height = height;
-      this._track = customTrack;
-    } else {
-      const g = new Graphics();
-      g.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
-      this._track = g;
-    }
-    this.addChild(this._track);
-
-    // Fill
-    const customFill = resolveView(config.fillView);
-    if (customFill) {
-      customFill.width = width;
-      customFill.height = height;
-      this._fill = customFill;
-    } else {
-      const g = new Graphics();
-      g.roundRect(0, 0, width, height, borderRadius).fill(fillColor);
-      this._fill = g;
-    }
-    this.addChild(this._fill);
-
-    // Fill mask
-    this._fillMask = new Graphics();
-    this.addChild(this._fillMask);
-    this._fill.mask = this._fillMask;
-
-    // Handle
-    const customHandle = resolveView(config.handleView);
-    if (customHandle) {
-      this._handle = customHandle;
-    } else {
-      const g = new Graphics();
-      g.circle(0, 0, handleRadius).fill(handleColor);
-      this._handle = g;
-    }
-    this._handle.y = height / 2;
-    this.addChild(this._handle);
-
-    // Interaction
-    this.eventMode = 'static';
-    this.cursor = 'pointer';
-
-    // Hit area covers track + handle overflow
-    const hitPad = Math.max(handleRadius - height / 2, 0);
-    this.hitArea = { contains: (x: number, y: number) => x >= -hitPad && x <= width + hitPad && y >= -hitPad && y <= height + hitPad };
-
-    this.on('pointerdown', this._onPointerDown, this);
-    this.on('globalpointermove', this._onPointerMove, this);
-    this.on('pointerup', this._onPointerUp, this);
-    this.on('pointerupoutside', this._onPointerUp, this);
-
-    this._updateVisuals();
-  }
-
-  /** Current value */
-  get value(): number {
-    return this._value;
-  }
-
-  set value(v: number) {
-    const clamped = this._applyStep(Math.max(this._config.min, Math.min(this._config.max, v)));
-    if (clamped === this._value) return;
-    this._value = clamped;
-    this._updateVisuals();
-  }
-
-  get min(): number { return this._config.min; }
-  get max(): number { return this._config.max; }
-
-  /** React reconciler update hook */
-  updateConfig(changed: Record<string, any>): void {
-    if ('value' in changed) this.value = changed.value;
-    if ('min' in changed) { this._config.min = changed.min; this._updateVisuals(); }
-    if ('max' in changed) { this._config.max = changed.max; this._updateVisuals(); }
-    if ('step' in changed) this._config.step = changed.step;
-    if ('onUpdate' in changed) this.onUpdate = changed.onUpdate;
-    if ('onChange' in changed) this.onChange = changed.onChange;
-  }
-
-  private _fraction(): number {
-    const { min, max } = this._config;
-    return max === min ? 0 : (this._value - min) / (max - min);
-  }
-
-  private _applyStep(v: number): number {
-    const { step, min } = this._config;
-    if (step <= 0) return v;
-    return min + Math.round((v - min) / step) * step;
-  }
-
-  private _updateVisuals(): void {
-    const frac = this._fraction();
-    const w = this._config.width;
-    const h = this._config.height;
-
-    // Update fill mask
-    this._fillMask.clear();
-    this._fillMask.rect(0, 0, w * frac, h).fill(0xffffff);
-
-    // Update handle position
-    this._handle.x = w * frac;
-  }
-
-  private _valueFromPointer(e: FederatedPointerEvent): number {
-    const local = this.toLocal(e.global);
-    const frac = Math.max(0, Math.min(1, local.x / this._config.width));
-    const { min, max } = this._config;
-    return this._applyStep(min + frac * (max - min));
-  }
-
-  private _onPointerDown(e: FederatedPointerEvent): void {
-    this._dragging = true;
-    const newValue = this._valueFromPointer(e);
-    if (newValue !== this._value) {
-      this._value = newValue;
-      this._updateVisuals();
-      this.onUpdate?.(this._value);
-    }
-  }
-
-  private _onPointerMove(e: FederatedPointerEvent): void {
-    if (!this._dragging) return;
-    const newValue = this._valueFromPointer(e);
-    if (newValue !== this._value) {
-      this._value = newValue;
-      this._updateVisuals();
-      this.onUpdate?.(this._value);
-    }
-  }
-
-  private _onPointerUp(_e: FederatedPointerEvent): void {
-    if (!this._dragging) return;
-    this._dragging = false;
-    this.onChange?.(this._value);
-  }
-
-  override destroy(options?: boolean | { children?: boolean; texture?: boolean; textureSource?: boolean }): void {
-    this.off('pointerdown', this._onPointerDown, this);
-    this.off('globalpointermove', this._onPointerMove, this);
-    this.off('pointerup', this._onPointerUp, this);
-    this.off('pointerupoutside', this._onPointerUp, this);
-    this.onUpdate = null;
-    this.onChange = null;
-    super.destroy(options);
-  }
-}