How to achieve In and Out behavior with Ports in JavaScript Diagram?

This article explains how to achieve In and Out behavior with Ports in JavaScript Diagram. In JavaScript Diagram, the ports are used as connection points. The port’s properties define the static port connection. Ports act as the connection points of the node and allow them to create connections with only those specific points. The source and target port IDs are used to create a connection between specific points of the source and target nodes.

The following code shows how to create a node and port:

var nodes = [
 {
 id: 'node1', width: 50, height: 50, offsetX: 300, offsetY: 150, shape: { cornerRadius: 3 },
 addInfo: [{ name: 'Elizabeth' }], annotations: [{ content: 'LMDrive Motor' }], style: { fill: '#99cc00' },
 ports: [
         {
           id: 'portName2', height: 10, width: 7, visibility: ej.diagrams.PortVisibility.Visible,
           offset: { x: -0.060, y: 0.5 }, style: { fill: '#99cc00' },
           addInfo: [{ name: 'InPort' }]
         },
         {
           id: 'portName1', height: 10, width: 7, visibility: ej.diagrams.PortVisibility.Visible,
           offset: { x: 1.060, y: 0.5 }, style: { fill: '#cc6600' },
           addInfo: [{ name: 'OutPort' }]
         },
     ]
}]

In the following code, the TargetPointChanged event will get triggered when the connector’s target point is changed.

if (args.state === 'Start' && !target) {
   target++;
   targetID = args.connector.targetID;
   targetPortID = args.connector.targetPortID;
   if (targetID === undefined) {
     targetPoint = args.connector.sourcePoint;
   }
 }

The following code shows that, at the state of completion, the targetPortId of the respective connector will change. Here, the getObject method is used to retrieve the new target node that has changed while in the completed state. The node can have a number of ports, and when the respective port matches the node’s port, the connection will be established, and the string value will also be stored here.

if (args.state === 'Completed') {
     let node: NodeModel = diagram.getObject(args.connector.targetID) as Node;
     let ports: any = node.ports;
     let nodePort: PointPortModel;
     let string: string;
     for (let i: number = 0; i < ports.length; i++) {
       if (ports[i].id === args.connector.targetPortID) {
         string = ports[i].addInfo[0].name;
         nodePort = ports[i];
       }
     }

The following code shows that the argument ‘arg.cancel’ is set to true at the completed state based on the condition. This means that if you try to connect an OutPort to another OutPort, then, at the state of completion, you can set ‘arg.cancel’ to true. Consequently, the connection will terminate, and the port will behave as an OutPort.

if (args.connector.targetPortID === '' || (string === 'OutPort' || string === undefined)) {
       args.cancel = true;
       if (this.targetID !== undefined) {
         args.connector.targetID = this.targetID;
         args.connector.targetPortID = this.targetPortID;
       } else {
         args.connector.targetPoint = this.targetPoint;
       }
       diagram.dataBind();
       diagram.clearSelection();
     }

The SourcePointChange event will be triggered when the source point of the connector is changed. Additionally, args.cancel is set to true at the completed state based on the condition. This means that if the node’s InPort is connected to another node’s InPort, then args.cancel will be set to true at the state of completion. As a result, the connection will be terminated, and the port will behave as an InPort. The following code demonstrates how to set args.cancel to true at the completed state of the SourcePointChange event.

function sourcePointChanged(args) {
 if (args.state === 'Start' && !start1) {
   start1++;
   if (args.connector.sourceID !== undefined) {
     sourceID = args.connector.sourceID;
     sourcePortID = args.connector.sourcePortID;
   } else {
     sourcePoint = args.connector.sourcePoint;
   }
 }
 if (args.state === 'Completed') {
   let node = diagram.getObject(args.connector.sourceID);
   let ports = node.ports;
   let nodePort;
   let string;
   for (let i = 0; i < ports.length; i++) {
     if (ports[i].id === args.connector.sourcePortID) {
       string = ports[i].addInfo[0].name;
       nodePort = ports[i];
     }
   }
   if (args.connector.sourcePortID === '' || (string === 'InPort' || string === undefined)) {
     args.cancel = true;
     if (sourceID !== undefined) {
       args.connector.sourceID = sourceID;
       args.connector.sourcePortID = sourcePortID;
     } else {
       args.connector.sourcePoint = sourcePoint;
     }
     diagram.dataBind();
     diagram.clearSelection();
   }
   start1 = 0;
 }
}

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

Conclusion

We hope you enjoyed learning about how to achieve In and Out behavior like logical gates with Ports.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our JavaScript 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!