EJ1Port

23 Sep 20252 minutes to read

Properties

addInfo Object

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

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

height number

Sets the height of the port

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

outEdges string[]

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

pathData string

Defines the geometry of the port

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

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