Issues with node behavior after calling the updateNode method

Question

Hello,We are using the ejDiagram control to build out a user interface which uses nodes to represent a range of possible actions that can be taken throughout a particular process. One feature that we are implementing is to allow the user to click on a node (either left or right click) which triggers a "highlighting" effect on the node:We are achieving the highlighting effect by initially setting the node's templateId property to an svg template of an image that does not have highlighting and then calling the updateNode method from the selectionChange event to set the node's templateId to an svg of a highlighted image when the node is clicked.The problem we are facing is that calling the updateNode method within the selectionChange event seems to be altering the diagram properties in a way such that the relevant nodes are no longer able to be properly "tracked." For example, when the user right-clicks a node, we are using the target argument provided by the contextMenuBeforeOpen event (which seems to be triggered after the selectionChange event in this case) to identify the node which was clicked in order to display a context menu on it. This works fine without an updateNode call from selectionChange, but when updateNode is called, the target argument in contextMenuBeforeOpen no longer points to the node that was clicked.We have also noticed that the updateNode method interferes with the multiple selection of nodes so that multiple nodes cannot be dragged or removed together.Is there a way to update the nodes in a way that does not interfere with the process of keeping track of them?

Shyam G · Answer

Hi Yohan, 
 
Please use itemClick event instead of selectionChange event to achieve your requirement. The itemClick event triggers when you click on the diagram element object. please refer to the code example below. still if you face any problem, please share us more details such as explain your requirement with screenshot or video. 
 
Code example: 
 
  $("#diagram").ejDiagram({ 
       itemClick: itemClick, 
  }); 
 
  function itemClick(args) { 
            var diagram = $("#diagram").ejDiagram("instance"); 
            //get an selected element 
            var node = args.element; 
            if (node) { 
                //update node fillcolor property 
                diagram.updateNode(node.name, { fillColor: "red" }); 
            } 
        } 
 
Help documentation: https://help.syncfusion.com/api/js/ejdiagram#events:itemclick 
 
Regards, 
Shyam G

Yohan Jhung · Answer

Thanks for the prompt response! Will make sure to include more details in future posts.

Yohan Jhung · Answer

Hello,As I mentioned in my previous post, we are having issues with dragging and removing of multiple selected nodes after updating them using the updateNode method. After using the selection rectangle (rubber band selection) to enclose a group of nodes, we are using the following logic to update the nodes selected:var diagram = $("#diagram").ejDiagram("instance");$("#diagram").ejDiagram({     selectionChange: function(args) {          if (args.state == "changed" && args.changeType == "insert" && args.elementType == "pseudoGroup") {                    args.selectedItems.forEach(function(item) {                        if (item._type == "node") {                            diagram.updateNode(item.name, {                                templateId: ***name of template***;                              });                        }                    });           }     });The value assigned to templateId represents an svg of a highlighted node.The problem is that once the updateNode method has been used to update the multiple selected nodes, they no longer have the ability to be dragged or removed together. Only one node is dragged or removed at one time. Please refer to the attachment for screens. Attachment: nodemultiselectscreens_960cf3b9.zip

Shyam G · Answer

Hi Yohan, 
 
When you select the multiple node and update each shape, the last node in the multiple nodes(pseudogroup) alone will be selected and it is an behavior of our control. So we have modified your selectionChange event code example in which we have stored the multiple Selection(pseudogroup) element globally and once each shape updated at runtime, we have added the multiple selection(pseudogroup) using diagram addSelection method. Please refer to the code example and JSPlayground link below. 
 
Code example: 
  var pseudoGroupNodes; 
        var booleanValue = false; 
        function selectionchange(args) { 
            var diagram = $("#diagram").ejDiagram("instance"); 
            if (args.state == "changed" && args.changeType == "insert" && args.elementType == "pseudoGroup") { 
                if (!booleanValue) { 
                    //store the multi selected element 
                    pseudoGroupNodes = args.element; 
                    args.selectedItems.forEach(function (item) { 
                        if (item._type == "node") { 
                            //update svg template id property 
                            diagram.updateNode(item.name, { templateId: "svgTemplate3" }); 
                        } 
                    }); 
                    diagram.clearSelection(); 
                    booleanValue = true; 
                    //add selection to the multi selected element 
                    diagram.addSelection(pseudoGroupNodes, true); 
                    diagram.nameTable[pseudoGroupNodes.name] = pseudoGroupNodes; 
                } 
            } 
        } 
 
Playground link: http://jsplayground.syncfusion.com/11ey1ncw 
 
Regards, 
Shyam G

Yohan Jhung · Answer

Thanks Shyam! Works great.

Kameshwaran R · Answer

Hi Yohan,  

We are happy to hear that your problem is resolved. Please let us know if you need any further assistance. 
Regards, 
Kameshwaran R.