Undo Question - How to group node text change with custom property change

[Jim Jacobs]

Hi,

In my textChange event handler I am updating an addInfo property to the node.
The problem is that the user has to click on the Undo button twice to undo a text change.
The first click results in the text actual reverting back to the previous value - that's good.
A second click appears to do nothing (visible), but I am assuming that it's handling the addInfo property.

Is there some way I can combine these 2 actions into one?
I have tried using

startGroupAction / closeGroupAction within my textChange handler, but that does not appear to group the actual text change with my custom change.

function nodeTextChange(args) {
...
diagram.model.historyManager.startGroupAction();                
var entry = { prevName: node.addInfo.Name, object: node };
diagram.model.historyManager.push(entry); 
node.addInfo.Name = args.value; 
diagram.model.historyManager.closeGroupAction(); 
}

Any suggestions ?

Thanks

Jim

[Shyam G]

Hi Jim, 

 

You have defined both startGroupAction and closeGroupAction method in the same event(textChange event). So the addInfo entry alone will be added into the history entry(group action) and the text change will be ignored. So please define startGroupAction method in the doubleClick event and closeGroupAction method in the historyChange event to achieve your requirement. Please refer to the code example below. 

 

Code example: 

 

//define historychange event 

 diagramContent.OnClientHistoryChange = "historychange"; 

  //define doubleclick event 

 diagramContent.OnClientDoubleClick = "doubleclick"; 

 

 

//define global variable 

   var groupEnable = false; 

        function doubleclick(args) { 

            var diagram = $("#diagram").ejDiagram("instance"); 

            diagram.model.historyManager.startGroupAction(); 

             

        } 

         

        function textchange(args) { 

            var diagram = $("#diagram").ejDiagram("instance");  

            var entry = { prevName: node.addInfo.Name, object: node }; 

            diagram.model.historyManager.push(entry); 

            args.element.addInfo.name = args.value;  

            groupEnable = true; 

        } 

 

        function historychange(args) {              

            var diagram = $("#diagram").ejDiagram("instance"); 

            if (args.changes.length>0) { 

                if (args.changes[0].type === "labelchanged" && groupEnable) { 

                    diagram.model.historyManager.closeGroupAction(); 

                    groupEnable = false; 

                } 

            } 

        } 

 

Regards, 

Shyam G 

[Jim Jacobs]

Hi Shyam,

The suggested approach seems to be working - with a few challenges.

For example if I issue startGroupAction in the double-click event and the user does not change the text - simply clicks outside of the shape - then I never reach the closeGroupAction statement.

This can result in the "group" becoming much larger than expected.

Another scenario: When a shape is dragged from the palette, the dragEnter event is fired which sets the width and height of the shape as well as its pathData.  I issue a startGroupAction in this event.  Additional addInfo properties are subsequently set in the drop handler as well as the nodecollectionchange event handler.  I actually put the closeGroupAction statement in an event that fires after the node is registered in the database and I have a key value that I add to an addInfo property of the node.

Since the node is put in edit mode after being dropped, I'd really like to wait to issue the closeGroupAction after the text has changed, but once again, the user may elect not to enter any text at this point.

Any suggestions for handling this situation.  Is there any event fired if the user does not change/enter any text by simply clicking outside the node? Is there an event fired when I enter edit mode after the node is dropped?

Thanks for any advice on how to deal with my challenge.

Jim

[Shyam G]

Hi Jim, 

 

Query	Response
Is there any event fired if the user does not change/enter any text by simply clicking outside the node?	Please use click event to achieve your requirement. you can use startGroupAction in the OnClientEditorFocusChange event instead of doubleClick event and closeGroupAction in the click event. Also if you perform any actions such as changing fontStyle,fontFamily etc when the label is in edit mode, then you can call closeGroupAction method at the beginning of that action(fontStyle,fontFamily etc). Please refer to the code example below   Code example:    //define click event  Diagram1.OnClientClick = "click";   //define editorfocuschange  Diagram1.OnClientEditorFocusChange = "editorFocussed";      var groupEnable = false;  function editorFocussed(evt) {                              var diagram = $("#diagram").ejDiagram("instance");              diagram.model.historyManager.startGroupAction();              groupEnable = true;      }    function click(args) {              var diagram = $("#diagram").ejDiagram("instance");              if (groupEnable) {                                   diagram.model.historyManager.closeGroupAction();                  groupEnable = false;              }          }
Is there an event fired when I enter edit mode after the node is dropped?	Please use OnClientEditorFocusChange event which triggers when the label is in edit Mode. Please refer to the code example in the above column.

 

Regards, 

Shyam G 

[Jim Jacobs]

Hi Shyam,

I have made some progress using startGroupAction / closeGroupAction, but I'm still encountering problems.

Watch the attached video.

If I drag a shape onto the canvas, I issue startGroupAction in the dragEnter event.  So far so good.

However, if after entering text in this newly dropped shape, I go and drag another shape (which is what our users will do), I force a closeGroupAction in the dragEnter event if groupEnable is true (which it will be in this scenario). 

This seems to mess things up, since the drop of the initial shape including its changed text is not contained within a single "group".  I end up having to click multiple times on Undo to back out the text and the drop of the shape itself - what I'm trying to avoid.

Look at the console in the video and you'll see the order in which things are happening.

Any suggestions on how to fix this, so that each dropped shape including the text entered when it's dropped are contained in a single group?

Thanks

Jim

Attachment: Syncfusion__startclose_group_action_challenge__09jul2017_16a7712a.zip

[Jim Jacobs]

Hi again,

Here's a simple video showing things working as I'd like. 

I drop a shape, add the text and then click anywhere on white space.  As you can see, I only have to click on Undo once to remove the node and the text.  In the previous video, clicking once would undo the text change, and then a second click was required to undo the drop of the shape.

Hope you can provide me with a technique to help me get past this hurdle.

Thanks

Jim

Attachment: Syncfusion__startclose_group_action_challenge__working_scenario__09jul2017_ffb1eba3.zip

[Shyam G]

Hi Jim, 

 

Please use startGroupAction method in the drop event and closeGroupAction method in the historychange event to achieve your requirement. please refer to the code example below. 

 

Code example: 

//define drop event 

 diagramContent.OnClientDrop = "drop"; 

//define historychange event 

diagramContent.OnClientHistoryChange = "historychange"; 

 

var groupEnable = false; 

function drop(args) {              

            var diagram = $("#diagramContent").ejDiagram("instance"); 

            if (!groupEnable && args.objectType==="palette") { 

                groupEnable = true; 

                diagram.model.historyManager.startGroupAction();                 

            }             

        } 

 

    function historychange(args) {             

            var diagram = $("#diagramContent").ejDiagram("instance"); 

            if (args.changes.length>0) { 

                if (args.changes[0].type === "labelchanged" && groupEnable) { 

                    console.log("hclosegroupaction"); 

                    diagram.model.historyManager.closeGroupAction(); 

                    groupEnable = false; 

                } 

            } 

        } 

 

Regards, 

Shyam G 

[Jim Jacobs]

Hi Shyam,

Thanks for the additional advice.

I have made progress and things are working much better.

Who would have thought that Undo/Redo would have been such a big challenge.

Jim

[Shyam G]

Hi Jim, 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G