@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.
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
例
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
実装
コンストラクター
コンストラクター
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
State machine controlling pan operations and animations
zoomStateMachine
State machine controlling zoom operations and animations
rotateStateMachine
State machine controlling rotation operations and animations
戻り値
CameraMuxWithAnimationAndLock
Remarks
Typically created via factory functions like createCameraMuxWithAnimationAndLock rather than direct instantiation.
アクセッサー
panStateMachine
署名を取得する
get panStateMachine():
PanControlStateMachine
定義: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:375
Gets the pan state machine.
Remarks
Provides direct access to the pan state machine for advanced control or state inspection.
戻り値
The pan state machine instance
rotateStateMachine
署名を取得する
get rotateStateMachine():
RotateControlStateMachine
定義: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:362
Gets the rotation state machine.
Remarks
Provides direct access to the rotation state machine for advanced control or state inspection.
戻り値
The rotation state machine instance
zoomStateMachine
署名を取得する
get zoomStateMachine():
ZoomControlStateMachine
定義: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:388
Gets the zoom state machine.
Remarks
Provides direct access to the zoom state machine for advanced control or state inspection.
戻り値
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
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
定義: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:349
Initiates a transition in the rotation state machine.
戻り値
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
定義: packages/board/src/camera/camera-mux/animation-and-lock/animation-and-lock.ts:338
Initiates a transition in the zoom state machine.
戻り値
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
定義: 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
戻り値
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
例
// User drags mouse
const result = mux.notifyPanInput({ x: 50, y: 30 });
if (result.allowPassThrough) {
// Apply pan to camera
cameraRig.panByViewPort(result.delta);
}の実装
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
戻り値
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.
例
// 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
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>
定義: 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
Remarks
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
戻り値
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
例
// User rotates camera
const result = mux.notifyRotationInput(0.1);
if (result.allowPassThrough) {
cameraRig.rotateBy(result.delta);
}の実装
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
戻り値
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
例
// User scrolls mouse wheel
const result = mux.notifyZoomInput(0.1, mousePosition);
if (result.allowPassThrough) {
// Apply zoom to camera
cameraRig.zoomByAt(result.delta, result.anchorPoint);
}の実装
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
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
定義: 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
Remarks
Similar to notifyZoomInputAnimation but accepts world-space coordinates for the anchor point instead of viewport coordinates.