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

Option to validate nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

148818 Nov 5,2019 03:29 PM UTC Nov 26,2019 09:15 AM UTC React - EJ 2 11
loading
Tags: Diagram
Sudhanshu Jain
Asked On November 5, 2019 03:29 PM UTC

Hi,
Is there any option to validate nodes( as in the number of input/ output connectors) ?
Regards,
Sudhanshu

Shyam G [Syncfusion]
Replied On November 6, 2019 12:48 PM UTC

Hi Sudhanshu, 
 
Please use node’s inEdges and outEdges property which is used to read collection of the incoming and outgoing connectors of the node. Please refer to a sample below in which we used inEdges and outEdges property to get the connectors. 
 
 
Regards, 
Shyam G 


Sudhanshu Jain
Replied On November 11, 2019 12:09 PM UTC

Hi Shyam,

Do we have any event to revert changes or to prevent updation for connectors?
i.e. when i add a connector and try to connect the source or target, is there any event to prevent that connection update?

Regards,
Sudhanshu

Shyam G [Syncfusion]
Replied On November 12, 2019 12:45 PM UTC

Hi Sudhanshu, 
 
As we discussed in a meeting, you can use connectionChange event to achieve your requirement. You should set args.cancel=true to prevent the connection between source/target nodes. Please refer to a code example below. 
 
Code example: 
  <DiagramComponent 
                                id="diagram" 
  connectionChange={(args: IConnectionChangeEventArgs) => { 
          args.cancel = true; 
                                }}> 
</DiagramComponent> 
 
Regards, 
Shyam G 


Sudhanshu Jain
Replied On November 13, 2019 07:44 AM UTC

Hi Shyam,

We have used that but that event is not taking us back to the previous state, it just cancels the process but the UI will not be updated. 
Do we have any option to revert to the previous state apart from undo, like within connection change?

Regards,
Sudhanshu

Shyam G [Syncfusion]
Replied On November 15, 2019 12:05 AM UTC

Hi Sudhanshu, 
 
When we move the connector sourcePoint/targetPoint, the event sourcePointChange/targetPointChange gets triggered. In this event, you can store the newValue property globally. When we connect to a node, the connectionChange event gets triggered. In this event, we reset the connector value to previous position. We have created a sample to achieve your requirement. 
 
Code example: 
<DiagramComponent id="diagram" 
              ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"640px"}  
                 connectionChange={(args)=> { 
                   args.cancel =true; 
                   if(eventName === 'sourcePointChange') {  
                        args.connector.sourcePoint = startPoint; 
                   } else if(eventName === 'targetPointChange'){  
                      args.connector.targetPoint = startPoint; 
                   }  
                 }} 
                 //event triggered while moving connector sourcePoint 
                sourcePointChange={(args)=> { 
                   if(args.state === 'Start') { 
                      eventName = args.name; 
                      startPoint = args.newValue; 
                   } 
                 }} 
                 targetPointChange={(args)=> { 
                   //event triggered while moving connector targetPoint 
                   if(args.state === 'Start') { 
                      eventName = args.name; 
                      startPoint = args.newValue; 
                   } 
                 }}  
            > 
            </DiagramComponent> 
 
 
 
 
Regards, 
Shyam G 


Sudhanshu Jain
Replied On November 18, 2019 03:53 AM UTC

Hi Shyam,

I tried the same and found that the connector as whole is not getting dragged instead only the ends which are indicated by circles are being dragged on drag drop to new point.
I have added a screen recording for reference.

Thanks

Attachment: ConnectorIssue_d5b0a9db.zip

Shyam G [Syncfusion]
Replied On November 18, 2019 11:05 AM UTC

Hi Sudhanshu, 
 
We have two scenarios alone to achieve your requirement with the connectionChange event. 
 
  1. When the connector already has a connection with the nodes, then you can cancel the connectionChange event, so that the connector could not be disconnected from the nodes.
  2. When the connector is not connected with any nodes and when you try to connect with the node, you can disallow the connection and revert back to the previous state in the connectionChange event(which is explained in the previous update).
 
Here is the sample which satisfies the above scenario. 
 
 
 
Regards, 
Shyam G 


Sudhanshu Jain
Replied On November 20, 2019 01:11 PM UTC

Hi Shyam, 
The sample example you have provided is inconsistent , if the connector position is changed and then try to connect to the nodes then the connector either gets connected or the position is changed to different point but not the previous one.

Only if we maintain the same position as on load and then try and move it to nodes , previous state of the connectors is restored(this is what is required but in all the cases irrespective if where the connectors are placed).

could you please check and let us know if its possible to achieve this solution.

Regards,
Sudhanshu

Shyam G [Syncfusion]
Replied On November 21, 2019 11:00 AM UTC

Hi Sudhanshu, 
 
We have resolved the below scenario and shared a sample below. Please let us know if any concerns. 
 
Scenario 
When the connector is not connected with any nodes and when you try to connect with the node, you can disallow the connection and revert back to the previous state in the connectionChange event. 
 
 
Regards, 
Shyam G 


Sudhanshu Jain
Replied On November 25, 2019 04:25 AM UTC

Hi,

I still see the inconsistency, i have attached the recording for your reference.

Regards,
Sudhanshu

Attachment: Screen_Recording_20191125_at_9.51.16_AM_92c53280.zip

Shyam G [Syncfusion]
Replied On November 26, 2019 09:15 AM UTC

Hi Sudhanshu, 

We have modified the sample to achieve your requirement. Please refer to a modified code example below. 

Code example: 
    mouseEnter={args => { 
        if (args.actualObject && !args.actualObject.segments) { 
                ischange = false; 
         } 
      }} 
   mouseLeave={args => { 
        ischange = true; 
    }} 

  sourcePointChange={args => { 
              if (args.state === "Start" && ischange) {  
                eventName = args.name; 
                startPoint = args.newValue; 
              } 
            }} 
            targetPointChange={args => { 
              //event triggered while moving connector targetPoint 
              if (args.state === "Start" && ischange) { 
                eventName = args.name; 
                startPoint = args.newValue; 
              } 
            }} 



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.

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