Connector port positioning in automatic layout

[Sourangsu Dasgupta]

While using automatic layout and TopToBottom orientation in it - incoming connectors to a specific node always gets ported at the upper edge of the node (image on the RHS), and outgoing connectors comes out from bottom edge.

additional information: We are using node template which is rectangular in nature and along with that some additional styling.

while using Left To Right orientation instead of upper and lower edge it's along the left and right edge (image on LHS).

like the image below

Wanted to understand is it possible have the ports distributed along every sides of the node automatically based on proximity and relative positioning of the node w.r.t another node.

e.g., there might be scenarios where this node in discussion might be connected to several more tasks oriented along the diagram in any position, so if we have a node placed horizontally next to current node in top to bottom layout, is it possible to connect with the said node through inward/outward direction using the sidewise edge? or node placed vertically next to current node in left to right layout, is it possible to connect with the said node through inward/outward direction using the upper/lower edge?  ​

Please note we are using automatic layout.

[Vivisa Ganesan]

Hi,

In automatic layout, the nodes and connectors are automatically arranged by our algorithm. You cannot create any ports in the layout. If we create ports and establish connection between ports and then call our layout, the nodes overlapping occurs. Without using layout, you can create ports and establish connection between port to port. Please refer to the documentation below to know more about ports.

Documentation: https://ej2.syncfusion.com/javascript/documentation/diagram/ports/

Regards,

Vivisa

[Sourangsu Dasgupta]

Thanks for the explanation, automatic layout has a property connectionPointOrigin: ej.diagrams.ConnectionPointOrigin.DifferentPoint,

would also like to confirm if it's possible to have separate connectionPointOrigin value for different nodes, for example if it's possible to have a specific type of node with ConnectionPointOrigin value as SamePoint and others with DifferentPoint

[Vivisa Ganesan]

We cannot set the connectionPointOrigin property to the specific node. This property applies for the entire layout based on our layout algorithm. Please refer to the below code example and sample.

Code-snippet:

 layout: {

    type: 'ComplexHierarchicalTree',

    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,

    horizontalSpacing: 40,

    verticalSpacing: 40,

    orientation: 'TopToBottom',

    margin: { left: 10, right: 0, top: 50, bottom: 0 },

  },

 

Sample: https://stackblitz.com/edit/wwtsun?file=index.ts

Regards,

Vivisa