How to achieve In and Out behavior with Ports in Angular Diagram?
This article explains how to achieve in and out behavior with ports in angular diagram. In Angular Diagram, the ports are used as a connection point. The port's property defines 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 some specific points of source and target nodes.
The following code shows how to create a node and port:
public diagramCreate(args: MouseEvent): void {
let node1: NodeModel = {
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' }]
},
]
};
this.diagram.add(node1);
}
In the following code, TargetPointChanged event will get triggered when the connector’s target point is changed :
public targetPointChanged(args: IEndChangeEventArgs): void {
if (args.state === 'Start' && !this.target) {
this.target++;
this.targetID = args.connector.targetID;
this.targetPortID = args.connector.targetPortID;
if (this.targetID === undefined) {
this.targetPoint = args.connector.sourcePoint;
}
}The following code shows, at the state of completed the targetPortId of the respective connector will get changed. Here, the getObject method is used to get the new target node that has changed while at the completed state. The node can have number of ports when the respective port matches with the node’s port and the connection will get established and the string value also stored here.
if (args.state === 'Completed') {
let node: NodeModel = this.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, the arg.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 completed you can set arg.cancel to true. So, the connection will get terminated and the port behaves 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;
}
this.diagram.dataBind();
this.diagram.clearSelection();
}The SourcePointChange event will get triggered when the source point of the connector is changed. Also, the args.cancel is set to true at the completed state based on the condition that means if the node’s InPort is connected to the another node’s InPort then the args.cancel will set to true at the state of completed. So, the connection will get terminated and the port behaves as an InPort. The following code shows how to set the arss.cancel to true at the completed state of SourcePointChange event.
if (args.state === 'Completed') {
let node: NodeModel = this.diagram.getObject(args.connector.sourceID) 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.sourcePortID) {
string = ports[i].addInfo[0].name;
nodePort = ports[i];
}
}
if (args.connector.sourcePortID === '' || (string === 'InPort' || string === undefined)) {
args.cancel = true;
if (this.sourceID !== undefined) {
args.connector.sourceID = this.sourceID;
args.connector.sourcePortID = this.sourcePortID;
} else {
args.connector.sourcePoint = this.sourcePoint;
}
this.diagram.dataBind();
this.diagram.clearSelection();
}
Refer to the working sample for additional details and implementation: [Sample]
Conclusion
We hope you enjoyed learning how to export the Angular Diagram along with the background color.
You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular 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!
