We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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

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 
 
 
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 
 
 
Regards 
Aravind Ravi 
 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon