Class Board

Usage

import { Board } from "@niuee/board";

// however you prefer to get a canvas element that is already in the DOM
const canvasElement = document.querySelector("canvas") as HTMLCanvasElement;
const board = new Board(canvasElement);

const stepFn = board.getStepFunction(); 
const context = board.getContext();

function step(timestamp: number){
   stepFn(timestamp);
// do other stuff after the board has stepped
//.
//.
//.
}

Alternatively you can import the board class as from a subdirectory; this shaves the bundle size a bit but not a lot though. As the board is the overall entry point for the library.

import {Board} from "@niuee/board/boardify";

Constructors

constructor

Properties

_alignCoordinateSystem _canvas _context _fullScreen _kmtStrategy _touchStrategy attributeObserver boardInputObserver boardStateObserver lastUpdateTime windowResizeObserver

Accessors

alignCoordinateSystem camera context controlCenter fullScreen height kmtStrategy limitEntireViewPort maxHalfTransHeight maxHalfTransWidth panHandler touchStrategy width zoomHandler

Methods

attributeCallBack bindFunctions convertWindowPoint2ViewPortPoint convertWindowPoint2WorldCoord on onInput registerEventListeners removeEventListeners setMaxTransWidthAlignedMin step windowResizeHandler

LifeCycle

setup tearDown

Constructors

constructor

Properties

Private _alignCoordinateSystem

_alignCoordinateSystem: boolean = true

Private _canvas

_canvas: HTMLCanvasElement

Private _context

_context: CanvasRenderingContext2D

Private _fullScreen

_fullScreen: boolean = false

Private _kmtStrategy

_kmtStrategy: BoardKMTStrategy

Private _touchStrategy

_touchStrategy: BoardTouchStrategy

Private attributeObserver

attributeObserver: MutationObserver

Private boardInputObserver

boardInputObserver: InputObserver

Private boardStateObserver

boardStateObserver: BoardStateObserver

Private lastUpdateTime

lastUpdateTime: number = 0

Private windowResizeObserver

windowResizeObserver: ResizeObserver

Accessors

read and writealignCoordinateSystem

  • get alignCoordinateSystem(): boolean

  • Returns boolean

  • set alignCoordinateSystem(align): void

  • Parameters

    • align: boolean

    Returns void

    This is an attribute that determines if the coordinate system should be aligned with the one of the HTML canvas element. The default is true.

read and writecamera

  • get camera(): BoardCamera

  • Returns BoardCamera

    The underlying camera of the board. The camera of the board can be switched. The boundaries are based on camera. Meaning you can have camera with different boundaries, and you can switch between them during runtime.

  • set camera(camera): void

  • Parameters

    Returns void

read onlycontext

read and writecontrolCenter

  • get controlCenter(): InputControlCenter

  • Returns InputControlCenter

  • set controlCenter(controlCenter): void

  • Parameters

    Returns void

    The control center of the board. The control center is responsible for handling the input events and dispatch the events to the pan, zoom, and rotation handlers. This exists to decouple the input events from the camera. The control center is the middle man. The default control center is just a simple relay. You can implement a control center that takes in other inputs. For example, an input to start camera animations.

read and writefullScreen

  • get fullScreen(): boolean

  • Returns boolean

    Determines if the board should be full screen. If this is set to true, the width and height of the board will be set to the window's inner width and inner height respectively. If set to true the width and height of the board will resize with the window.

  • set fullScreen(value): void

  • Parameters

    • value: boolean

    Returns void

read and writeheight

  • get height(): number

  • Returns number

  • set height(height): void

  • Parameters

    • height: number

    Returns void

    This is in sync with the canvas height and the camera view port height. This is not the board's height. If the limitEntireViewPort is set to true, the min zoom level is updated based on the height.

read and writekmtStrategy

read and writelimitEntireViewPort

  • get limitEntireViewPort(): boolean

  • Returns boolean

  • set limitEntireViewPort(value): void

  • Parameters

    • value: boolean

    Returns void

    Determines the behavior of the camera when the camera is at the edge of the boundaries. If set to true, the entire view port would not move beyond the boundaries. If set to false, only the center of the camera is bounded by the boundaries.

read onlymaxHalfTransHeight

  • get maxHalfTransHeight(): number

  • Returns number

    The max translation height of the camera. This is the maximum distance the camera can move in the vertical direction.

read onlymaxHalfTransWidth

  • get maxHalfTransWidth(): number

  • Returns number

    The max translation width of the camera. This is the maximum distance the camera can move in the horizontal direction.

read and writepanHandler

  • get panHandler(): PanController

  • Returns PanController

  • set panHandler(handler): void

  • Parameters

    Returns void

    The pan handler of the board. The pan handler is responsible for handling the pan events issued to the camera. It has the final say on how the camera should move. Restrictions and clamping behavior are implemented in the pan handler.

read and writetouchStrategy

read and writewidth

  • get width(): number

  • Returns number

  • set width(width): void

  • Parameters

    • width: number

    Returns void

    This is in sync with the canvas width and the camera view port width. This is not the board's width. If the limitEntireViewPort is set to true, the min zoom level is updated based on the width of the canvas.

read and writezoomHandler

  • get zoomHandler(): ZoomController

  • Returns ZoomController

  • set zoomHandler(handler): void

  • Parameters

    Returns void

    The zoom handler of the board. The zoom handler is responsible for handling the zoom events issued to the camera. It has the final say on how the camera should zoom. Restrictions and clamping behavior are implemented in the zoom handler.

Methods

Private attributeCallBack

Private bindFunctions

Private convertWindowPoint2ViewPortPoint

convertWindowPoint2WorldCoord

  • convertWindowPoint2WorldCoord(clickPointInWindow): Point

  • Parameters

    • clickPointInWindow: Point

      The point in window coordinates to convert.

    Returns Point

    The converted point in world coordinates.

    Converts a point from window coordinates to world coordinates.

on

  • on<K>(eventName, callback): UnSubscribe

  • Type Parameters

    Parameters

    • eventName: K

      The event name to listen for. The events are "pan", "zoom", and "rotate".

    • callback: ((event, cameraState) => void)

      The callback function to call when the event is triggered. The event provided to the callback is different for the different events.

    Returns UnSubscribe

    The converted point in world coordinates.

    Add an camera movement event listener. The events are "pan", "zoom", and "rotate".

onInput

  • onInput<K>(eventName, callback): UnsubscribeToInput

  • Type Parameters

    Parameters

    • eventName: K
    • callback: ((event) => void)

    Returns UnsubscribeToInput

    Add an input event listener. The events are "pan", "zoom", and "rotate". This is different from the camera event listener as this is for input events. Input event does not necesarily mean that the camera will move. The input event is the event that is triggered when the user interacts with the board.

Private registerEventListeners

Private removeEventListeners

setMaxTransWidthAlignedMin

  • setMaxTransWidthAlignedMin(value): void

  • Parameters

    • value: number

    Returns void

step

  • step(timestamp): void

  • Parameters

    • timestamp: number

    Returns void

    This is the step function that is called in the animation frame. This function is responsible for updating the canvas context and the camera state.

Private windowResizeHandler

LifeCycle

setup

  • setup(): void

  • Returns void

    This function is used to set up the board. It adds all the event listeners and starts the resize observer and the attribute observer.

tearDown

  • tearDown(): void

  • Returns void

    This function is used to clean up the board. It removes all the event listeners and disconnects the resize observer and the attribute observer.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc