@ue-too/board 0.14.0 → 0.15.0

package/input-interpretation/index.d.ts

@@ -26,7 +26,7 @@
  *
  * @module
  */
-export * from "./input-state-machine";
-export * from "./raw-input-publisher";
-export * from "./raw-input-parser";
-export * from "./input-orchestrator";
+export * from './input-state-machine';
+export * from './raw-input-publisher';
+export * from './raw-input-parser';
+export * from './input-orchestrator';

package/input-interpretation/input-orchestrator.d.ts

@@ -1,8 +1,8 @@
-import { KmtOutputEvent } from "./input-state-machine/kmt-input-state-machine";
-import { TouchOutputEvent } from "./input-state-machine/touch-input-state-machine";
-import { UserInputPublisher } from "./raw-input-publisher/raw-input-publisher";
-import { CameraMux } from "../camera/camera-mux";
-import { CameraRig } from "../camera/camera-rig";
+import { CameraMux } from '../camera/camera-mux';
+import { CameraRig } from '../camera/camera-rig';
+import { KmtOutputEvent } from './input-state-machine/kmt-input-state-machine';
+import { TouchOutputEvent } from './input-state-machine/touch-input-state-machine';
+import { UserInputPublisher } from './raw-input-publisher/raw-input-publisher';
 /**
  * Union type of all output events from state machines.
  *

package/input-interpretation/input-state-machine/index.d.ts

@@ -16,7 +16,7 @@
  *
  * @module
  */
-export * from "./kmt-input-context";
-export * from "./touch-input-context";
-export * from "./touch-input-state-machine";
-export * from "./kmt-input-state-machine";
+export * from './kmt-input-context';
+export * from './touch-input-context';
+export * from './touch-input-state-machine';
+export * from './kmt-input-state-machine';

package/input-interpretation/input-state-machine/kmt-input-context.d.ts

@@ -1,6 +1,6 @@
-import { Point } from "@ue-too/math";
-import { BaseContext } from "@ue-too/being";
-import { CanvasPositionDimensionPublisher, Observable, Observer, SubscriptionOptions } from "../../utils";
+import { BaseContext } from '@ue-too/being';
+import { Point } from '@ue-too/math';
+import { CanvasPositionDimensionPublisher, Observable, Observer, SubscriptionOptions } from '../../utils';
 /**
  * Cursor styles used to provide visual feedback for different input states.
  *
@@ -113,7 +113,7 @@ export declare class CanvasCacheInWebWorker implements Canvas {
     get width(): number;
     get height(): number;
     get position(): Point;
-    setCursor(style: "grab" | "default" | "grabbing"): void;
+    setCursor(style: 'grab' | 'default' | 'grabbing'): void;
     get detached(): boolean;
 }
 /**
@@ -158,7 +158,7 @@ export declare class CanvasProxy implements Canvas, Observable<[CanvasDimensions
     setCanvasHeight(height: number): void;
     get height(): number;
     get position(): Point;
-    setCursor(style: "grab" | "default" | "grabbing"): void;
+    setCursor(style: 'grab' | 'default' | 'grabbing'): void;
     tearDown(): void;
     attach(canvas: HTMLCanvasElement): void;
     logCanvasTrueSize(): void;
@@ -192,7 +192,7 @@ export declare class SvgProxy implements Canvas, Observable<[CanvasDimensions]>
     setHeight(height: number): void;
     get height(): number;
     get position(): Point;
-    setCursor(style: "grab" | "default" | "grabbing"): void;
+    setCursor(style: 'grab' | 'default' | 'grabbing'): void;
     tearDown(): void;
     attach(svg: SVGSVGElement): void;
     logCanvasTrueSize(): void;
@@ -221,7 +221,7 @@ export declare class WorkerRelayCanvas implements Canvas {
         position: Point;
     };
     get detached(): boolean;
-    setCursor(style: "grab" | "default" | "grabbing"): void;
+    setCursor(style: 'grab' | 'default' | 'grabbing'): void;
 }
 /**
  * Context interface for the Keyboard/Mouse/Trackpad (KMT) input state machine.

package/input-interpretation/input-state-machine/kmt-input-state-machine.d.ts

@@ -1,6 +1,6 @@
-import { EventReactions, EventGuards, Guard, TemplateState, TemplateStateMachine, EventArgs, EventResult, CreateStateType } from "@ue-too/being";
-import type { Point } from "@ue-too/math";
-import { Canvas, CursorStyle, KmtInputContext } from "./kmt-input-context";
+import { CreateStateType, EventArgs, EventGuards, EventReactions, EventResult, Guard, TemplateState, TemplateStateMachine } from '@ue-too/being';
+import type { Point } from '@ue-too/math';
+import { Canvas, CursorStyle, KmtInputContext } from './kmt-input-context';
 declare const KMT_INPUT_STATES: readonly ["IDLE", "READY_TO_PAN_VIA_SPACEBAR", "READY_TO_PAN_VIA_SCROLL_WHEEL", "PAN", "INITIAL_PAN", "PAN_VIA_SCROLL_WHEEL", "DISABLED"];
 /**
  * Possible states of the Keyboard/Mouse/Trackpad input state machine.
@@ -117,20 +117,20 @@ export type KmtInputEventMapping = {
  * @category Input State Machine - KMT
  */
 export type KmtOutputEvent = {
-    type: "pan";
+    type: 'pan';
     delta: Point;
 } | {
-    type: "zoom";
+    type: 'zoom';
     delta: number;
     anchorPointInViewPort: Point;
 } | {
-    type: "rotate";
+    type: 'rotate';
     deltaRotation: number;
 } | {
-    type: "cursor";
+    type: 'cursor';
     style: CursorStyle;
 } | {
-    type: "none";
+    type: 'none';
 };
 /**
  * Mapping of events to their output types.
@@ -143,7 +143,6 @@ export type KmtOutputEvent = {
  * @category Input State Machine - KMT
  */
 export type KmtInputEventOutputMapping = {
-    spacebarDown: number;
     middlePointerMove: KmtOutputEvent;
     scroll: KmtOutputEvent;
     scrollWithCtrl: KmtOutputEvent;
@@ -152,7 +151,7 @@ export type KmtInputEventOutputMapping = {
 /**
  * @internal
  */
-export type KmtIdleStatePossibleTargetStates = "IDLE" | "READY_TO_PAN_VIA_SPACEBAR" | "READY_TO_PAN_VIA_SCROLL_WHEEL" | "DISABLED";
+export type KmtIdleStatePossibleTargetStates = 'IDLE' | 'READY_TO_PAN_VIA_SPACEBAR' | 'READY_TO_PAN_VIA_SCROLL_WHEEL' | 'DISABLED';
 /**
  * IDLE state - default state waiting for user input.
  *
@@ -179,7 +178,7 @@ export type KmtIdleStatePossibleTargetStates = "IDLE" | "READY_TO_PAN_VIA_SPACEB
  */
 export declare class KmtIdleState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
     constructor();
-    protected _guards: Guard<KmtInputContext, "isIdle">;
+    protected _guards: Guard<KmtInputContext, 'isIdle'>;
     protected _eventGuards: Partial<EventGuards<KmtInputEventMapping, KmtInputStates, KmtInputContext, Guard<KmtInputContext>>>;
     scrollPan: (context: KmtInputContext, payload: ScrollEventPayload) => KmtOutputEvent;
     scrollZoom: (context: KmtInputContext, payload: ScrollWithCtrlEventPayload) => KmtOutputEvent;

package/input-interpretation/input-state-machine/touch-input-context.d.ts

@@ -1,5 +1,5 @@
-import { BaseContext } from "@ue-too/being";
-import { Canvas } from "./kmt-input-context";
+import { BaseContext } from '@ue-too/being';
+import { Canvas } from './kmt-input-context';
 /**
  * Represents a single touch point in window coordinates.
  *

package/input-interpretation/input-state-machine/touch-input-state-machine.d.ts

@@ -1,6 +1,6 @@
-import { EventReactions, EventGuards, Guard, TemplateState, TemplateStateMachine } from "@ue-too/being";
-import { TouchContext, TouchPoints } from "./touch-input-context";
-import type { Point } from "@ue-too/math";
+import { EventGuards, EventReactions, Guard, TemplateState, TemplateStateMachine } from '@ue-too/being';
+import type { Point } from '@ue-too/math';
+import { TouchContext, TouchPoints } from './touch-input-context';
 /**
  * Possible states of the touch input state machine.
  *
@@ -15,7 +15,7 @@ import type { Point } from "@ue-too/math";
  *
  * @category Input State Machine - Touch
  */
-export type TouchStates = "IDLE" | "PENDING" | "IN_PROGRESS";
+export type TouchStates = 'IDLE' | 'PENDING' | 'IN_PROGRESS';
 /**
  * Payload for touch events containing active touch points.
  *
@@ -50,14 +50,14 @@ export type TouchEventPayload = {
  * @category Input State Machine - Touch
  */
 export type TouchOutputEvent = {
-    type: "pan";
+    type: 'pan';
     delta: Point;
 } | {
-    type: "zoom";
+    type: 'zoom';
     delta: number;
     anchorPointInViewPort: Point;
 } | {
-    type: "none";
+    type: 'none';
 };
 /**
  * Event mapping for the touch input state machine.
@@ -100,7 +100,7 @@ export type TouchInputEventOutputMapping = {
  */
 export declare class IdleState extends TemplateState<TouchEventMapping, TouchContext, TouchStates, TouchInputEventOutputMapping> {
     protected _eventReactions: EventReactions<TouchEventMapping, TouchContext, TouchStates, TouchInputEventOutputMapping>;
-    protected _guards: Guard<TouchContext, "touchPointsCount">;
+    protected _guards: Guard<TouchContext, 'touchPointsCount'>;
     protected _eventGuards: Partial<EventGuards<TouchEventMapping, TouchStates, TouchContext, typeof this._guards>>;
     touchstart(context: TouchContext, payload: TouchEventPayload): void;
     touchend(context: TouchContext, payload: TouchEventPayload): void;

package/input-interpretation/raw-input-parser/index.d.ts

@@ -17,5 +17,5 @@
  *
  * @module
  */
-export * from "./vanilla-kmt-event-parser";
-export * from "./vanilla-touch-event-parser";
+export * from './vanilla-kmt-event-parser';
+export * from './vanilla-touch-event-parser';

package/input-interpretation/raw-input-parser/vanilla-kmt-event-parser.d.ts

@@ -1,5 +1,5 @@
-import type { KmtInputStateMachine } from "../../input-interpretation/input-state-machine";
-import type { InputOrchestrator } from "../input-orchestrator";
+import type { EventResult } from '@ue-too/being';
+import type { InputOrchestrator } from '../input-orchestrator';
 /**
  * Interface for KMT (Keyboard/Mouse/Trackpad) event parsers.
  *
@@ -147,6 +147,9 @@ export type EventTargetWithPointerEvents = {
  * parser.tearDown();
  * ```
  */
+export interface StateMachine {
+    happens: (...args: any[]) => EventResult<any>;
+}
 export declare class VanillaKMTEventParser implements KMTEventParser {
     private _disabled;
     private _stateMachine;
@@ -154,7 +157,7 @@ export declare class VanillaKMTEventParser implements KMTEventParser {
     private _keyfirstPressed;
     private _abortController;
     private _canvas?;
-    constructor(kmtInputStateMachine: KmtInputStateMachine, orchestrator: InputOrchestrator, canvas?: HTMLCanvasElement | SVGSVGElement);
+    constructor(kmtInputStateMachine: StateMachine, orchestrator: InputOrchestrator, canvas?: HTMLCanvasElement | SVGSVGElement);
     get disabled(): boolean;
     disable(): void;
     enable(): void;
@@ -170,4 +173,5 @@ export declare class VanillaKMTEventParser implements KMTEventParser {
     keypressHandler(e: KeyboardEvent): void;
     keyupHandler(e: KeyboardEvent): void;
     attach(canvas: HTMLCanvasElement): void;
+    set stateMachine(stateMachine: StateMachine);
 }

package/input-interpretation/raw-input-parser/vanilla-touch-event-parser.d.ts

@@ -1,5 +1,5 @@
-import { TouchInputStateMachine } from "../../input-interpretation/input-state-machine/touch-input-state-machine";
-import type { InputOrchestrator } from "../input-orchestrator";
+import { TouchInputStateMachine } from '../../input-interpretation/input-state-machine/touch-input-state-machine';
+import type { InputOrchestrator } from '../input-orchestrator';
 /**
  * Interface for touch event parsers.
  *

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

@@ -16,4 +16,4 @@
  *
  * @module
  */
-export * from "./raw-input-publisher";
+export * from './raw-input-publisher';

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

@@ -1,4 +1,4 @@
-import type { Point } from "@ue-too/math";
+import type { Point } from '@ue-too/math';
 /**
  * Function to unsubscribe from raw user input events.
  *
@@ -28,7 +28,7 @@ export type RawUserPanInputEventPayload = {
  * @category Raw Input Publisher
  */
 export type RawUserPanInputEvent = {
-    type: "pan";
+    type: 'pan';
 } & RawUserPanInputEventPayload;
 /**
  * Payload for zoom input events.
@@ -52,7 +52,7 @@ export type RawUserZoomInputEventPayload = {
  * @category Raw Input Publisher
  */
 export type RawUserZoomInputEvent = {
-    type: "zoom";
+    type: 'zoom';
 } & RawUserZoomInputEventPayload;
 /**
  * Payload for rotate input events.
@@ -74,7 +74,7 @@ export type RawUserRotateInputEventPayload = {
  * @category Raw Input Publisher
  */
 export type RawUserRotateInputEvent = {
-    type: "rotate";
+    type: 'rotate';
 } & RawUserRotateInputEventPayload;
 /**
  * Mapping of event names to their payload types.
@@ -87,10 +87,10 @@ export type RawUserRotateInputEvent = {
  * @category Raw Input Publisher
  */
 export type RawUserInputEventMap = {
-    "pan": RawUserPanInputEventPayload;
-    "zoom": RawUserZoomInputEventPayload;
-    "rotate": RawUserRotateInputEventPayload;
-    "all": RawUserInputEvent;
+    pan: RawUserPanInputEventPayload;
+    zoom: RawUserZoomInputEventPayload;
+    rotate: RawUserRotateInputEventPayload;
+    all: RawUserInputEvent;
 };
 /**
  * Union type of all raw user input events.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ue-too/board",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -14,8 +14,8 @@
   "types": "./index.d.ts",
   "module": "./index.js",
   "dependencies": {
-    "@ue-too/being": "^0.14.0",
-    "@ue-too/math": "^0.14.0"
+    "@ue-too/being": "^0.15.0",
+    "@ue-too/math": "^0.15.0"
   },
   "repository": {
     "type": "git",

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

@@ -1,4 +1,4 @@
-import { Observer, SubscriptionOptions } from "../utils/observable";
+import { Observer, SubscriptionOptions } from '../utils/observable';
 /**
  * Monitors and publishes position and dimension changes for SVG elements.
  *
@@ -143,6 +143,7 @@ export declare class CanvasPositionDimensionPublisher {
     private scrollHandler?;
     private resizeHandler?;
     private _observers;
+    private lastDOMMatrix?;
     private _abortController;
     private _pixelRatioAbortController;
     /**

package/utils/coordinate-conversions/canvas-viewport.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "@ue-too/math";
+import { Point } from '@ue-too/math';
 /**
  * Converts a point from canvas space to viewport space.
  *

package/utils/coordinate-conversions/index.d.ts

@@ -0,0 +1,3 @@
+export * from './window-canvas';
+export * from './canvas-viewport';
+export * from './viewport-world';

package/utils/coordinate-conversions/viewport-world.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "@ue-too/math";
+import { Point } from '@ue-too/math';
 /**
  * Converts a point from viewport space to world space.
  *

package/utils/coordinate-conversions/window-canvas.d.ts

@@ -1,5 +1,5 @@
-import { Point } from "@ue-too/math";
-import { Canvas } from "../../input-interpretation/input-state-machine/kmt-input-context";
+import { Point } from '@ue-too/math';
+import { Canvas } from '../../input-interpretation/input-state-machine/kmt-input-context';
 /**
  * Converts a point from browser window coordinates to canvas coordinates.
  *

package/utils/coorindate-conversion.d.ts

@@ -1,5 +1,5 @@
-import { Point } from "@ue-too/math";
-import { Canvas } from "../input-interpretation/input-state-machine/kmt-input-context";
+import { Point } from '@ue-too/math';
+import { Canvas } from '../input-interpretation/input-state-machine/kmt-input-context';
 /**
  * Converts an isometric 3D point to a flat 2D world point.
  *

package/utils/drawing-utils.d.ts

@@ -1,5 +1,5 @@
-import type { Point } from "@ue-too/math";
-import { Boundaries } from "../camera/utils/position";
+import type { Point } from '@ue-too/math';
+import { Boundaries } from '../camera/utils/position';
 /**
  * @description Draws a crosshair on the canvas.
  * @deprecated

package/utils/drawing.d.ts

@@ -1,4 +1,4 @@
-import { Point } from "@ue-too/math";
+import { Point } from '@ue-too/math';
 /**
  * Draws an arrow from start to end point with an arrowhead.
  *

package/utils/index.d.ts

@@ -19,11 +19,13 @@
  *
  * @module
  */
-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";
+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';
+export * from './scrollbar';
+export * from './coordinate-conversions';

package/utils/scrollbar/index.d.ts

@@ -0,0 +1 @@
+export * from './scrollbar';

package/utils/scrollbar/scrollbar.d.ts

@@ -0,0 +1,20 @@
+import { BoardCamera } from '../../camera';
+export declare const getScrollBarDimension: (boardCamera: BoardCamera) => {
+    horizontal: number;
+    vertical: number;
+};
+/**
+ * The returned position is relative to the boundaries. (0 to 1)
+ * @param boardCamera
+ * @returns {horizontal: number | undefined, vertical: number | undefined}
+ */
+export declare const getScrollBarPosition: (boardCamera: BoardCamera) => {
+    horizontal: number | undefined;
+    vertical: number | undefined;
+};
+export declare const getScrollBar: (camera: BoardCamera) => {
+    horizontalLength: number | undefined;
+    verticalLength: number | undefined;
+    horizontal: number | undefined;
+    vertical: number | undefined;
+};

package/utils/zoomlevel-adjustment.d.ts

@@ -1,5 +1,5 @@
-import { Boundaries } from "../camera/utils/position";
-import { ZoomLevelLimits } from "../camera/utils/zoom";
+import { Boundaries } from '../camera/utils/position';
+import { ZoomLevelLimits } from '../camera/utils/zoom';
 /**
  * Calculates minimum zoom level to fit boundaries within canvas at any rotation.
  *