@ue-too/board
Version:
<h1 align="center"> uē-tôo </h1> <p align="center"> pan, zoom, rotate, and more with your html canvas. </p>
119 lines (118 loc) • 4.14 kB
TypeScript
import { CameraMux } from "./camera-mux";
/**
* Automatic camera panning triggered by cursor proximity to viewport edges.
* Commonly used in strategy games, map editors, and design tools.
*
* @remarks
* This class implements edge-scrolling behavior where the camera automatically
* pans when the cursor approaches the viewport edges. The panning speed is
* constant and direction-based (no acceleration).
*
* The camera moves in viewport space, meaning the speed is consistent regardless
* of zoom level. The actual world-space movement will vary with zoom.
*
* @example
* ```typescript
* const cameraMux = new CameraMux(camera);
* const edgeScroll = new EdgeAutoCameraInput(cameraMux);
*
* // Track mouse position relative to viewport edges
* canvas.addEventListener('mousemove', (e) => {
* const rect = canvas.getBoundingClientRect();
* const edgeMargin = 50; // pixels from edge
*
* let horizontal: 'left' | 'right' | 'none' = 'none';
* let vertical: 'up' | 'down' | 'none' = 'none';
*
* if (e.clientX - rect.left < edgeMargin) horizontal = 'left';
* if (rect.right - e.clientX < edgeMargin) horizontal = 'right';
* if (e.clientY - rect.top < edgeMargin) vertical = 'up';
* if (rect.bottom - e.clientY < edgeMargin) vertical = 'down';
*
* edgeScroll.setDirection(horizontal, vertical);
* edgeScroll.toggleOn();
* });
*
* // Stop scrolling when mouse leaves
* canvas.addEventListener('mouseleave', () => {
* edgeScroll.toggleOff();
* });
*
* // Update in render loop
* function render(deltaTime: number) {
* edgeScroll.update(deltaTime / 1000); // convert ms to seconds
* }
* ```
*
* @category Camera
* @see {@link CameraMux} for the camera input multiplexer this feeds into
*/
export declare class EdgeAutoCameraInput {
private _cameraMux;
private _state;
private _speed;
private _horizontalDirection;
private _verticalDirection;
/**
* Creates a new edge auto-scroll input controller.
*
* @param cameraMux - The camera multiplexer to send pan inputs to
*/
constructor(cameraMux: CameraMux);
/**
* Disables edge scrolling.
* The camera will stop panning even if direction is set.
*/
toggleOff(): void;
/**
* Enables edge scrolling.
* The camera will pan according to the current direction setting.
*/
toggleOn(): void;
/**
* Sets the scrolling direction based on cursor position relative to edges.
*
* @param horizontalDirection - Horizontal scroll direction ('left', 'right', or 'none')
* @param verticalDirection - Vertical scroll direction ('up', 'down', or 'none')
*
* @remarks
* Directions can be combined for diagonal scrolling.
* Set both to 'none' to stop scrolling without disabling via {@link toggleOff}.
*
* @example
* ```typescript
* edgeScroll.setDirection('left', 'none'); // Scroll left only
* edgeScroll.setDirection('right', 'up'); // Scroll diagonally up-right
* edgeScroll.setDirection('none', 'none'); // Stop scrolling
* ```
*/
setDirection(horizontalDirection: 'left' | 'right' | 'none', verticalDirection: 'up' | 'down' | 'none'): void;
/**
* Updates the camera position based on elapsed time and current direction.
* Call this in your render loop or update tick.
*
* @param deltaTime - Time elapsed since last update in seconds
*
* @remarks
* The camera pans at a constant speed of 100 pixels/second in viewport space.
* This is independent of zoom level - world-space movement varies with zoom.
*
* If the state is 'idle', this method does nothing.
*
* @example
* ```typescript
* // In animation frame callback
* let lastTime = performance.now();
*
* function animate(currentTime: number) {
* const deltaTime = (currentTime - lastTime) / 1000; // Convert to seconds
* lastTime = currentTime;
*
* edgeScroll.update(deltaTime);
*
* requestAnimationFrame(animate);
* }
* ```
*/
update(deltaTime: number): void;
}