@ue-too/board 0.5.1

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

@@ -0,0 +1,130 @@
+import type { Point } from "@ue-too/math";
+import { CameraMux } from "../../camera/camera-mux";
+import { ObservableBoardCamera } from "../../camera/interface";
+/**
+ * @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 declare class RawUserInputPublisher implements UserInputPublisher {
+    private pan;
+    private zoom;
+    private rotate;
+    private all;
+    private _cameraMux;
+    constructor(cameraMux: CameraMux);
+    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;
+    get cameraMux(): CameraMux;
+    set cameraMux(cameraMux: CameraMux);
+}
+/**
+ * @description Creates a default raw user input publisher.
+ *
+ * @category Event Parser
+ */
+export declare function createDefaultRawUserInputPublisher(camera: ObservableBoardCamera): RawUserInputPublisher;
+export declare class RawUserInputPublisherWithWebWorkerRelay implements UserInputPublisher {
+    private pan;
+    private zoom;
+    private rotate;
+    private all;
+    private webWorker;
+    constructor(webWorker: Worker);
+    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;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ue-too/board",
+  "type": "module",
+  "version": "0.5.1",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "module": "./index.js",
+  "dependencies": {
+    "@ue-too/math": "^0.5.1",
+    "@ue-too/being": "^0.5.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ue-too/ue-too.git"
+  },
+  "author": "niuee",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ue-too/ue-too/issues"
+  },
+  "homepage": "https://github.com/ue-too/ue-too#readme",
+  "keywords": [
+    "canvas",
+    "infinite-canvas",
+    "pixi.js",
+    "PIXI"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Observer, SubscriptionOptions } from "../utils/observable";
+export type CanvasUpdateObserver = (rect: DOMRect) => void;
+export declare class CanvasPositionDimensionPublisher {
+    private lastRect;
+    private resizeObserver;
+    private intersectionObserver;
+    private scrollHandler;
+    private resizeHandler;
+    private _observers;
+    constructor(canvas: HTMLCanvasElement);
+    dispose(): void;
+    attach(canvas: HTMLCanvasElement): void;
+    private publishPositionUpdate;
+    onPositionUpdate(observer: Observer<[DOMRect]>, options?: SubscriptionOptions): void;
+}
+export declare function getTrueRect(rect: DOMRect, computedStyle: CSSStyleDeclaration): DOMRect;
+export declare function reverseYAxis(context: CanvasRenderingContext2D): CanvasRenderingContext2D;
+export declare function invertYAxisForDrawImageWith9Args(args: any[]): typeof args;

package/utils/coorindate-conversion.d.ts

@@ -0,0 +1,5 @@
+import { Point } from "@ue-too/math";
+export declare function pointConversion(point: Point): {
+    x: number;
+    y: number;
+};

package/utils/drawing-utils.d.ts

@@ -0,0 +1,55 @@
+import type { Point } from "@ue-too/math";
+import { Boundaries } from "../camera/utils/position";
+/**
+ * @description Draws a crosshair on the canvas.
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawCrossHair(context: CanvasRenderingContext2D, pos: Point, cameraZoomLevel: number, alignCoordinateSystem: boolean, size: number, color?: string): void;
+/**
+ * @description Draws a bounding box on the canvas.
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawBoundingBox(context: CanvasRenderingContext2D, boundaries: Boundaries, alignCoordinateSystem: boolean): void;
+/**
+ * @description Draws the axis of the board.
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawAxis(context: CanvasRenderingContext2D, boundaries: Boundaries, zoomLevel: number, alignCoordinateSystem: boolean): void;
+/**
+ * @description Draws the grid of the board.
+ * argument points are in world space
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawGrid(context: CanvasRenderingContext2D, topLeftCorner: Point, topRightCorner: Point, bottomLeftCorner: Point, bottomRightCorner: Point, alignCoordinateSystem: boolean, cameraZoomLevel: number): void;
+/**
+ * @description Draws a ruler on the canvas.
+ * argument points are in world space
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawRulerLegacy(context: CanvasRenderingContext2D, topLeftCorner: Point, topRightCorner: Point, bottomLeftCorner: Point, bottomRightCorner: Point, alignCoordinateSystem: boolean, cameraZoomLevel: number): void;
+/**
+ * @description Draws the position text on the canvas.
+ * argument points are in world space
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawPositionText(context: CanvasRenderingContext2D, pos: Point, cameraZoomLevel: number, alignCoordinateSystem: boolean, offset?: number, color?: string): void;
+/**
+ * @description Draws a reference circle on the canvas.
+ * argument points are in world space
+ * @deprecated
+ *
+ * @category Board
+ */
+export declare function drawReferenceCircle(context: CanvasRenderingContext2D, pos: Point, alignCoordinateSystem: boolean): void;

package/utils/drawing.d.ts

@@ -0,0 +1,30 @@
+import { Point } from "@ue-too/math";
+export declare function drawArrow(context: CanvasRenderingContext2D, cameraZoomLevel: number, startPoint: Point, endPoint: Point, width?: number, arrowRatio?: number): void;
+export declare const MAJOR_TICK_LENGTH = 30;
+export declare const MINOR_TICK_LENGTH: number;
+export declare const HALF_TICK_LENGTH: number;
+export declare const TEXT_MAJOR_TICK_OFFSET = 10;
+export declare const TEXT_HALF_TICK_OFFSET = 2.5;
+export declare const TEXT_MAJOR_TICK_FONT_SIZE = 20;
+export declare const TEXT_HALF_TICK_FONT_SIZE = 10;
+/**
+ * @description Draws a ruler on the canvas.
+ * argument points are in world space
+ *
+ * @category Utils
+ *
+ */
+export declare function drawRuler(context: CanvasRenderingContext2D, topLeftCorner: Point, topRightCorner: Point, bottomLeftCorner: Point, alignCoordinateSystem: boolean, cameraZoomLevel: number): void;
+export declare function calculateTickValues(minValue: number, maxValue: number, orderOfMagnitude?: number): {
+    minMajorTickValue: number;
+    maxMajorTickValue: number;
+    majorTickStep: number;
+    minMinTickValue: number;
+    maxMaxTickValue: number;
+    minTickStep: number;
+    minHalfTickValue: number;
+    maxHalfTickValue: number;
+    halfTickStep: number;
+    calibrationMultiplier: number;
+    normalizedOrderOfMagnitude: number;
+};

package/utils/handler-pipeline.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @description Type definition for a handler function that takes a generic value and additional arguments
+ * The handler must return the same type as its first argument
+ * This is a utility type to be used in the handler pipeline. (Probably don't need to use this directly)
+ * Using the {@link createHandlerChain} function to create a handler chain would have typescript infer the correct type for the handler chain.
+ *
+ * @category Utils
+ */
+export type Handler<T, Args extends any[]> = (value: T, ...args: Args) => T;
+/**
+ * @description Creates a handler chain from an array of handlers.
+ *
+ * Use it like this:
+ * ```typescript
+ * const handlerChain = createHandlerChain(handler1, handler2, handler3);
+ * ```
+ * or like this:
+ * ```typescript
+ * const handlers = [handler1, handler2, handler3];
+ * const handlerChain = createHandlerChain(handlers);
+ * ```
+ *
+ * The function signature of all the handlers must be the same. (if they're not, you need to explicitly specify the type for the handler chain)
+ *
+ * @param handlers Array of handler functions to be chained
+ * @returns A single handler function that executes all handlers in sequence
+ *
+ * @category Utils
+ */
+export declare function createHandlerChain<T, Args extends any[]>(...handlers: Handler<T, Args>[] | [Handler<T, Args>[]]): Handler<T, Args>;

package/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./coorindate-conversion";
+export * from "./ruler";
+export * from "./observable";
+export * from "./handler-pipeline";
+export * from "./canvas-position-dimension";
+export * from "./drawing-utils";
+export * from "./drawing";
+export * from "./zoomlevel-adjustment";

package/utils/observable.d.ts

@@ -0,0 +1,9 @@
+export type Observer<T extends any[]> = (...data: T) => void;
+export interface SubscriptionOptions {
+    signal?: AbortSignal;
+}
+export declare class Observable<T extends any[]> {
+    private observers;
+    subscribe(observer: Observer<T>, options?: SubscriptionOptions): () => void;
+    notify(...data: T): void;
+}

package/utils/ruler.d.ts

@@ -0,0 +1 @@
+export declare function calculateOrderOfMagnitude(value: number): number;

package/utils/zoomlevel-adjustment.d.ts

@@ -0,0 +1,28 @@
+import { Boundaries } from "../camera/utils/position";
+import { ZoomLevelLimits } from "../camera/utils/zoom";
+/**
+ * @description Calculates the minimum zoom level based on the dimensions of the boundaries.
+ * Used when the canvas on the html is resized.
+ *
+ * @category Camera
+ */
+export declare function minZoomLevelBaseOnDimensions(boundaries: Boundaries | undefined, canvasWidth: number, canvasHeight: number, cameraRotation: number): number | undefined;
+/**
+ * @description Determines if the zoom level boundaries should be updated when the canvas is resized.
+ * Zoom level boundaries adjustment only tightens the zoom level boundaries; it does not relax them.
+ *
+ * @category Camera
+ */
+export declare function zoomLevelBoundariesShouldUpdate(zoomLevelBoundaries: ZoomLevelLimits | undefined, targetMinZoomLevel: number | undefined): boolean;
+/**
+ * @description Calculates the minimum zoom level based on the width of the boundaries.
+ * Used when the canvas on the html is resized.
+ * @category Camera
+ */
+export declare function minZoomLevelBaseOnWidth(boundaries: Boundaries | undefined, canvasWidth: number, canvasHeight: number, cameraRotation: number): number | undefined;
+/**
+ * @description Calculates the minimum zoom level based on the height of the boundaries.
+ * Used when the canvas on the html is resized.
+ * @category Camera
+ */
+export declare function minZoomLevelBaseOnHeight(boundaries: Boundaries | undefined, canvasWidth: number, canvasHeight: number, cameraRotation: number): number | undefined;