Class Board

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.

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.

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)

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.

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.

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.

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.

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.

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

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

The parser used to handle touch events. The default parser is the DefaultTouchParser. You can have your own parser by implementing the BoardTouchParser interface.

Converts a point from window coordinates to world coordinates.

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.

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.

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.

This function sets the max translation width of the camera while fixing the minimum x boundary.

This function sets the max translation width of the camera while fixing the minimum x boundary.

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

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