textmode.js 0.1.6-beta.5 → 0.1.6-beta.7

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

@@ -1,4 +1,4 @@
-import type { Mixin } from './MixinBase';
+import type { Mixin } from './TextmodifierMixin';
 import type { Shader } from '../../rendering';
 /**
  * Interface for rendering capabilities that will be mixed into Textmodifier
@@ -10,6 +10,34 @@ export interface RenderingCapabilities {
      * @param g Green component (0-255, optional)
      * @param b Blue component (0-255, optional)
      * @param a Alpha component (0-255, optional)
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   // Set the background color to black
+     *   t.background(0);
+     *
+     *   const centerX = t.width / 2;
+     *   const centerY = t.height / 2;
+     *   const radius = Math.min(t.width, t .height) / 3;
+     *   const speed = 0.02; // Adjust speed of rotation
+     *
+     *   const angle = t.frameCount * speed;
+     *   const x = centerX + Math.cos(angle) * radius - 100;
+     *   const y = centerY + Math.sin(angle) * radius - 50;
+     *
+     *   // Set the fill color to white
+     *   t.fill(255);
+     *
+     *   // Draw a rectangle with the fill color
+     *   t.rect(x, y, 200, 150);
+     * });
+     * ```
      */
     fill(r: number, g?: number, b?: number, a?: number): void;
     /**
@@ -18,34 +46,218 @@ export interface RenderingCapabilities {
      * @param g Green component (0-255, optional)
      * @param b Blue component (0-255, optional)
      * @param a Alpha component (0-255, optional)
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   // Set the background color to black
+     *   t.background(0);
+     *
+     *   // Set stroke color to red and stroke weight to 4 pixels
+     *   t.stroke(255, 0, 0);
+     *   t.strokeWeight(4);
+     *
+     *   // Draw a rectangle with red stroke
+     *   t.rect(100, 100, 200, 150);
+     *
+     *   // Rectangle with both fill and stroke
+     *   t.fill(0, 255, 0);
+     *   t.stroke(0, 0, 255);
+     *   t.strokeWeight(2);
+     *   t.rect(350, 100, 200, 150);
+     * });
+     * ```
      */
     stroke(r: number, g?: number, b?: number, a?: number): void;
     /**
      * Sets the stroke weight (thickness) for subsequent stroke operations
      * @param weight The stroke thickness in pixels
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Thin stroke
+     *   t.stroke(255);
+     *   t.strokeWeight(1);
+     *   t.rect(50, 50, 100, 100);
+     *
+     *   // Thick stroke
+     *   t.strokeWeight(8);
+     *   t.rect(200, 50, 100, 100);
+     * });
+     * ```
      */
     strokeWeight(weight: number): void;
     /**
      * Disables stroke rendering for subsequent operations
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Rectangle with stroke
+     *   t.fill(255, 0, 0);
+     *   t.stroke(0, 255, 0);
+     *   t.strokeWeight(4);
+     *   t.rect(100, 100, 150, 100);
+     *
+     *   // Rectangle without stroke (fill only)
+     *   t.noStroke();
+     *   t.rect(300, 100, 150, 100);
+     * });
+     * ```
      */
     noStroke(): void;
     /**
      * Disables fill rendering for subsequent operations
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Rectangle with fill
+     *   t.fill(255, 0, 0);
+     *   t.stroke(0, 255, 0);
+     *   t.strokeWeight(4);
+     *   t.rect(100, 100, 150, 100);
+     *
+     *   // Rectangle without fill (stroke only)
+     *   t.noFill();
+     *   t.rect(300, 100, 150, 100);
+     * });
+     * ```
      */
     noFill(): void;
     /**
      * Sets the rotation angle for subsequent rendering operations
      * @param degrees The rotation angle in degrees
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Normal rectangle
+     *   t.fill(255, 0, 0);
+     *   t.rect(100, 100, 150, 100);
+     *
+     *   // Rotated rectangle
+     *   t.push(); // Save current state
+     *   t.rotate(45); // Rotate 45 degrees
+     *   t.fill(0, 255, 0);
+     *   t.rect(300, 100, 150, 100);
+     *   t.pop(); // Restore state (no rotation)
+     *
+     *   // Back to normal (no rotation)
+     *   t.fill(0, 0, 255);
+     *   t.rect(500, 100, 150, 100);
+     * });
+     * ```
      */
     rotate(degrees: number): void;
     /**
      * Save the current rendering state (fill, stroke, etc.) to the state stack.
      * Use with {@link pop} to isolate style changes within a block.
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Set initial styles
+     *   t.fill(255, 0, 0);      // Red fill
+     *   t.stroke(0, 255, 0);    // Green stroke
+     *   t.strokeWeight(4);      // Thick stroke
+     *
+     *   t.push(); // Save current state
+     *
+     *   // Change styles temporarily
+     *   t.fill(0, 0, 255);      // Blue fill
+     *   t.stroke(255, 255, 0);  // Yellow stroke
+     *   t.strokeWeight(2);      // Thin stroke
+     *   t.rect(100, 100, 150, 100);
+     *
+     *   t.pop(); // Restore previous state
+     *
+     *   // Back to red fill, green stroke, thick stroke
+     *   t.rect(300, 100, 150, 100);
+     * });
+     * ```
      */
     push(): void;
     /**
      * Restore the most recently saved rendering state from the state stack.
      * Use with {@link push} to isolate style changes within a block.
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Default styles
+     *   t.fill(255);           // White fill
+     *   t.stroke(0);           // Black stroke
+     *   t.strokeWeight(1);     // Thin stroke
+     *
+     *   t.push(); // Save current state
+     *
+     *   // Temporary style changes
+     *   t.fill(255, 0, 0);     // Red fill
+     *   t.strokeWeight(8);     // Thick stroke
+     *   t.rect(50, 50, 100, 100);
+     *
+     *   t.push(); // Save red style state
+     *
+     *   t.fill(0, 255, 0);     // Green fill
+     *   t.noStroke();          // No stroke
+     *   t.rect(200, 50, 100, 100);
+     *
+     *   t.pop(); // Back to red fill, thick stroke
+     *   t.rect(350, 50, 100, 100);
+     *
+     *   t.pop(); // Back to white fill, black stroke, thin stroke
+     *   t.rect(500, 50, 100, 100);
+     * });
+     * ```
      */
     pop(): void;
     /**
@@ -54,6 +266,34 @@ export interface RenderingCapabilities {
      * @param y Y-coordinate of the rectangle
      * @param width Width of the rectangle
      * @param height Height of the rectangle
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   // Set the background color to black
+     *   t.background(0);
+     *
+     *   const centerX = t.width / 2;
+     *   const centerY = t.height / 2;
+     *   const radius = Math.min(t.width, t .height) / 3;
+     *   const speed = 0.02; // Adjust speed of rotation
+     *
+     *   const angle = t.frameCount * speed;
+     *   const x = centerX + Math.cos(angle) * radius - 100;
+     *   const y = centerY + Math.sin(angle) * radius - 50;
+     *
+     *   // Set the fill color to white
+     *   t.fill(255);
+     *
+     *   // Draw a rectangle with the fill color
+     *   t.rect(x, y, 200, 150);
+     * });
+     * ```
      */
     rect(x: number, y: number, width?: number, height?: number): void;
     /**
@@ -63,6 +303,41 @@ export interface RenderingCapabilities {
      * @param y1 Y-coordinate of the line start point
      * @param x2 X-coordinate of the line end point
      * @param y2 Y-coordinate of the line end point
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   // Set the background color to black
+     *   t.background(0);
+     *
+     *   // Draw a simple line
+     *   t.stroke(255, 0, 0); // Red stroke
+     *   t.strokeWeight(2);   // 2px thick
+     *   t.line(100, 100, 300, 200);
+     *
+     *   // Draw an animated rotating line
+     *   t.push();
+     *   t.stroke(0, 255, 0); // Green stroke
+     *   t.strokeWeight(4);   // 4px thick
+     *   t.rotate(t.frameCount * 2); // Rotate based on frame count
+     *   t.line(400, 300, 600, 300);
+     *   t.pop();
+     *
+     *   // Draw a thick yellow line
+     *   t.stroke(255, 255, 0); // Yellow stroke
+     *   t.strokeWeight(8);     // 8px thick
+     *   t.line(200, 400, 400, 500);
+     *
+     *   // Line with no stroke won't be visible
+     *   t.noStroke();
+     *   t.line(500, 100, 700, 200); // This won't render
+     * });
+     * ```
      */
     line(x1: number, y1: number, x2: number, y2: number): void;
     /**
@@ -71,6 +346,34 @@ export interface RenderingCapabilities {
      * @param g Green component (0-255, optional)
      * @param b Blue component (0-255, optional)
      * @param a Alpha component (0-255, optional)
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   // Set the background color to black
+     *   t.background(0);
+     *
+     *   const centerX = t.width / 2;
+     *   const centerY = t.height / 2;
+     *   const radius = Math.min(t.width, t .height) / 3;
+     *   const speed = 0.02; // Adjust speed of rotation
+     *
+     *   const angle = t.frameCount * speed;
+     *   const x = centerX + Math.cos(angle) * radius - 100;
+     *   const y = centerY + Math.sin(angle) * radius - 50;
+     *
+     *   // Set the fill color to white
+     *   t.fill(255);
+     *
+     *   // Draw a rectangle with the fill color
+     *   t.rect(x, y, 200, 150);
+     * });
+     * ```
      */
     background(r: number, g?: number, b?: number, a?: number): void;
     /**

package/dist/types/textmode/mixins/{MixinBase.d.ts → TextmodifierMixin.d.ts}

@@ -13,12 +13,12 @@ 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<TextmodifierCore>>(Base: TBase) => TBase & Constructor<T>;
+export type Mixin<T> = <TBase extends Constructor<TextmodifierContext>>(Base: TBase) => TBase & Constructor<T>;
 /**
- * Core interface that defines the essential properties all mixins can access.
- * This replaces both the old TextmodifierBase class and MixinCore interface.
+ * Essential properties that all mixins can access.
+ * This defines the contract for what mixins can expect to be available.
  */
-export interface TextmodifierCore {
+export interface TextmodifierContext {
     /** Core WebGL renderer @ignore */
     readonly _renderer: GLRenderer;
     /** Font management @ignore */

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

@@ -1,4 +1,5 @@
-export { type Constructor, type Mixin, type TextmodifierCore, applyMixins } from './MixinBase';
+export { type Constructor, type Mixin, type TextmodifierContext, applyMixins } from './TextmodifierMixin';
 export { RenderingMixin, type RenderingCapabilities } from './RenderingMixin';
 export { ExportMixin, type ExportCapabilities } from './ExportMixin';
 export { FontMixin, type FontCapabilities } from './FontMixin';
+export { ConversionMixin, type ConversionCapabilities } from './ConversionMixin';

package/package.json

@@ -1,9 +1,23 @@
 {
   "name": "textmode.js",
-  "version": "0.1.6-beta.5",
+  "version": "0.1.6-beta.7",
   "description": "Apply real-time ASCII conversion to any HTML canvas.",
+  "type": "module",
   "types": "./dist/types/index.d.ts",
-  "main": "./dist/textmode.js",
+  "main": "./dist/textmode.umd.js",
+  "module": "./dist/textmode.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/textmode.esm.js",
+      "require": "./dist/textmode.umd.js"
+    },
+    "./min": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/textmode.esm.min.js",
+      "require": "./dist/textmode.umd.min.js"
+    }
+  },
   "scripts": {
     "dev": "vite --port 5177 --host",
     "build": "vite build && vite build --mode min && tsc",