Option to validate nodes

[Sudhanshu Jain]

Hi,

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

Regards,

Sudhanshu

[Shyam G]

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. 

 

Sample: https://ej2.syncfusion.com/react/demos/#/material/diagram/flow-execution 

 

Regards, 

Shyam G 

[Sudhanshu Jain]

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]

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]

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]

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> 

 

 

Sample: https://stackblitz.com/edit/react-3akpcb-btdhge?file=index.js 

 

 

Regards, 

Shyam G 

[Sudhanshu Jain]

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]

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. 

 

Sample: https://stackblitz.com/edit/react-3akpcb-qd9d5y?file=index.js 

 

 

Regards, 

Shyam G 

[Sudhanshu Jain]

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]

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. 

 

Sample: https://stackblitz.com/edit/react-3akpcb-ljawcy?file=index.js 

 

Regards, 

Shyam G 

[Sudhanshu Jain]

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]

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; 

              } 

            }} 

Sample: https://stackblitz.com/edit/react-3akpcb-hps9c1?file=index.js 

Regards, 

Shyam G