@ue-too/board 0.5.2 → 0.6.0

package/src/camera/update-publisher.ts

@@ -1,222 +0,0 @@
-import { Point } from "@ue-too/math";
-import { Observable, Observer, SubscriptionOptions } from "../utils/observable";
-
-/**
- * @description The payload for the pan event.
- * 
- * @category Camera
- */
-export type CameraPanEventPayload = {
-    diff: Point;
-}
-
-/**
- * @description The payload for the zoom event.
- * 
- * @category Camera
- */
-export type CameraZoomEventPayload = {
-    deltaZoomAmount: number;
-}
-
-/**
- * @description The payload for the rotate event.
- * 
- * @category Camera
- */
-export type CameraRotateEventPayload = {
-    deltaRotation: number;
-}
-
-/**
- * @description The mapping of the camera events.
- * This is primarily used for type inference.
- * 
- * @category Camera
- */
-export type CameraEventMap = {
-    "pan": CameraPanEventPayload,
-    "zoom": CameraZoomEventPayload,
-    "rotate": CameraRotateEventPayload,
-    "all": AllCameraEventPayload,
-}
-
-/**
- * @description The type of the camera rotate event.
- * The type is for discriminating the event type when the all event is triggered.
- * 
- * @category Camera
- */
-export type CameraRotateEvent = {
-    type: "rotate",
-} & CameraRotateEventPayload;
-
-/**
- * @description The type of the camera pan event.
- * The type is for discriminating the event type when the all event is triggered.
- * 
- * @category Camera
- */
-export type CameraPanEvent = {
-    type: "pan",
-} & CameraPanEventPayload;
-
-/**
- * @description The type of the camera zoom event.
- * The type is for discriminating the event type when the all event is triggered.
- * 
- * @category Camera
- */
-export type CameraZoomEvent = {
-    type: "zoom",
-} & CameraZoomEventPayload;
-
-/**
- * @description The type of the camera state.
- * 
- * @category Camera
- */
-export type CameraState = {
-    position: Point;
-    zoomLevel: number;
-    rotation: number;
-}
-
-/**
- * @description The payload type of the "all" camera event payload.
- * 
- * @category Camera
- */
-export type AllCameraEventPayload = CameraRotateEvent | CameraPanEvent | CameraZoomEvent;
-
-/**
- * @description The callback function type for the camera event.
- * 
- * @category Camera
- */
-export type Callback<K extends keyof CameraEventMap> = (event: CameraEventMap[K], cameraState: CameraState)=>void;
-
-/**
- * @description The callback function type for the "all" camera event.
- * 
- * @category Camera
- */
-export type ConslidateCallback = (payload: AllCameraEventPayload, cameraState: CameraState) => void;
-
-/**
- * @description The type of the unsubscribe function.
- * 
- * @category Camera
- */
-export type UnSubscribe = () => void;
-
-/**
- * @description The observer type for the pan event.
- * 
- * @category Camera
- */
-export type PanObserver = Callback<"pan">;
-
-/**
- * @description The observer type for the zoom event.
- * 
- * @category Camera
- */
-export type ZoomObserver = Callback<"zoom">;
-
-/**
- * @description The observer type for the rotate event.
- * 
- * @category Camera
- */
-export type RotateObserver = Callback<"rotate">;
-
-/**
- * @description The observer type for the "all" camera event.
- * 
- * @category Camera
- */
-export type AllObserver = Callback<"all">;
-
-/**
- * @description The camera update publisher.
- * 
- * @category Camera
- */
-export class CameraUpdatePublisher {
-
-    private pan: Observable<Parameters<Callback<"pan">>>;
-    private zoom: Observable<Parameters<Callback<"zoom">>>;
-    private rotate: Observable<Parameters<Callback<"rotate">>>;
-    private all: Observable<Parameters<Callback<"all">>>;
-
-    constructor() {
-        this.pan = new Observable<Parameters<Callback<"pan">>>();
-        this.zoom = new Observable<Parameters<Callback<"zoom">>>();
-        this.rotate = new Observable<Parameters<Callback<"rotate">>>();
-        this.all = new Observable<Parameters<Callback<"all">>>();
-    }
-
-    /**
-     * @description Notify the pan event.
-     * Will also notify the "all" event.
-     * 
-     * @category Camera
-     */
-    notifyPan(event: CameraEventMap["pan"], cameraState: CameraState): void {
-        this.pan.notify(event, cameraState);
-        this.all.notify({type: "pan", diff: event.diff}, cameraState);
-    }
-
-    /**
-     * @description Notify the zoom event.
-     * Will also notify the "all" event.
-     * 
-     * @category Camera
-     */
-    notifyZoom(event: CameraEventMap["zoom"], cameraState: CameraState): void {
-        this.zoom.notify(event, cameraState);
-        this.all.notify({type: "zoom", deltaZoomAmount: event.deltaZoomAmount}, cameraState);
-    }
-
-    /**
-     * @description Notify the rotate event.
-     * Will also notify the "all" event.
-     * 
-     * @category Camera
-     */
-    notifyRotate(event: CameraEventMap["rotate"], cameraState: CameraState): void {
-        this.rotate.notify(event, cameraState);
-        this.all.notify({type: "rotate", deltaRotation: event.deltaRotation}, cameraState);
-    }
-    
-    /**
-     * @description Subscribe to the camera event.
-     * You can also pass in the abort controller signal within the options to cancel the subscription. Like this:
-     * ```ts
-     * const controller = new AbortController();
-     * const unSubscribe = on("pan", (event, cameraState)=>{}, {signal: controller.signal});
-     * 
-     * // later in other place where you want to unsubscribe
-     * controller.abort();
-     *
-     * ```
-     * This means you can cancel multiple subscriptions by aborting the same controller. Just like regular event listeners.
-     * 
-     * @category Camera
-     */
-    on<K extends keyof CameraEventMap>(eventName: K, callback: (event: CameraEventMap[K], cameraState: CameraState)=>void, options?: SubscriptionOptions): UnSubscribe {
-        switch (eventName){
-        case "pan":
-            return this.pan.subscribe(callback as Observer<Parameters<Callback<"pan">>>, options);
-        case "zoom":
-            return this.zoom.subscribe(callback as Observer<Parameters<Callback<"zoom">>>, options);
-        case "rotate":
-            return this.rotate.subscribe(callback as Observer<Parameters<Callback<"rotate">>>, options);
-        case "all":
-            return this.all.subscribe(callback as Observer<Parameters<Callback<"all">>>, options);
-        default:
-            throw new Error(`Invalid event name: ${eventName}`);
-        }
-    }
-}

package/src/camera/utils/coordinate-conversion.ts

@@ -1,160 +0,0 @@
-import { Point, PointCal } from "@ue-too/math";
-import { multiplyMatrix, TransformationMatrix } from "./matrix";
-
-/**
- * @description Finds the world space coordinate of the interest point if the camera is at target position.
- * The target position is the "would be" position of the camera in world space.
- * The interest point is the point in view port space where the "bottom left" corner is the origin.
- * 
- * @category Camera
- */
-export function convert2WorldSpaceWRT(targetPosition: Point, interestPoint: Point, viewPortWidth: number, viewPortHeight: number, cameraZoomLevel: number, cameraRotation: number): Point{
-    let cameraFrameCenter = {x: viewPortWidth / 2, y: viewPortHeight / 2};
-    let delta2Point = PointCal.subVector(interestPoint, cameraFrameCenter);
-    delta2Point = PointCal.multiplyVectorByScalar(delta2Point, 1 / cameraZoomLevel);
-    delta2Point = PointCal.rotatePoint(delta2Point, cameraRotation);
-    return PointCal.addVector(targetPosition, delta2Point);
-}
-
-/**
- * @description Converts the point to world space.
- * The point is in the viewport space where the "bottom left" corner is the origin.
- * Camera position is the position of the camera in world space.
- * 
- * @category Camera
- */
-export function convert2WorldSpace(point: Point, viewPortWidth: number, viewPortHeight: number, cameraPosition: Point, cameraZoomLevel: number, cameraRotation: number): Point{
-    let cameraFrameCenter = {x: viewPortWidth / 2, y: viewPortHeight / 2};
-    let delta2Point = PointCal.subVector(point, cameraFrameCenter);
-    delta2Point = PointCal.multiplyVectorByScalar(delta2Point, 1 / cameraZoomLevel);
-    delta2Point = PointCal.rotatePoint(delta2Point, cameraRotation);
-    return PointCal.addVector(cameraPosition, delta2Point);
-}
-
-/**
- * @description Converts the point to world space.
- * The point is in the viewport space where the origin is at the center of the viewport.
- * Camera position is the position of the camera in world space.
- * 
- * @category Camera
- */
-export function convert2WorldSpaceAnchorAtCenter(point: Point, cameraPosition: Point, cameraZoomLevel: number, cameraRotation: number): Point{
-    const scaledBack = PointCal.multiplyVectorByScalar(point, 1 / cameraZoomLevel);
-    const rotatedBack = PointCal.rotatePoint(scaledBack, cameraRotation);
-    const withOffset = PointCal.addVector(rotatedBack, cameraPosition);
-    return withOffset;
-}
-
-/**
- * @description Converts a point in "stage/context/world" space to view port space.
- * The origin of the viewport is at the center of the viewport.
- * The point is in world space.
- * The camera position is the position of the camera in world space.
- * 
- * @category Camera
- */
-export function convert2ViewPortSpaceAnchorAtCenter(point: Point, cameraPosition: Point, cameraZoomLevel: number, cameraRotation: number): Point{
-    const withOffset = PointCal.subVector(point, cameraPosition);
-    const scaled = PointCal.multiplyVectorByScalar(withOffset, cameraZoomLevel);
-    const rotated = PointCal.rotatePoint(scaled, -cameraRotation);
-    return rotated;
-}
-
-/**
- * @description Converts a point in "stage/context/world" space to view port space.
- * The origin of the view port is at the bottom left corner.
- * The point is in world space.
- * The camera position is the position of the camera in world space.
- * 
- * @category Camera
- */
-export function invertFromWorldSpace(point: Point, viewPortWidth: number, viewPortHeight: number, cameraPosition: Point, cameraZoomLevel: number, cameraRotation: number): Point{
-    let cameraFrameCenter = {x: viewPortWidth / 2, y: viewPortHeight / 2};
-    let delta2Point = PointCal.subVector(point, cameraPosition);
-    delta2Point = PointCal.rotatePoint(delta2Point, -cameraRotation);
-    delta2Point = PointCal.multiplyVectorByScalar(delta2Point, cameraZoomLevel);
-    return PointCal.addVector(cameraFrameCenter, delta2Point);
-}
-
-/**
- * @description Checks if a point is in the view port.
- * The point is in world space.
- * The camera position is the position of the camera in world space.
- * 
- * @category Camera
- */
-export function pointIsInViewPort(point: Point, viewPortWidth: number, viewPortHeight: number, cameraPosition: Point, cameraZoomLevel: number, cameraRotation: number): boolean{
-    const pointInCameraFrame = invertFromWorldSpace(point, viewPortWidth, viewPortHeight, cameraPosition, cameraZoomLevel, cameraRotation);
-    if(pointInCameraFrame.x < 0 || pointInCameraFrame.x > viewPortWidth || pointInCameraFrame.y < 0 || pointInCameraFrame.y > viewPortHeight){
-        return false;
-    }
-    return true;
-}
-
-/**
- * @description Converts a delta in view port space to world space.
- * The delta is in view port space.
- * 
- * @category Camera
- */
-export function convertDeltaInViewPortToWorldSpace(delta: Point, cameraZoomLevel: number, cameraRotation: number): Point{
-    return PointCal.multiplyVectorByScalar(PointCal.rotatePoint(delta, cameraRotation), 1 / cameraZoomLevel);
-}
-
-/**
- * @description Converts a delta in world space to view port space.
- * The delta is in world space.
- * 
- * @category Camera
- */
-export function convertDeltaInWorldToViewPortSpace(delta: Point, cameraZoomLevel: number, cameraRotation: number): Point{
-    return PointCal.multiplyVectorByScalar(PointCal.rotatePoint(delta, -cameraRotation), cameraZoomLevel);
-}
-
-/**
- * @description Calculates the camera position to get a point in "stage/context/world" space to be at a certain point in view port space.
- * This is useful to coordinate camera pan and zoom at the same time.
- * 
- * @category Camera
- */
-export function cameraPositionToGet(pointInWorld: Point, toPointInViewPort: Point, cameraZoomLevel: number, cameraRotation: number): Point {
-    const scaled = PointCal.multiplyVectorByScalar(toPointInViewPort, 1 / cameraZoomLevel);
-    const rotated = PointCal.rotatePoint(scaled, cameraRotation);
-    return PointCal.subVector(pointInWorld, rotated);
-}
-
-export function transformationMatrixFromCamera(cameraPosition: Point, cameraZoomLevel: number, cameraRotation: number): TransformationMatrix{
-    const cos = Math.cos(cameraRotation);
-    const sin = Math.sin(cameraRotation);
-    const trMatrix = multiplyMatrix({
-        a: 1,
-        b: 0,
-        c: 0,
-        d: 1,
-        e: cameraPosition.x,
-        f: cameraPosition.y
-    }, {
-        a: cos,
-        b: sin,
-        c: -sin,
-        d: cos,
-        e: 0,
-        f: 0
-    });
-    const trsMatrix = multiplyMatrix(trMatrix, {
-        a: 1 / cameraZoomLevel,
-        b: 0,
-        c: 0,
-        d: 1 / cameraZoomLevel,
-        e: 0,
-        f: 0
-    });
-    return trsMatrix;
-}
-
-export function convert2WorldSpaceWithTransformationMatrix(point: Point, transformationMatrix: TransformationMatrix): Point{
-    return {
-        x: point.x * transformationMatrix.a + point.y * transformationMatrix.c + transformationMatrix.e,
-        y: point.x * transformationMatrix.b + point.y * transformationMatrix.d + transformationMatrix.f
-    }
-}

package/src/camera/utils/index.ts

@@ -1,5 +0,0 @@
-export * from "./coordinate-conversion";
-export * from "./matrix";
-export * from "./position";
-export * from "./rotation";
-export * from "./zoom";