labels

23 Sep 20252 minutes to read

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

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

constraints AnnotationConstraints

Enables or disables the default behaviors of the label.

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

content string

Sets the textual description of the node/connector

dragLimit MarginModel

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

height number

Sets the height of the text

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

id string

Defines the unique id of the annotation

margin MarginModel

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

rotateAngle number

Sets the rotate angle of the text

rotationReference RotationReference

Gets or sets the reference mode for annotation rotation.

style TextStyleModel

Defines the appearance of the text

template string|HTMLElement|Function

Sets the textual description of the node/connector

tooltip DiagramTooltipModel

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

type AnnotationTypes

Sets the type of the annotation

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

visibility boolean

Defines the visibility of the label

width number

Sets the width of the text