How to establish port to port connection without connecting to a node in React Diagram?

This article explains how to establish port-to-port connections without connecting to a node in React Diagram. To establish a port-to-port connection in React Diagram, initially, create ports for all the nodes involved. If you wish to remove connections between nodes, you can achieve this by adjusting the InConnect and OutConnect constraints within the NodeConstraints. Here’s a breakdown of the process.

To remove inEdges for a node:
To eliminate only the incoming edge connections for nodes, you can simply remove the InConnect constraints from the node’s constraints.

let node = [
 {
   offsetX: 200,
   offsetY: 180,
   width: 100,
   height: 100,
   constraints: NodeConstraints.Default & ~NodeConstraints.InConnect 
}]

To remove outEdges for a node:
To remove only the outEdges connection for the nodes, you can remove the OutConnect constraints from the node constraints.

let node = [
 {
   offsetX: 200,
   offsetY: 180,
   width: 100,
   height: 100,
   constraints: NodeConstraints.Default &~ NodeConstraints.OutConnect
 }]

To remove node-to-node connection:
If you intend to remove the establishment of connections between nodes, it’s necessary to remove both the InConnect and OutConnect constraints from the node’s constraints.

let node = [
 {
   offsetX: 200,
   offsetY: 180,
   width: 100,
   height: 100,
  constraints: NodeConstraints.Default &~ NodeConstraints.InConnect &~ NodeConstraints.OutConnect
 }]

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to establish port-to-port connection without connecting to a node in React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!