@ue-too/board / index / ObservableBoardCamera

インターフェイス: ObservableBoardCamera

定義: packages/board/src/camera/interface.ts:29

Observable camera interface that extends BoardCamera with event subscription capabilities. Allows observers to subscribe to camera state changes such as pan, zoom, and rotation events.

例

const camera: ObservableBoardCamera = new DefaultBoardCamera();

// Subscribe to pan events
const unsubscribe = camera.on('pan', (event, state) => {
  console.log('Camera panned by:', event.diff);
});

// Later, unsubscribe
unsubscribe();

拡張

• BoardCamera

プロパティ

boundaries?

optional boundaries: Boundaries

定義: packages/board/src/camera/interface.ts:102

Optional position boundaries for the camera in world coordinates

継承元

BoardCamera.boundaries

---

position

position: Point

定義: packages/board/src/camera/interface.ts:87

Current camera position in world coordinates (center of viewport)

継承元

BoardCamera.position

---

rotation

rotation: number

定義: packages/board/src/camera/interface.ts:90

Current rotation in radians (0 to 2π), normalized

継承元

BoardCamera.rotation

---

rotationBoundaries?

optional rotationBoundaries: RotationLimits

定義: packages/board/src/camera/interface.ts:108

Optional rotation constraints (start and end angles)

継承元

BoardCamera.rotationBoundaries

---

viewPortHeight

viewPortHeight: number

定義: packages/board/src/camera/interface.ts:99

Height of the viewport in CSS pixels

継承元

BoardCamera.viewPortHeight

---

viewPortWidth

viewPortWidth: number

定義: packages/board/src/camera/interface.ts:96

Width of the viewport in CSS pixels

継承元

BoardCamera.viewPortWidth

---

zoomBoundaries?

optional zoomBoundaries: ZoomLevelLimits

定義: packages/board/src/camera/interface.ts:105

Optional zoom level constraints (min and max zoom)

継承元

BoardCamera.zoomBoundaries

---

zoomLevel

zoomLevel: number

定義: packages/board/src/camera/interface.ts:93

Current zoom level (1.0 = 100%, 2.0 = 200%, etc.)

継承元

BoardCamera.zoomLevel

メソッド

convertFromViewPort2WorldSpace()

convertFromViewPort2WorldSpace(point): Point

定義: packages/board/src/camera/interface.ts:221

Converts a point from viewport coordinates to world coordinates.

パラメータ

point

Point

Point in viewport space (pixels from viewport center)

戻り値

Point

Corresponding point in world coordinates

例

// Convert mouse position (relative to viewport center) to world position
const mouseViewport = { x: mouseX - canvas.width/2, y: mouseY - canvas.height/2 };
const worldPos = camera.convertFromViewPort2WorldSpace(mouseViewport);

継承元

BoardCamera.convertFromViewPort2WorldSpace

---

convertFromWorld2ViewPort()

convertFromWorld2ViewPort(point): Point

定義: packages/board/src/camera/interface.ts:235

Converts a point from world coordinates to viewport coordinates.

パラメータ

point

Point

Point in world coordinates

戻り値

Point

Corresponding point in viewport space (pixels from viewport center)

例

// Find viewport position of a world object
const viewportPos = camera.convertFromWorld2ViewPort(objectWorldPos);

継承元

BoardCamera.convertFromWorld2ViewPort

---

getTransform()

getTransform(devicePixelRatio, alignCoordinateSystem): object

定義: packages/board/src/camera/interface.ts:272

Calculates the complete transformation matrix for rendering. This matrix transforms from world space to canvas pixel space.

パラメータ

devicePixelRatio

number

Device pixel ratio for high-DPI displays (typically window.devicePixelRatio)

alignCoordinateSystem

boolean

If true, uses standard coordinate system (y-up). If false, uses inverted y-axis

戻り値

object

2D transformation matrix in standard form

a

a: number

b

b: number

c

c: number

d

d: number

e

e: number

f

f: number

Remarks

Apply this matrix to canvas context: ctx.setTransform(a, b, c, d, e, f) The transformation includes devicePixelRatio scaling, viewport centering, rotation, zoom, and camera position.

例

const transform = camera.getTransform(window.devicePixelRatio, true);
ctx.setTransform(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
// Now draw in world coordinates

継承元

BoardCamera.getTransform

---

getTRS()

getTRS(devicePixelRatio, alignCoordinateSystem): object

定義: packages/board/src/camera/interface.ts:244

Decomposes the camera transformation into Translation, Rotation, and Scale components.

パラメータ

devicePixelRatio

number

Device pixel ratio for high-DPI displays

alignCoordinateSystem

boolean

If true, uses standard coordinate system (y-up). If false, uses inverted y-axis

戻り値

object

Object containing separate scale, rotation, and translation values

rotation

rotation: number

scale

scale: object

scale.x

x: number

scale.y

y: number

translation

translation: object

translation.x

x: number

translation.y

y: number

継承元

BoardCamera.getTRS

---

on()

on<K>(eventName, callback, options?): UnSubscribe

定義: packages/board/src/camera/interface.ts:55

Subscribes to camera events with an optional AbortController for cancellation.

型パラメーター

K

K extends keyof CameraEventMap

The event type key from CameraEventMap

パラメータ

eventName

K

The type of camera event to listen for ('pan', 'zoom', 'rotate', or 'all')

callback

(event, cameraState) => void

Function called when the event occurs, receives event data and current camera state

options?

SubscriptionOptions

Optional subscription configuration including AbortController signal

戻り値

UnSubscribe

Function to unsubscribe from the event

例

// Basic subscription
camera.on('zoom', (event, state) => {
  console.log(`Zoom changed by ${event.deltaZoomAmount}`);
});

// With AbortController for batch unsubscribing
const controller = new AbortController();
camera.on('pan', handlePan, { signal: controller.signal });
camera.on('zoom', handleZoom, { signal: controller.signal });

// Unsubscribe all at once
controller.abort();

---

setHorizontalBoundaries()

setHorizontalBoundaries(min, max): void

定義: packages/board/src/camera/interface.ts:195

Sets horizontal (x-axis) movement boundaries for the camera.

パラメータ

min

number

Minimum x coordinate in world space

max

number

Maximum x coordinate in world space

戻り値

void

Remarks

If min > max, values are automatically swapped.

継承元

BoardCamera.setHorizontalBoundaries

---

setMaxZoomLevel()

setMaxZoomLevel(maxZoomLevel): void

定義: packages/board/src/camera/interface.ts:184

Updates the maximum allowed zoom level.

パラメータ

maxZoomLevel

number

Maximum zoom level constraint

戻り値

void

継承元

BoardCamera.setMaxZoomLevel

---

setMinZoomLevel()

setMinZoomLevel(minZoomLevel): void

定義: packages/board/src/camera/interface.ts:177

Updates the minimum allowed zoom level.

パラメータ

minZoomLevel

number

Minimum zoom level constraint

戻り値

void

Remarks

If current zoom is below the new minimum, camera will zoom in to match the minimum.

継承元

BoardCamera.setMinZoomLevel

---

setPosition()

setPosition(destination): boolean

定義: packages/board/src/camera/interface.ts:145

Sets the camera position in world coordinates.

パラメータ

destination

Point

Target position for the camera center

戻り値

boolean

True if position was updated, false if rejected by boundaries or no significant change

Remarks

Position changes smaller than 10E-10 or 1/zoomLevel are ignored to prevent floating-point jitter. Position is clamped to boundaries if set.

継承元

BoardCamera.setPosition

---

setRotation()

setRotation(rotation): boolean

定義: packages/board/src/camera/interface.ts:167

Sets the camera rotation in radians.

パラメータ

rotation

number

Target rotation angle in radians

戻り値

boolean

True if rotation was updated, false if outside boundaries or already at limit

Remarks

Rotation is automatically normalized to 0-2π range. Clamped to rotationBoundaries if set.

継承元

BoardCamera.setRotation

---

setVerticalBoundaries()

setVerticalBoundaries(min, max): void

定義: packages/board/src/camera/interface.ts:206

Sets vertical (y-axis) movement boundaries for the camera.

パラメータ

min

number

Minimum y coordinate in world space

max

number

Maximum y coordinate in world space

戻り値

void

Remarks

If min > max, values are automatically swapped.

継承元

BoardCamera.setVerticalBoundaries

---

setZoomLevel()

setZoomLevel(zoomLevel): boolean

定義: packages/board/src/camera/interface.ts:156

Sets the camera zoom level.

パラメータ

zoomLevel

number

Target zoom level (1.0 = 100%)

戻り値

boolean

True if zoom was updated, false if outside boundaries or already at limit

Remarks

Zoom is clamped to zoomBoundaries if set. Values are clamped, not rejected.

継承元

BoardCamera.setZoomLevel

---

viewPortAABB()

viewPortAABB(alignCoordinate?): object

定義: packages/board/src/camera/interface.ts:119

Calculates the axis-aligned bounding box (AABB) of the viewport in world space.

パラメータ

alignCoordinate?

boolean

If true, uses standard coordinate system (y-up). If false, uses inverted y-axis

戻り値

object

Object with min and max points defining the bounding box

max

max: Point

min

min: Point

Remarks

Useful for culling and determining which objects are visible in the current viewport.

継承元

BoardCamera.viewPortAABB

---

viewPortInWorldSpace()

viewPortInWorldSpace(alignCoordinate?): object

定義: packages/board/src/camera/interface.ts:130

Calculates the four corners of the viewport in world space, accounting for rotation.

パラメータ

alignCoordinate?

boolean

If true, uses standard coordinate system (y-up). If false, uses inverted y-axis

戻り値

object

Object containing the four corner points (top-left, top-right, bottom-left, bottom-right)

bottom

bottom: object

bottom.left

left: Point

bottom.right

right: Point

top

top: object

top.left

left: Point

top.right

right: Point

Remarks

Returns the actual rotated viewport corners, not an AABB. Use this for precise viewport bounds.

継承元

BoardCamera.viewPortInWorldSpace