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

Accessors

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

Methods

convertWindowPoint2WorldCoord on onInput setMaxTransWidthAlignedMin step

LifeCycle

setup tearDown

Constructors

constructor

Accessors

alignCoordinateSystem

  • get alignCoordinateSystem(): boolean

    Returns boolean

  • set alignCoordinateSystem(align: boolean): 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.

    Parameters

    • align: boolean

    Returns void

camera

context

controlCenter

fullScreen

  • get fullScreen(): 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.

    Returns boolean

  • set fullScreen(value: boolean): void

    Parameters

    • value: boolean

    Returns void

height

  • get height(): number

    Returns number

  • set height(height: number): 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.

    Parameters

    • height: number

    Returns void

kmtStrategy

limitEntireViewPort

  • get limitEntireViewPort(): boolean

    Returns boolean

  • set limitEntireViewPort(value: boolean): 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.

    Parameters

    • value: boolean

    Returns void

maxHalfTransHeight

  • get maxHalfTransHeight(): number

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

    Returns number

maxHalfTransWidth

  • get maxHalfTransWidth(): number

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

    Returns number

touchStrategy

width

  • get width(): number

    Returns number

  • set width(width: number): 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.

    Parameters

    • width: number

    Returns void

Methods

convertWindowPoint2WorldCoord

  • convertWindowPoint2WorldCoord(clickPointInWindow: Point): Point

    Converts a point from window coordinates to world coordinates.

    Parameters

    • clickPointInWindow: Point

      The point in window coordinates to convert.

    Returns Point

    The converted point in world coordinates.

on

  • on<K extends keyof CameraEventMap>(
        eventName: K,
        callback: (event: CameraEventMap[K], cameraState: CameraState) => void,
    ): UnSubscribe

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

    Type Parameters

    Parameters

    • eventName: K

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

    • callback: (event: CameraEventMap[K], cameraState: 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.

onInput

setMaxTransWidthAlignedMin

  • setMaxTransWidthAlignedMin(value: number): void

    Parameters

    • value: number

    Returns void

step

  • step(timestamp: number): 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.

    Parameters

    • timestamp: number

    Returns void

LifeCycle

setup

  • setup(): 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.

    Returns void

tearDown

  • tearDown(): 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.

    Returns void

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods
LifeCycle