@ue-too/board 0.5.1 → 0.5.2

package/src/input-interpretation/raw-input-publisher/raw-input-publisher.ts

@@ -0,0 +1,227 @@
+import type { Point } from "@ue-too/math";
+import { createDefaultCameraMux, CameraMux } from "../../camera/camera-mux";
+import { ObservableBoardCamera } from "../../camera/interface";
+import { Observable, Observer } from "../../utils/observable";
+
+/**
+ * @description The unsubscribe to user raw input.
+ * 
+ * @category Event Parser
+ */
+export type UnsubscribeToUserRawInput = () => void;
+
+/**
+ * @description The raw user pan input event payload.
+ * 
+ * @category Event Parser
+ */
+export type RawUserPanInputEventPayload = {
+    diff: Point;
+}
+
+/**
+ * @description The raw user pan input event.
+ * Use type to discriminate between pan, zoom, and rotate events.
+ * 
+ * @category Event Parser
+ */
+export type RawUserPanInputEvent = {
+    type: "pan",
+} & RawUserPanInputEventPayload;
+
+/**
+ * @description The raw user zoom input event payload.
+ * 
+ * @category Event Parser
+ */
+export type RawUserZoomInputEventPayload = {
+    deltaZoomAmount: number;
+    anchorPoint: Point;
+}
+
+/**
+ * @description The raw user zoom input event.
+ * Use type to discriminate between pan, zoom, and rotate events.
+ * 
+ * @category Event Parser
+ */
+export type RawUserZoomInputEvent = {
+    type: "zoom",
+} & RawUserZoomInputEventPayload;
+
+/**
+ * @description The raw user rotate input event payload.
+ * 
+ * @category Event Parser
+ */
+export type RawUserRotateInputEventPayload = {
+    deltaRotation: number;
+}
+
+/**
+ * @description The raw user rotate input event.
+ * Use type to discriminate between pan, zoom, and rotate events.
+ * 
+ * @category Event Parser
+ */
+export type RawUserRotateInputEvent = {
+    type: "rotate",
+} & RawUserRotateInputEventPayload;
+
+/**
+ * @description The raw user input event map.
+ * 
+ * @category Event Parser
+ */
+export type RawUserInputEventMap = {
+    "pan": RawUserPanInputEventPayload,
+    "zoom": RawUserZoomInputEventPayload,
+    "rotate": RawUserRotateInputEventPayload,
+    "all": RawUserInputEvent,
+}
+
+/**
+ * @description The raw user input event.
+ * Use type to discriminate between pan, zoom, and rotate events.
+ * 
+ * @category Event Parser
+ */
+export type RawUserInputEvent = RawUserPanInputEvent | RawUserZoomInputEvent | RawUserRotateInputEvent;
+
+/**
+ * @description The raw user input callback.
+ * This is the function type of callbacks for raw user input events.
+ * 
+ * @category Event Parser
+ */
+export type RawUserInputCallback<K extends keyof RawUserInputEventMap> = (event: RawUserInputEventMap[K])=>void;
+
+export interface UserInputPublisher {
+    notifyPan(diff: Point): void;
+    notifyZoom(deltaZoomAmount: number, anchorPoint: Point): void;
+    notifyRotate(deltaRotation: number): void;
+    on<K extends keyof RawUserInputEventMap>(eventName: K, callback: (event: RawUserInputEventMap[K])=>void): UnsubscribeToUserRawInput;
+}
+
+/**
+ * @description The raw user input publisher.
+ * Publishs raw user input events to the input flow control, and subscribers.
+ * 
+ * @category Event Parser
+ */
+export class RawUserInputPublisher implements UserInputPublisher {
+
+    private pan: Observable<Parameters<RawUserInputCallback<"pan">>>;
+    private zoom: Observable<Parameters<RawUserInputCallback<"zoom">>>;
+    private rotate: Observable<Parameters<RawUserInputCallback<"rotate">>>;
+    private all: Observable<Parameters<RawUserInputCallback<"all">>>;
+    private _cameraMux: CameraMux;
+
+    constructor(cameraMux: CameraMux){
+        this.pan = new Observable<Parameters<RawUserInputCallback<"pan">>>();
+        this.zoom = new Observable<Parameters<RawUserInputCallback<"zoom">>>();
+        this.rotate = new Observable<Parameters<RawUserInputCallback<"rotate">>>();
+        this.all = new Observable<Parameters<RawUserInputCallback<"all">>>();
+        this._cameraMux = cameraMux;
+    }
+
+    notifyPan(diff: Point): void {
+        this._cameraMux.notifyPanInput(diff);
+        this.pan.notify({diff: diff});
+        this.all.notify({type: "pan", diff: diff});
+    }
+
+    notifyZoom(deltaZoomAmount: number, anchorPoint: Point): void {
+        this._cameraMux.notifyZoomInput(deltaZoomAmount, anchorPoint);
+        this.zoom.notify({deltaZoomAmount: deltaZoomAmount, anchorPoint: anchorPoint});
+        this.all.notify({type: "zoom", deltaZoomAmount: deltaZoomAmount, anchorPoint: anchorPoint});
+    }
+
+    notifyRotate(deltaRotation: number): void {
+        this._cameraMux.notifyRotationInput(deltaRotation);
+        this.rotate.notify({deltaRotation: deltaRotation});
+        this.all.notify({type: "rotate", deltaRotation: deltaRotation});
+    }
+    
+    on<K extends keyof RawUserInputEventMap>(eventName: K, callback: (event: RawUserInputEventMap[K])=>void): UnsubscribeToUserRawInput {
+        switch (eventName){
+        case "pan":
+            return this.pan.subscribe(callback as Observer<Parameters<RawUserInputCallback<"pan">>>);
+        case "zoom":
+            return this.zoom.subscribe(callback as Observer<Parameters<RawUserInputCallback<"zoom">>>);
+        case "rotate":
+            return this.rotate.subscribe(callback as Observer<Parameters<RawUserInputCallback<"rotate">>>);
+        case "all":
+            return this.all.subscribe(callback as Observer<Parameters<RawUserInputCallback<"all">>>);
+        default:
+            throw new Error("Invalid raw user input event name");
+        }
+    }
+
+    get cameraMux(): CameraMux {
+        return this._cameraMux;
+    }
+
+    set cameraMux(cameraMux: CameraMux){
+        this._cameraMux = cameraMux;
+    }
+}
+
+/**
+ * @description Creates a default raw user input publisher.
+ * 
+ * @category Event Parser
+ */
+export function createDefaultRawUserInputPublisher(camera: ObservableBoardCamera): RawUserInputPublisher {
+    return new RawUserInputPublisher(createDefaultCameraMux(camera));
+}
+
+export class RawUserInputPublisherWithWebWorkerRelay implements UserInputPublisher {
+
+    private pan: Observable<Parameters<RawUserInputCallback<"pan">>>;
+    private zoom: Observable<Parameters<RawUserInputCallback<"zoom">>>;
+    private rotate: Observable<Parameters<RawUserInputCallback<"rotate">>>;
+    private all: Observable<Parameters<RawUserInputCallback<"all">>>;
+    private webWorker: Worker;
+
+    constructor(webWorker: Worker){
+        this.pan = new Observable<Parameters<RawUserInputCallback<"pan">>>();
+        this.zoom = new Observable<Parameters<RawUserInputCallback<"zoom">>>();
+        this.rotate = new Observable<Parameters<RawUserInputCallback<"rotate">>>();
+        this.all = new Observable<Parameters<RawUserInputCallback<"all">>>();
+        this.webWorker = webWorker;
+    }
+
+    notifyPan(diff: Point): void {
+        this.webWorker.postMessage({type: "notifyUserInput", payload: {type: "pan", diff: diff}});
+        this.pan.notify({diff: diff});
+        this.all.notify({type: "pan", diff: diff});
+    }
+
+    notifyZoom(deltaZoomAmount: number, anchorPoint: Point): void {
+        this.webWorker.postMessage({type: "notifyUserInput", payload: {type: "zoom", deltaZoomAmount: deltaZoomAmount, anchorPoint: anchorPoint}});
+        this.zoom.notify({deltaZoomAmount: deltaZoomAmount, anchorPoint: anchorPoint});
+        this.all.notify({type: "zoom", deltaZoomAmount: deltaZoomAmount, anchorPoint: anchorPoint});
+    }
+
+    notifyRotate(deltaRotation: number): void {
+        this.webWorker.postMessage({type: "notifyUserInput", payload: {type: "rotate", deltaRotation: deltaRotation}});
+        this.rotate.notify({deltaRotation: deltaRotation});
+        this.all.notify({type: "rotate", deltaRotation: deltaRotation});
+    }
+    
+    on<K extends keyof RawUserInputEventMap>(eventName: K, callback: (event: RawUserInputEventMap[K])=>void): UnsubscribeToUserRawInput {
+        switch (eventName){
+        case "pan":
+            return this.pan.subscribe(callback as Observer<Parameters<RawUserInputCallback<"pan">>>);
+        case "zoom":
+            return this.zoom.subscribe(callback as Observer<Parameters<RawUserInputCallback<"zoom">>>);
+        case "rotate":
+            return this.rotate.subscribe(callback as Observer<Parameters<RawUserInputCallback<"rotate">>>);
+        case "all":
+            return this.all.subscribe(callback as Observer<Parameters<RawUserInputCallback<"all">>>);
+        default:
+            throw new Error("Invalid raw user input event name");
+        }
+    }
+}

package/src/utils/canvas-position-dimension.ts

@@ -0,0 +1,215 @@
+// Track position changes with ResizeObserver
+import { Observable, Observer, SubscriptionOptions } from "../utils/observable";
+
+export type CanvasUpdateObserver = (rect: DOMRect) => void;
+
+export class CanvasPositionDimensionPublisher {
+
+    private lastRect: DOMRect;
+    private resizeObserver: ResizeObserver;
+    private intersectionObserver: IntersectionObserver;
+    private scrollHandler: () => void;
+    private resizeHandler: () => void;
+    private _observers: Observable<Parameters<CanvasUpdateObserver>>;
+
+    constructor(canvas: HTMLCanvasElement) {
+        this._observers = new Observable<Parameters<CanvasUpdateObserver>>();
+        this.lastRect = canvas.getBoundingClientRect();
+
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const newRect = entry.target.getBoundingClientRect();
+                const trueRect = getTrueRect(newRect, window.getComputedStyle(entry.target));
+                if (rectChanged(this.lastRect, trueRect)) {
+                    this.publishPositionUpdate(trueRect);
+                    this.lastRect = trueRect;
+                }
+            }
+        });
+
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    const newRect = entry.boundingClientRect;
+                    const trueRect = getTrueRect(newRect, window.getComputedStyle(entry.target));
+                    if (rectChanged(this.lastRect, trueRect)) {
+                        this.publishPositionUpdate(trueRect);
+                        this.lastRect = trueRect;
+                    }
+                }
+            }
+        });
+        
+        // Add scroll handler to detect position changes during scrolling
+        this.scrollHandler = (() => {
+            const newRect = canvas.getBoundingClientRect();
+            const trueRect = getTrueRect(newRect, window.getComputedStyle(canvas));
+            if (rectChanged(this.lastRect, trueRect)) {
+                this.publishPositionUpdate(trueRect);
+                this.lastRect = trueRect;
+            }
+        }).bind(this);
+
+        // Add window resize handler to detect position changes when window size changes
+        this.resizeHandler = (() => {
+            const newRect = canvas.getBoundingClientRect();
+            const trueRect = getTrueRect(newRect, window.getComputedStyle(canvas));
+            if (rectChanged(this.lastRect, trueRect)) {
+                this.publishPositionUpdate(trueRect);
+                this.lastRect = trueRect;
+            }
+        }).bind(this);
+        
+        this.resizeObserver.observe(canvas);
+        this.intersectionObserver.observe(canvas);
+        window.addEventListener('scroll', this.scrollHandler, { passive: true });
+        window.addEventListener('resize', this.resizeHandler, { passive: true });
+    }
+    
+    // Add a cleanup method to remove event listeners
+    public dispose(): void {
+        this.resizeObserver.disconnect();
+        this.intersectionObserver.disconnect();
+        window.removeEventListener('scroll', this.scrollHandler);
+        window.removeEventListener('resize', this.resizeHandler);
+    }
+
+    attach(canvas: HTMLCanvasElement) {
+        this.dispose();
+        this.resizeObserver.observe(canvas);
+        this.intersectionObserver.observe(canvas);
+        this.scrollHandler = (() => {
+            const newRect = canvas.getBoundingClientRect();
+            const trueRect = getTrueRect(newRect, window.getComputedStyle(canvas));
+            if (rectChanged(this.lastRect, trueRect)) {
+                this.publishPositionUpdate(trueRect);
+                this.lastRect = trueRect;
+            }
+        }).bind(this);
+        this.resizeHandler = (() => {
+            const newRect = canvas.getBoundingClientRect();
+            const trueRect = getTrueRect(newRect, window.getComputedStyle(canvas));
+            if (rectChanged(this.lastRect, trueRect)) {
+                this.publishPositionUpdate(trueRect);
+                this.lastRect = trueRect;
+            }
+        }).bind(this);
+        window.addEventListener("scroll", this.scrollHandler, { passive: true });
+        window.addEventListener("resize", this.resizeHandler, { passive: true });
+    }
+
+    private publishPositionUpdate(rect: DOMRect) {
+        this._observers.notify(rect);
+    }
+
+    onPositionUpdate(observer: Observer<[DOMRect]>, options?: SubscriptionOptions) {
+        this._observers.subscribe(observer, options);
+    }
+}
+
+export function getTrueRect(rect: DOMRect, computedStyle: CSSStyleDeclaration) {
+    const paddingLeft = parseFloat(computedStyle.paddingLeft);
+    const paddingTop = parseFloat(computedStyle.paddingTop);
+    const paddingRight = parseFloat(computedStyle.paddingRight);
+    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+
+    const borderLeft = parseFloat(computedStyle.borderLeftWidth);
+    const borderTop = parseFloat(computedStyle.borderTopWidth);
+    const borderRight = parseFloat(computedStyle.borderRightWidth);
+    const borderBottom = parseFloat(computedStyle.borderBottomWidth);
+
+    const trueLeft = rect.left + paddingLeft + borderLeft;
+    const trueTop = rect.top + paddingTop + borderTop;
+    const trueWidth = rect.width - paddingLeft - paddingRight - borderLeft - borderRight;
+    const trueHeight = rect.height - paddingTop - paddingBottom - borderTop - borderBottom;
+    return new DOMRect(trueLeft, trueTop, trueWidth, trueHeight);
+}
+
+function rectChanged(r1: DOMRect, r2: DOMRect) {
+  return r1.top !== r2.top || r1.left !== r2.left || 
+         r1.width !== r2.width || r1.height !== r2.height;
+}
+
+/**
+ * This is for proxying the canvas context methods that need to flip the y-coordinates.
+ * @internal
+ */
+const methodsToFlip: Record<string, number[]> = {
+    fillRect: [1],        // [yIndex] - indices of y-coordinates to flip
+    strokeRect: [1],
+    fillText: [2],
+    strokeText: [1],
+    lineTo: [1],
+    moveTo: [1],
+    quadraticCurveTo: [1, 3],
+    bezierCurveTo: [1, 3, 5],
+    arc: [1],
+    drawImage: [2],        // Base case for first two signatures
+    rect: [1],
+    roundRect: [1],
+};
+
+export function reverseYAxis(context: CanvasRenderingContext2D): CanvasRenderingContext2D {
+    return new Proxy(context, {
+        get(target: CanvasRenderingContext2D, prop: string | symbol, receiver: any): any {
+            const value = Reflect.get(target, prop, target);
+            
+            // Check if this is a method that needs y-coordinate flipping
+            if (typeof prop === 'string' && prop in methodsToFlip && typeof value === 'function') {
+                return function(...args: any[]) {
+                    // Create a copy of the arguments
+                    const newArgs = [...args];
+                    
+                    // Special handling for drawImage with 9 arguments (third signature of drawImage)
+                    if (prop === 'drawImage' && args.length === 9) {
+                        const convertedArgs = invertYAxisForDrawImageWith9Args(args);
+                        return value.apply(target, convertedArgs);
+                    } else {
+                        // Flip the y-coordinates based on methodsToFlip configuration
+                        const yIndices = methodsToFlip[prop];
+                        for (const index of yIndices) {
+                            if (index < newArgs.length) {
+                                newArgs[index] = -newArgs[index];
+                            }
+                        }
+                        // Special handling for drawImage with 5 arguments (first signature of drawImage)
+                        if(prop === "drawImage" && args.length === 5){
+                            newArgs[2] -= newArgs[4];
+                        }
+                    }
+                    
+                    // Call the original method with the modified arguments
+                    return value.apply(target, newArgs);
+                };
+            }
+            
+            // Return the original value for properties and methods that don't need modification
+            if (typeof value === 'function') {
+                return function(...args: any[]) {
+                    return value.apply(target, args);
+                };
+            }
+            
+            return value;
+        },
+        set(target, prop, value): boolean {
+            return Reflect.set(target, prop, value);
+        }
+    });
+}
+
+export function invertYAxisForDrawImageWith9Args(args: any[]): typeof args {
+    if(args.length !== 9){
+        return args;
+    }
+    const newArgs = [...args];
+    const imageHeight = args[0].height;
+    if(imageHeight !== undefined){
+        newArgs[2] = imageHeight - newArgs[2];
+        newArgs[6] = -newArgs[6];
+        newArgs[6] -= newArgs[8];
+        newArgs[4] = -newArgs[4];
+    }
+    return newArgs;
+}
+

package/src/utils/coorindate-conversion.ts

@@ -0,0 +1,12 @@
+import { Point } from "@ue-too/math";
+
+// isometric point to flat world point
+export function pointConversion(point: Point) {
+    const cos30 = Math.cos(Math.PI / 6);
+    const cos60 = Math.cos(Math.PI / 3);
+
+    return {
+        x: point.x * cos30 - point.y * cos30,
+        y: point.x * cos60 + point.y * cos60 + (point.z ?? 0)
+    }
+}