Interface for a class Selector
boolean
Specifies whether the selection state of the diagram element should be toggled based on a mouse click at runtime. The default value is false.
Defines the collection of selected connectors
Controls the visibility of selector.
number
Defines the size of the resize handler
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
Defines how to pick the objects to be selected using rubber band selection
[]
Defines the collection of selected nodes and connectors
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