74 lines
1.2 KiB
Markdown
74 lines
1.2 KiB
Markdown
---
|
|
title: useCanvasInput
|
|
description: Wire canvas pointer input, dragging, selection, resize, rotation, and tool behavior.
|
|
---
|
|
|
|
# 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.
|
|
|
|
```ts
|
|
useCanvasInput(
|
|
canvasRef,
|
|
editor,
|
|
hitTestSectionTitle,
|
|
hitTestComponentLabel,
|
|
hitTestFrameTitle,
|
|
)
|
|
```
|
|
|
|
## Basic example
|
|
|
|
```ts
|
|
const canvas = useCanvas(canvasRef, editor)
|
|
|
|
useCanvasInput(
|
|
canvasRef,
|
|
editor,
|
|
canvas.hitTestSectionTitle,
|
|
canvas.hitTestComponentLabel,
|
|
canvas.hitTestFrameTitle,
|
|
)
|
|
```
|
|
|
|
## Practical examples
|
|
|
|
### Track cursor movement in canvas space
|
|
|
|
```ts
|
|
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](./use-canvas)
|
|
- [useEditor](./use-editor)
|