@ue-too/board
Version:
190 lines (189 loc) • 8.19 kB
TypeScript
import { Point } from '@ue-too/math';
import { Boundaries } from './utils/position';
import { ZoomLevelLimits } from './utils/zoom';
import { RotationLimits } from './utils/rotation';
import { BoardCamera } from './interface';
import { TransformationMatrix } from './utils/matrix';
/**
*
* @description 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 {@link 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 {@link DefaultBoardCamera} class instead.
* @category Camera
*/
export default class BaseCamera implements BoardCamera {
private _position;
private _rotation;
private _zoomLevel;
private currentCachedTransform;
private _viewPortWidth;
private _viewPortHeight;
private _boundaries?;
private _zoomBoundaries?;
private _rotationBoundaries?;
/**
* @param position The position of the camera in the world coordinate system
* @param rotation The rotation of the camera in the world coordinate system
* @param zoomLevel The zoom level of the camera
* @param viewPortWidth The width of the viewport. (The width of the canvas in css pixels)
* @param viewPortHeight The height of the viewport. (The height of the canvas in css pixels)
* @param boundaries The boundaries of the camera in the world coordinate system
* @param zoomLevelBoundaries The boundaries of the zoom level of the camera
* @param rotationBoundaries The boundaries of the rotation of the camera
*/
constructor(viewPortWidth?: number, viewPortHeight?: number, position?: Point, rotation?: number, zoomLevel?: number, boundaries?: Boundaries, zoomLevelBoundaries?: ZoomLevelLimits, rotationBoundaries?: RotationLimits);
/**
* @description The translation boundaries of the camera in the world coordinate system.
*
* @category Camera
*/
get boundaries(): Boundaries | undefined;
set boundaries(boundaries: Boundaries | undefined);
/**
* @description The width of the viewport. (The width of the canvas in css pixels)
*
* @category Camera
*/
get viewPortWidth(): number;
set viewPortWidth(width: number);
/**
* @description The height of the viewport. (The height of the canvas in css pixels)
*
* @category Camera
*/
get viewPortHeight(): number;
set viewPortHeight(height: number);
/**
* @description The position of the camera in the world coordinate system.
*
* @category Camera
*/
get position(): Point;
/**
* @description This function is used to set the position of the camera.
* @param destination The destination point of the camera.
* @returns Whether the position is set successfully.
*
* @description 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.
*/
setPosition(destination: Point): boolean;
/**
* @description The zoom level of the camera.
*
* @category Camera
*/
get zoomLevel(): number;
/**
* @description The boundaries of the zoom level of the camera.
*
* @category Camera
*/
get zoomBoundaries(): ZoomLevelLimits | undefined;
/**
* @description The boundaries of the zoom level of the camera.
*
* @category Camera
*/
set zoomBoundaries(zoomBoundaries: ZoomLevelLimits | undefined);
setMaxZoomLevel(maxZoomLevel: number): boolean;
setMinZoomLevel(minZoomLevel: number): boolean;
/**
* @description This function is used to set the zoom level of the camera.
* @param zoomLevel The zoom level of the camera.
* @returns Whether the zoom level is set successfully.
*
* @description 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.
*/
setZoomLevel(zoomLevel: number): boolean;
get rotation(): number;
get rotationBoundaries(): RotationLimits | undefined;
set rotationBoundaries(rotationBoundaries: RotationLimits | undefined);
/**
* @description 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)
*
* @param devicePixelRatio The device pixel ratio of the canvas
* @param alignCoorindate Whether to align the coordinate system to the camera's position
* @returns The transformation matrix
*/
getTransform(devicePixelRatio: number, alignCoorindate: boolean): {
cached: boolean;
a: number;
b: number;
c: number;
d: number;
e: number;
f: number;
};
getTRS(devicePixelRatio: number, alignCoorindate: boolean): {
translation: {
x: number;
y: number;
};
rotation: number;
scale: {
x: number;
y: number;
};
};
/**
* @description This function is used to set the camera using a transformation matrix.
* The transformation matrix is the same as the one returned by the {@link getTransform} function. (by performing the transformations in the same order)
* The transformation matrix would be decomposed into SCALE(devicePixelRatio), TRANSLATION(center of the canvas), ROTATION(-rotation), SCALE(zoom level), and TRANSLATION(position).
* The position, zoom level, and rotation are still bounded by the boundaries of the camera.
*
* @param transformationMatrix The transformation matrix.
*
* @category Camera
*/
setUsingTransformationMatrix(transformationMatrix: TransformationMatrix): void;
setRotation(rotation: number): boolean;
/**
* @description The origin of the camera in the window coordinate system.
* @deprecated
*
* @category Camera
*/
getCameraOriginInWindow(centerInWindow: Point): Point;
/**
* @description Converts a point from the viewport coordinate system to the world coordinate system.
*
* @param point The point in the viewport coordinate system.
* @returns The point in the world coordinate system.
*
* @category Camera
*/
convertFromViewPort2WorldSpace(point: Point): Point;
/**
* @description Converts a point from the world coordinate system to the viewport coordinate system.
*
* @param point The point in the world coordinate system.
* @returns The point in the viewport coordinate system.
*
* @category Camera
*/
convertFromWorld2ViewPort(point: Point): Point;
/**
* @description Inverts a point from the world coordinate system to the viewport coordinate system.
*
* @param point The point in the world coordinate system.
* @returns The point in the viewport coordinate system.
*
* @category Camera
*/
invertFromWorldSpace2ViewPort(point: Point): Point;
setHorizontalBoundaries(min: number, max: number): void;
setVerticalBoundaries(min: number, max: number): void;
}