NodeConstraint - Can InConnect but not OutConnect

[Gabo EE]

Hello, 

Can you please help me to create NodeConstraint for Node that can be connected with connector, but can be out connected only through output port.

I have tried multiple combinations, but connot correct one.

nodeModel.constraints = (NodeConstraints.Default | NodeConstraints.InConnect) & ~NodeConstraints.Rotate & ~NodeConstraints.OutConnect;

Thank you

[Shyam G]

Hi Gabo, 

 

Could you please confirm us whether you need to establish connection between port to port alone not with the node to node. If yes, please remove InConnect and OutConnect constraints from default NodeConstraints. Please refer to a code example below. If we misunderstood your requirement, please share us more details such as elaborate your requirement in detail with the screenshot or video. 

 

Code example: 

nodeModel.constraints = NodeConstraints.Default &~(NodeConstraints.InConnect | NodeConstraints.OutConnect); 

 

 

Regards, 

Shyam G 

[Gabo EE]

Hi, Shyam.

I tried your solution but, it does not work as required.

I want to have an Node which can be in-connected freely - can take as many inputs as user wants, and Node itself cannot be out-connected. This Node can have only few strictly defined outputs, represented by PointPorts, which can be only out-connected, but no in-connected. So Node itself cannot be out-connected, but can be out-connected throught its Ports

Required functionality in attachment.

Thank you for your answer

Attachment: att_3fe6bea8.zip

[Shyam G]

Hi Gabo, 

 

We have created a sample in which we have allowed in-connection to the node and restricted the out-connection. We can connect port to port for the out-connection. Please refer to a code example and the sample below. If we misunderstood you requirement, please share us more details such as video to demonstrate your requirement. 

 

Code example: 

public nodeDefaults(node: NodeModel): NodeModel { 

let obj: NodeModel = {}; 

    obj.constraints = NodeConstraints.Default &~NodeConstraints.OutConnect; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-xj1lqh?file=app.component.ts 

 

Please let us know if any concerns. 

 

Regards, 

Shyam G 

[Gabo EE]

Thank you,

your solutions works great.

I have related question.

I have node, that can be only inconnected only through port, Node cannot be outconnected, or inconnected and port can be only inconnected. I have tried the following 

nodeModel.constraints = NodeConstraints.Default & ~NodeConstraints.OutConnect & ~NodeConstraints.InConnect & ~NodeConstraints.Rotate;

nodeModel.ports = [ { offset: { x: 0, y: 0.5 }, shape: 'Circle', constraints: PortConstraints.InConnect,];

But I can not connect connector to the port

Attachment: inconnect_47079407.zip

[Shyam G]

Hi Gabo, 

We have modified the sample in which we have restricted in-connection and out-connection for a node and we allowed target point of the connector to dock in the port. Please refer to a code example and the sample below. 

Code example: 

//disable connection between node to node 

    obj.constraints = NodeConstraints.Default &~(NodeConstraints.OutConnect | NodeConstraints.InConnect); 

public nodes: NodeModel[] = [ 

 { 

   id: 'node1', width:100,height:100,offsetX:200,offsetY:200, 

   ports: [ 

     { 

       id:'port1', offset: {x: 1, y:0.5},  

       //we can connect target end of the connector to the node 

       constraints: PortConstraints.Default &~PortConstraints.OutConnect, visibility: PortVisibility.Visible 

     } 

   ] 

 },] 

Sample: https://stackblitz.com/edit/angular-xj1lqh-qvkgxf?file=app.component.ts 

Regards, 

Shyam G 

[Gabo EE]

I have tried your code, but it does not work in my case. I tried the same constraints before, but they did not work.

Maybe problem is that i am using ContinuousDraw tool, a in your code (attachment) is port checked for canOutConnect - but should not. Screen is captured when cursor is over port.

I tried updating stackblitz code, but I cannot set ContinuousDraw tool in diagram - not sure why.

Can you still help me?

Attachment: chrome_Kxt8dVS96f_3ccc303a.zip

[Shyam G]

Hi Gabo, 

We have created a sample in which we have removed InConnect PortConstraints from the Default, so that we allowed source point of the connector to dock in the port. Please refer to a code example and the sample below. If we misunderstood your requirement, please share us more detail such as video to demonstrate your requirement.  

Code example: 

public nodes: NodeModel[] = [ 

 {  

   id: 'node1', width:100,height:100,offsetX:200,offsetY:200, 

   ports: [ 

     { 

       id:'port1', offset: {x: 1, y:0.5},  

       //we can connect target end of the connector to the node 

       constraints: (PortConstraints.Default | PortConstraints.Draw) &~PortConstraints.InConnect, visibility: PortVisibility.Hover | PortVisibility.Connect  

     } 

   ] 

 }, 

  

]; 

Sample: https://stackblitz.com/edit/angular-xj1lqh-fzthkk?file=app.component.ts 

Regards, 

Shyam G 

[Gabo EE]

Thank you for your response, but your example does not work as described. My goal is to set port constraints of ONLY THE RIGHT NODE from example you provided (https://stackblitz.com/edit/angular-xj1lqh-fzthkk?file=app.component.ts) as this: Port can be in connected by drawing tool but cannot be out connected.

That is exacly problem I am facing. I tried, but i cannot achieve it as shown in attachment

Can you help me?

Attachment: chrome_Zq7hj2Egie_a2e395a7.zip

[Aravind Ravi]

Hi Gabo, 

  

We are validating your requirements and update you more details on Februvary 13 2020. 

  

Regards 

Aravind Ravi  

[Aravind Ravi]

Hi Gabo,

Reported Issue : Port constraints is not working while draw connector through port 

     

We can reproduce the issue. We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on 6^th March,2020 weekly patch release.   

    

Now, you can track the status of your issue through below feedback link.   

  

Feedback Link:  https://www.syncfusion.com/feedback/12085/port-constraints-is-not-working-while-draw-connector-through-port 

  

Regards 

Aravind Ravi 

[Shyam G]

Hi Gabo,  

    

We have fixed the reported issue and included it in our patch release (v17.4.51) which is rolled out successfully.   

   

Please upgrade to the latest version packages to resolve this issue.         

https://www.npmjs.com/package/@syncfusion/ej2-diagrams      

  

Regards,  

Shyam G  

[Gabo EE]

I tried the update, but it does not work.

Can you provide example, how it should be working now?

[Shyam G]

Hi Gabo, 

 

We have modified your sample in which we have removed port InConnect constraints for the first node and port OutConnect constraints for the second Node. Could you please check in the below sample? 

 

Code example: 

public nodes: NodeModel[] = [ 

 {  

   id: 'node1', width:100,height:100,offsetX:200,offsetY:200, 

   ports: [ 

     { 

       id:'port1', offset: {x: 1, y:0.5},  

       //we can connect target end of the connector to the node 

       constraints: (PortConstraints.Default | PortConstraints.Draw) &~PortConstraints.InConnect, visibility: PortVisibility.Hover | PortVisibility.Connect  

     } 

   ] 

 }, 

  { 

   id: 'node2', width:100,height:100,offsetX:400,offsetY:200, 

   ports: [ 

     { 

       id:'port1', offset: {x: 1, y:0.5},  

       constraints: (PortConstraints.Default | PortConstraints.Draw) &~PortConstraints.OutConnect, visibility: PortVisibility.Visible 

     } 

   ] 

 } 

]; 

 

Sample: https://stackblitz.com/edit/angular-khc79d-lrvwec?file=app.component.ts 

 

 

Regards, 

Shyam G 

[Gabo EE]

I think it is still buggy.

Here is example 

https://stackblitz.com/edit/angular-khc79d-c8xszv?file=app.component.ts

If I want to operate in Continuous draw mode, you can connect element as you want.

Needed constraints in connection mode (ids from stackblitz examle)

"input" - can only outconnect from output port

"operation" - can inconnect to node, but outconnect only from output ports

"output" - can only inconnect through input port

Description in screenshot

Attachment: chrome_PT6kMT4xPJ_887c2411.zip

[Aravind Ravi]

Hi Gabo, 

 

We are validating your requirements and update you with more details on April 6^th 2020. 

 

Regards 

Aravind Ravi 

[Aravind Ravi]

Hi Gabo,  

    

We have fixed the reported issue Connector gets connected to node when disable node inconstraints and outconstraints and included it in our patch release (V18.1.43) which is rolled out successfully.   

   

Please upgrade to the latest version packages to resolve this issue.         

https://www.npmjs.com/package/@syncfusion/ej2-diagrams      

  

Regards,  

Aravind Ravi