OverlaySelectionFrameList

OverlaySelectionFrameList is a collection of selection frames around the cells to be used with Selection.

It extends the SelectionFrameList.

It's a common base class for SVGSelectionFrameList and HTMLSelectionFrameList.

It is not intended for direct use, but could be extended to create custom lists of selection frames.

margin

margin?: Margin;

It's the buffer space around the cell where the selection frame is drawn.

It can be a number, an object with any of the top, right, bottom, left, horizontal and vertical properties, or a function that returns a number or an object. The function is called with the cell and the frameList as arguments.

const frameList = new OverlaySelectionFrameList({
    margin: (cell) => {
        if (cell.isElement() && cell.hasPorts()) {
            return { vertical: 5, horizontal: 20 };
        }
        return 5;
    }
});

rotate

rotate?: boolean;

Should the selection frame rotate with the cell.

If true the frame will rotate with the cell. If false the frame will be aligned with the x-axis of the paper and will be drawn around the rotated cell.

It defaults to false.

useModelGeometry

useModelGeometry?: boolean | UseModelGeometryCallback;

Should the selection frame use the model geometry of the cell or read the position and size from the cell view (how it's rendered on the paper).

It defaults to false.

You can also specify which cells should use the model geometry by providing a callback function.

const frameList = new OverlaySelectionFrameList({
    // Use the model geometry for elements only.
    useModelGeometry: cell => cell.isElement(),
});

allowCellInteraction

allowCellInteraction?: boolean;

Can the user interact with the cell when the selection frame is visible?

It defaults to false.

Types

The following types are used in the OverlaySelectionFrameList API:

Margin

type Margin = dia.Sides | ((cell: dia.Cell) => dia.Sides);

Options

interface Options {
    margin?: Margin;
    rotate?: boolean;
    useModelGeometry?: boolean;
    allowCellInteraction?: boolean;
}

UseModelGeometryCallback

type UseModelGeometryCallback = (cell: dia.Cell) => boolean;