SelectorModel

23 Sep 20254 minutes to read

Interface for a class 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.

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

handleSize number

Defines the size of the resize handler

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

selectedObjects []

Defines the collection of selected nodes and connectors

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 GroupableView

Defines the size and position of the container