@number10/jsx-phaser 5.0.0

package/dist/utils/dom-input-manager.cjs

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class DOMInputElement {
+  input;
+  container;
+  scene;
+  scrollHandler;
+  resizeHandler;
+  throttledScrollHandler;
+  throttledResizeHandler;
+  intersectionObserver = null;
+  isDestroyed = false;
+  lastValues = { left: 0, top: 0, width: 0, height: 0 };
+  counter = 0;
+  scrollThrottleTimeout = null;
+  resizeThrottleTimeout = null;
+  constructor(container, config = {}) {
+    this.container = container;
+    this.scene = container.scene;
+    this.input = document.createElement("input");
+    this.input.type = config.type ?? "text";
+    if (config.placeholder) this.input.placeholder = config.placeholder;
+    if (config.value) this.input.value = config.value;
+    if (config.disabled) this.input.disabled = config.disabled;
+    if (config.maxLength) this.input.maxLength = config.maxLength;
+    if (config.autocomplete) this.input.setAttribute("autocomplete", config.autocomplete);
+    if (config.autocorrect) this.input.setAttribute("autocorrect", config.autocorrect);
+    if (config.autocapitalize) this.input.setAttribute("autocapitalize", config.autocapitalize);
+    if (config.spellcheck !== void 0)
+      this.input.setAttribute("spellcheck", config.spellcheck.toString());
+    this.applyDefaultStyles();
+    if (config.styles) {
+      Object.assign(this.input.style, config.styles);
+    }
+    document.body.appendChild(this.input);
+    if (config.onInput) {
+      this.input.addEventListener("input", (e) => {
+        config.onInput?.(this.input.value, e);
+      });
+    }
+    if (config.onKeyDown) {
+      this.input.addEventListener("keydown", config.onKeyDown);
+    }
+    if (config.onKeyUp) {
+      this.input.addEventListener("keyup", config.onKeyUp);
+    }
+    if (config.onFocus) {
+      this.input.addEventListener("focus", (e) => {
+        config.onFocus?.(e);
+      });
+    }
+    if (config.onBlur) {
+      this.input.addEventListener("blur", (e) => {
+        config.onBlur?.(e);
+      });
+    }
+    this.updatePosition();
+    this.scrollHandler = this.updatePosition.bind(this);
+    this.resizeHandler = this.updatePosition.bind(this);
+    this.throttledScrollHandler = this.throttle(this.scrollHandler, 20);
+    this.throttledResizeHandler = this.throttle(this.resizeHandler, 20);
+    document.addEventListener("scroll", this.throttledScrollHandler, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener("resize", this.throttledResizeHandler, { passive: true });
+    this.setupIntersectionObserver();
+    this.container.once("destroy", () => {
+      this.destroy();
+    });
+    this.scene.events.once("shutdown", () => {
+      this.destroy();
+    });
+  }
+  /**
+   * Setup IntersectionObserver to detect canvas position changes
+   */
+  setupIntersectionObserver() {
+    const canvas = this.scene.game.canvas;
+    this.intersectionObserver = new IntersectionObserver(
+      () => {
+        this.updatePosition();
+      },
+      {
+        threshold: [0, 0.1, 0.5, 0.9, 1]
+        // Trigger on various visibility changes
+      }
+    );
+    this.intersectionObserver.observe(canvas);
+  }
+  /**
+   * Throttle function to limit call frequency
+   * @param func - Function to throttle
+   * @param delay - Minimum delay between calls in ms
+   * @returns Throttled function
+   */
+  throttle(func, delay) {
+    let timeoutId = null;
+    return () => {
+      if (timeoutId !== null) return;
+      timeoutId = window.setTimeout(() => {
+        func();
+        timeoutId = null;
+      }, delay);
+    };
+  }
+  /**
+   * Apply default styles to input element
+   */
+  applyDefaultStyles() {
+    Object.assign(this.input.style, {
+      position: "absolute",
+      pointerEvents: "auto",
+      boxSizing: "border-box",
+      fontFamily: "Arial, sans-serif",
+      fontSize: "16px",
+      padding: "0px",
+      margin: "0px",
+      border: "none",
+      borderRadius: "0px",
+      backgroundColor: "transparent",
+      color: "transparent",
+      outline: "none",
+      caretColor: "transparent"
+    });
+    const styleId = "phaserjsx-input-no-selection";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        input[type="text"]::selection,
+        input[type="password"]::selection,
+        input[type="email"]::selection {
+          background: transparent !important;
+          color: transparent !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+  /**
+   * Update input element position to match Phaser container
+   */
+  updatePosition() {
+    if (this.isDestroyed || !this.container.scene) return;
+    const canvas = this.scene.game.canvas;
+    const canvasRect = canvas.getBoundingClientRect();
+    const worldTransform = this.container.getWorldTransformMatrix();
+    const worldX = worldTransform.tx;
+    const worldY = worldTransform.ty;
+    const containerWidth = this.container.width ?? 200;
+    const containerHeight = this.container.height ?? 40;
+    const scale = this.scene.game.scale;
+    const zoom = this.scene.cameras.main.zoom;
+    const left = Math.round(canvasRect.left + worldX * zoom * scale.displayScale.x);
+    const top = Math.round(canvasRect.top + worldY * zoom * scale.displayScale.y);
+    const width = Math.round(containerWidth * zoom * scale.displayScale.x);
+    const height = Math.round(containerHeight * zoom * scale.displayScale.y);
+    this.counter++;
+    if (this.lastValues.left === left && this.lastValues.top === top && this.lastValues.width === width && this.lastValues.height === height) {
+      return;
+    }
+    this.lastValues = { left, top, width, height };
+    this.input.style.left = `${left}px`;
+    this.input.style.top = `${top}px`;
+    this.input.style.width = `${width}px`;
+    this.input.style.height = `${height}px`;
+  }
+  /**
+   * Get the DOM input element
+   */
+  getElement() {
+    return this.input;
+  }
+  /**
+   * Set input value
+   */
+  setValue(value) {
+    if (!this.isDestroyed) {
+      this.input.value = value;
+    }
+  }
+  /**
+   * Get input value
+   */
+  getValue() {
+    return this.isDestroyed ? "" : this.input.value;
+  }
+  /**
+   * Focus the input
+   */
+  focus() {
+    if (!this.isDestroyed) {
+      this.input.focus();
+    }
+  }
+  /**
+   * Blur the input
+   */
+  blur() {
+    if (!this.isDestroyed) {
+      this.input.blur();
+    }
+  }
+  /**
+   * Set disabled state
+   */
+  setDisabled(disabled) {
+    if (!this.isDestroyed) {
+      this.input.disabled = disabled;
+    }
+  }
+  /**
+   * Set placeholder
+   */
+  setPlaceholder(placeholder) {
+    if (!this.isDestroyed) {
+      this.input.placeholder = placeholder;
+    }
+  }
+  /**
+   * Update styles
+   */
+  setStyles(styles) {
+    if (!this.isDestroyed) {
+      Object.assign(this.input.style, styles);
+    }
+  }
+  /**
+   * Destroy the input element and cleanup
+   */
+  destroy() {
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
+    if (this.scrollThrottleTimeout !== null) {
+      clearTimeout(this.scrollThrottleTimeout);
+    }
+    if (this.resizeThrottleTimeout !== null) {
+      clearTimeout(this.resizeThrottleTimeout);
+    }
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    document.removeEventListener("scroll", this.throttledScrollHandler, { capture: true });
+    window.removeEventListener("resize", this.throttledResizeHandler);
+    if (this.input.parentElement) {
+      this.input.parentElement.removeChild(this.input);
+    }
+  }
+}
+exports.DOMInputElement = DOMInputElement;
+//# sourceMappingURL=dom-input-manager.cjs.map

package/dist/utils/dom-input-manager.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-input-manager.cjs","sources":["../../src/utils/dom-input-manager.ts"],"sourcesContent":["/**\n * DOM input element manager for text input overlay\n * Handles creation, positioning, and lifecycle of DOM input elements\n */\nimport type * as Phaser from 'phaser'\n\n/**\n * Configuration for DOM input element\n */\nexport interface DOMInputConfig {\n  /** Input type (text, password, email, etc.) */\n  type?: string\n  /** Placeholder text */\n  placeholder?: string\n  /** Initial value */\n  value?: string\n  /** Whether input is disabled */\n  disabled?: boolean\n  /** Maximum length of input */\n  maxLength?: number\n  /** Autocomplete behavior */\n  autocomplete?: string\n  /** Autocorrect behavior (Safari) */\n  autocorrect?: string\n  /** Autocapitalize behavior (mobile) */\n  autocapitalize?: string\n  /** Spellcheck behavior */\n  spellcheck?: boolean\n  /** CSS styles to apply */\n  styles?: Partial<CSSStyleDeclaration>\n  /** Input event callback */\n  onInput?: (value: string, event: Event) => void\n  /** Keyboard event callbacks */\n  onKeyDown?: (event: KeyboardEvent) => void\n  onKeyUp?: (event: KeyboardEvent) => void\n  /** Focus event callbacks */\n  onFocus?: (event: FocusEvent) => void\n  onBlur?: (event: FocusEvent) => void\n}\n\n/**\n * DOM input element wrapper with automatic positioning\n */\nexport class DOMInputElement {\n  private input: HTMLInputElement\n  private container: Phaser.GameObjects.Container\n  private scene: Phaser.Scene\n  private scrollHandler: () => void\n  private resizeHandler: () => void\n  private throttledScrollHandler: () => void\n  private throttledResizeHandler: () => void\n  private intersectionObserver: IntersectionObserver | null = null\n  private isDestroyed = false\n  private lastValues = { left: 0, top: 0, width: 0, height: 0 }\n  private counter = 0\n  private scrollThrottleTimeout: number | null = null\n  private resizeThrottleTimeout: number | null = null\n\n  constructor(container: Phaser.GameObjects.Container, config: DOMInputConfig = {}) {\n    this.container = container\n    this.scene = container.scene\n\n    // Create input element\n    this.input = document.createElement('input')\n    this.input.type = config.type ?? 'text'\n    if (config.placeholder) this.input.placeholder = config.placeholder\n    if (config.value) this.input.value = config.value\n    if (config.disabled) this.input.disabled = config.disabled\n    if (config.maxLength) this.input.maxLength = config.maxLength\n    if (config.autocomplete) this.input.setAttribute('autocomplete', config.autocomplete)\n    if (config.autocorrect) this.input.setAttribute('autocorrect', config.autocorrect)\n    if (config.autocapitalize) this.input.setAttribute('autocapitalize', config.autocapitalize)\n    if (config.spellcheck !== undefined)\n      this.input.setAttribute('spellcheck', config.spellcheck.toString())\n\n    // Apply default styles\n    this.applyDefaultStyles()\n\n    // Apply custom styles\n    if (config.styles) {\n      Object.assign(this.input.style, config.styles)\n    }\n\n    // Add to DOM - use document.body for absolute positioning\n    document.body.appendChild(this.input)\n\n    // Setup event listeners\n    if (config.onInput) {\n      this.input.addEventListener('input', (e) => {\n        config.onInput?.(this.input.value, e)\n      })\n    }\n\n    if (config.onKeyDown) {\n      this.input.addEventListener('keydown', config.onKeyDown)\n    }\n\n    if (config.onKeyUp) {\n      this.input.addEventListener('keyup', config.onKeyUp)\n    }\n\n    if (config.onFocus) {\n      this.input.addEventListener('focus', (e) => {\n        config.onFocus?.(e)\n      })\n    }\n\n    if (config.onBlur) {\n      this.input.addEventListener('blur', (e) => {\n        config.onBlur?.(e)\n      })\n    }\n\n    // Initial position update\n    this.updatePosition()\n\n    // Bind handlers for page scrolling and resizing\n    this.scrollHandler = this.updatePosition.bind(this)\n    this.resizeHandler = this.updatePosition.bind(this)\n\n    // Throttled handlers to limit update frequency\n    this.throttledScrollHandler = this.throttle(this.scrollHandler, 20) // ~50fps max\n    this.throttledResizeHandler = this.throttle(this.resizeHandler, 20) // ~50fps max\n\n    // Setup event listeners immediately (always active)\n    // Use capture phase to catch scroll events from any scrollable ancestor\n    document.addEventListener('scroll', this.throttledScrollHandler, {\n      passive: true,\n      capture: true,\n    })\n    window.addEventListener('resize', this.throttledResizeHandler, { passive: true })\n\n    // Setup IntersectionObserver to detect when canvas moves in viewport\n    this.setupIntersectionObserver()\n\n    // Cleanup on container destroy\n    this.container.once('destroy', () => {\n      this.destroy()\n    })\n\n    // Cleanup on scene shutdown\n    this.scene.events.once('shutdown', () => {\n      this.destroy()\n    })\n  }\n\n  /**\n   * Setup IntersectionObserver to detect canvas position changes\n   */\n  private setupIntersectionObserver(): void {\n    const canvas = this.scene.game.canvas\n\n    this.intersectionObserver = new IntersectionObserver(\n      () => {\n        // Canvas moved in viewport, update position\n        this.updatePosition()\n      },\n      {\n        threshold: [0, 0.1, 0.5, 0.9, 1.0], // Trigger on various visibility changes\n      }\n    )\n\n    this.intersectionObserver.observe(canvas)\n  }\n\n  /**\n   * Throttle function to limit call frequency\n   * @param func - Function to throttle\n   * @param delay - Minimum delay between calls in ms\n   * @returns Throttled function\n   */\n  private throttle(func: () => void, delay: number): () => void {\n    let timeoutId: number | null = null\n    return () => {\n      if (timeoutId !== null) return\n      timeoutId = window.setTimeout(() => {\n        func()\n        timeoutId = null\n      }, delay)\n    }\n  }\n\n  /**\n   * Apply default styles to input element\n   */\n  private applyDefaultStyles(): void {\n    Object.assign(this.input.style, {\n      position: 'absolute',\n      pointerEvents: 'auto',\n      boxSizing: 'border-box',\n      fontFamily: 'Arial, sans-serif',\n      fontSize: '16px',\n      padding: '0px',\n      margin: '0px',\n      border: 'none',\n      borderRadius: '0px',\n      backgroundColor: 'transparent',\n      color: 'transparent',\n      outline: 'none',\n      caretColor: 'transparent',\n    } as Partial<CSSStyleDeclaration>)\n\n    // Inject CSS to disable selection highlighting\n    const styleId = 'phaserjsx-input-no-selection'\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement('style')\n      style.id = styleId\n      style.textContent = `\n        input[type=\"text\"]::selection,\n        input[type=\"password\"]::selection,\n        input[type=\"email\"]::selection {\n          background: transparent !important;\n          color: transparent !important;\n        }\n      `\n      document.head.appendChild(style)\n    }\n  }\n\n  /**\n   * Update input element position to match Phaser container\n   */\n  private updatePosition(): void {\n    if (this.isDestroyed || !this.container.scene) return\n\n    const canvas = this.scene.game.canvas\n    const canvasRect = canvas.getBoundingClientRect()\n\n    // Get container world position\n    const worldTransform = this.container.getWorldTransformMatrix()\n    const worldX = worldTransform.tx\n    const worldY = worldTransform.ty\n\n    // Get container dimensions - prefer actual computed size over layoutProps\n    // This ensures minHeight, maxHeight, and other constraints are respected\n    const containerWidth = this.container.width ?? 200\n    const containerHeight = this.container.height ?? 40\n\n    // Calculate position relative to canvas\n    const scale = this.scene.game.scale\n    const zoom = this.scene.cameras.main.zoom\n\n    // Calculate position and size with proper scaling\n    const left = Math.round(canvasRect.left + worldX * zoom * scale.displayScale.x)\n    const top = Math.round(canvasRect.top + worldY * zoom * scale.displayScale.y)\n    const width = Math.round(containerWidth * zoom * scale.displayScale.x)\n    const height = Math.round(containerHeight * zoom * scale.displayScale.y)\n    this.counter++\n\n    // apply only if changed to minimize layout thrashing\n    if (\n      this.lastValues.left === left &&\n      this.lastValues.top === top &&\n      this.lastValues.width === width &&\n      this.lastValues.height === height\n    ) {\n      return\n    }\n    this.lastValues = { left, top, width, height }\n\n    /* // Debug output for testing purposes\n    console.log('[DOMInputElement] Updating position', {\n      counter: this.counter,\n      left,\n      top,\n      width,\n      height,\n    })\n    */\n\n    // Apply position and size\n    this.input.style.left = `${left}px`\n    this.input.style.top = `${top}px`\n    this.input.style.width = `${width}px`\n    this.input.style.height = `${height}px`\n  }\n\n  /**\n   * Get the DOM input element\n   */\n  getElement(): HTMLInputElement {\n    return this.input\n  }\n\n  /**\n   * Set input value\n   */\n  setValue(value: string): void {\n    if (!this.isDestroyed) {\n      this.input.value = value\n    }\n  }\n\n  /**\n   * Get input value\n   */\n  getValue(): string {\n    return this.isDestroyed ? '' : this.input.value\n  }\n\n  /**\n   * Focus the input\n   */\n  focus(): void {\n    if (!this.isDestroyed) {\n      this.input.focus()\n    }\n  }\n\n  /**\n   * Blur the input\n   */\n  blur(): void {\n    if (!this.isDestroyed) {\n      this.input.blur()\n    }\n  }\n\n  /**\n   * Set disabled state\n   */\n  setDisabled(disabled: boolean): void {\n    if (!this.isDestroyed) {\n      this.input.disabled = disabled\n    }\n  }\n\n  /**\n   * Set placeholder\n   */\n  setPlaceholder(placeholder: string): void {\n    if (!this.isDestroyed) {\n      this.input.placeholder = placeholder\n    }\n  }\n\n  /**\n   * Update styles\n   */\n  setStyles(styles: Partial<CSSStyleDeclaration>): void {\n    if (!this.isDestroyed) {\n      Object.assign(this.input.style, styles)\n    }\n  }\n\n  /**\n   * Destroy the input element and cleanup\n   */\n  destroy(): void {\n    if (this.isDestroyed) return\n    this.isDestroyed = true\n\n    // Clear any pending throttle timeouts\n    if (this.scrollThrottleTimeout !== null) {\n      clearTimeout(this.scrollThrottleTimeout)\n    }\n    if (this.resizeThrottleTimeout !== null) {\n      clearTimeout(this.resizeThrottleTimeout)\n    }\n\n    // Disconnect IntersectionObserver\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect()\n      this.intersectionObserver = null\n    }\n\n    // Remove event listeners\n    document.removeEventListener('scroll', this.throttledScrollHandler, { capture: true })\n    window.removeEventListener('resize', this.throttledResizeHandler)\n\n    // Remove from DOM\n    if (this.input.parentElement) {\n      this.input.parentElement.removeChild(this.input)\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/utils/dom-input-manager.d.ts

@@ -0,0 +1,113 @@
+/**
+ * DOM input element manager for text input overlay
+ * Handles creation, positioning, and lifecycle of DOM input elements
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Configuration for DOM input element
+ */
+export interface DOMInputConfig {
+    /** Input type (text, password, email, etc.) */
+    type?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Initial value */
+    value?: string;
+    /** Whether input is disabled */
+    disabled?: boolean;
+    /** Maximum length of input */
+    maxLength?: number;
+    /** Autocomplete behavior */
+    autocomplete?: string;
+    /** Autocorrect behavior (Safari) */
+    autocorrect?: string;
+    /** Autocapitalize behavior (mobile) */
+    autocapitalize?: string;
+    /** Spellcheck behavior */
+    spellcheck?: boolean;
+    /** CSS styles to apply */
+    styles?: Partial<CSSStyleDeclaration>;
+    /** Input event callback */
+    onInput?: (value: string, event: Event) => void;
+    /** Keyboard event callbacks */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    /** Focus event callbacks */
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+}
+/**
+ * DOM input element wrapper with automatic positioning
+ */
+export declare class DOMInputElement {
+    private input;
+    private container;
+    private scene;
+    private scrollHandler;
+    private resizeHandler;
+    private throttledScrollHandler;
+    private throttledResizeHandler;
+    private intersectionObserver;
+    private isDestroyed;
+    private lastValues;
+    private counter;
+    private scrollThrottleTimeout;
+    private resizeThrottleTimeout;
+    constructor(container: Phaser.GameObjects.Container, config?: DOMInputConfig);
+    /**
+     * Setup IntersectionObserver to detect canvas position changes
+     */
+    private setupIntersectionObserver;
+    /**
+     * Throttle function to limit call frequency
+     * @param func - Function to throttle
+     * @param delay - Minimum delay between calls in ms
+     * @returns Throttled function
+     */
+    private throttle;
+    /**
+     * Apply default styles to input element
+     */
+    private applyDefaultStyles;
+    /**
+     * Update input element position to match Phaser container
+     */
+    private updatePosition;
+    /**
+     * Get the DOM input element
+     */
+    getElement(): HTMLInputElement;
+    /**
+     * Set input value
+     */
+    setValue(value: string): void;
+    /**
+     * Get input value
+     */
+    getValue(): string;
+    /**
+     * Focus the input
+     */
+    focus(): void;
+    /**
+     * Blur the input
+     */
+    blur(): void;
+    /**
+     * Set disabled state
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Set placeholder
+     */
+    setPlaceholder(placeholder: string): void;
+    /**
+     * Update styles
+     */
+    setStyles(styles: Partial<CSSStyleDeclaration>): void;
+    /**
+     * Destroy the input element and cleanup
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=dom-input-manager.d.ts.map

package/dist/utils/dom-input-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-input-manager.d.ts","sourceRoot":"","sources":["../../src/utils/dom-input-manager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AAErC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACrC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAC/C,+BAA+B;IAC/B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACrC;AAED;;GAEG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,SAAS,CAA8B;IAC/C,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,aAAa,CAAY;IACjC,OAAO,CAAC,sBAAsB,CAAY;IAC1C,OAAO,CAAC,sBAAsB,CAAY;IAC1C,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,UAAU,CAA2C;IAC7D,OAAO,CAAC,OAAO,CAAI;IACnB,OAAO,CAAC,qBAAqB,CAAsB;IACnD,OAAO,CAAC,qBAAqB,CAAsB;gBAEvC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,MAAM,GAAE,cAAmB;IAwFhF;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAgBjC;;;;;OAKG;IACH,OAAO,CAAC,QAAQ;IAWhB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkC1B;;OAEG;IACH,OAAO,CAAC,cAAc;IAuDtB;;OAEG;IACH,UAAU,IAAI,gBAAgB;IAI9B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM7B;;OAEG;IACH,QAAQ,IAAI,MAAM;IAIlB;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,IAAI,IAAI,IAAI;IAMZ;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAMpC;;OAEG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAMzC;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI;IAMrD;;OAEG;IACH,OAAO,IAAI,IAAI;CA2BhB"}

package/dist/utils/dom-input-manager.js

@@ -0,0 +1,253 @@
+class DOMInputElement {
+  input;
+  container;
+  scene;
+  scrollHandler;
+  resizeHandler;
+  throttledScrollHandler;
+  throttledResizeHandler;
+  intersectionObserver = null;
+  isDestroyed = false;
+  lastValues = { left: 0, top: 0, width: 0, height: 0 };
+  counter = 0;
+  scrollThrottleTimeout = null;
+  resizeThrottleTimeout = null;
+  constructor(container, config = {}) {
+    this.container = container;
+    this.scene = container.scene;
+    this.input = document.createElement("input");
+    this.input.type = config.type ?? "text";
+    if (config.placeholder) this.input.placeholder = config.placeholder;
+    if (config.value) this.input.value = config.value;
+    if (config.disabled) this.input.disabled = config.disabled;
+    if (config.maxLength) this.input.maxLength = config.maxLength;
+    if (config.autocomplete) this.input.setAttribute("autocomplete", config.autocomplete);
+    if (config.autocorrect) this.input.setAttribute("autocorrect", config.autocorrect);
+    if (config.autocapitalize) this.input.setAttribute("autocapitalize", config.autocapitalize);
+    if (config.spellcheck !== void 0)
+      this.input.setAttribute("spellcheck", config.spellcheck.toString());
+    this.applyDefaultStyles();
+    if (config.styles) {
+      Object.assign(this.input.style, config.styles);
+    }
+    document.body.appendChild(this.input);
+    if (config.onInput) {
+      this.input.addEventListener("input", (e) => {
+        config.onInput?.(this.input.value, e);
+      });
+    }
+    if (config.onKeyDown) {
+      this.input.addEventListener("keydown", config.onKeyDown);
+    }
+    if (config.onKeyUp) {
+      this.input.addEventListener("keyup", config.onKeyUp);
+    }
+    if (config.onFocus) {
+      this.input.addEventListener("focus", (e) => {
+        config.onFocus?.(e);
+      });
+    }
+    if (config.onBlur) {
+      this.input.addEventListener("blur", (e) => {
+        config.onBlur?.(e);
+      });
+    }
+    this.updatePosition();
+    this.scrollHandler = this.updatePosition.bind(this);
+    this.resizeHandler = this.updatePosition.bind(this);
+    this.throttledScrollHandler = this.throttle(this.scrollHandler, 20);
+    this.throttledResizeHandler = this.throttle(this.resizeHandler, 20);
+    document.addEventListener("scroll", this.throttledScrollHandler, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener("resize", this.throttledResizeHandler, { passive: true });
+    this.setupIntersectionObserver();
+    this.container.once("destroy", () => {
+      this.destroy();
+    });
+    this.scene.events.once("shutdown", () => {
+      this.destroy();
+    });
+  }
+  /**
+   * Setup IntersectionObserver to detect canvas position changes
+   */
+  setupIntersectionObserver() {
+    const canvas = this.scene.game.canvas;
+    this.intersectionObserver = new IntersectionObserver(
+      () => {
+        this.updatePosition();
+      },
+      {
+        threshold: [0, 0.1, 0.5, 0.9, 1]
+        // Trigger on various visibility changes
+      }
+    );
+    this.intersectionObserver.observe(canvas);
+  }
+  /**
+   * Throttle function to limit call frequency
+   * @param func - Function to throttle
+   * @param delay - Minimum delay between calls in ms
+   * @returns Throttled function
+   */
+  throttle(func, delay) {
+    let timeoutId = null;
+    return () => {
+      if (timeoutId !== null) return;
+      timeoutId = window.setTimeout(() => {
+        func();
+        timeoutId = null;
+      }, delay);
+    };
+  }
+  /**
+   * Apply default styles to input element
+   */
+  applyDefaultStyles() {
+    Object.assign(this.input.style, {
+      position: "absolute",
+      pointerEvents: "auto",
+      boxSizing: "border-box",
+      fontFamily: "Arial, sans-serif",
+      fontSize: "16px",
+      padding: "0px",
+      margin: "0px",
+      border: "none",
+      borderRadius: "0px",
+      backgroundColor: "transparent",
+      color: "transparent",
+      outline: "none",
+      caretColor: "transparent"
+    });
+    const styleId = "phaserjsx-input-no-selection";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        input[type="text"]::selection,
+        input[type="password"]::selection,
+        input[type="email"]::selection {
+          background: transparent !important;
+          color: transparent !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+  /**
+   * Update input element position to match Phaser container
+   */
+  updatePosition() {
+    if (this.isDestroyed || !this.container.scene) return;
+    const canvas = this.scene.game.canvas;
+    const canvasRect = canvas.getBoundingClientRect();
+    const worldTransform = this.container.getWorldTransformMatrix();
+    const worldX = worldTransform.tx;
+    const worldY = worldTransform.ty;
+    const containerWidth = this.container.width ?? 200;
+    const containerHeight = this.container.height ?? 40;
+    const scale = this.scene.game.scale;
+    const zoom = this.scene.cameras.main.zoom;
+    const left = Math.round(canvasRect.left + worldX * zoom * scale.displayScale.x);
+    const top = Math.round(canvasRect.top + worldY * zoom * scale.displayScale.y);
+    const width = Math.round(containerWidth * zoom * scale.displayScale.x);
+    const height = Math.round(containerHeight * zoom * scale.displayScale.y);
+    this.counter++;
+    if (this.lastValues.left === left && this.lastValues.top === top && this.lastValues.width === width && this.lastValues.height === height) {
+      return;
+    }
+    this.lastValues = { left, top, width, height };
+    this.input.style.left = `${left}px`;
+    this.input.style.top = `${top}px`;
+    this.input.style.width = `${width}px`;
+    this.input.style.height = `${height}px`;
+  }
+  /**
+   * Get the DOM input element
+   */
+  getElement() {
+    return this.input;
+  }
+  /**
+   * Set input value
+   */
+  setValue(value) {
+    if (!this.isDestroyed) {
+      this.input.value = value;
+    }
+  }
+  /**
+   * Get input value
+   */
+  getValue() {
+    return this.isDestroyed ? "" : this.input.value;
+  }
+  /**
+   * Focus the input
+   */
+  focus() {
+    if (!this.isDestroyed) {
+      this.input.focus();
+    }
+  }
+  /**
+   * Blur the input
+   */
+  blur() {
+    if (!this.isDestroyed) {
+      this.input.blur();
+    }
+  }
+  /**
+   * Set disabled state
+   */
+  setDisabled(disabled) {
+    if (!this.isDestroyed) {
+      this.input.disabled = disabled;
+    }
+  }
+  /**
+   * Set placeholder
+   */
+  setPlaceholder(placeholder) {
+    if (!this.isDestroyed) {
+      this.input.placeholder = placeholder;
+    }
+  }
+  /**
+   * Update styles
+   */
+  setStyles(styles) {
+    if (!this.isDestroyed) {
+      Object.assign(this.input.style, styles);
+    }
+  }
+  /**
+   * Destroy the input element and cleanup
+   */
+  destroy() {
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
+    if (this.scrollThrottleTimeout !== null) {
+      clearTimeout(this.scrollThrottleTimeout);
+    }
+    if (this.resizeThrottleTimeout !== null) {
+      clearTimeout(this.resizeThrottleTimeout);
+    }
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    document.removeEventListener("scroll", this.throttledScrollHandler, { capture: true });
+    window.removeEventListener("resize", this.throttledResizeHandler);
+    if (this.input.parentElement) {
+      this.input.parentElement.removeChild(this.input);
+    }
+  }
+}
+export {
+  DOMInputElement
+};
+//# sourceMappingURL=dom-input-manager.js.map