Interface for a class Selector
Defines the collection of selected connectors
Controls the visibility of selector.
number
Sets/Gets the height of the container
Defines the collection of selected nodes
number
Sets the positionX of the container
number
Sets the positionY of the container
Sets the pivot of the selector
number
Sets the rotate angle of the container
string
Defines how to pick the objects to be selected using rubber band selection
Function
| string
setTooltipTemplate helps to customize the content of a tooltip
Defines the collection of user handle
<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ content: 'Default Shape' }]
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: {
type: 'Basic', shape: 'Ellipse'
},
annotations: [{ content: 'Path Element' }]
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 400 },
}];
let handle: UserHandleModel[] = [
{ name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
pathColor: 'yellow' }];
let diagram: Diagram = new Diagram({
...
connectors: connectors, nodes: nodes,
selectedItems: { constraints: SelectorConstraints.All, userHandles: handle },
...
});
diagram.appendTo('#diagram');
number
Sets/Gets the width of the container
Defines the size and position of the container