textmode.js 0.2.0-beta.5 → 0.2.1-beta.1

package/dist/types/textmode/keyboard/KeyboardManager.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Key event data passed to event handlers
+ */
+export interface KeyboardEventData {
+    /** The key that was pressed/released (e.g., 'a', 'Enter', 'ArrowLeft') */
+    key: string;
+    /** The key code (for compatibility) */
+    keyCode: number;
+    /** Whether Ctrl key is held down */
+    ctrlKey: boolean;
+    /** Whether Shift key is held down */
+    shiftKey: boolean;
+    /** Whether Alt key is held down */
+    altKey: boolean;
+    /** Whether Meta key (Windows/Cmd) is held down */
+    metaKey: boolean;
+    /** Whether this key is currently being held down (for keyPressed) or was released (for keyReleased) */
+    isPressed: boolean;
+    /** Original DOM keyboard event */
+    originalEvent: KeyboardEvent;
+}
+/**
+ * Keyboard event handler function type
+ */
+export type KeyboardEventHandler = (data: KeyboardEventData) => void;
+/**
+ * Key state information
+ */
+export interface KeyState {
+    /** Whether the key is currently pressed */
+    isPressed: boolean;
+    /** Timestamp when the key was last pressed */
+    lastPressTime: number;
+    /** Timestamp when the key was last released */
+    lastReleaseTime: number;
+}
+/**
+ * Manages all keyboard interaction for a Textmodifier instance.
+ * Handles event listeners, key state tracking, and event dispatching.
+ *
+ * Provides p5.js-like keyboard functionality including:
+ * - keyPressed() and keyReleased() callbacks
+ * - Current key state tracking
+ * - Special key handling (arrows, function keys, etc.)
+ * - Modifier key support (Ctrl, Shift, Alt, Meta)
+ */
+export declare class KeyboardManager {
+    private _keyStates;
+    private _lastKeyPressed;
+    private _lastKeyReleased;
+    private _keyDownListener;
+    private _keyUpListener;
+    private _areListenersSetup;
+    private _keyPressedCallback?;
+    private _keyReleasedCallback?;
+    private readonly _specialKeyMap;
+    constructor();
+    /**
+     * Setup keyboard event listeners.
+     */
+    $setupListeners(): void;
+    /**
+     * Remove keyboard event listeners.
+     */
+    $cleanupListeners(): void;
+    /**
+     * Set a callback function that will be called when a key is pressed down.
+     * @param callback The function to call when a key is pressed
+     */
+    $setPressedCallback(callback: KeyboardEventHandler): void;
+    /**
+     * Set a callback function that will be called when a key is released.
+     * @param callback The function to call when a key is released
+     */
+    $setReleasedCallback(callback: KeyboardEventHandler): void;
+    /**
+     * Check if a specific key is currently being pressed.
+     * @param key The key to check (e.g., 'a', 'Enter', 'ArrowLeft', or special constants like 'SPACE')
+     * @returns true if the key is currently pressed, false otherwise
+     */
+    $isKeyPressed(key: string): boolean;
+    /**
+     * Get the last key that was pressed.
+     * @returns The key string of the last pressed key, or null if no key has been pressed
+     */
+    $getLastKeyPressed(): string | null;
+    /**
+     * Get the last key that was released.
+     * @returns The key string of the last released key, or null if no key has been released
+     */
+    $getLastKeyReleased(): string | null;
+    /**
+     * Get all currently pressed keys.
+     * @returns Array of key strings that are currently pressed
+     */
+    $getPressedKeys(): string[];
+    /**
+     * Check if any modifier key is currently pressed.
+     * @returns Object with boolean properties for each modifier key
+     */
+    $getModifierState(): {
+        ctrl: boolean;
+        shift: boolean;
+        alt: boolean;
+        meta: boolean;
+    };
+    /**
+     * Clear all key states (useful for focus loss scenarios).
+     */
+    $clearKeyStates(): void;
+    /**
+     * Handle key down events
+     */
+    private _handleKeyDown;
+    /**
+     * Handle key up events
+     */
+    private _handleKeyUp;
+    /**
+     * Normalize key names for consistency (map to p5.js-like constants where applicable)
+     */
+    private _normalizeKey;
+}

package/dist/types/textmode/keyboard/index.d.ts

@@ -0,0 +1,2 @@
+export { KeyboardManager } from './KeyboardManager';
+export type { KeyboardEventData, KeyboardEventHandler, KeyState } from './KeyboardManager';

package/dist/types/textmode/mixins/AnimationMixin.d.ts

@@ -14,7 +14,7 @@ export interface AnimationCapabilities {
      * @example
      * ```javascript
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create();
+     * const textmodifier = textmode.create();
      *
      * // Set the maximum frame rate to 30 FPS
      * textmodifier.frameRate(30);
@@ -31,7 +31,7 @@ export interface AnimationCapabilities {
      * @example
      * ```javascript
      * // Create a textmodifier instance in auto mode
-     * const textmodifier = await textmode.create();
+     * const textmodifier = textmode.create();
      *
      * // The render loop is running by default
      * console.log(textmodifier.isLooping()); // true
@@ -52,7 +52,7 @@ export interface AnimationCapabilities {
      * @example
      * ```javascript
      * // Create a textmodifier instance
-     * const textmodifier = await textmode.create();
+     * const textmodifier = textmode.create();
      *
      * // Stop the loop
      * textmodifier.noLoop();
@@ -80,11 +80,15 @@ export interface AnimationCapabilities {
      * @example
      * ```javascript
      * // Create a textmodifier instance
-     * const textmodifier = await textmode.create();
+     * const textmodifier = textmode.create();
      *
      * // Set up drawing
      * textmodifier.draw(() => {
-     *   // todo...
+     *   textmodifier.background(0);
+     *
+     *   textmodifier.char("A");
+     *   textmodifier.charColor(255, 0, 0);
+     *   textmodifier.rect(10, 10, 50, 50);
      * });
      *
      * textmodifier.noLoop();
@@ -98,7 +102,7 @@ export interface AnimationCapabilities {
      *
      * @example
      * ```javascript
-     * const textmodifier = await textmode.create(canvas);
+     * const textmodifier = textmode.create(canvas);
      *
      * // Check loop status in different states
      * console.log(textmodifier.isLooping()); // true (looping)

package/dist/types/textmode/mixins/ExportMixin.d.ts

@@ -17,7 +17,7 @@ export interface ExportCapabilities {
      * const canvas = document.querySelector('canvas#myCanvas');
      *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas, {renderMode: 'manual'});
+     * const textmodifier = textmode.create(canvas, {renderMode: 'manual'});
      *
      * // Render a single frame
      * textmodifier.render();
@@ -43,7 +43,7 @@ export interface ExportCapabilities {
      * const canvas = document.querySelector('canvas#myCanvas');
      *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas, {renderMode: 'manual'});
+     * const textmodifier = textmode.create(canvas, {renderMode: 'manual'});
      *
      * // Render a single frame
      * textmodifier.render();
@@ -67,7 +67,7 @@ export interface ExportCapabilities {
      * const canvas = document.querySelector('canvas#myCanvas');
      *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas, {renderMode: 'manual'});
+     * const textmodifier = textmode.create(canvas, {renderMode: 'manual'});
      *
      * // Render a single frame
      * textmodifier.render();
@@ -93,7 +93,7 @@ export interface ExportCapabilities {
      * const canvas = document.querySelector('canvas#myCanvas');
      *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas, {renderMode: 'manual'});
+     * const textmodifier = textmode.create(canvas, {renderMode: 'manual'});
      *
      * // Render a single frame
      * textmodifier.render();
@@ -115,7 +115,7 @@ export interface ExportCapabilities {
      * const canvas = document.querySelector('canvas#myCanvas');
      *
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create(canvas, {renderMode: 'manual'});
+     * const textmodifier = textmode.create(canvas, {renderMode: 'manual'});
      *
      * // Render a single frame
      * textmodifier.render();

package/dist/types/textmode/mixins/FontMixin.d.ts

@@ -10,7 +10,7 @@ export interface FontCapabilities {
      * @example
      * ```javascript
      * // Create a Textmodifier instance
-     * const textmodifier = await textmode.create();
+     * const textmodifier = textmode.create();
      *
      * // Load a custom font from a URL
      * await textmodifier.loadFont('https://example.com/fonts/myfont.ttf');

package/dist/types/textmode/mixins/KeyboardMixin.d.ts

@@ -0,0 +1,39 @@
+import type { Mixin } from './TextmodifierMixin';
+import type { KeyboardEventHandler } from '../keyboard';
+/**
+ * Capabilities provided by the KeyboardMixin
+ */
+export interface KeyboardCapabilities {
+    /** Check if a specific key is currently pressed */
+    isKeyPressed(key: string): boolean;
+    /** Get the last key that was pressed */
+    readonly lastKeyPressed: string | null;
+    /** Get the last key that was released */
+    readonly lastKeyReleased: string | null;
+    /** Get all currently pressed keys */
+    readonly pressedKeys: string[];
+    /** Get current modifier key states */
+    readonly modifierState: {
+        ctrl: boolean;
+        shift: boolean;
+        alt: boolean;
+        meta: boolean;
+    };
+    /** Set a callback for when a key is pressed down */
+    keyPressed(callback: KeyboardEventHandler): void;
+    /** Set a callback for when a key is released */
+    keyReleased(callback: KeyboardEventHandler): void;
+    /** Clear all key states */
+    clearKeyStates(): void;
+}
+/**
+ * Mixin that adds keyboard interaction capabilities to Textmodifier.
+ *
+ * This is a thin wrapper around KeyboardManager that provides the public API
+ * for keyboard interaction. All the actual implementation is handled by the
+ * KeyboardManager instance in the TextmodifierContext.
+ *
+ * Provides p5.js-like keyboard functionality including key state tracking,
+ * event callbacks, and special key handling.
+ */
+export declare const KeyboardMixin: Mixin<KeyboardCapabilities>;

package/dist/types/textmode/mixins/MouseMixin.d.ts

@@ -0,0 +1,27 @@
+import type { Mixin } from './TextmodifierMixin';
+import type { MousePosition, MouseEventHandler } from '../mouse';
+/**
+ * Capabilities provided by the MouseMixin
+ */
+export interface MouseCapabilities {
+    /** Get the current mouse position in grid coordinates */
+    readonly mouse: MousePosition;
+    /** Set a callback for when the mouse is clicked */
+    mouseClicked(callback: MouseEventHandler): void;
+    /** Set a callback for when the mouse is pressed down */
+    mousePressed(callback: MouseEventHandler): void;
+    /** Set a callback for when the mouse is released */
+    mouseReleased(callback: MouseEventHandler): void;
+    /** Set a callback for when the mouse moves */
+    mouseMoved(callback: MouseEventHandler): void;
+    /** Set a callback for when the mouse wheel is scrolled */
+    mouseScrolled(callback: MouseEventHandler): void;
+}
+/**
+ * Mixin that adds mouse tracking capabilities to Textmodifier.
+ *
+ * This is a thin wrapper around MouseManager that provides the public API
+ * for mouse interaction. All the actual implementation is handled by the
+ * MouseManager instance in the TextmodifierContext.
+ */
+export declare const MouseMixin: Mixin<MouseCapabilities>;

package/dist/types/textmode/mixins/RenderingMixin.d.ts

@@ -11,11 +11,11 @@ export interface RenderingCapabilities {
     /**
      * Set a custom shader for subsequent rendering operations.
      * Pass null to return to the default shader.
-     * @param shader The custom shader to use, or null to use the default shader
+     * @param shader The custom shader to use
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -38,7 +38,7 @@ export interface RenderingCapabilities {
      * });
      * ```
      */
-    shader(shader: GLShader | null): void;
+    shader(shader: GLShader): void;
     /**
      * Set a uniform value for the current custom shader.
      * @param name The name of the uniform variable
@@ -46,7 +46,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -70,7 +70,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -97,11 +97,11 @@ export interface RenderingCapabilities {
      * The fragment shader will automatically receive the standard vertex shader inputs
      * and must output to all 5 MRT attachments.
      * @param fragmentSource The fragment shader source code
-     * @returns A compiled shader ready for use with shader()
+     * @returns A compiled shader ready for use with {@link shader}
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -157,7 +157,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -182,7 +182,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -201,7 +201,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -220,7 +220,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -239,7 +239,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -248,7 +248,8 @@ export interface RenderingCapabilities {
      *   t.background(0);
      *
      *   t.push(); // Save current state
-     *   // todo...
+     *   t.charColor(255, 0, 0); // Red characters
+     *   t.rect(10, 10, 5, 5);
      *   t.pop(); // Restore previous state
      * });
      * ```
@@ -260,7 +261,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -269,7 +270,9 @@ export interface RenderingCapabilities {
      *   t.background(0);
      *
      *   t.push(); // Save current state
-     *   // todo...
+     *   t.charColor(0, 255, 0); // Green characters
+     *   t.char('█');
+     *   t.rect(5, 5, 3, 3);
      *   t.pop(); // Restore previous state
      * });
      * ```
@@ -277,14 +280,14 @@ export interface RenderingCapabilities {
     pop(): void;
     /**
      * Draw a rectangle with the current settings.
-     * @param x X-coordinate of the rectangle
-     * @param y Y-coordinate of the rectangle
+     * @param x X-coordinate of the rectangle *(top-left corner)*
+     * @param y Y-coordinate of the rectangle *(top-left corner)*
      * @param width Width of the rectangle
      * @param height Height of the rectangle
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -293,11 +296,33 @@ export interface RenderingCapabilities {
      *   // Set the background color to black
      *   t.background(0);
      *
-     *   // todo...
+     *   // Draw a filled rectangle with default character
+     *   t.char('█');
+     *   t.charColor(255, 255, 255); // White
+     *   t.rect(10, 10, 15, 8);
      * });
      * ```
      */
     rect(x: number, y: number, width?: number, height?: number): void;
+    /**
+     * Draw a single point at (x, y) with the current settings.
+     * @param x X-coordinate of the point
+     * @param y Y-coordinate of the point
+     *
+     * @example
+     * ```javascript
+     * const t = textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.point(10, 10);
+     * });
+     * ```
+     */
+    point(x: number, y: number): void;
     /**
      * Draw a line from point (x1, y1) to point (x2, y2) with the settings.
      * @param x1 X-coordinate of the line start point
@@ -307,7 +332,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -316,7 +341,11 @@ export interface RenderingCapabilities {
      *   // Set the background color to black
      *   t.background(0);
      *
-     *   // todo
+     *   // Draw a diagonal line
+     *   t.char('-');
+     *   t.charColor(0, 255, 255); // Cyan
+     *   t.lineWeight(1);
+     *   t.line(5, 5, 25, 15);
      * });
      * ```
      */
@@ -330,7 +359,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -347,7 +376,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *  width: 800,
      *  height: 600,
      * })
@@ -365,7 +394,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *  width: 800,
      *  height: 600,
      * })
@@ -392,7 +421,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -400,7 +429,11 @@ export interface RenderingCapabilities {
      * t.draw(() => {
      *   t.background(0);
      *
-     *   // todo
+     *   // Draw a smooth S-curve
+     *   t.char('*');
+     *   t.charColor(255, 100, 255); // Magenta
+     *   t.lineWeight(2);
+     *   t.bezierCurve(5, 20, 15, 5, 25, 35, 35, 20);
      * });
      * ```
      */
@@ -411,7 +444,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -429,11 +462,10 @@ export interface RenderingCapabilities {
      * @param r Red component (0-255)
      * @param g Green component (0-255)
      * @param b Blue component (0-255)
-     * @param a Alpha component (0-255)
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -451,11 +483,10 @@ export interface RenderingCapabilities {
      * @param r Red component (0-255)
      * @param g Green component (0-255)
      * @param b Blue component (0-255)
-     * @param a Alpha component (0-255)
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -474,7 +505,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -493,7 +524,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -512,14 +543,14 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
      *
      * t.draw(() => {
      *   t.background(0);
-     *   t.charRotation(45); // Rotate character 45 degrees
+     *   t.charRotation(90); // Rotate character 90 degrees
      *   t.rect(10, 10, 5, 5);
      * });
      * ```
@@ -531,7 +562,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -553,7 +584,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -576,7 +607,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })
@@ -599,7 +630,7 @@ export interface RenderingCapabilities {
      *
      * @example
      * ```javascript
-     * const t = await textmode.create({
+     * const t = textmode.create({
      *   width: 800,
      *   height: 600,
      * })

package/dist/types/textmode/mixins/TextmodifierMixin.d.ts

@@ -7,6 +7,8 @@ import type { TextmodeCanvas } from '../Canvas';
 import type { TextmodeGrid } from '../Grid';
 import type { AnimationController } from '../AnimationController';
 import type { GLFramebuffer, Shader } from '../../rendering';
+import type { MouseManager } from '../mouse';
+import type { KeyboardManager } from '../keyboard';
 /**
  * Constructor type for mixin pattern
  */
@@ -30,6 +32,10 @@ export interface TextmodifierContext {
     readonly _grid: TextmodeGrid;
     /** Animation controller for managing rendering loop @ignore */
     readonly _animationController: AnimationController;
+    /** Mouse interaction manager @ignore */
+    readonly _mouseManager: MouseManager;
+    /** Keyboard interaction manager @ignore */
+    readonly _keyboardManager: KeyboardManager;
     /** Draw shader that contains content drawn by the user @ignore */
     readonly _textmodeDrawShader: Shader;
     /** Framebuffer used for offscreen rendering @ignore */

package/dist/types/textmode/mixins/index.d.ts

@@ -3,3 +3,7 @@ export { RenderingMixin, type RenderingCapabilities } from './RenderingMixin';
 export { ExportMixin, type ExportCapabilities } from './ExportMixin';
 export { FontMixin, type FontCapabilities } from './FontMixin';
 export { AnimationMixin, type AnimationCapabilities } from './AnimationMixin';
+export { MouseMixin, type MouseCapabilities } from './MouseMixin';
+export { KeyboardMixin, type KeyboardCapabilities } from './KeyboardMixin';
+export type { MousePosition, MouseEventData, MouseEventHandler } from '../mouse';
+export type { KeyboardEventData, KeyboardEventHandler, KeyState } from '../keyboard';