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;