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

Question

我正在使用go.js制作图表。 一切都很好，但是现在我想编辑颜色一样的文本。 为此，我做了一个textarea 。 我已经做到了，但是问题是当我更改一个节点的文本时，它更改了我先前选择的其他节点的文本。 不知道我在哪里错。 这是我的代码：

 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

明确地说，您的问题是关于修改Shape和TextBlock的颜色，而不是试图修改TextBlock.text属性。

问题在于，每次Diagram.selection集合更改时，您都将为Spectrum对象添加“更改”事件处理程序。 该事件处理程序是一个闭包，其中包含对特定所选Node的引用。 随着选择的更改，您添加了一个新的事件处理程序，但是旧的事件处理程序仍然存在并被调用，从而修改了先前选择的节点。

有几种可能的解决方案。 我建议您只定义一次Spectrum的更改事件处理程序，而不要在“ ChangedSelection” DiagramEvent侦听器中定义。 将其设置为对图表中所有选定节点（而不是特定节点）起作用的函数。 或者，如果仅选择了一个节点，则可能会更改颜色，这就是您想要的策略。

顺便说一句，除非您的链接是不可选择的，否则当用户选择一个链接时，您的代码应能够处理这种情况。