textmode.js 0.2.0 → 0.2.1-beta.2

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

@@ -0,0 +1,27 @@
+import type { Mixin } from './TextmodifierMixin';
+import type { MousePosition, MouseEventHandler } from '../managers';
+/**
+ * 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

@@ -1,5 +1,10 @@
 import type { Mixin } from './TextmodifierMixin';
 import type { GLShader } from '../../rendering/webgl/Shader';
+import type { GLFramebuffer } from '../../rendering';
+export interface UserFramebufferOptions {
+    width: number;
+    height: number;
+}
 /**
  * Supported uniform value types for shader parameters
  */
@@ -39,6 +44,86 @@ export interface RenderingCapabilities {
      * ```
      */
     shader(shader: GLShader): void;
+    /**
+         * Create a new framebuffer for offscreen rendering.
+         *
+         * The framebuffer uses the same 5-attachment MRT structure as the main
+         * rendering pipeline, allowing all standard drawing operations to work
+         * seamlessly when rendering to the framebuffer.
+         *
+         * @param options Configuration options for the framebuffer
+         * @returns A new UserFramebuffer instance
+         *
+         * @example
+         * ```javascript
+         * const t = textmode.create({
+         *   width: 800,
+         *   height: 600,
+         * });
+         *
+         * // Create a framebuffer with 50x30 grid cells
+         * const fb = t.createFramebuffer({
+         *   width: 50,
+         *   height: 30
+         * });
+         *
+         * t.draw(() => {
+         *   // Render to framebuffer
+         *   fb.begin();
+         *   t.background(255, 0, 0);
+         *   t.charColor(255);
+         *   t.rect(10, 10, 20, 10);
+         *   fb.end();
+         *
+         *   // Render framebuffer to main canvas
+         *   t.background(0);
+         *   t.image(fb, 0, 0);
+         * });
+         * ```
+         */
+    createFramebuffer(options: UserFramebufferOptions): GLFramebuffer;
+    /**
+     * Render a framebuffer to the current render target.
+     *
+     * This method takes the 5 MRT attachments from the source framebuffer
+     * and renders them as a textmode rectangle at the specified position.
+     * The framebuffer content will be processed through the same rendering
+     * pipeline as normal drawing operations.
+     *
+     * @param framebuffer The framebuffer to render
+     * @param x X position on the grid where to place the framebuffer content
+     * @param y Y position on the grid where to place the framebuffer content
+     * @param width Optional width to scale the framebuffer content (defaults to framebuffer width)
+     * @param height Optional height to scale the framebuffer content (defaults to framebuffer height)
+     *
+     * @example
+     * ```javascript
+     * const t = textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * });
+     *
+     * const fb = t.createFramebuffer({width: 30, height: 20});
+     *
+     * t.draw(() => {
+     *   // Draw something to the framebuffer
+     *   fb.begin();
+     *   t.charColor(255, 0, 0);
+     *   t.rect(5, 5, 20, 10);
+     *   fb.end();
+     *
+     *   // Clear main canvas and render framebuffer content
+     *   t.background(0);
+     *
+     *   // Render at original size
+     *   t.image(fb, 10, 10);
+     *
+     *   // Render scaled version
+     *   t.image(fb, 50, 10, 60, 40);
+     * });
+     * ```
+     */
+    image(framebuffer: GLFramebuffer, x: number, y: number, width?: number, height?: number): void;
     /**
      * Set a uniform value for the current custom shader.
      * @param name The name of the uniform variable
@@ -304,6 +389,25 @@ export interface RenderingCapabilities {
      * ```
      */
     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

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 '../managers';
+import type { KeyboardManager } from '../managers';
 /**
  * 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 '../managers';
+export type { KeyboardEventData, KeyboardEventHandler, KeyState } from '../managers';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textmode.js",
-  "version": "0.2.0",
+  "version": "0.2.1-beta.2",
   "description": "textmode.js is a lightweight creative coding library for creating real-time ASCII art on the web.",
   "type": "module",
   "types": "./dist/types/index.d.ts",
@@ -32,6 +32,7 @@
     "test:coverage": "vitest --coverage"
   },
   "devDependencies": {
+    "@mapwhit/glsl-minify": "^1.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^24.0.13",
@@ -41,7 +42,7 @@
     "tslib": "^2.8.1",
     "typedoc": "^0.28.7",
     "typedoc-plugin-markdown": "^4.7.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "vite": "^6.3.4",
     "vite-plugin-glsl": "^1.5.1",
     "vitest": "^3.1.2"