ShapeAnnotation
23 Sep 20254 minutes to read
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
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 ’’
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’
hyperlink HyperlinkModel
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
rotationReference RotationReference
Gets or sets the reference mode for annotation rotation.
Defaults to ‘Parent’
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