SelectorModel API in JavaScript Diagram API control

Interface for a class Selector

Properties

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

height

number

Sets/Gets the height of the container

nodes

NodeModel[]

Defines the collection of selected nodes

offsetX

number

Sets the positionX of the container

offsetY

number

Sets the positionY of the container

pivot

PointModel

Sets the pivot of the selector

rotateAngle

number

Sets the rotate angle of the container

rubberBandSelectionMode

string

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

setTooltipTemplate

Function | string

setTooltipTemplate helps to customize the content of a tooltip

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');

width

number

Sets/Gets the width of the container

wrapper

Container

Defines the size and position of the container