Customizing Ports in Html Node !

Thread ID:	Created:	Updated:	Platform:	Replies:
142796	Feb 20,2019 08:16 AM UTC	Feb 20,2019 11:28 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Diagram

Kannan T

Asked On February 20, 2019 08:16 AM UTC

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

Reply | Reply with quote

Aravind Ravi [Syncfusion]

Replied On February 20, 2019 11:28 AM UTC

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

Reply | Reply with quote

Customizing Ports in Html Node !

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US