Selector API in JavaScript (ES5) Diagram API control

Defines the size and position of selected items and defines the appearance of selector

Properties

canToggleSelection

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.

Defaults to false

connectors

ConnectorModel[]

Defines the collection of selected connectors

constraints

SelectorConstraints

Controls the visibility of selector.

• None - Hides all the selector elements
• ConnectorSourceThumb - Shows/hides the source thumb of the connector
• ConnectorTargetThumb - Shows/hides the target thumb of the connector
• ResizeSouthEast - Shows/hides the bottom right resize handle of the selector
• ResizeSouthWest - Shows/hides the bottom left resize handle of the selector
• ResizeNorthEast - Shows/hides the top right resize handle of the selector
• ResizeNorthWest - Shows/hides the top left resize handle of the selector
• ResizeEast - Shows/hides the middle right resize handle of the selector
• ResizeWest - Shows/hides the middle left resize handle of the selector
• ResizeSouth - Shows/hides the bottom center resize handle of the selector
• ResizeNorth - Shows/hides the top center resize handle of the selector
• Rotate - Shows/hides the rotate handle of the selector
• UserHandles - Shows/hides the user handles of the selector
• Resize - Shows/hides all resize handles of the selector

Defaults to ‘All’

handleSize

number

Defines the size of the resize handler

Defaults to 14

height

number

Sets/Gets the height of the container

Defaults to undefined

nodes

NodeModel[]

Defines the collection of selected nodes

offsetX

number

Sets the positionX of the container

Defaults to 0

offsetY

number

Sets the positionY of the container

Defaults to 0

pivot

PointModel

Sets the pivot of the selector

Defaults to { x: 0.5, y: 0.5 }

rotateAngle

number

Sets the rotate angle of the container

Defaults to 0

rubberBandSelectionMode

RubberBandSelectionMode

Defines how to pick the objects to be selected using rubber band selection

• CompleteIntersect - Selects the objects that are contained within the selected region
• PartialIntersect - Selects the objects that are partially intersected with the selected region

Defaults to ‘CompleteIntersect’

selectedObjects

[]

Defines the collection of selected nodes and connectors

Defaults to []

setTooltipTemplate

Function | string

setTooltipTemplate helps to customize the content of a tooltip

Defaults to undefined

userHandles

UserHandleModel[]

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 []

width

number

Sets/Gets the width of the container

Defaults to undefined

wrapper

Container

Defines the size and position of the container

Defaults to null

Methods

init

Initializes the UI of the container

Returns Container