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

【问题标题】：how to change the text of node in Go.js如何在 Go.js 中更改节点的文本
【发布时间】：2015-06-03 06:02:21
【问题描述】：

我正在使用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";
            }
        });

    });

【问题讨论】：

标签： javascript gojs

【解决方案1】：

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

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

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

顺便说一句，除非您的链接不可选择，否则您的代码应该处理用户选择链接时的情况。

【讨论】：