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
close icon

When an event occurs, I want to cause an undo.

When a connectionChange event occurs, even if the xy coordinate is arbitrarily changed, the connected connection cannot be disconnected.


 connectionChange: (args) => {
        let diagram = document.getElementById('diagram').ej2_instances[0];
        if(args.state == "Changed"){
          if(diagram.connectors.length > 3){
            args.cancel = true;
            diagram.selectedItems.connectors[0].sourcePoint.x = 0;
            diagram.selectedItems.connectors[0].sourcePoint.y = 0;
            diagram.selectedItems.connectors[0].targetPoint.x = 0;
            diagram.selectedItems.connectors[0].targetPoint.y = 0;
            diagram.dataBind();
          }


Can Connect connected to a node be disconnected and returned to its previous state?

or 

can i cause Undo?



1 Reply

SJ Sivaranjith Jeyabalan Syncfusion Team March 16, 2023 02:34 PM UTC

Hi,

We have fulfilled your requirement using the connection change event.

When we set 'cancel' to true in the 'changed' state of the event, the connector will not disconnect.

We can cancel the connection in the changing state and use the 'sourcePointChange' and 'targetPointChange' events to retrieve the connector's previous position and reset it.

Please find a sample and code example below.


Code example:

      sourcePointChange: (args) =>{

        if (args.state === "Start") {

          localStorage.setItem('sourcePoint', JSON.stringify(args.oldValue));

        }

      },

      targetPointChange: (args) =>{

        if (args.state === "Start") {

         localStorage.setItem('targetPoint', JSON.stringify(args.oldValue));

        }

      },    

 connectionChange: (args) => {

        if (args.state === "Changing") {

          let diagram = document.getElementById('diagram').ej2_instances[0];

            args.cancel = true;

            if(args.connectorEnd === 'ConnectorTargetEnd')

            {

              let newValue = JSON.parse(localStorage.getItem('targetPoint'));

              diagram.selectedItems.connectors[0].targetPoint.x = newValue.x;

             diagram.selectedItems.connectors[0].targetPoint.y = newValue.y;

            }

            else if(args.connectorEnd === 'ConnectorSourceEnd')

            {

              let newValue = JSON.parse(localStorage.getItem('sourcePoint'));

              diagram.selectedItems.connectors[0].sourcePoint.x = newValue.x;

              diagram.selectedItems.connectors[0].sourcePoint.y = newValue.y;

            }

            diagram.dataBind();

        }

      },

 




Attachment: connectionchangeevent_fc003820.zip

Loader.
Live Chat Icon For mobile
Up arrow icon