PathAnnotation

23 Sep 20254 minutes to read

Defines the connector annotation

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

alignment AnnotationAlignment

Sets the segment alignment of annotation

  • Center - Aligns the annotation at the center of a connector segment
  • Before - Aligns the annotation before a connector segment
  • After - Aligns the annotation after a connector segment

Defaults to Center

annotationType AnnotationType

Defines the type of annotation template
String - Defines annotation template to be in string
Template - Defines annotation template to be in html content

Defaults to ‘String’

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

displacement PointModel

Sets the displacement of an annotation from its actual position

Defaults to undefined

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 HorizontalAlignment

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 number

Sets the segment offset of annotation

Defaults to 0.5

rotateAngle number

Sets the rotate angle of the text

Defaults to 0

rotationReference RotationReference

Gets or sets the reference mode for annotation rotation.

Defaults to ‘Parent’

segmentAngle boolean

Enable/Disable the angle based on the connector segment

Defaults to false

style TextStyleModel

Defines the appearance of the text

Defaults to new TextStyle()

template string|HTMLElement|Function

Sets the textual description of the node/connector

Defaults to ‘undefined’

tooltip DiagramTooltipModel

This property is used to show tooltip for annotation on mouse over.

Defaults to new DiagramToolTip();

type AnnotationTypes

Sets the type of the annotation

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

Defaults to ‘Shape’

verticalAlignment VerticalAlignment

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