如何在Go.js中更改节点的文本

Question

I am using go.js to making the graphs. Everything is ok, but now I want to edit the text like the color. For this i have made a textarea . And I have done this, but the issue is when i change the text for one node it changes the text for the other nodes I have selected previously. Don't know where I am wrong. Here is my code:

 var info = document.getElementById("myInfo");
    myDiagram.addDiagramListener("ChangedSelection", function(e1) {
        var sel = e1.diagram.selection;
        var str = "";
        if (sel.count === 0) {
            str = "Selecting nodes in the main Diagram will display information here.";
            info.innerHTML = str;
            return;
        } else if (sel.count > 1) {
            str = sel.count + " objects selected.";
            info.innerHTML = str;
            return;
        }
        // One object selected, display some information
        var elem = sel.first();

        var shape = elem.findObject("SHAPE");
        var txtblock = elem.findObject("TEXT");
        str += "<h3>Selected Node:</h3>";
        str += "<p>Figure: " + shape.figure + "</p>";
        str += "<p>Text: <textarea style='height:100px;' id='nodetext'> " + txtblock.text + "</textarea></p>";
        var strokeColor = shape.stroke;
        str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
        info.innerHTML = str;


        $(document).on('keyup','#nodetext',function(a)
        {
            a.preventDefault();
            txtblock.text=$(this).val() ;

        })
        // Initialize color picker
        $("#custom").spectrum({
            color: strokeColor,

            // Change colors by constructing a gradient
            change: function(color) {
                var c = color.toRgb();
                var r, g, b;
                var grad1 = new go.Brush(go.Brush.Linear);
                r = Math.min(c.r + 10, 255);
                g = Math.min(c.g + 10, 255);
                b = Math.min(c.b + 10, 255);
                grad1.addColorStop(0, "rgb(" + r + "," + g + "," + b + ")");
                grad1.addColorStop(0.5, color.toRgbString());
                r = Math.max(c.r - 30, 0);
                g = Math.max(c.g - 30, 0);
                b = Math.max(c.b - 30, 0);
                grad1.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")");
                shape.fill = grad1;
                shape.stroke = "rgb(" + r + "," + g + "," + b + ")";
                txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
            }
        });

    }); 

Answer 1

To be clear, your question is about modifying the colors of a Shape and a TextBlock, not trying to modify the TextBlock.text property.

The problem is that you are adding a "change" event handler for the Spectrum object each time the Diagram.selection collection changes. That event handler is a closure that holds a reference to the particular selected Node. As the selection changes you add a new event handler, but the old ones are still there and being called, modifying the previously selected nodes.

There are several possible solutions. I suggest that you define Spectrum's change event handler only once, not in the "ChangedSelection" DiagramEvent listener. Set it to be a function that operates on all of the selected Nodes in the Diagram, not on a particular Node. Or perhaps change the colors if there is only one Node that is selected, it that is the policy that you want.

By the way, unless your Links are not selectable, your code ought to handle the case when the user selects a Link.