JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ShapeAnnotation API in JavaScript (ES5) Diagram API control

Defines the textual description of nodes/connectors with respect to bounds

Properties

addInfo

Object

Allows the user to save custom information/data about an annotation

<div id='diagram'></div>
let addInfo: {}  = { content: 'label' };
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ id: 'label1',
content: 'text', constraints: ~AnnotationConstraints.InheritReadOnly, addInfo: addInfo
}],
}];
let diagram: Diagram = new Diagram({
...
nodes : nodes,
...
});
diagram.appendTo('#diagram');

Defaults to undefined

constraints

AnnotationConstraints

Enables or disables the default behaviors of the label.

  • ReadOnly - Enables/Disables the ReadOnly Constraints
  • InheritReadOnly - Enables/Disables the InheritReadOnly Constraints

Defaults to ‘InheritReadOnly’

content

string

Sets the textual description of the node/connector

Defaults to ”

dragLimit

MarginModel

Sets the space to be left between an annotation and its parent node/connector

Defaults to new Margin(20,20,20,20)

height

number

Sets the height of the text

Defaults to undefined

horizontalAlignment

string

Sets the horizontal alignment of the text with respect to the parent node/connector

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

Sets the hyperlink of the label

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ id: 'label1',
content: 'Default Shape', style: { color: 'red' },
hyperlink: { link: 'https://www.google.com', color : 'blue', textDecoration : 'Overline', content : 'google' }
}, {content: 'text', constraints: ~AnnotationConstraints.InheritReadOnly
}],
}];
let diagram: Diagram = new Diagram({
...
nodes : nodes,
...
});
diagram.appendTo('#diagram');

Defaults to undefined

id

string

Defines the unique id of the annotation

Defaults to ”

margin

MarginModel

Sets the space to be left between an annotation and its parent node/connector

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

offset

PointModel

Sets the position of the annotation with respect to its parent bounds

Defaults to { x: 0.5, y: 0.5 }

rotateAngle

number

Sets the rotate angle of the text

Defaults to 0

style

TextStyleModel

Defines the appearance of the text

Defaults to new TextStyle()

template

string | HTMLElement

Sets the textual description of the node/connector

Defaults to ‘undefined’

type

string

Sets the type of the annotation

  • Shape - Sets the annotation type as Shape
  • Path - Sets the annotation type as Path

Defaults to ‘Shape’

verticalAlignment

string

Sets the vertical alignment of the text with respect to the parent node/connector

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

visibility

boolean

Defines the visibility of the label

Defaults to true

width

number

Sets the width of the text

Defaults to undefined

Previous
Next