Search results

PathAnnotationModel API in Vue Diagram API component

Interface for a class PathAnnotation

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

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

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

displacement

PointModel

Sets the displacement of an annotation from its actual position

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

offset

number

Sets the segment offset of annotation

rotateAngle

number

Sets the rotate angle of the text

segmentAngle

boolean

Enable/Disable the angle based on the connector segment

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