@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.

備註

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

備註

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

備註

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