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.
Unfortunately, activation email could not send to your email. Please try again.

connect nodes using ports and mouse

Thread ID:

Created:

Updated:

Platform:

Replies:

133071 Oct 7,2017 12:25 PM Oct 12,2017 12:51 AM Angular 6
loading
Tags: ejDiagram
Julian Lyndon-Smith
Asked On October 7, 2017 12:25 PM

Is there any way of allowing the user to connect 2 nodes together by just clicking on a source port and then "dragging" the connector to a target port ?

Shyam G [Syncfusion]
Replied On October 9, 2017 03:02 AM

Hi Julian, 
 
Please set port constraints ConnectOnDrag which activates the connection Tool when mouse hover on the port and you can draw the connector and establish the connection between two nodes. Please refer to the code example, playground link and help documentation below. 
 
Code example: 
var nodes = 
            [ 
                { 
                    name: "NewIdea", width: 150, height: 60, offsetX: 300, offsetY: 60, 
                    ports: [ 
                        { 
                            name: "NewIdea_port1", 
                            //define the portconstraints connect and connectondrag  
                            constraints: ej.datavisualization.Diagram.PortConstraints.Connect | ej.datavisualization.Diagram.PortConstraints.ConnectOnDrag, 
                        }] 
                }, 
            ]; 
 
 
 
Regards, 
Shyam G 


Julian Lyndon-Smith
Replied On October 9, 2017 04:26 AM

thanks for the reply. I asked the question, because I had followed the documentation and was surprised that it wasn't working ;)

I am using the angular toolkit. My code looks like this

private portOut:Object = {
name: 'out',
offset: {
x: 1,
y: 0.5
},
shape: 'circle',
size:16,
connectorPadding:10,
visibility: ej.datavisualization.Diagram.PortVisibility,
constraints: ej.datavisualization.Diagram.PortConstraints.Connect | ej.datavisualization.Diagram.PortConstraints.ConnectOnDrag,
fillColor: '#ffb74d'
};

and then I add the port like this

this.nodes = [
{
name:'start',
data: {foo: 'bar'},
type:'basic',
shape:'ellipse',
width:50,
height:50,
offsetX:45,
offsetY:45,
fillColor:'#428bca',
borderColor:'black',
constraints:this.nodeConstraints,

ports: [Object.assign({},this.portOut)],

labels: [{ text: 'start', fontColor:'white', textAlign:'center' }]
},

however, when the diagram is drawn, nothing changes when I hover over the port. If I click on the port, the resize handles appear instead






Julian Lyndon-Smith
Replied On October 10, 2017 04:28 AM

gentle *bump* - sorry but I really need to figure out what I'm doing wrong here. thanks ;)


Shyam G [Syncfusion]
Replied On October 10, 2017 07:04 AM

Hi Julian, 
 
We have created an angular sample in which we have rendered nodes with ports. When you hover on the port, the connection Tool gets activated(cursor changes to crosshair) and you can draw the connector. Please refer to the sample and video below. 
 
 
 
Regards, 
Shyam G 


Julian Lyndon-Smith
Replied On October 11, 2017 05:18 AM

thanks for the example - it showed where my problem was

I had

visibility:  ej.datavisualization.Diagram.PortVisibility,

instead of

visibility:ej.datavisualization.Diagram.PortVisibility.Visible,

:)


Shyam G [Syncfusion]
Replied On October 12, 2017 12:51 AM

Hi Julian, 
  
Please let us know if you need further assistance on this. 
  
Regards, 
Shyam G 


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.

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.

;