RangeSelectionRegion

RangeSelectionRegion is a component for selecting range regions.

The region can be drawn by the user using the pointer device or programmatically.

It extends the SelectionRegion.

constructor

constructor(options?: RangeSelectionRegion.Options);

It implements all the options from the SelectionRegion and adds the following options:

constraints

constraints?: Range | null;

[optional] The constraints of the range i.e. min and max. Default is null - no constraints.

const region = new RangeSelectionRegion({
    paper,
    // from 0 to the right until the infinity
    constraint: [0, Infinity],
});

domain

domain?: Range | null;

[optional] The domain of the range (the orthogonal dimension to the range). Default matches the paper size.

const area = paper.getArea();
const region = new RangeSelectionRegion({
    paper,
    domain: [area.y + 10, area.y + area.height - 10],
});

displayMode

displayMode?: DisplayMode;

[optional] The look of the range. Default is rect.

If set to line, the range will show only the current bound (a line) while the user is drawing the range.

If set to rect, the range will show both bounds (a rectangle) while the user is drawing the range.

const region = new RangeSelectionRegion({
    paper,
    displayMode: 'line',
});

vertical

vertical?: boolean;

[optional] The orientation of the range. Default is false i.e. finding the range on the x-axis.

const region = new RangeSelectionRegion({
    paper,
    vertical: true,
});

normalize

normalize?: boolean;

[optional] Normalize the range geometry. Default is true.

While drawing the region, the user can draw the range in any direction. When the user finishes drawing, the renge could be normalized or not.

If set to true, the region will always be ordered from the lower bound to the upper bound.

If set to false, the range first bound will be the point where the user started drawing the region and the second bound will be the point where the user finished drawing the region.

const region = new RangeSelectionRegion({
    paper,
    normalize: false,
});

Types

Range

Represents a range between two numbers.

type Range = [number, number];

DisplayMode

The list of possible display modes.

type DisplayMode = 'line' | 'rect';

Options

The extended SelectionRegion options.

interface Options extends SelectionRegion.Options<Range> {
    domain?: Range;
    constraints?: Range;
    vertical?: boolean;
    normalize?: boolean;
    displayMode?: DisplayMode;
}