UserHandle API in JavaScript (ES5) Diagram API control

A collection of frequently used commands that will be added around the selector

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

Properties

backgroundColor

string

Defines the background color of user Handle

Defaults to ‘black’

borderColor

string

Defines the borderColor of user Handle

Defaults to ”

borderWidth

number

Defines the borderWidth of user Handle

Defaults to 0.5

content

string

Defines the custom content of the user handle

Defaults to ”

disableConnectors

boolean

Defines the visible of user Handle

Defaults to false

disableNodes

boolean

Defines the visible of user Handle

Defaults to false

displacement

number

Defines the displacement of user Handle

Defaults to 10

horizontalAlignment

string

Defines the horizontal alignment of the user handle

• Stretch - Stretches the diagram element throughout its immediate parent
• Left - Aligns the diagram element at the left of its immediate parent
• Right - Aligns the diagram element at the right of its immediate parent
• Center - Aligns the diagram element at the center of its immediate parent
• Auto - Aligns the diagram element based on the characteristics of its immediate parent

Defaults to ‘Center’

margin

MarginModel

Defines the margin of the user handle

Defaults to new Margin(0,0,0,0)

name

string

Defines the name of user Handle

Defaults to ”

offset

number

Defines the offset of user Handle

Defaults to 0

pathColor

string

Defines the path color of user Handle

Defaults to ‘white’

pathData

string

Defines the path data of user Handle

Defaults to ”

side

string

Defines the position of user Handle

• Top - Aligns the user handles at the top of an object
• Bottom - Aligns the user handles at the bottom of an object
• Left - Aligns the user handles at the left of an object
• Right - Aligns the user handles at the right of an object

Defaults to ‘Top’

size

number

Defines the size of user Handle

Defaults to 25

source

string

Defines the image source of the user handle

Defaults to ”

tooltip

DiagramTooltipModel

Used to show tooltip for user handle on mouse over.

Defaults to {}

verticalAlignment

string

Defines the vertical alignment of the user handle

• Stretch - Stretches the diagram element throughout its immediate parent
• Top - Aligns the diagram element at the top of its immediate parent
• Bottom - Aligns the diagram element at the bottom of its immediate parent
• Center - Aligns the diagram element at the center of its immediate parent
• Auto - Aligns the diagram element based on the characteristics of its immediate parent

Defaults to ‘Center’

visible

boolean

Defines the visible of user Handle

Defaults to true