Can the diagram be interactive by adding a node directly on the diagram?

GoJS
1

I mean can we add a node to the diagram to be interactive (after having the diagram drawn I am wondering if it can be edited)
I am thinking of having a button named “Create new node” to add a node with a specific name and parent , then have this reflected on the code. I think we’ll need ajax request to send the data back to the js code. What do you think ?
Please advise.
Thanks in advance.

2

Yes. Basically your HTML button’s onclick event handler needs to add a node data object to the Diagram.model, all within a transaction. Maybe something like this:

    <button onclick="addNode()">Add Node</button>

I’ll assume that the user wants to add a “child” node to the currently selected Node.

If your Diagram is using a TreeModel:

    function addNode() {
        var parent = myDiagram.selection.first();
        if (!(parent instanceof go.Node)) return;
        myDiagram.startTransaction();
        var nodedata = { . . . whatever properties your app needs . . . };
        nodedata.parent = parent.data.key;  // connect to existing node as parent
        myDiagram.model.addNodeData(nodedata);
        myDiagram.commitTransaction("added node");
    }

Or, if you are using a GraphLinksModel:

    function addNode() {
        var parent = myDiagram.selection.first();
        if (!(parent instanceof go.Node)) return;
        myDiagram.startTransaction();
        var nodedata = { . . . whatever properties your app needs . . . };
        myDiagram.model.addNodeData(nodedata);
        var linkdata = { . . . whatever properties your app needs . . . };
        linkdata.from = parent.data.key;
        linkdata.to = nodedata.key;
        myDiagram.model.addLinkData(linkdata);
        myDiagram.commitTransaction("added node");
    }

Presumably the user fills out some fields for information that you can use for the node data, and maybe for the link data, where I said “. . . whatever properties your app needs . . .”.