Port API in Angular Diagram API component
Defines the behavior of connection ports
Properties
addInfo
Object
Allows the user to save custom information/data about a port
Defaults to undefined
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.
Defaults to ‘Auto’
constraints
PortConstraints
Defines the constraints of port
Defaults to ‘Default’
height
number
Sets the height of the port
Defaults to 12
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
Defaults to ‘Center’
id
string
Defines the unique id of the port
Defaults to ”
inEdges
string[]
Defines the collection of the objects that are connected to a particular port
Defaults to undefined
margin
MarginModel
Defines the space that the port has to be moved from its actual position
Defaults to new Margin(0,0,0,0)
outEdges
string[]
Defines the collection of the objects that are connected to a particular port
Defaults to undefined
pathData
string
Defines the geometry of the port
Defaults to ”
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
Defaults to ‘Square’
style
ShapeStyleModel
Defines the appearance of the port
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');
Defaults to {}
DiagramTooltipModel
defines the tooltip for the Ports
Defaults to new DiagramToolTip();
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
Defaults to ‘Center’
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
Defaults to ‘Connect’
width
number
Sets the width of the port
Defaults to 12