Skip to main content

Interface: PointsEditorProps

Defined in: react/src/components/PointsEditor/index.tsx:33

Properties​

children​

children: ReactNode;

Defined in: react/src/components/PointsEditor/index.tsx:148

The editor renders exactly what you compose here; there is no default markup to fall back to.

Example​

<PointsEditor.Root>
  <PointsEditor.Background>
    <svg viewBox="0 0 200 100">...</svg>
  </PointsEditor.Background>
  <PointsEditor.Container>
    {points.map((point, i) => (
      <PointsEditor.Point key={i} value={point} onChange={...} />
    ))}
  </PointsEditor.Container>
</PointsEditor.Root>

defaultSelection?​

optional defaultSelection?: string[];

Defined in: react/src/components/PointsEditor/index.tsx:128

The selection to start with, when the editor keeps its own.

disabled?​

optional disabled?: boolean;

Defined in: react/src/components/PointsEditor/index.tsx:38

Make the points unchangeable and remove them from the tab order. The parts carry data-disabled while it is set.

dragCursor?​

optional dragCursor?: Cursor;

Defined in: react/src/components/PointsEditor/index.tsx:51

The cursor to show while dragging a point. It is set on the dragged point, so it stays while the pointer is outside it.

Default​

'grabbing'

dragSensitivity?​

optional dragSensitivity?: ModifierValue<number>;

Defined in: react/src/components/PointsEditor/index.tsx:93

How much a drag moves a Point, per modifier key.

1 is the pointer position itself, which is what dragging a point normally is. Anything else turns the drag relative: 0.1 makes the same movement cover a tenth of the editor, so the point stops following the pointer and starts moving a tenth as fast. Shift is bound to 0.1 by default, to match what it does on the arrow keys.

Pressing or releasing the key mid-drag does not disturb the point: the travel so far is kept and the new sensitivity applies from there. The pointer and the point stay apart for the rest of the drag — snapping them back together on release would move the point nobody asked to move.

Default​

{ default: 1, shift: 0.1 }

keyboard?​

optional keyboard?: ModifierValue<InputEventOption> | null;

Defined in: react/src/components/PointsEditor/index.tsx:75

How much one arrow key press moves a Point. Left and right move x, up and down move y.

A position runs from 0 to 1, so ['normalized', n] and ['raw', n] both move it by n of the editor; give a map to set an amount per modifier key. null turns the arrow keys off, and a Point can override it with a keyboard of its own.

Default​

{ default: ['normalized', 0.01], shift: ['normalized', 0.001] }

onSelectionChange?​

optional onSelectionChange?: (selection) => void;

Defined in: react/src/components/PointsEditor/index.tsx:130

Called whenever the selection changes, controlled or not.

Parameters​

ParameterType
selectionstring[]

Returns​

void

readOnly?​

optional readOnly?: boolean;

Defined in: react/src/components/PointsEditor/index.tsx:43

Make the points unmovable. The parts carry data-readonly while it is set.

selectable?​

optional selectable?: boolean;

Defined in: react/src/components/PointsEditor/index.tsx:117

Let points be selected, and a selection be moved as one.

Off by default, because it changes what a press and a drag mean: a press on empty space starts a selection box rather than doing nothing, and a drag on a point moves everything else that is selected. An editor whose points each mean something different — the four handles of an ADSR envelope, say — has nothing to gain from moving them together.

A selection calls onChange on several points in the same tick, so each of them has to update from the previous state rather than from a value captured in the render:

onChange={(v) => setPoints((prev) => ({ ...prev, [id]: v }))}

Written the other way round — setPoints({ ...points, [id]: v }) — every call but the last is thrown away, and only one point appears to move.

Default​

false

selection?​

optional selection?: string[];

Defined in: react/src/components/PointsEditor/index.tsx:126

Ids of the selected points, to hold the selection yourself. Leave it out and the editor keeps its own.

A Point takes its id from its id prop, or generates one that lasts as long as it is mounted.

wheel?​

optional wheel?: ModifierValue<InputEventOption> | null;

Defined in: react/src/components/PointsEditor/index.tsx:63

How much one notch of the wheel moves the focused Point. Scrolling sideways, or with shift held, moves x; otherwise it moves y.

A position runs from 0 to 1, so ['normalized', n] and ['raw', n] both move it by n of the editor. null turns the wheel off, and a Point can override it with a wheel of its own.

Default​

['normalized', 0.01]