i using go.js making graphs. ok, want edit text color. have made textarea. , have done this, issue when change text 1 node changes text other nodes have selected previously. don't know wrong. here 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 main diagram display information here."; info.innerhtml = str; return; } else if (sel.count > 1) { str = sel.count + " objects selected."; info.innerhtml = str; return; } // 1 object selected, display 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 constructing 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"; } }); });
to clear, question modifying colors of shape , textblock, not trying modify textblock.text property.
the problem adding "change" event handler spectrum object each time diagram.selection collection changes. event handler closure holds reference particular selected node. selection changes add new event handler, old ones still there , being called, modifying selected nodes.
there several possible solutions. suggest define spectrum's change event handler once, not in "changedselection" diagramevent listener. set function operates on of selected nodes in diagram, not on particular node. or perhaps change colors if there 1 node selected, policy want.
by way, unless links not selectable, code ought handle case when user selects link.
Comments
Post a Comment