Defines the size and position of selected items and defines the appearance of selector
Defines the collection of selected connectors
Controls the visibility of selector.
Defaults to ‘All’
number
Sets/Gets the height of the container
Defaults to undefined
Defines the collection of selected nodes
number
Sets the positionX of the container
Defaults to 0
number
Sets the positionY of the container
Defaults to 0
Sets the pivot of the selector
Defaults to { x: 0.5, y: 0.5 }
number
Sets the rotate angle of the container
Defaults to 0
string
Defines how to pick the objects to be selected using rubber band selection
Defaults to ‘CompleteIntersect’
Function
| string
setTooltipTemplate helps to customize the content of a tooltip
Defaults to undefined
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');
Defaults to []
number
Sets/Gets the width of the container
Defaults to undefined
Defines the size and position of the container
Defaults to null
Initializes the UI of the container
Returns Container