Customizing Ports in Html Node !

[Kannan T]

Hi,

We are evaluating sync fusion diagram for our product. We are developing using html5/angular/typescript/asp.net core/web api.

The diagram have complex shapes defined by html. The html node shape can be rectangle or circle based on an image. The size also different for different html node. Also no of ports vary for each type of node. For example, the rectangle shape node have 20 ports and circle shape node have 6 ports. Also two html nodes can be connected by a specific port. May I know whether it is possible in latest sync fusion diagram?

Regards,

Kannan

[Aravind Ravi]

Hi Kannan, 

 

Yes it is possible to create a connection to specific ports for two HTML node. We have created a sample for Rectangle and Circle SVG shapes using ‘Native’ node feature and add ports to node. In the sample we add six ports to the nodes,  you can add more no of ports to the node. Connect these nodes port through connectors. Please find below code snippet for how to connect the nodes port using connector and how to use native node. 

 

//Node 

 

public nodes: NodeModel[] = [ 

    { 

      id: 'node1', 

      offsetX: 100, 

      offsetY: 100, 

      width: 100, 

      height: 100, 

      shape: { 

        type: 'Native', content: '<svg width="400" height="110">' + 

          '<rect width="300" height="100" style="fill:rgb(0,0,255);" />' + 

          '</svg>' 

      }, 

    }, 

]; 

 

//Connector 

 

public connectors: ConnectorModel[] = [ 

    { 

      id: 'connector1', 

      sourceID: 'node1', 

      targetID: 'node2', 

      sourcePortID: 'port2', 

      targetPortID: 'port1', 

      type: 'Orthogonal' 

    } 

  ]; 

 

 

We have created a sample in stackblitz. Please find the sample in below link 

 

Sample: https://stackblitz.com/edit/angular-fwxsxz-mrtphd?file=default-functionalities.component.ts  

 

We have attached a video that demonstrates how does connection made on ports of node while changing at run time. Please find the video in below link 

 

Video: Connection 

 

We are having a predefined shape for circle and rectangle you can use that. For more information about node shapes please refer to below UG documentation link 

 

UG link: https://ej2.syncfusion.com/angular/documentation/diagram/shapes/?no-cache=1#basic-shapes  

 

Regards 

Aravind Ravi