components/PointsEditor

Interfaces

PointProps

Defined in: react/src/components/PointsEditor/Point.tsx:42

Type Parameters

Type Parameter
`T` extends `PointBaseType`

Properties

color?

optional color?: string;

Defined in: react/src/components/PointsEditor/Point.tsx:60

Sets --color.

disabled?

optional disabled?: boolean;

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

Overrides the disabled of PointsEditor.Root.

height?

optional height?: string | number;

Defined in: react/src/components/PointsEditor/Point.tsx:58

Sets --height.

id?

optional id?: string;

Defined in: react/src/components/PointsEditor/Point.tsx:49

How the selection refers to this point. One is generated when it is left out, which lasts as long as the point is mounted — give your own if the selection has to survive a remount, or be recognised in your own state.

keyboard?

optional keyboard?: InputEventOptions | null;

Defined in: react/src/components/PointsEditor/Point.tsx:70

Overrides the keyboard of PointsEditor.Root.

max?

optional max?: Partial<PointBaseType>;

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

min?

optional min?: Partial<PointBaseType>;

Defined in: react/src/components/PointsEditor/Point.tsx:50

onChange?

optional onChange?: (value) => void;

Defined in: react/src/components/PointsEditor/Point.tsx:72

Parameters

Parameter	Type
`value`	`PointBaseType`

Returns

void

onDragEnd?

optional onDragEnd?: (value) => void;

Defined in: react/src/components/PointsEditor/Point.tsx:74

Parameters

Parameter	Type
`value`	`PointBaseType`

Returns

void

onDragStart?

optional onDragStart?: (value) => void;

Defined in: react/src/components/PointsEditor/Point.tsx:73

Parameters

Parameter	Type
`value`	`PointBaseType`

Returns

void

readonly?

optional readonly?: boolean;

Defined in: react/src/components/PointsEditor/Point.tsx:65

Overrides the readonly of PointsEditor.Root.

size?

optional size?: string | number;

Defined in: react/src/components/PointsEditor/Point.tsx:54

Width and height at once. Sets both --width and --height.

value

value: T;

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

wheel?

optional wheel?: InputEventOptions | null;

Defined in: react/src/components/PointsEditor/Point.tsx:68

Overrides the wheel of PointsEditor.Root.

width?

optional width?: string | number;

Defined in: react/src/components/PointsEditor/Point.tsx:56

Sets --width; the size the theme gives it stands when omitted.

PointsEditorBackgroundProps

Defined in: react/src/components/PointsEditor/Background.tsx:5

Properties

children?

optional children?: ReactNode;

Defined in: react/src/components/PointsEditor/Background.tsx:7

Whatever the points are placed over: a graph, a canvas, an image.

PointsEditorContainerProps

Defined in: react/src/components/PointsEditor/Container.tsx:11

Properties

children?

optional children?: ReactNode;

Defined in: react/src/components/PointsEditor/Container.tsx:13

<PointsEditor.Point /> goes here.

ref?

optional ref?: Ref<HTMLDivElement>;

Defined in: react/src/components/PointsEditor/Container.tsx:14

PointsEditorProps

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

Properties

children

children: ReactNode;

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

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:184

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

disabled?

optional disabled?: boolean;

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

Only the appearance will change. Please consider using with readonly. aria-disabled property is also applied.

dragSensitivity?

optional dragSensitivity?: ModifierValue<number>;

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

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 }

externalStyles?

optional externalStyles?: object;

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

cursor?

optional cursor?: Cursor;

userSelectNone?

optional userSelectNone?: boolean;

height?

optional height?: string | number;

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

Sets --height.

keyboard?

optional keyboard?: InputEventOptions | null;

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

How much one arrow key press moves a Point.

Shift moves a tenth of the default amount. Name a modifier to change that, or pass a bare tuple to use no modifier at all.

If null, no event will be triggered. A Point can override it with a keyboard of its own.

onSelectionChange?

optional onSelectionChange?: (selection) => void;

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

Called whenever the selection changes, controlled or not.

Parameters

Parameter	Type
`selection`	`string`[]

Returns

void

readonly?

optional readonly?: boolean;

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

Make the points unmovable. aria-readonly property is also applied.

selectable?

optional selectable?: boolean;

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

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 rubber band 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:182

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?: InputEventOptions | null;

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

wheel control option for every Point. Scrolling sideways moves x, which is what a browser turns shift+wheel into. If null, no event will be triggered

A Point can override it with a wheel of its own.

width?

optional width?: string | number;

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

Sets --width; the size the theme gives it stands when omitted.

Type Aliases

PointBaseType

type PointBaseType = object;

Defined in: react/src/components/PointsEditor/Point.tsx:29

Properties

x

x: number;

Defined in: react/src/components/PointsEditor/Point.tsx:29

y

y: number;

Defined in: react/src/components/PointsEditor/Point.tsx:29

PointsEditorContextValue

type PointsEditorContextValue = object;

Defined in: react/src/components/PointsEditor/context.tsx:36

Properties

beginMarquee

beginMarquee: (at, modifiers) => void;

Defined in: react/src/components/PointsEditor/context.tsx:77

Parameters

Parameter	Type
`at`	`PointBaseType`
`modifiers`	`ModifierState`

Returns

void

beginPointDrag

beginPointDrag: (id, modifiers) => void;

Defined in: react/src/components/PointsEditor/context.tsx:66

A pointer went down on a point: works out the new selection and takes the snapshot the move will be measured against.

Parameters

Parameter	Type
`id`	`string`
`modifiers`	`ModifierState`

Returns

void

containerRef

containerRef: RefObject<HTMLDivElement | null>;

Defined in: react/src/components/PointsEditor/context.tsx:54

Container registers its element here; Point normalizes the pointer against it, so a point is placed by its position within the container.

disabled

disabled: boolean;

Defined in: react/src/components/PointsEditor/context.tsx:37

dragSensitivity

dragSensitivity: ModifierValue<number>;

Defined in: react/src/components/PointsEditor/context.tsx:44

Inherited by every Point. See PointsEditorProps.dragSensitivity.

endMarquee

endMarquee: () => void;

Defined in: react/src/components/PointsEditor/context.tsx:79

Returns

void

externalStyles

externalStyles: object;

Defined in: react/src/components/PointsEditor/context.tsx:45

cursor?

optional cursor?: Cursor;

userSelectNone?

optional userSelectNone?: boolean;

keyboard

keyboard: InputEventOptions | null;

Defined in: react/src/components/PointsEditor/context.tsx:42

Inherited by every Point; null turns the keyboard off.

marquee

marquee: Marquee | null;

Defined in: react/src/components/PointsEditor/context.tsx:76

The rubber band, while one is being dragged.

moveMarquee

moveMarquee: (to) => void;

Defined in: react/src/components/PointsEditor/context.tsx:78

Parameters

Parameter	Type
`to`	`PointBaseType`

Returns

void

movePointDrag

movePointDrag: (delta) => void;

Defined in: react/src/components/PointsEditor/context.tsx:68

Move everything the drag picked up, by one amount, clamped as one.

Parameters

Parameter	Type
`delta`	`PointBaseType`

Returns

void

nudgeSelection

nudgeSelection: (id, delta) => void;

Defined in: react/src/components/PointsEditor/context.tsx:73

Move the selection by an amount that did not come from a drag — an arrow key or a wheel notch. The current values are the starting point.

Parameters

Parameter	Type
`id`	`string`
`delta`	`PointBaseType`

Returns

void

readonly

readonly: boolean;

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

registerPoint

registerPoint: (id, entry) => () => void;

Defined in: react/src/components/PointsEditor/context.tsx:61

Parameters

Parameter	Type
`id`	`string`
`entry`	`RefObject`<`PointRegistration`>

Returns

() => void

selectable

selectable: boolean;

Defined in: react/src/components/PointsEditor/context.tsx:57

Whether points can be selected at all. See PointsEditorProps.selectable.

selection

selection: readonly string[];

Defined in: react/src/components/PointsEditor/context.tsx:59

Ids of the points currently selected. Always empty while selectable is off.

wheel

wheel: InputEventOptions | null;

Defined in: react/src/components/PointsEditor/context.tsx:40

Inherited by every Point; null turns the wheel off.

Variables

PointsEditor

const PointsEditor: object;

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

Multiple Point Controller

Type Declaration

Background

Background: (__namedParameters) => Element;

Parameters

Parameter	Type
`__namedParameters`	`PointsEditorBackgroundProps` & `Omit`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`>, `"children"`>

Returns

Element

Container

Container: (__namedParameters) => Element;

Parameters

Parameter	Type
`__namedParameters`	`PointsEditorContainerProps` & `Omit`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`>, keyof `PointsEditorContainerProps`>

Returns

Element

Point

Point: <T>(__namedParameters) => Element;

Type Parameters

Type Parameter
`T` extends `PointBaseType`

Parameters

Parameter	Type
`__namedParameters`	`PointProps`<`T`> & `Omit`<`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`>, keyof `PointProps`<`T`>>

Returns

Element

Root

Root: ForwardRefExoticComponent<PointsEditorProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PointsEditorProps> & RefAttributes<HTMLDivElement>>;

Root

const Root: ForwardRefExoticComponent<PointsEditorProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PointsEditorProps> & RefAttributes<HTMLDivElement>>;

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

Functions

clampPoint()

function clampPoint(
   point, 
   min?, 
   max?
): object;

Defined in: react/src/components/PointsEditor/Point.tsx:31

Parameters

Parameter	Type
`point`	`PointBaseType`
`min?`	`Partial`<`PointBaseType`>
`max?`	`Partial`<`PointBaseType`>

Returns

object

x

x: number = newX;

y

y: number = newY;

usePointsEditorContext()

Call Signature

function usePointsEditorContext(): PointsEditorContextValue;

Defined in: react/src/components/PointsEditor/context.tsx:92

The settings Root was given, for the subcomponents to read. A point's value still belongs to the Point that draws it; what the root keeps is which points are selected, and a registry of who they are.

Returns

PointsEditorContextValue

Call Signature

function usePointsEditorContext<T>(selector): T;

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

Type Parameters

Type Parameter
`T`

Parameters

Parameter	Type
`selector`	(`state`) => `T`

Returns

T

Interfaces​

PointProps​

Type Parameters​

Properties​

color?​

disabled?​

height?​

id?​

keyboard?​

max?​

min?​

onChange?​

Parameters​

Returns​

onDragEnd?​

Parameters​

Returns​

onDragStart?​

Parameters​

Returns​

readonly?​

size?​

value​

wheel?​

width?​

PointsEditorBackgroundProps​

Properties​

children?​

PointsEditorContainerProps​

Properties​

children?​

ref?​

PointsEditorProps​

Properties​

children​

Example​

defaultSelection?​

disabled?​

dragSensitivity?​

Default​

externalStyles?​

cursor?​

userSelectNone?​

height?​

keyboard?​

onSelectionChange?​

Parameters​

Returns​

readonly?​

selectable?​

Default​

selection?​

wheel?​

width?​

Type Aliases​

PointBaseType​

Properties​

x​

y​

PointsEditorContextValue​

Properties​

beginMarquee​

Parameters​

Returns​

beginPointDrag​

Parameters​

Returns​

containerRef​

disabled​

dragSensitivity​

endMarquee​

Returns​

externalStyles​

cursor?​

userSelectNone?​

keyboard​

marquee​

moveMarquee​

Parameters​

Returns​

Interfaces

PointProps

Type Parameters

Properties

color?

disabled?

height?

id?

keyboard?

max?

min?

onChange?

Parameters

Returns

onDragEnd?

Parameters

Returns

onDragStart?

Parameters

Returns

readonly?

size?

value

wheel?

width?

PointsEditorBackgroundProps

Properties

children?

PointsEditorContainerProps

Properties

children?

ref?

PointsEditorProps

Properties

children

Example

defaultSelection?

disabled?

dragSensitivity?

Default

externalStyles?

cursor?

userSelectNone?

height?

keyboard?

onSelectionChange?

Parameters

Returns

readonly?

selectable?

Default

selection?

wheel?

width?

Type Aliases

PointBaseType

Properties

x

y

PointsEditorContextValue

Properties

beginMarquee

Parameters

Returns

beginPointDrag

Parameters

Returns

containerRef

disabled

dragSensitivity

endMarquee

Returns

externalStyles

cursor?

userSelectNone?

keyboard

marquee

moveMarquee

Parameters

Returns