@ue-too/board / index / CameraMuxWithAnimationAndLock

類別: CameraMuxWithAnimationAndLock

定義於: 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.

備註

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

範例

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

參閱

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

實作

• CameraMux

建構函式

建構函式

new CameraMuxWithAnimationAndLock(panStateMachine, zoomStateMachine, rotateStateMachine): CameraMuxWithAnimationAndLock

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:95

Creates a new camera mux with animation and locking capabilities.

參數

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

回傳

CameraMuxWithAnimationAndLock

備註

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

存取器

panStateMachine

Getter 簽章

get panStateMachine(): PanControlStateMachine

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:375

Gets the pan state machine.

備註

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

回傳

PanControlStateMachine

The pan state machine instance

---

rotateStateMachine

Getter 簽章

get rotateStateMachine(): RotateControlStateMachine

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:362

Gets the rotation state machine.

備註

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

回傳

RotateControlStateMachine

The rotation state machine instance

---

zoomStateMachine

Getter 簽章

get zoomStateMachine(): ZoomControlStateMachine

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:388

Gets the zoom state machine.

備註

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

回傳

ZoomControlStateMachine

The zoom state machine instance

方法

initatePanTransition()

initatePanTransition(): void

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:327

Initiates a transition in the pan state machine.

回傳

void

備註

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

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:349

Initiates a transition in the rotation state machine.

回傳

void

備註

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

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:338

Initiates a transition in the zoom state machine.

回傳

void

備註

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

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:167

Processes user pan input (implements CameraMux).

參數

delta

Point

Pan delta in viewport coordinates

回傳

CameraMuxPanOutput

Output indicating whether pan is allowed

備註

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

範例

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

實作了

CameraMux.notifyPanInput

---

notifyPanToAnimationInput()

notifyPanToAnimationInput(target): CameraMuxPanOutput

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:126

Initiates a pan animation to a target position.

參數

target

Point

Target position in world coordinates

回傳

CameraMuxPanOutput

Pan output indicating whether animation was initiated

備註

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.

範例

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

---

notifyRotateByInput()

notifyRotateByInput(delta): EventResult<RotateControlStates, RotateControlOutputEvent>

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:233

Processes user rotation input (rotate-by variant).

參數

delta

number

Rotation delta in radians

回傳

EventResult<RotateControlStates, RotateControlOutputEvent>

Output from rotation state machine

備註

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>

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:247

Initiates a rotation animation to a target angle.

參數

target

number

Target rotation angle in radians

回傳

EventResult<RotateControlStates, RotateControlOutputEvent>

Output from rotation state machine

備註

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

---

notifyRotationInput()

notifyRotationInput(delta): CameraMuxRotationOutput

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:307

Processes user rotation input (implements CameraMux).

參數

delta

number

Rotation delta in radians

回傳

CameraMuxRotationOutput

Output indicating whether rotation is allowed

備註

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

範例

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

實作了

CameraMux.notifyRotationInput

---

notifyZoomInput()

notifyZoomInput(delta, at): CameraMuxZoomOutput

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:203

Processes user zoom input (implements CameraMux).

參數

delta

number

Zoom delta (change in zoom level)

at

Point

Anchor point in viewport coordinates

回傳

CameraMuxZoomOutput

Output indicating whether zoom is allowed

備註

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

範例

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

實作了

CameraMux.notifyZoomInput

---

notifyZoomInputAnimation()

notifyZoomInputAnimation(targetZoom, at): void

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:262

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

參數

targetZoom

number

Target zoom level

at

Point = ...

Anchor point in viewport coordinates (defaults to origin)

回傳

void

備註

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

定義於: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:279

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

參數

targetZoom

number

Target zoom level

at

Point = ...

Anchor point in world coordinates (defaults to origin)

回傳

void

備註

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