DiagramHtmlElement

12 Sep 20254 minutes to read

HTMLElement defines the basic html elements

Properties

actualSize Size

Gets the size that the element will be rendered

bounds Rect

Gets/Sets the boundary of the element

cornerRadius number

Set the corner of the element

desiredSize Size

Gets the minimum size that is required by the element

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

isDirt boolean

Sets or gets whether the content of the element needs to be measured

margin MarginModel

Sets/Gets the margin of 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

parentTransform number

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

pivot PointModel

Sets/Gets the reference point of the element

<div id='diagram'></div>

let stackPanel: StackPanel = new StackPanel();
stackPanel.offsetX = 300; stackPanel.offsetY = 200;
stackPanel.width = 100; stackPanel.height = 100;
stackPanel.style.fill = 'red';
stackPanel.pivot = { x: 0.5, y: 0.5 };
let diagram: Diagram = new Diagram({
...
basicElements: [stackPanel],
...
});
diagram.appendTo('#diagram');

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

staticSize boolean

Defines whether the element has to be measured or not

style ShapeStyleModel

Sets the style of the element

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 element

Parameter	Type	Description
desiredSize	`Size`

Returns Size

getAbsolutePosition

Gets the position of the element with respect to its parent

Parameter	Type	Description
size	`Size`

Returns PointModel

measure

Measures the minimum space that the element requires

Parameter	Type	Description
availableSize	`Size`