Search results

AnnotationModel API in React Diagram API component

Interface for a class 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');

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

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

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

style

TextStyleModel

Defines the appearance of the text

template

string | HTMLElement | Function

Sets the textual description of the node/connector

type

AnnotationTypes

Sets the type of the annotation

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

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

visibility

boolean

Defines the visibility of the label

width

number

Sets the width of the text