UserHandle

23 Sep 20254 minutes to read

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 HorizontalAlignment

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 Side

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 VerticalAlignment

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