@niuee/board
Version:
<h1 align="center"> board </h1> <p align="center"> board supercharges your html canvas element giving it the capabilities to pan, zoom, rotate, and much more. </p> <p align="center"> <a href="https://www.npmjs.com/package/@niuee/board">
184 lines (183 loc) • 7.51 kB
TypeScript
import { EventReactions, EventGuards, Guard, TemplateState, TemplateStateMachine } from "../being/interfaces";
import { Point } from "../util/misc";
import { KmtInputContext } from "./kmt-input-context";
/**
* @description The possible states of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export type KmtInputStates = "IDLE" | "READY_TO_PAN_VIA_SPACEBAR" | "READY_TO_PAN_VIA_SCROLL_WHEEL" | "PAN" | "INITIAL_PAN" | "PAN_VIA_SCROLL_WHEEL";
/**
* @description The payload for the pointer event.
*
* @category Input State Machine
*/
export type PointerEventPayload = {
x: number;
y: number;
};
type EmptyPayload = {};
/**
* @description The payload for the scroll event.
*
* @category Input State Machine
*/
export type ScrollEventPayload = {
deltaX: number;
deltaY: number;
};
/**
* @description The payload for the scroll with ctrl event.
*
* @category Input State Machine
*/
export type ScrollWithCtrlEventPayload = {
deltaX: number;
deltaY: number;
x: number;
y: number;
};
/**
* @description The payload mapping for the events of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export type KmtInputEventMapping = {
leftPointerDown: PointerEventPayload;
leftPointerUp: PointerEventPayload;
leftPointerMove: PointerEventPayload;
spacebarDown: EmptyPayload;
spacebarUp: EmptyPayload;
stayIdle: EmptyPayload;
cursorOnElement: EmptyPayload;
scroll: ScrollEventPayload;
scrollWithCtrl: ScrollWithCtrlEventPayload;
middlePointerDown: PointerEventPayload;
middlePointerUp: PointerEventPayload;
middlePointerMove: PointerEventPayload;
};
/**
* @description Converts the point from window coordinates(browser) to view port coordinates.
*
* @category Input State Machine
*/
export declare function convertFromWindow2ViewPort(point: Point, canvas: HTMLCanvasElement): Point;
/**
* @description The possible target states of the idle state.
*
* @category Input State Machine
*/
export type KmtIdleStatePossibleTargetStates = "IDLE" | "READY_TO_PAN_VIA_SPACEBAR" | "READY_TO_PAN_VIA_SCROLL_WHEEL";
/**
* @description The idle state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class KmtIdleState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtIdleStatePossibleTargetStates> {
constructor();
protected _guards: Guard<KmtInputContext, "isIdle">;
protected _eventGuards: Partial<EventGuards<KmtInputEventMapping, KmtIdleStatePossibleTargetStates, KmtInputContext, Guard<KmtInputContext>>>;
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtIdleStatePossibleTargetStates>;
private _eventReactions;
scrollHandler(context: KmtInputContext, payload: ScrollEventPayload): void;
scrollWithCtrlHandler(context: KmtInputContext, payload: ScrollWithCtrlEventPayload): void;
spacebarDownHandler(context: KmtInputContext, payload: EmptyPayload): void;
middlePointerDownHandler(context: KmtInputContext, payload: PointerEventPayload): void;
}
/**
* @description The possible target states of the ready to select state.
*
* @category Input State Machine
*/
export type ReadyToSelectStatePossibleTargetStates = "IDLE" | "SELECTING";
/**
* @description The context for the ready to select state.
*
* @category Input State Machine
*/
export type SelectionContext = {
setSelectionEndPoint: (point: Point) => void;
toggleSelectionBox: (show: boolean) => void;
cleanup: () => void;
setup: () => void;
canvas: HTMLCanvasElement;
};
/**
* @description The ready to select state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class ReadyToSelectState extends TemplateState<KmtInputEventMapping, SelectionContext, ReadyToSelectStatePossibleTargetStates> {
constructor();
leftPointerMove: any;
private _eventReactions;
get eventReactions(): EventReactions<KmtInputEventMapping, SelectionContext, ReadyToSelectStatePossibleTargetStates>;
}
/**
* @description The ready to pan via space bar state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class ReadyToPanViaSpaceBarState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
constructor();
private _eventReactions;
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
leftPointerDownHandler(context: KmtInputContext, payload: PointerEventPayload): void;
spacebarUpHandler(context: KmtInputContext, payload: EmptyPayload): void;
}
/**
* @description The initial pan state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class InitialPanState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
constructor();
private _eventReactions;
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
leftPointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): void;
leftPointerUpHandler(context: KmtInputContext, payload: PointerEventPayload): void;
}
/**
* @description The ready to pan via scroll wheel state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class ReadyToPanViaScrollWheelState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
constructor();
private _eventReactions;
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
middlePointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): void;
middlePointerUpHandler(context: KmtInputContext, payload: PointerEventPayload): void;
}
/**
* @description The pan state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class PanState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
constructor();
private _eventReactions;
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
leftPointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): void;
spacebarUpHandler(context: KmtInputContext, payload: EmptyPayload): void;
leftPointerUpHandler(context: KmtInputContext, payload: PointerEventPayload): void;
}
/**
* @description The pan via scroll wheel state of the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare class PanViaScrollWheelState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
private _eventReactions;
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
middlePointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): void;
middlePointerUpHandler(context: KmtInputContext, payload: PointerEventPayload): void;
}
export type KmtInputStateMachine = TemplateStateMachine<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
/**
* @description Creates the keyboard mouse and trackpad input state machine.
*
* @category Input State Machine
*/
export declare function createKmtInputStateMachine(context: KmtInputContext): KmtInputStateMachine;
export {};