useCanvasInput

useCanvasInput() connects pointer and mouse interaction to the editor canvas.

It handles interaction concerns like:

• selection
• dragging
• resize
• rotation
• panning
• pen/draw flows
• text editing interaction
• scope-aware hit testing

Usage

This composable is typically paired with useCanvas() and hit-test helpers from the renderer.

useCanvasInput(
  canvasRef,
  editor,
  hitTestSectionTitle,
  hitTestComponentLabel,
  hitTestFrameTitle,
)

Basic example

const canvas = useCanvas(canvasRef, editor)

useCanvasInput(
  canvasRef,
  editor,
  canvas.hitTestSectionTitle,
  canvas.hitTestComponentLabel,
  canvas.hitTestFrameTitle,
)

Practical examples

Track cursor movement in canvas space

useCanvasInput(
  canvasRef,
  editor,
  hitTestSectionTitle,
  hitTestComponentLabel,
  hitTestFrameTitle,
  (cx, cy) => {
    console.log(cx, cy)
  },
)

Notes

This composable is lower-level than most panel logic. It is best suited for editor shells and canvas containers.

Related APIs

• useCanvas
• useEditor