textmode.js 0.4.0 → 0.6.0-beta.1

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

@@ -1,15 +1,7 @@
 /**
  * Base types and utilities for the mixin system
  */
-import type { GLRenderer } from '../../rendering/webgl/Renderer';
-import type { TextmodeFont } from '../font';
-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 '../managers/MouseManager';
-import type { KeyboardManager } from '../managers/KeyboardManager';
-import type { TouchManager } from '../managers/TouchManager';
+import type { ITextmodifier } from '../interfaces';
 /**
  * Constructor type for mixin pattern
  */
@@ -17,41 +9,7 @@ export type Constructor<T = {}> = new (...args: any[]) => T;
 /**
  * Mixin function type that takes a base class and returns an extended class
  */
-export type Mixin<T> = <TBase extends Constructor<TextmodifierContext>>(Base: TBase) => TBase & Constructor<T>;
-/**
- * Essential properties that all mixins can access.
- * This defines the contract for what mixins can expect to be available.
- */
-export interface TextmodifierContext {
-    /** Core WebGL renderer @ignore */
-    readonly _renderer: GLRenderer;
-    /** Font management @ignore */
-    readonly _font: TextmodeFont;
-    /** Canvas management @ignore */
-    readonly _canvas: TextmodeCanvas;
-    /** Grid management @ignore */
-    readonly _grid: TextmodeGrid;
-    /** Animation controller for managing rendering loop @ignore */
-    readonly _animationController: AnimationController;
-    /** Mouse interaction manager @ignore */
-    readonly _mouseManager: MouseManager;
-    /** Touch interaction manager @ignore */
-    readonly _touchManager: TouchManager;
-    /** 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 */
-    readonly _textmodeDrawFramebuffer: GLFramebuffer;
-    /** Shader used for converting pixels to textmode grid format @ignore */
-    readonly _textmodeConversionShader: Shader;
-    /** Framebuffer used for textmode conversion @ignore */
-    readonly _asciiColorFramebuffer: GLFramebuffer;
-    /** Shader used for final presentation to the screen @ignore */
-    readonly _presentShader: Shader;
-    /** Main render method @ignore */
-    $render(): void;
-}
+export type Mixin<T> = <TBase extends Constructor<ITextmodifier>>(Base: TBase) => TBase & Constructor<T>;
 /**
  * Simple utility function to apply multiple mixins to a base class
  * @param Base The base class to extend

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

@@ -1,191 +1,6 @@
 import type { Mixin } from './TextmodifierMixin';
-import type { TouchEventHandler, TouchLongPressHandler, TouchPinchHandler, TouchPosition, TouchRotateHandler, TouchSwipeHandler, TouchTapHandler } from '../managers/TouchManager';
-/**
- * Capabilities exposed by the TouchMixin for handling touch interaction and gestures.
- */
-export interface TouchCapabilities {
-    /**
-     * Set a callback function that will be called when a touch point begins.
-     *
-     * The callback receives {@link TouchEventData} containing the touch that triggered the event,
-     * all active touches, and the original DOM event. Use this to react when the user places one or
-     * more fingers on the canvas.
-     *
-     * @param callback The function to call when a touch starts.
-     *
-     * @example
-     * ```javascript
-     * t.touchStarted((data) => {
-     *   console.log(`Touch ${data.touch.id} began at ${data.touch.x}, ${data.touch.y}`);
-     * });
-     * ```
-     */
-    touchStarted(callback: TouchEventHandler): void;
-    /**
-     * Set a callback function that will be called when a touch point moves across the canvas.
-     *
-     * The provided callback is invoked continuously while the browser reports move events. Use the
-     * `previousTouch` and `deltaTime` fields to derive velocity or gesture behaviour.
-     *
-     * @param callback The function to call when a touch moves.
-     *
-     * @example
-     * ```javascript
-     * t.touchMoved((data) => {
-     *   const { touch, previousTouch } = data;
-     *   if (previousTouch) {
-     *     console.log(`Touch moved by ${touch.x - previousTouch.x}, ${touch.y - previousTouch.y}`);
-     *   }
-     * });
-     * ```
-     */
-    touchMoved(callback: TouchEventHandler): void;
-    /**
-     * Set a callback function that will be called when a touch ends normally.
-     *
-     * This fires after the finger leaves the canvas surface and the browser raises a `touchend`
-     * event. Use it to finalise state such as drawing strokes or completing gestures.
-     *
-     * @param callback The function to call when a touch ends.
-     *
-     * @example
-     * ```javascript
-     * t.touchEnded((data) => {
-     *   console.log(`Touch ${data.touch.id} finished at ${data.touch.x}, ${data.touch.y}`);
-     * });
-     * ```
-     */
-    touchEnded(callback: TouchEventHandler): void;
-    /**
-     * Set a callback function that will be called when a touch is cancelled by the browser.
-     *
-     * Cancellation can occur when the browser takes ownership for scrolling or if the gesture
-     * leaves the window. Treat this as an aborted touch and clean up any in-progress state.
-     *
-     * @param callback The function to call when a touch is cancelled.
-     *
-     * @example
-     * ```javascript
-     * t.touchCancelled((data) => {
-     *   console.warn(`Touch ${data.touch.id} cancelled by the browser`);
-     * });
-     * ```
-     */
-    touchCancelled(callback: TouchEventHandler): void;
-    /**
-     * Register a callback for tap gestures.
-     *
-     * A tap is fired when the user quickly touches and releases the canvas without travelling far.
-     * Use {@link TouchTapEventData.taps} to determine whether the gesture is a single or multi tap.
-     *
-     * @param callback The function to call when a tap gesture is detected.
-     *
-     * @example
-     * ```javascript
-     * t.tap((data) => {
-     *   console.log(`Tapped at ${data.touch.x}, ${data.touch.y}`);
-     * });
-     * ```
-     */
-    tap(callback: TouchTapHandler): void;
-    /**
-     * Register a callback for double tap gestures.
-     *
-     * Double taps reuse the same {@link TouchTapEventData} as taps with `taps` set to `2`. This
-     * helper lets you supply a dedicated handler when you want to treat double taps differently.
-     *
-     * @param callback The function to call when a double tap is detected.
-     *
-     * @example
-     * ```javascript
-     * t.doubleTap((data) => {
-     *   console.log('Double tap detected', data.touch);
-     * });
-     * ```
-     */
-    doubleTap(callback: TouchTapHandler): void;
-    /**
-     * Register a callback for long press gestures.
-     *
-     * A long press is emitted when the user keeps a finger on the canvas without moving beyond the
-     * configured tolerance. The event includes the press duration in milliseconds.
-     *
-     * @param callback The function to call when a long press gesture is detected.
-     *
-     * @example
-     * ```javascript
-     * t.longPress((data) => {
-     *   console.log(`Long press for ${Math.round(data.duration)}ms`);
-     * });
-     * ```
-     */
-    longPress(callback: TouchLongPressHandler): void;
-    /**
-     * Register a callback for swipe gestures.
-     *
-     * Swipes provide the dominant direction (`up`, `down`, `left`, `right`), travelled distance, and
-     * velocity in CSS pixels per millisecond. Useful for panning, flicks, or quick shortcuts.
-     *
-     * @param callback The function to call when a swipe gesture is detected.
-     *
-     * @example
-     * ```javascript
-     * t.swipe((data) => {
-     *   console.log(`Swipe ${data.direction} with distance ${data.distance}`);
-     * });
-     * ```
-     */
-    swipe(callback: TouchSwipeHandler): void;
-    /**
-     * Register a callback for pinch gestures, receiving scale deltas.
-     *
-     * Pinch gestures involve two touch points. The callback receives the current scale relative to
-     * the initial distance and the change since the previous update, enabling zoom interactions.
-     *
-     * @param callback The function to call when a pinch gesture is detected.
-     *
-     * @example
-     * ```javascript
-     * t.pinch((data) => {
-     *   console.log(`Pinch scale: ${data.scale.toFixed(2)}`);
-     * });
-     * ```
-     */
-    pinch(callback: TouchPinchHandler): void;
-    /**
-     * Register a callback for rotate gestures, receiving rotation deltas in degrees.
-     *
-     * Rotation callbacks provide the cumulative rotation and delta rotation since the last update,
-     * along with the gesture centre in grid coordinates. Ideal for dial-like interactions.
-     *
-     * @param callback The function to call when a rotation gesture is detected.
-     *
-     * @example
-     * ```javascript
-     * t.rotateGesture((data) => {
-     *   console.log(`Rotated ${data.deltaRotation.toFixed(1)}°`);
-     * });
-     * ```
-     */
-    rotateGesture(callback: TouchRotateHandler): void;
-    /**
-     * Get the currently active touches in grid coordinates.
-     *
-     * Returns a copy of each touch, including grid position, client coordinates, and pressure when
-     * available. Use this inside a draw loop to react to active multi-touch scenarios.
-     *
-     * @example
-     * ```javascript
-     * t.draw(() => {
-     *   for (const touch of t.touches) {
-     *     t.point(touch.x, touch.y);
-     *   }
-     * });
-     * ```
-     */
-    get touches(): TouchPosition[];
-}
+import type { ITouchMixin } from './interfaces/ITouchMixin';
 /**
  * Mixin that wires the public touch API to the underlying TouchManager implementation.
  */
-export declare const TouchMixin: Mixin<TouchCapabilities>;
+export declare const TouchMixin: Mixin<ITouchMixin>;

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

@@ -1,10 +1,10 @@
-export { type Constructor, type Mixin, type TextmodifierContext, $applyMixins } from './TextmodifierMixin';
-export { RenderingMixin, type RenderingCapabilities } from './RenderingMixin';
-export { FontMixin, type FontCapabilities } from './FontMixin';
-export { AnimationMixin, type AnimationCapabilities } from './AnimationMixin';
-export { MouseMixin, type MouseCapabilities } from './MouseMixin';
-export { TouchMixin, type TouchCapabilities } from './TouchMixin';
-export { KeyboardMixin, type KeyboardCapabilities } from './KeyboardMixin';
+export { type Constructor, type Mixin, $applyMixins } from './TextmodifierMixin';
+export { RenderingMixin } from './RenderingMixin';
+export { FontMixin } from './FontMixin';
+export { AnimationMixin } from './AnimationMixin';
+export { MouseMixin } from './MouseMixin';
+export { TouchMixin } from './TouchMixin';
+export { KeyboardMixin } from './KeyboardMixin';
 export type { MousePosition, MouseEventData, MouseEventHandler } from '../managers/MouseManager';
-export type { TouchEventData, TouchLongPressEventData, TouchPinchEventData, TouchPosition, TouchRotateEventData, TouchSwipeEventData, TouchTapEventData } from '../managers/TouchManager';
 export type { KeyboardEventData, KeyboardEventHandler, KeyState } from '../managers/KeyboardManager';
+export type { TouchEventData, TouchLongPressEventData, TouchPinchEventData, TouchPosition, TouchRotateEventData, TouchSwipeEventData, TouchTapEventData } from '../managers/TouchManager';

package/dist/types/textmode/mixins/interfaces/IAnimationMixin.d.ts

@@ -0,0 +1,167 @@
+/**
+ * Interface for animation capabilities that will be mixed into Textmodifier
+ */
+export interface IAnimationMixin {
+    /**
+     * Set the maximum frame rate. If called without arguments, returns the current measured frame rate.
+     * @param fps The maximum frames per second for rendering.
+     *
+     * @example
+     * ```javascript
+     * // Create a Textmodifier instance
+     * const textmodifier = textmode.create();
+     *
+     * // Set the maximum frame rate to 30 FPS
+     * textmodifier.frameRate(30);
+     *
+     * // Draw something at the set frame rate
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.char('A');
+     *   t.rect(5, 5);
+     * });
+     * ```
+     */
+    frameRate(fps?: number): number | void;
+    /**
+     * Stop the automatic rendering loop.
+     *
+     * This method pauses the render loop without, allowing
+     * it to be resumed later with {@link loop}. This is useful for temporarily pausing
+     * animation while maintaining the ability to continue it.
+     *
+    * @example
+    * ```javascript
+    * const t = textmode.create({ width: 800, height: 600 });
+    *
+    * // Toggle loop on SPACE
+    * t.keyPressed((data) => {
+    *   if (data.key === ' ') {
+    *     if (t.isLooping()) {
+    *       t.noLoop();
+    *     } else {
+    *       t.loop();
+    *     }
+    *   }
+    * });
+    *
+    * t.draw(() => {
+    *   t.background(0);
+    *   t.char('A');
+    *   t.charColor(255, 255, 255);
+    *   t.rotateZ(t.frameCount * 2);
+    *   t.rect(16, 16);
+    * });
+    * ```
+     */
+    noLoop(): void;
+    /**
+     * Resume the rendering loop if it was stopped by {@link noLoop}.
+     *
+    * @example
+    * ```javascript
+    * const t = textmode.create({ width: 800, height: 600 });
+    *
+    * // Toggle loop on SPACE
+    * t.keyPressed((data) => {
+    *   if (data.key === ' ') {
+    *     if (t.isLooping()) {
+    *       t.noLoop();
+    *     } else {
+    *       t.loop();
+    *     }
+    *   }
+    * });
+    *
+    * t.draw(() => {
+    *   t.background(0);
+    *   t.char('A');
+    *   t.charColor(255, 255, 255);
+    *   t.rotateZ(t.frameCount * 2);
+    *   t.rect(16, 16);
+    * });
+    * ```
+     */
+    loop(): void;
+    /**
+     * Execute the render function a specified number of times.
+     *
+     * This method is useful when the render loop has been stopped with {@link noLoop},
+     * allowing you to trigger rendering on demand.
+     *
+     * @param n The number of times to execute the render function. Defaults to 1.
+     *
+     * @example
+     * ```javascript
+    * // Press SPACE to manually trigger single frames while loop is paused.
+    *
+    * const t = textmode.create({ width: 800, height: 600 });
+    *
+    * let rotation = 0;
+    *
+    * t.keyPressed((data) => {
+    *   if (data.key === ' ') {
+    *     rotation += 15; // Increment rotation
+    *     t.redraw(); // Manually trigger one frame
+    *   }
+    * });
+    *
+    * t.draw(() => {
+    *   if(t.frameCount === 1) {
+    *     t.noLoop();
+    *   }
+    *
+    *   t.background(0);
+    *
+    *   t.push();
+    *   t.char('A');
+    *   t.charColor(100, 200, 255);
+    *   t.rotateZ(rotation);
+    *   t.rect(13, 13);
+    *   t.pop();
+    *
+    *   // Show instruction text
+    *   t.push();
+    *   t.translate(-5, -10);
+    *   t.charColor(150);
+    *   const msg = 'PRESS SPACE';
+    *   [...msg].forEach((char, i) => {
+    *     t.push();
+    *     t.translate(i, 0);
+    *     t.char(char);
+    *     t.point();
+    *     t.pop();
+    *   });
+    *   t.pop();
+    * });
+     * ```
+     */
+    redraw(n?: number): void;
+    /**
+     * Check whether the textmodifier is currently running the automatic render loop.
+     * @returns True if the render loop is currently active, false otherwise.
+     *
+     * @example
+     * ```javascript
+     * const textmodifier = textmode.create(canvas);
+     *
+     * // Check loop status in different states
+     * console.log(textmodifier.isLooping()); // true (looping)
+     *
+     * textmodifier.noLoop();
+     * console.log(textmodifier.isLooping()); // false (not looping)
+     *
+     * textmodifier.loop();
+     * console.log(textmodifier.isLooping()); // true (looping)
+     * ```
+     */
+    isLooping(): boolean;
+    /**
+     * Get the current frame count.
+     */
+    get frameCount(): number;
+    /**
+     * Set the current frame count.
+     */
+    set frameCount(value: number);
+}

package/dist/types/textmode/mixins/interfaces/IFontMixin.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Interface for font capabilities that will be mixed into Textmodifier
+ */
+export interface IFontMixin {
+    /**
+     * Update the font used for rendering.
+     * @param fontSource The URL of the font to load.
+     *
+     * @example
+     * ```javascript
+     * // Create a Textmodifier instance
+     * const t = textmode.create();
+     *
+     * t.setup(async () => {
+     *  // Load a custom font from a URL
+     *  await t.loadFont('https://example.com/fonts/myfont.ttf');
+     *
+     *  // Local font example
+     *  // await t.loadFont('./fonts/myfont.ttf');
+     * });
+     * ```
+     */
+    loadFont(fontSource: string): Promise<void>;
+    /**
+     * Set the font size used for rendering.
+     * @param size The font size to set.
+     *
+     * @example
+     * ```javascript
+     * // Create a Textmodifier instance
+     * const t = textmode.create();
+     *
+     * t.setup(() => {
+     *  // Set the font size to 32
+     *  t.fontSize(32);
+     * });
+     *
+     * t.draw(() => {
+     *  t.background(0);
+     *  t.char('A');
+     *  t.rect(5, 5);
+     * });
+     * ```
+     */
+    fontSize(size: number): void;
+}