Manually refresh nodes in diagram


#1

Hi!
I’m trying to create node by drag’drop (https://gojs.net/latest/samples/htmlDragDrop.html) - node is created and added to diagram model, but it won’t show in diagram until page is reloaded.
Is there any way to tell diagram to update itself?


#2

Did you make all changes to the model or diagram within a transaction?


#3

Yes, it even fires ModelChangedListener with right data (desired node in newValue)


#4

Could you show the code that executes upon a “drop”?


#5
   // dropped point is calculated by example (url i posted) 
   addNode(point) {
      this.diagram.startTransaction("addNode");
      this.modelerService.addTask(this.modelerService.getProcess())
        .then((response) => {
            // response returns object with some additional node data which our app works with
            const data = response.data.task;
            data.graphics.x = point.x;
            data.graphics.y = point.y;
            data.identifier.name = this.modelerService.getRandomTaskName();
            
            // add node to diagram
            this.diagram.model.addNodeData(data);
            this.diagram.model.setKeyForNodeData(data, response.data.task.uuid);

            const node = this.diagram.findNodeForKey(response.data.task.uuid);
            this.modelerService.setCurrentSelection(node);
            
            // save data about position 
            this.modelerService.setProperty(node.data.key, 'graphics', point)
                .then(() => {
                    this.notifyService.success('Task successfuly created');
                    this.modelerService.setModel(this.diagram.model);
                    this.diagram.commitTransaction('addNode');
                });
        });
    }

Structure of dropped node data is same as if I create node with clickCreatingTool (which works fine)


#6

Ah – do you see how your code to add data to the model is not executed within a transaction?

You have to call startTransaction once the response arrives, then call Model.addNodeData or Model.set or whatever, and finally call commitTransaction.

Oh, the code has changed. You should not be performing a long-running transaction, because you cannot guarantee how long it will be between the calls to startTransaction and commitTransaction. In fact, the Promise might not be successful.

Also, what does modelerService.setModel do?


#7

Ok, I started transaction after promise resolves and commit it after adding node, but still no difference in diagram :-(
modelerService.setModel only save current model into variable for further usage


#8

I can’t tell what the problem might still be. Are you using go-debug.js and checking the console for warnings or errors?

This sample demonstrates (pretending) to request an action on the server and responding by adding nodes and links to the diagram’s model:
https://gojs.net/temp/incrementalTreeAsync.html
All of the code is on the page, since it does not actually call XMLHttpRequest, but uses setTimeout to simulate such a call.


#9

I finally solved it - I needed to add manually some custom properties defined in node template (location, that’s why it wouldn’t display).
Anyway, thanks a lot for quick response Walter :-)