Class BaseCamera

This is the base class for the camera. It is used to create a camera that can be used to view a board.

If there's only one class that you want to use in this library, it is this one. The is the back bone of the board camera system.

With the CameraRig class, you can create a camera system that can be used to achieve the infinite canvas effect.

This class is not observable (you can not register a callback for camera state changes). If you need to observe the camera state, use the DefaultBoardCamera class instead.

Implements

BoardCamera

Camera

boundaries

get boundaries(): Boundaries
The translation boundaries of the camera in the world coordinate system.

Returns Boundaries
Implementation of BoardCamera.boundaries
- Defined in board-camera/base-camera.ts:60
set boundaries(boundaries: Boundaries): void
Parameters
- boundaries: Boundaries
Returns void
Implementation of BoardCamera.boundaries
- Defined in board-camera/base-camera.ts:64

position

get position(): Point
The position of the camera in the world coordinate system.

Returns Point
Implementation of BoardCamera.position
- Defined in board-camera/base-camera.ts:99

viewPortHeight

get viewPortHeight(): number
The height of the viewport. (The height of the canvas in css pixels)

Returns number
Implementation of BoardCamera.viewPortHeight
- Defined in board-camera/base-camera.ts:86
set viewPortHeight(height: number): void
Parameters
- height: number
Returns void
Implementation of BoardCamera.viewPortHeight
- Defined in board-camera/base-camera.ts:90

viewPortWidth

get viewPortWidth(): number
The width of the viewport. (The width of the canvas in css pixels)

Returns number
Implementation of BoardCamera.viewPortWidth
- Defined in board-camera/base-camera.ts:73
set viewPortWidth(width: number): void
Parameters
- width: number
Returns void
Implementation of BoardCamera.viewPortWidth
- Defined in board-camera/base-camera.ts:77

zoomBoundaries

get zoomBoundaries(): ZoomLevelLimits
The boundaries of the zoom level of the camera.

Returns ZoomLevelLimits
Implementation of BoardCamera.zoomBoundaries
- Defined in board-camera/base-camera.ts:138
set zoomBoundaries(zoomBoundaries: ZoomLevelLimits): void
The boundaries of the zoom level of the camera.
Parameters
- zoomBoundaries: ZoomLevelLimits
Returns void
Implementation of BoardCamera.zoomBoundaries
- Defined in board-camera/base-camera.ts:147

zoomLevel

get zoomLevel(): number
The zoom level of the camera.

Returns number
Implementation of BoardCamera.zoomLevel
- Defined in board-camera/base-camera.ts:129

convertFromViewPort2WorldSpace

convertFromViewPort2WorldSpace(point: Point): Point
Converts a point from the viewport coordinate system to the world coordinate system.
Parameters
- point: Point
  The point in the viewport coordinate system.
Returns Point
The point in the world coordinate system.
Implementation of BoardCamera.convertFromViewPort2WorldSpace
- Defined in board-camera/base-camera.ts:288

convertFromWorld2ViewPort

convertFromWorld2ViewPort(point: Point): Point
Converts a point from the world coordinate system to the viewport coordinate system.
Parameters
- point: Point
  The point in the world coordinate system.
Returns Point
The point in the viewport coordinate system.
Implementation of BoardCamera.convertFromWorld2ViewPort
- Defined in board-camera/base-camera.ts:300

getCameraOriginInWindow

getCameraOriginInWindow(centerInWindow: Point): Point
The origin of the camera in the window coordinate system.
Parameters
- centerInWindow: Point
Returns Point
Deprecated
Implementation of BoardCamera.getCameraOriginInWindow
- Defined in board-camera/base-camera.ts:276

invertFromWorldSpace2ViewPort

invertFromWorldSpace2ViewPort(point: Point): Point
Inverts a point from the world coordinate system to the viewport coordinate system.
Parameters
- point: Point
  The point in the world coordinate system.
Returns Point
The point in the viewport coordinate system.
- Defined in board-camera/base-camera.ts:312

Other

constructor

new BaseCamera(
    viewPortWidth?: number,
    viewPortHeight?: number,
    position?: Point,
    rotation?: number,
    zoomLevel?: number,
    boundaries?: Boundaries,
    zoomLevelBoundaries?: ZoomLevelLimits,
    rotationBoundaries?: RotationLimits,
): BaseCamera
Parameters
- viewPortWidth: number = 1000
  The width of the viewport. (The width of the canvas in css pixels)
- viewPortHeight: number = 1000
  The height of the viewport. (The height of the canvas in css pixels)
- position: Point = { x: 0, y: 0 }
  The position of the camera in the world coordinate system
- rotation: number = 0
  The rotation of the camera in the world coordinate system
- zoomLevel: number = 1
  The zoom level of the camera
- boundaries: Boundaries = { min: { x: -10000, y: -10000 }, max: { x: 10000, y: 10000 } }
  The boundaries of the camera in the world coordinate system
- zoomLevelBoundaries: ZoomLevelLimits = { min: 0.1, max: 10 }
  The boundaries of the zoom level of the camera
- rotationBoundaries: RotationLimits = undefined
  The boundaries of the rotation of the camera
Returns BaseCamera
- Defined in board-camera/base-camera.ts:44

rotation

get rotation(): number
Returns number
Implementation of BoardCamera.rotation
- Defined in board-camera/base-camera.ts:204

rotationBoundaries

get rotationBoundaries(): RotationLimits
Returns RotationLimits
Implementation of BoardCamera.rotationBoundaries
- Defined in board-camera/base-camera.ts:208
set rotationBoundaries(rotationBoundaries: RotationLimits): void
Parameters
- rotationBoundaries: RotationLimits
Returns void
Implementation of BoardCamera.rotationBoundaries
- Defined in board-camera/base-camera.ts:212

getTransform

getTransform(
devicePixelRatio: number,
alignCoorindate: boolean,
): { a: number; b: number; c: number; d: number; e: number; f: number }
The order of the transformation is as follows:
1. Scale (scale the context using the device pixel ratio)
2. Translation (move the origin of the context to the center of the canvas)
3. Rotation (rotate the context negatively the rotation of the camera)
4. Zoom (scale the context using the zoom level of the camera)
5. Translation (move the origin of the context to the position of the camera in the context coordinate system)
Parameters
- devicePixelRatio: number
  The device pixel ratio of the canvas
- alignCoorindate: boolean
  Whether to align the coordinate system to the camera's position
Returns { a: number; b: number; c: number; d: number; e: number; f: number }
The transformation matrix
Implementation of BoardCamera.getTransform
- Defined in board-camera/base-camera.ts:233

setHorizontalBoundaries

setHorizontalBoundaries(min: number, max: number): void
Parameters
- min: number
- max: number
Returns void
Implementation of BoardCamera.setHorizontalBoundaries
- Defined in board-camera/base-camera.ts:320

setMaxZoomLevel

setMaxZoomLevel(maxZoomLevel: number): boolean
Parameters
- maxZoomLevel: number
Returns boolean
- Defined in board-camera/base-camera.ts:156

setMinZoomLevel

setMinZoomLevel(minZoomLevel: number): boolean
Parameters
- minZoomLevel: number
Returns boolean
Implementation of BoardCamera.setMinZoomLevel
- Defined in board-camera/base-camera.ts:167

setPosition

setPosition(destination: Point): boolean
This function is used to set the position of the camera.This function has a guard that checks if the destination point is within the boundaries of the camera. If the destination point is not within the boundaries, the function will return false and the position will not be updated. If the destination point is within the boundaries, the function will return true and the position will be updated.
Parameters
- destination: Point
  The destination point of the camera.
Returns boolean
Whether the position is set successfully.
Implementation of BoardCamera.setPosition
- Defined in board-camera/base-camera.ts:112

setRotation

setRotation(rotation: number): boolean
Parameters
- rotation: number
Returns boolean
Implementation of BoardCamera.setRotation
- Defined in board-camera/base-camera.ts:255

setVerticalBoundaries

setVerticalBoundaries(min: number, max: number): void
Parameters
- min: number
- max: number
Returns void
Implementation of BoardCamera.setVerticalBoundaries
- Defined in board-camera/base-camera.ts:337

setZoomLevel

setZoomLevel(zoomLevel: number): boolean
This function is used to set the zoom level of the camera.This function has a guard that checks if the zoom level is within the boundaries of the camera. If the zoom level is not within the boundaries, the function will return false and the zoom level will not be updated. If the zoom level is within the boundaries, the function will return true and the zoom level will be updated.
Parameters
- zoomLevel: number
  The zoom level of the camera.
Returns boolean
Whether the zoom level is set successfully.
Implementation of BoardCamera.setZoomLevel
- Defined in board-camera/base-camera.ts:190

Class BaseCamera

Implements

Index

Camera

Other

Camera

boundaries

Returns Boundaries

Parameters

Returns void

position

Returns Point

viewPortHeight

Returns number

Parameters

Returns void

viewPortWidth

Returns number

Parameters

Returns void

zoomBoundaries

Returns ZoomLevelLimits

Parameters

Returns void

zoomLevel

Returns number

convertFromViewPort2WorldSpace

Parameters

Returns Point

convertFromWorld2ViewPort

Parameters

Returns Point

getCameraOriginInWindow

Parameters

Returns Point

Deprecated

invertFromWorldSpace2ViewPort

Parameters

Returns Point

Other

constructor

Parameters

Returns BaseCamera

rotation

Returns number

rotationBoundaries

Returns RotationLimits

Parameters

Returns void

getTransform

Parameters

Returns { a: number; b: number; c: number; d: number; e: number; f: number }

setHorizontalBoundaries

Parameters

Returns void

setMaxZoomLevel

Parameters

Returns boolean

setMinZoomLevel

Parameters

Returns boolean

setPosition

Parameters

Returns boolean

setRotation

Parameters

Returns boolean

setVerticalBoundaries

Parameters

Returns void

setZoomLevel

Parameters

Returns boolean

Settings

On This Page