Interactivity

Vizzy provides two systems for making scenes interactive: controls (HTML widgets that overlay the canvas) and interaction (mouse events directly on shapes).

Controls

Controls are HTML inputs — sliders, checkboxes, color pickers — that float over the canvas in a collapsible panel. When a control changes, the scene re-renders automatically.

The Pattern

1. Call controls.panel() to create the overlay panel
2. Create controls — each returns a handle with a .value property
3. Use controls.onUpdate() to react when any control changes

Combining Controls

Mix different control types in one panel. They all trigger the same onUpdate callback:

Available Controls

Control	Signature	Returns
Slider	controls.slider(label, { min, max, value, step })	ControlHandle<number>
Checkbox	controls.checkbox(label, { value })	ControlHandle<boolean>
Color	controls.color(label, { value })	ControlHandle<string>
Select	controls.select(label, { options, value })	ControlHandle<string>
Text	controls.text(label, { value, placeholder })	ControlHandle<string>

Each handle has .value (current value), .set(v) (update programmatically), and .onChange(fn) (per-control callback).

Mouse Interaction

The interact API lets you make shapes draggable, hoverable, and clickable. Hit testing works through the scene graph — clicking on text above a shape correctly targets the shape underneath if only the shape is interactive.

Draggable

interact.draggable(shape, opts) makes a shape follow the mouse. The onDrag callback receives the world-space position:

TIP

The cursor automatically changes to grab/grabbing for draggable shapes, pointer for hoverable/clickable shapes.

Hover and Click

• interact.hoverable(shape, { onEnter, onLeave }) — mouse enter/leave
• interact.clickable(shape, { onClick }) — click handler

Constrained Dragging

Restrict drag movement to a range with constrainX and constrainY. This is useful for building slider-like interactions:

Cleanup

Each interaction method returns an unsubscribe function: const unsub = interact.draggable(shape, opts). Call unsub() to remove the interaction.