@ue-too/board/boardify/index.d.ts

import { ObservableBoardCamera } from '../camera/interface';
import { KMTEventParser, EventTargetWithPointerEvents } from '../input-interpretation/raw-input-parser';
import { TouchEventParser } from '../input-interpretation/raw-input-parser';
import { Point } from '@ue-too/math';
import { CameraEventMap, CameraState, UnSubscribe } from '../camera/update-publisher';
import { UnsubscribeToUserRawInput, RawUserInputEventMap } from '../input-interpretation/raw-input-publisher';
import { CameraMux } from '../camera/camera-mux';
import { CameraRig } from '../camera/camera-rig';
/**
 * Usage
 * ```typescript
 * 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.
 *
 * ```typescript
 * import { Board } from "@niuee/board/boardify";
 * ```
 * @category Board
 *
 */
export default class Board {
    private _canvas;
    private _context;
    private _reversedContext;
    private _kmtParser;
    private _touchParser;
    private _alignCoordinateSystem;
    private _fullScreen;
    private cameraRig;
    private boardInputPublisher;
    private _observableInputTracker;
    private _touchInputTracker;
    private lastUpdateTime;
    private attributeObserver;
    private _canvasProxy;
    constructor(canvas: HTMLCanvasElement, eventTarget?: EventTargetWithPointerEvents);
    private calibrateCanvasDimensions;
    private registerEventListeners;
    private removeEventListeners;
    attach(canvas: HTMLCanvasElement): void;
    /**
     * @group LifeCycle
     * @description This function is used to set up the board. It adds all the event listeners and starts the resize observer and the attribute observer.
     */
    setup(): void;
    /**
     * @group LifeCycle
     * @description This function is used to clean up the board. It removes all the event listeners and disconnects the resize observer and the attribute observer.
     */
    tearDown(): void;
    private bindFunctions;
    /**
     * @group Properties
     * @description 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.
     */
    set width(width: number);
    get width(): number;
    /**
     * @group Properties
     * @description 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.
     */
    set height(height: number);
    get height(): number;
    /**
     * @description 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.
     * If you set this to true, the coordinate system will be aligned with the one of the HTML canvas element.
     * If you change this value during runtime, you should update the context to be aligned with the new coordinate system. (just call board.context again)
     */
    set alignCoordinateSystem(align: boolean);
    get alignCoordinateSystem(): boolean;
    /**
     * @description 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,
     * and the width and height of the board will resize with the window.
     */
    get fullScreen(): boolean;
    set fullScreen(value: boolean);
    /**
     * @description The context used to draw on the canvas.
     * If alignCoordinateSystem is false, this returns a proxy that automatically negates y-coordinates for relevant drawing methods.
     */
    get context(): CanvasRenderingContext2D;
    /**
     * @description 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.
     */
    set limitEntireViewPort(value: boolean);
    get limitEntireViewPort(): boolean;
    /**
     * @description The strategy used to handle the keyboard, mouse events. The default strategy is the DefaultBoardKMTStrategy.
     * You can implement your own strategy by implementing the BoardKMTStrategy interface.
     */
    set kmtParser(parser: KMTEventParser);
    get kmtParser(): KMTEventParser;
    /**
     * @description The parser used to handle touch events. The default parser is the DefaultTouchParser.
     * You can have your own parser by implementing the BoardTouchParser interface.
     */
    set touchParser(parser: TouchEventParser);
    get touchParser(): TouchEventParser;
    /**
     * @description The underlying camera of the board. The camera of the board can be switched.
     * The boundaries are based on camera meaning you can have cameras with different boundaries, and you can switch between them during runtime.
     */
    get camera(): ObservableBoardCamera;
    set camera(camera: ObservableBoardCamera);
    get cameraMux(): CameraMux;
    set cameraMux(cameraMux: CameraMux);
    /**
     * @description 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.
     * @param timestamp
     */
    step(timestamp: number): void;
    /**
     * @description Converts a point from window coordinates to world coordinates.
     * @param clickPointInWindow The point in window coordinates to convert.
     * @returns The converted point in world coordinates.
     */
    convertWindowPoint2WorldCoord(clickPointInWindow: Point): Point;
    /**
     * @description Add an camera movement event listener. The events are "pan", "zoom", and "rotate".
     * There's also an "all" event that will be triggered when any of the above events are triggered.
     * @param eventName The event name to listen for. The events are "pan", "zoom", and "rotate".
     * @param callback The callback function to call when the event is triggered. The event provided to the callback is different for the different events.
     * @returns The converted point in world coordinates.
     */
    on<K extends keyof CameraEventMap>(eventName: K, callback: (event: CameraEventMap[K], cameraState: CameraState) => void): UnSubscribe;
    /**
     * @description 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.
     * There's also an "all" event that will be triggered when any of the above events are triggered.
     * Input event does not necesarily mean that the camera will move. The input events are the events triggered when the user interacts with the board.
     * @param eventName
     * @param callback
     * @returns
     */
    onInput<K extends keyof RawUserInputEventMap>(eventName: K, callback: (event: RawUserInputEventMap[K]) => void): UnsubscribeToUserRawInput;
    /**
     * @description The max translation height of the camera. This is the maximum distance the camera can move in the vertical direction.
     */
    get maxHalfTransHeight(): number | undefined;
    /**
     * @description The max translation width of the camera. This is the maximum distance the camera can move in the horizontal direction.
     */
    get maxHalfTransWidth(): number | undefined;
    private attributeCallBack;
    /**
     * @group Helper Methods
     * @description This function sets the max translation width of the camera while fixing the minimum x boundary.
     */
    setMaxTransWidthWithFixedMinBoundary(value: number): void;
    /**
     * @group Helper Methods
     * @description This function sets the max translation width of the camera while fixing the minimum x boundary.
     */
    setMaxTransWidthWithFixedMaxBoundary(value: number): void;
    get restrictRelativeXTranslation(): boolean;
    get restrictRelativeYTranslation(): boolean;
    get restrictXTranslation(): boolean;
    get restrictYTranslation(): boolean;
    set restrictRelativeXTranslation(value: boolean);
    set restrictRelativeYTranslation(value: boolean);
    set restrictXTranslation(value: boolean);
    set restrictYTranslation(value: boolean);
    get restrictZoom(): boolean;
    set restrictZoom(value: boolean);
    get restrictRotation(): boolean;
    set restrictRotation(value: boolean);
    get clampTranslation(): boolean;
    set clampTranslation(value: boolean);
    get clampZoom(): boolean;
    set clampZoom(value: boolean);
    get clampRotation(): boolean;
    set clampRotation(value: boolean);
    getCameraRig(): CameraRig;
}