@ue-too/board / index / EdgeAutoCameraInput

クラス: EdgeAutoCameraInput

定義: packages/board/src/camera/camera-edge-auto-input.ts:53

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.

例

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
}

参照

CameraMux for the camera input multiplexer this feeds into

コンストラクター

コンストラクター

new EdgeAutoCameraInput(cameraMux): EdgeAutoCameraInput

定義: packages/board/src/camera/camera-edge-auto-input.ts:66

Creates a new edge auto-scroll input controller.

パラメータ

cameraMux

CameraMux

The camera multiplexer to send pan inputs to

戻り値

EdgeAutoCameraInput

メソッド

setDirection()

setDirection(horizontalDirection, verticalDirection): void

定義: packages/board/src/camera/camera-edge-auto-input.ts:103

Sets the scrolling direction based on cursor position relative to edges.

パラメータ

horizontalDirection

Horizontal scroll direction ('left', 'right', or 'none')

"none" | "left" | "right"

verticalDirection

Vertical scroll direction ('up', 'down', or 'none')

"none" | "up" | "down"

戻り値

void

Remarks

Directions can be combined for diagonal scrolling. Set both to 'none' to stop scrolling without disabling via toggleOff.

例

edgeScroll.setDirection('left', 'none');  // Scroll left only
edgeScroll.setDirection('right', 'up');   // Scroll diagonally up-right
edgeScroll.setDirection('none', 'none');  // Stop scrolling

---

toggleOff()

toggleOff(): void

定義: packages/board/src/camera/camera-edge-auto-input.ts:74

Disables edge scrolling. The camera will stop panning even if direction is set.

戻り値

void

---

toggleOn()

toggleOn(): void

定義: packages/board/src/camera/camera-edge-auto-input.ts:82

Enables edge scrolling. The camera will pan according to the current direction setting.

戻り値

void

---

update()

update(deltaTime): void

定義: packages/board/src/camera/camera-edge-auto-input.ts:138

Updates the camera position based on elapsed time and current direction. Call this in your render loop or update tick.

パラメータ

deltaTime

number

Time elapsed since last update in seconds

戻り値

void

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.

例

// 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);
}