uē-tôo

Appearance

@ue-too/board ​

Main entry point for the @ue-too/board package.

Remarks ​

This package provides a high-performance infinite canvas with pan, zoom, and rotate capabilities. The Board class is the primary API that orchestrates camera management, input handling, and coordinate transformations for building interactive 2D canvas applications.

Key Exports ​

  • Board: Main class for creating an infinite canvas with camera controls
  • Camera System: Camera classes, rigs, and multiplexers for viewport management
  • Input System: Input parsers, state machines, and orchestration for user interaction
  • Utilities: Helper functions for coordinate conversion, math operations, and more

Example ​

Basic usage

typescript
import { Board } from '@ue-too/board';

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const board = new Board(canvas);

function draw(timestamp: number) {
  board.step(timestamp);

  if (board.context) {
    board.context.fillRect(0, 0, 100, 100);
  }

  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

Board ​

Camera ​

Camera Rig ​

Canvas Position ​

Coordinate Conversion ​

Drawing Utilities ​

Input Flow Control ​

Input Interpretation ​

Input State Machine ​

Input State Machine - KMT ​

Input State Machine - Touch ​

Matrix ​

Observable Pattern ​

Other ​

Raw Input Parser ​

Raw Input Publisher ​

Utils ​