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

This article explains how to achieve In and Out behavior with Ports in Vue Diagram. In Vue Diagram, the ports are used as connection points. The port’s properties define the static port connections. Ports act as the connection points of the node and allow them to create connections only at 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.

let 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: PortVisibility.Visible,
               offset: { x: -0.060, y: 0.5 }, style: { fill: '#99cc00' },
               addInfo: [{ name: 'InPort' }]
             },
             {
               id: 'portName1', height: 10, width: 7, visibility: PortVisibility.Visible,
               offset: { x: 1.060, y: 0.5 }, style: { fill: '#cc6600' },
               addInfo: [{ name: 'OutPort' }]
             },
           ]
     },]

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 during the completed state. The node can have several 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 = diagramInstance.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 args.cancel is set to true at the completed state based on the condition, which means if you try to connect OutPort to the OutPort, then in the state of completion, you can set args.cancel to true. So, the connection will get terminated, 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;
       }
       diagramInstance.dataBind();
       diagramInstance.clearSelection();
     }

The SourcePointChange event will be triggered when the source point of the connector is changed. Also, the args.cancel is set to true in the completed state based on a condition. This means if the node’s InPort is connected to another node’s InPort, then the args.cancel will be set to true in the completed state. As a result, the connection will be terminated, and the port will behave as an InPort. The following code shows how to set the args.cancel to true in 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 = diagramInstance.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;
     }
     diagramInstance.dataBind();
     diagramInstance.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, in Vue Diagram.

You can refer to our Vue 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 Vue 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!