PathPortModel API in JavaScript (ES5) Diagram API control

Interface for a class PathPort

Properties

addInfo

Object

Allows the user to save custom information/data about a port

alignment

PortAlignment

Sets the segment alignment of ports

• Center - Aligns the ports at the center of a connector segment
• Before - Aligns the ports before a connector segment
• After - Aligns the ports after a connector segment

connectionDirection

PortConnectionDirection

Defines the allowed direction for connections to the port

• Auto - Maintains the default behavior of automatic direction calculation.
• Left - Restricts connections to only connect to the left side of the port.
• Top - Restricts connections to only connect to the top side of the port.
• Right - Restricts connections to only connect to the right side of the port.
• Bottom - Restricts connections to only connect to the bottom side of the port.

constraints

PortConstraints

Defines the constraints of port

displacement

PointModel

Sets the displacement of an ports from its actual position

height

number

Sets the height of the port

horizontalAlignment

HorizontalAlignment

Sets the horizontal alignment of the port with respect to its immediate 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

id

string

Defines the unique id of the port

inEdges

string[]

Defines the collection of the objects that are connected to a particular port

margin

MarginModel

Defines the space that the port has to be moved from its actual position

offset

number

Sets the segment offset of port

outEdges

string[]

Defines the collection of the objects that are connected to a particular port

pathData

string

Defines the geometry of the port

shape

PortShapes

Defines the type of the port shape

• X - Sets the decorator shape as X
• Circle - Sets the decorator shape as Circle
• Square - Sets the decorator shape as Square
• Custom - Sets the decorator shape as Custom

style

ShapeStyleModel

Defines the appearance of the port

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

  let port: PointPortModel[] =
[{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 } },];
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
}];
nodes.ports = port;
let diagram: Diagram = new Diagram({
...
nodes : nodes,
...
});
diagram.appendTo('#diagram');

tooltip

DiagramTooltipModel

defines the tooltip for the Ports

verticalAlignment

VerticalAlignment

Sets the vertical alignment of the port with respect to its immediate 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

PortVisibility

Defines the type of the port visibility

• Visible - Always shows the port
• Hidden - Always hides the port
• Hover - Shows the port when the mouse hovers over a node
• Connect - Shows the port when a connection end point is dragged over a node

width

number

Sets the width of the port