Connect only to port

[sunil Kudupudi]

connector.constraints =

ConnectorConstraints.Default &

~ConnectorConstraints.ConnectToNearByNode;

     I am using the above constraints to connect to a nearby port but the wire is getting connected to nearby node as well in some cass

How do i restrict the connector connecting with node?

    I need only port to port connections not node to port with the ability to connect only to near by port.

[Gowtham Gunashekar]

Hi Sunil, 

 

We have added sample link to demonstrate how to add the validation for the nearby port to port connection. To achieve you requirement you have to exclude the InConnect and OutConnect constraints from the node constraints. We have added the NodeConstraints documentation  for your references. 

 

Code snippet: 

let nodes = [{ 

  id: 'node1', 

    // Position of the node 

    offsetX: 150, 

    offsetY: 100, 

    // Size of the node 

    width: 100, 

    height: 100, 

    constraints :NodeConstraints.Default &~ (NodeConstraints.OutConnect | NodeConstraints.InConnect), 

}] 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ConnectToPortToPortOnly-234565697.zip 

 

Documentation Link: https://ej2.syncfusion.com/vue/documentation/diagram/constraints/#node-constraints 

 

Regards, 

Gowtham 

 

[sunil Kudupudi]

Thanks Gowtham!

[Gowtham Gunashekar]

Hi Sunil,  

  

Most welcome. Please let us know if you need any assistance. 

  

Regards, 

Gowtham 

 

 

[sunil Kudupudi]

Hi Gowtham,

I tried the given constraints for node 

but I am not able to achieve what I wanted.

When I drag a connector and leave it on the node it should be able to connect to it's input port or near by port of the node like this demo example

https://ej2.syncfusion.com/vue/demos/#/material/diagram/port.html 

[Naganathan Ganesh Babu]

Hi Sunil, 

 

We have modified the sample as per your suggestion to create 4 ports and remove the Node’s NodeConstraints.OutConnect and NodeConstraints.InConnect. Please check and let know whether the sample achieve your requirement or not? 

 

Code example: 

let nodes = [ 

    { 

        id: 'node1', 

        // offsetX: 100, 

        // offsetY: 100, 

        style: { fill: '#82E0AA' }, 

        annotations: [{ content: 'Publisher' }], 

        ports: [{ 

        id: 'port1', height: 10, width: 10, offset: { x: 0, y: 0.5 },  

        visibility: PortVisibility.Visible 

    },{ 

        id: 'port2', height: 10, width: 10, offset: { x: 0.5, y: 0 },  

        visibility: PortVisibility.Visible 

    },{ 

        id: 'port3', height: 10, width: 10, offset: { x: 1, y: 0.5 },  

        visibility: PortVisibility.Visible 

    },{ 

        id: 'port4', height: 10, width: 10, offset: { x: 0.5, y: 1 },  

        visibility: PortVisibility.Visible 

    }] 

    }, 

}] 

 

Sample Link:  https://www.syncfusion.com/downloads/support/forum/162688/ze/ConnectToPortToPortOnly-897687980 

 

Regards, 

Naganathan K G