Hello,

We are having a couple of issues using the fromJson method on the client side. Here is an example scenario:

1. User moves a node, which fires the onNodeModified event handler.
2. In that handler, we do an AJAX call that sends data, including the diagram as a JSON object to the server.
3. On the server, we modify the tag of the node that was modified and then send the diagram back as JSON to the client side.
4. Back on the client side in the success function of the AJAX call, we redisplay the diagram (sender.fromJson(diagramJson)) so that it is up to date for the user to interact with.
5. We see 2 issues not just with the node modified event, but with others as well:
       A. The map flickers on the user's screen. It is very noticeable on slower connection speeds.
      B. The original event fires a second time, so in this scenario that is onNodeModified, but we are seeing it with other events as well, such as link deleted, link modified, etc. This all means the map flickers twice as it reloads twice.

How can we resolve issues A and B?

Client side code:

        function onNodeModified(sender, args) {

                 $.ajax({
                    type: "POST",
                    url: "@Url.Action("NodeModified", "Test")",
                    data: { diagramJson: sender.toJson(), nodeJson: JSON.stringify(args.node.toJson()), nodeTag: JSON.stringify(args.node.tag },
                    dataType: 'json',
                    success: function (result) {
                            console.log("node modified");
                             //Redisplay diagram
                             sender.fromJson(result.success);
                     }
                });

        }
 

Controller method:

[HttpPost]
        public ActionResult NodeModified(string diagramJson, string nodeJson, string nodeTag)
        {
            DiagramView view = DiagramView.FromJson(diagramJson);
            Diagram diagram = view.Diagram;
            JavaScriptSerializer jsSerializer = new JavaScriptSerializer(new ItemTypeResolver(null));
            jsSerializer.RegisterConverters(new JavaScriptConverter[] { new ShapeNodeConverter(view) });
            ShapeNode modifiedNode = jsSerializer.Deserialize<ShapeNode>(nodeJson);
               CustomTag modifiedTag = JsonConvert.DeserializeObject<CustomTag>(nodeTag);
                modifiedTag.XLocation = (int)modifiedNode.Bounds.X;
                modifiedTag.YLocation = (int)modifiedNode.Bounds.Y;
                List<DiagramNode> matchingNodes = diagram.Nodes.ToList().FindAll(a => a.Id.Equals(modifiedNode.Id));
                foreach (DiagramNode node in matchingNodes)
                {
                    int nodeIndex = diagram.Nodes.ToList().FindIndex(a => a.Equals(node));
                    node.Tag = modifiedTag;
                    diagram.Nodes.ToList().RemoveAt(nodeIndex);
                    diagram.Nodes.ToList().Add(node);
                }

            view.Diagram = diagram;
            return Json(new { success = DiagramView.ToJson(view) });
        }
 

Thanks.

Hello,

Thanks for looking at my question.

So for privacy's sake, I cannot include all of the server side code here that we must perform when a user modifies a node. There is business logic that must be run server side and yes some of it results in needing to change the tag object of the node, so that seemed the simplest example of what I can show you. Or you can pretend I'm adding nodes server side or something like that that would require the diagram to reload.

I do not see anywhere where we create or call an additional diagram.addEventListener client side. We add all of our event listeners in the server side code when we initialize the diagram view (diagramView.onNodeModified("onNodeModified").

It seems when we reload the diagram client side after returning from the server, diagram.fromJson(diagramJson) re-fires the modify event. This happens also with delete events for both links and nodes. Delete events also require server side code to be run for business logic and then we reload the diagram.

I guess the question becomes: why does reloading the diagram cause the (delete or modify) event to re-fire?

Even if I do nothing server side, just basically send the diagram back to the client as is, the event will still re-fire. It can be seen in the call stack executing client side according to our one developer.

Other thoughts on preventing this issue?

We may be able to change logic to not reload on delete, but I'm not seeing how we cannot reload after the modify event.

Also, any thoughts on the flickering issue I mentioned in my original post? This also occurs on reload.

Thanks.