Canvas API in Vue Diagram API component

Canvas module is used to define a plane(canvas) and to arrange the children based on margin

Properties

actualSize

Size

Gets the size that the element will be rendered

bounds

Rect

Gets/Sets the boundary of the element

children

DiagramElement[]

Gets/Sets the collection of child elements

connectionDirection

PortConnectionDirection

Sets/Gets the allowed direction for connections to the port

cornerRadius

number

Set the corner of the element

corners

Corners

Gets/Sets the corners of the rectangular bounds

description

string

Defines the description of the diagram element

desiredSize

Size

Gets the minimum size that is required by the element

flip

FlipDirection

Sets/Gets the mirror image of diagram element in both horizontal and vertical directions

• FlipHorizontal - Translate the diagram element throughout its immediate parent
• FlipVertical - Rotate the diagram element throughout its immediate parent

flipMode

FlipMode

Sets/Gets the element that is to be flipped in assigned flip direction along with the node

height

number

Sets/Gets the height of the element

horizontalAlignment

HorizontalAlignment

Sets/Gets how the element has to be horizontally arranged with respect to its immediate parent

• 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

id

string

Sets the unique id of the element

isRectElement

boolean

check whether the element is rect or not

isSvgRender

boolean

Gets/Set the boolean value for the element

maxHeight

number

Sets/Gets the maximum height of the element

maxWidth

number

Sets/Gets the maximum width of the element

minHeight

number

Sets/Gets the minimum height of the element

minWidth

number

Sets/Gets the minimum width of the element

offsetX

number

Sets/Gets the x-coordinate of the element

offsetY

number

Sets/Gets the y-coordinate of the element

padding

Thickness

Gets/Sets the space between the container and its immediate children

parentId

string

Gets the parent id for the element

parentTransform

number

Gets the rotate angle that is set to the immediate parent of the element

relativeMode

RelativeMode

Sets whether the element has to be aligned with respect to a point/with respect to its immediate parent

• Point - Diagram elements will be aligned with respect to a point
• Object - Diagram elements will be aligned with respect to its immediate parent

rotateAngle

number

Sets/Gets the rotate angle of the element

shadow

ShadowModel

Defines the appearance of the shadow of the element

shapeType

string

Defines the shape of the diagram element

staticSize

boolean

Defines whether the element has to be measured or not

transform

Transform

Sets whether the element has to be transformed based on its parent or not

• Self - Sets the transform type as Self
• Parent - Sets the transform type as Parent

verticalAlignment

VerticalAlignment

Sets/Gets how the element has to be vertically arranged with respect to its immediate parent

• 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

visible

boolean

Sets or gets whether the content of the element to be visible

width

number

Sets/Gets the width of the element

Methods

arrange

Arranges the child elements of the canvas

Returns Size

hasChildren

returns whether the container has child elements or not

Returns boolean