如何在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偵聽器中定義。 將其設置為對圖表中所有選定節點（而不是特定節點）起作用的函數。 或者，如果僅選擇了一個節點，則可能會更改顏色，這就是您想要的策略。

順便說一句，除非您的鏈接是不可選擇的，否則當用戶選擇一個鏈接時，您的代碼應能夠處理這種情況。