@ue-too/board / CameraMuxWithAnimationAndLock

Class: CameraMuxWithAnimationAndLock

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:79

Advanced camera input multiplexer with animation support and input locking via state machines.

Remarks

This CameraMux implementation provides sophisticated input flow control using separate state machines for pan, zoom, and rotation. Each state machine can:

• Block user input during camera animations
• Manage animation playback
• Arbitrate between user input and programmatic camera control
• Handle transitions between different camera control states

Key features:

• Animation system: Support for smooth camera animations (pan-to, zoom-to, rotate-to)
• Input locking: Automatically block user input during animations
• State-based control: Each camera operation (pan/zoom/rotate) has its own state machine
• Flexible transitions: Initiate transitions to interrupt or chain animations

Architecture:

• Three independent state machines: PanControlStateMachine, ZoomControlStateMachine, RotateControlStateMachine
• Each state machine decides whether to allow or block input based on current state
• State machines receive events and produce output events for camera operations

When to use:

• Applications requiring smooth camera animations (e.g., "focus on object", "zoom to region")
• UI where user input should be blocked during programmatic camera movements
• Games or interactive experiences with scripted camera sequences

Alternatives:

• Use Relay for simple passthrough without animation support
• Implement custom CameraMux for different state management approaches

Example

const camera = new DefaultBoardCamera();
const mux = createCameraMuxWithAnimationAndLock(camera);

// Start a pan animation - user input will be blocked
mux.notifyPanToAnimationInput({ x: 1000, y: 500 });

// User tries to pan during animation - will be blocked
const result = mux.notifyPanInput({ x: 50, y: 30 });
// result.allowPassThrough = false (blocked during animation)

// After animation completes, user input allowed again

See

• CameraMux for the interface definition
• Relay for simpler passthrough implementation
• createCameraMuxWithAnimationAndLock for factory function

Implements

• CameraMux

Constructors

Constructor

new CameraMuxWithAnimationAndLock(panStateMachine, zoomStateMachine, rotateStateMachine): CameraMuxWithAnimationAndLock

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:95

Creates a new camera mux with animation and locking capabilities.

Parameters

panStateMachine

PanControlStateMachine

State machine controlling pan operations and animations

zoomStateMachine

ZoomControlStateMachine

State machine controlling zoom operations and animations

rotateStateMachine

RotateControlStateMachine

State machine controlling rotation operations and animations

Returns

CameraMuxWithAnimationAndLock

Remarks

Typically created via factory functions like createCameraMuxWithAnimationAndLock rather than direct instantiation.

Accessors

panStateMachine

Get Signature

get panStateMachine(): PanControlStateMachine

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:373

Gets the pan state machine.

Remarks

Provides direct access to the pan state machine for advanced control or state inspection.

Returns

PanControlStateMachine

The pan state machine instance

---

rotateStateMachine

Get Signature

get rotateStateMachine(): RotateControlStateMachine

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:360

Gets the rotation state machine.

Remarks

Provides direct access to the rotation state machine for advanced control or state inspection.

Returns

RotateControlStateMachine

The rotation state machine instance

---

zoomStateMachine

Get Signature

get zoomStateMachine(): ZoomControlStateMachine

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:386

Gets the zoom state machine.

Remarks

Provides direct access to the zoom state machine for advanced control or state inspection.

Returns

ZoomControlStateMachine

The zoom state machine instance

Methods

initatePanTransition()

initatePanTransition(): void

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:325

Initiates a transition in the pan state machine.

Returns

void

Remarks

This method forces the pan state machine to transition to its next state. Can be used to interrupt animations or force state changes.

---

initateRotateTransition()

initateRotateTransition(): void

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:347

Initiates a transition in the rotation state machine.

Returns

void

Remarks

This method forces the rotation state machine to transition to its next state. Can be used to interrupt animations or force state changes.

---

initateZoomTransition()

initateZoomTransition(): void

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:336

Initiates a transition in the zoom state machine.

Returns

void

Remarks

This method forces the zoom state machine to transition to its next state. Can be used to interrupt animations or force state changes.

---

notifyPanInput()

notifyPanInput(delta): CameraMuxPanOutput

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:167

Processes user pan input (implements CameraMux).

Parameters

delta

Point

Pan delta in viewport coordinates

Returns

CameraMuxPanOutput

Output indicating whether pan is allowed

Remarks

This method is called when the user attempts to pan the camera (e.g., mouse drag). The pan state machine determines whether to allow the input based on current state:

• Allowed: When in idle state or user control state
• Blocked: When camera animation is playing

Example

// User drags mouse
const result = mux.notifyPanInput({ x: 50, y: 30 });
if (result.allowPassThrough) {
  // Apply pan to camera
  cameraRig.panByViewPort(result.delta);
}

Implementation of

CameraMux.notifyPanInput

---

notifyPanToAnimationInput()

notifyPanToAnimationInput(target): CameraMuxPanOutput

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:126

Initiates a pan animation to a target position.

Parameters

target

Point

Target position in world coordinates

Returns

CameraMuxPanOutput

Pan output indicating whether animation was initiated

Remarks

This method starts a camera pan animation to the specified world position. The state machine handles:

• Starting the animation
• Blocking user input during animation
• Producing incremental pan deltas each frame

The animation continues until the camera reaches the target or is interrupted.

Example

// Animate camera to world position
mux.notifyPanToAnimationInput({ x: 1000, y: 500 });

---

notifyRotateByInput()

notifyRotateByInput(delta): EventResult<RotateControlStates, RotateControlOutputEvent>

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:231

Processes user rotation input (rotate-by variant).

Parameters

delta

number

Rotation delta in radians

Returns

EventResult<RotateControlStates, RotateControlOutputEvent>

Output from rotation state machine

Remarks

Delegates to the rotation state machine's rotate-by handler. The state machine determines whether to allow rotation based on current state.

---

notifyRotateToAnimationInput()

notifyRotateToAnimationInput(target): EventResult<RotateControlStates, RotateControlOutputEvent>

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:245

Initiates a rotation animation to a target angle.

Parameters

target

number

Target rotation angle in radians

Returns

EventResult<RotateControlStates, RotateControlOutputEvent>

Output from rotation state machine

Remarks

Starts a camera rotation animation to the specified angle. User input will be blocked during the animation.

---

notifyRotationInput()

notifyRotationInput(delta): CameraMuxRotationOutput

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:305

Processes user rotation input (implements CameraMux).

Parameters

delta

number

Rotation delta in radians

Returns

CameraMuxRotationOutput

Output indicating whether rotation is allowed

Remarks

This method is called when the user attempts to rotate the camera. The rotation state machine determines whether to allow the input based on current state:

• Allowed: When in idle state or user control state
• Blocked: When rotation animation is playing

Example

// User rotates camera
const result = mux.notifyRotationInput(0.1);
if (result.allowPassThrough) {
  cameraRig.rotateBy(result.delta);
}

Implementation of

CameraMux.notifyRotationInput

---

notifyZoomInput()

notifyZoomInput(delta, at): CameraMuxZoomOutput

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:203

Processes user zoom input (implements CameraMux).

Parameters

delta

number

Zoom delta (change in zoom level)

at

Point

Anchor point in viewport coordinates

Returns

CameraMuxZoomOutput

Output indicating whether zoom is allowed

Remarks

This method is called when the user attempts to zoom (e.g., mouse wheel). The zoom state machine determines whether to allow the input based on current state:

• Allowed: When in idle state or user control state
• Blocked: When zoom animation is playing

Example

// User scrolls mouse wheel
const result = mux.notifyZoomInput(0.1, mousePosition);
if (result.allowPassThrough) {
  // Apply zoom to camera
  cameraRig.zoomByAt(result.delta, result.anchorPoint);
}

Implementation of

CameraMux.notifyZoomInput

---

notifyZoomInputAnimation()

notifyZoomInputAnimation(targetZoom, at): void

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:260

Initiates a zoom animation to a target level at a viewport position.

Parameters

targetZoom

number

Target zoom level

at

Point = ...

Anchor point in viewport coordinates (defaults to origin)

Returns

void

Remarks

Starts a zoom animation that zooms to the specified level while keeping the anchor point stationary (zoom-to-cursor behavior). User input will be blocked during the animation.

---

notifyZoomInputAnimationWorld()

notifyZoomInputAnimationWorld(targetZoom, at): void

Defined in: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:277

Initiates a zoom animation to a target level at a world position.

Parameters

targetZoom

number

Target zoom level

at

Point = ...

Anchor point in world coordinates (defaults to origin)

Returns

void

Remarks

Similar to notifyZoomInputAnimation but accepts world-space coordinates for the anchor point instead of viewport coordinates.