UNPKG

@ue-too/board

Version:

<h1 align="center"> uē-tôo </h1> <p align="center"> pan, zoom, rotate, and more with your html canvas. </p>

220 lines (219 loc) 10.2 kB
import type { EventReactions, State, BaseContext } from "@ue-too/being"; import { TemplateState, TemplateStateMachine } from "@ue-too/being"; /** * State identifiers for the rotation control state machine. * * @remarks * Three states manage rotation input and animations: * - `ACCEPTING_USER_INPUT`: Normal state, accepts user rotation input * - `TRANSITION`: Animation/transition state, may block user input * - `LOCKED_ON_OBJECT`: Camera locked to follow a specific object rotation * * @category Input Flow Control */ export type RotateControlStates = "ACCEPTING_USER_INPUT" | "TRANSITION" | "LOCKED_ON_OBJECT"; /** * Payload for rotate-by input events (relative rotation). * @category Input Flow Control */ export type RotateByInputEventPayload = { /** Rotation angle delta in radians */ diff: number; }; /** * Payload for rotate-to input events (absolute rotation). * @category Input Flow Control */ export type RotateToInputEventPayload = { /** Target rotation angle in radians */ target: number; }; /** Empty payload for events that don't need data */ type EmptyPayload = {}; /** * Event payload type mapping for the rotation control state machine. * * @remarks * Maps event names to their payload types. Events include: * - User input events (`userRotateByInput`, `userRotateToInput`) * - Transition/animation events (`transitionRotateByInput`, `transitionRotateToInput`) * - Locked object events (`lockedOnObjectRotateByInput`, `lockedOnObjectRotateToInput`) * - Control events (`unlock`, `initateTransition`) * * @category Input Flow Control */ export type RotateEventPayloadMapping = { "userRotateByInput": RotateByInputEventPayload; "userRotateToInput": RotateToInputEventPayload; "transitionRotateByInput": RotateByInputEventPayload; "transitionRotateToInput": RotateToInputEventPayload; "lockedOnObjectRotateByInput": RotateByInputEventPayload; "lockedOnObjectRotateToInput": RotateToInputEventPayload; "unlock": EmptyPayload; "initateTransition": EmptyPayload; }; /** * Discriminated union of output events from rotation control state machine. * * @remarks * Output events instruct the camera system what rotation operation to perform: * - `rotateBy`: Relative rotation by delta angle * - `rotateTo`: Absolute rotation to target angle * - `none`: No operation (input blocked) * * @category Input Flow Control */ export type RotateControlOutputEvent = { type: "rotateBy"; delta: number; } | { type: "rotateTo"; target: number; } | { type: "none"; }; /** * Output event type mapping for rotation control events. * Maps input event names to their corresponding output event types. * * @category Input Flow Control */ export type RotateControlOutputMapping = { "userRotateByInput": RotateControlOutputEvent; "userRotateToInput": RotateControlOutputEvent; "transitionRotateByInput": RotateControlOutputEvent; "transitionRotateToInput": RotateControlOutputEvent; "lockedOnObjectRotateByInput": RotateControlOutputEvent; "lockedOnObjectRotateToInput": RotateControlOutputEvent; }; /** * State machine controlling rotation input flow and animations. * * @remarks * This state machine manages the lifecycle of rotation operations: * - **User input handling**: Accepts or blocks user rotation gestures based on state * - **Animation control**: Manages smooth rotate-to animations * - **Object tracking**: Supports locking camera to follow objects with rotation * * **State transitions:** * - `ACCEPTING_USER_INPUT` → `TRANSITION`: Start animation (`initateTransition`) * - `ACCEPTING_USER_INPUT` → `LOCKED_ON_OBJECT`: Lock to object (`lockedOnObjectRotate...`) * - `TRANSITION` → `ACCEPTING_USER_INPUT`: User input interrupts animation * - `LOCKED_ON_OBJECT` → `ACCEPTING_USER_INPUT`: Unlock (`unlock` event) * * Helper methods simplify event dispatching without memorizing event names. * * @example * ```typescript * const stateMachine = createDefaultRotateControlStateMachine(cameraRig); * * // User rotates - accepted in ACCEPTING_USER_INPUT state * const result = stateMachine.notifyRotateByInput(Math.PI / 4); * * // Start animation - transitions to TRANSITION state * stateMachine.notifyRotateToAnimationInput(Math.PI); * * // User input now blocked while animating * ``` * * @category Input Flow Control * @see {@link createDefaultRotateControlStateMachine} for factory function */ export declare class RotateControlStateMachine extends TemplateStateMachine<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping> { constructor(states: Record<RotateControlStates, State<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping>>, initialState: RotateControlStates, context: BaseContext); /** * Notifies the state machine of user rotation input. * * @param diff - Rotation angle delta in radians * @returns Event handling result with output event * * @remarks * Dispatches `userRotateByInput` event. Accepted in `ACCEPTING_USER_INPUT` and `TRANSITION` states, * where it may transition back to `ACCEPTING_USER_INPUT` (user interrupting animation). */ notifyRotateByInput(diff: number): import("@ue-too/being").EventResult<RotateControlStates, RotateControlOutputEvent>; /** * Initiates a rotation animation to a target angle. * * @param target - Target rotation angle in radians * @returns Event handling result * * @remarks * Dispatches `transitionRotateToInput` event, starting a rotation animation. * Transitions to `TRANSITION` state where animation updates occur. */ notifyRotateToAnimationInput(target: number): import("@ue-too/being").EventResult<RotateControlStates, RotateControlOutputEvent>; /** * Initiates transition to `TRANSITION` state. * * @remarks * Forces state change to begin animation or transition sequence. * Called when starting programmatic camera movements. */ initateTransition(): void; } /** * State implementation for accepting user rotation input (idle/normal state). * Accepts user rotation input and can transition to animation or locked states. * @category Input Flow Control */ export declare class RotationAcceptingUserInputState extends TemplateState<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping> { constructor(); protected _eventReactions: EventReactions<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping>; userRotateByInputHandler(context: BaseContext, payload: RotateByInputEventPayload): RotateControlOutputEvent; userRotateToInputHandler(context: BaseContext, payload: RotateToInputEventPayload): RotateControlOutputEvent; lockedOnObjectRotateByInputHandler(context: BaseContext, payload: RotateByInputEventPayload): RotateControlOutputEvent; lockedOnObjectRotateToInputHandler(context: BaseContext, payload: RotateToInputEventPayload): RotateControlOutputEvent; } /** * State implementation for rotation animations and transitions. * Processes animation updates and allows user input to interrupt. * @category Input Flow Control */ export declare class RotationTransitionState extends TemplateState<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping> { constructor(); protected _eventReactions: EventReactions<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping>; userRotateByInputHandler(context: BaseContext, payload: RotateByInputEventPayload): RotateControlOutputEvent; userRotateToInputHandler(context: BaseContext, payload: RotateToInputEventPayload): RotateControlOutputEvent; transitionRotateByInputHandler(context: BaseContext, payload: RotateByInputEventPayload): RotateControlOutputEvent; transitionRotateToInputHandler(context: BaseContext, payload: RotateToInputEventPayload): RotateControlOutputEvent; lockedOnObjectRotateByInputHandler(context: BaseContext, payload: RotateByInputEventPayload): RotateControlOutputEvent; lockedOnObjectRotateToInputHandler(context: BaseContext, payload: RotateToInputEventPayload): RotateControlOutputEvent; } /** * State implementation for camera locked to follow an object rotation. * Only accepts locked object rotation events until unlocked. * @category Input Flow Control */ export declare class RotationLockedOnObjectState extends TemplateState<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping> { constructor(); protected _eventReactions: EventReactions<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping>; lockedOnObjectRotateByInputHandler(context: BaseContext, payload: RotateByInputEventPayload): RotateControlOutputEvent; lockedOnObjectRotateToInputHandler(context: BaseContext, payload: RotateToInputEventPayload): RotateControlOutputEvent; } /** * Creates the default set of rotation control states. * @returns State instances for all rotation control states * @category Input Flow Control */ export declare function createDefaultRotateControlStates(): Record<RotateControlStates, State<RotateEventPayloadMapping, BaseContext, RotateControlStates, RotateControlOutputMapping>>; /** * Creates a rotation control state machine with default configuration. * * @param context - Camera rig or context for rotation operations * @returns Configured rotation control state machine starting in `ACCEPTING_USER_INPUT` state * * @remarks * Factory function for creating a rotation state machine with sensible defaults. * The machine starts in `ACCEPTING_USER_INPUT` state, ready to accept user rotation gestures. * * @example * ```typescript * const cameraRig = createDefaultCameraRig(camera); * const rotateSM = createDefaultRotateControlStateMachine(cameraRig); * ``` * * @category Input Flow Control */ export declare function createDefaultRotateControlStateMachine(context?: BaseContext): RotateControlStateMachine; export {};