CanvasInputAdapter

Bridges DOM canvas pointer events (pointermove, pointerdown, pointerup) to ComponentMgr's headless pointer methods, so both mouse and touch work. Converts screen pixel coordinates to Normalised Device Coordinates (NDC) before forwarding.

Pointer down is registered with capture so that block-drag detection runs before other listeners (e.g. camera or orbit controls).

Getting started

const inputAdapter = new CanvasInputAdapter({
  $el: renderer.domElement,
  componentMgr,
});

// Later, when tearing down:
inputAdapter.dispose();

Disabling Camera Controls During Block Drag

Optional: pass onBlockDragStart and onBlockDragEnd to disable camera controls during block drag so the user can move a placed block without rotating the view:

const inputAdapter = new CanvasInputAdapter({
  $el: renderer.domElement,
  componentMgr,
  onBlockDragStart: () => { orbitControls.enabled = false; },
  onBlockDragEnd: () => { orbitControls.enabled = true; },
});

NDC Conversion Formula

Screen coordinates are converted to NDC using the canvas's bounding rect:

$$x = \frac{clientX - rect.left}{rect.width} \times 2 - 1$$

$$y = -\frac{clientY - rect.top}{rect.height} \times 2 + 1$$

$E = mc^2$

x = ((clientX - rect.left) / rect.width)  * 2 - 1
y = -((clientY - rect.top)  / rect.height) * 2 + 1

NDC range: X ∈ [-1, 1] (left to right), Y ∈ [-1, 1] (bottom to top, Y-flipped from CSS).

When NOT to Use CanvasInputAdapter

CanvasInputAdapter is a convenience wrapper. Do not use it if:

• You are handling touch events or custom pointer events
• You are embedding the canvas inside a framework component that manages events
• You need fine-grained control over which events trigger snapping (e.g. right-click drag to pan)

In these cases, call ComponentMgr's pointer methods directly:

// On pointermove
componentMgr.updatePointer(ndcX, ndcY);

// On pointerdown
componentMgr.onPointerDown(ndcX, ndcY, event.clientX, event.clientY);

// On pointerup
componentMgr.onPointerUp(ndcX, ndcY, event.clientX, event.clientY);

Where ndcX and ndcY are computed using the formula above (or your equivalent for the coordinate space you are working in).

API

Constructor (args = {})

The constructor method initialises the new CanvasInputAdapter instance

It immediately attaches pointermove, pointerdown (with capture), and pointerup listeners to $el. It uses setPointerCapture / releasePointerCapture so that move and up events are delivered to the canvas during touch drag.

Parameters

• $el: The canvas element to listen on
• componentMgr: The ComponentMgr instance to forward events to
• onBlockDragStart: Optional. Called when a block drag has started (pointer down on selected block). Use e.g. to disable camera/orbit controls.
• onBlockDragEnd: Optional. Called when a block drag has ended (pointer up after drag). Use e.g. to re-enable camera controls.

Methods

dispose()

Removes all pointer event listeners from $el and nulls internal references. Call when the canvas is unmounted or the configurator is torn down.