How to update json on colorchange in Go.js

Question

I am using Go.js to implement the Flow charts and saving the json data into sql . But i am unable to update the json data . Here is my code

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: " + txtblock.text + "</p>";
        var strokeColor = shape.stroke;
        str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
        info.innerHTML = str;

      // 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+  ")";
            alert(myDiagram.model.toJson());
            txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
          }
      });

    });

I need the json data like this

 { "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ {"category":"Start", "text":"Start", "key":-1, "loc":"-30 -301", "color":"rgb(196,0,0)"} ],
  "linkDataArray": [  ]} 

If i add the color element statically it works . But not updating the jsondata on color change.

Answer 1

I found the answer for this . I have to create a new object in the node shape to change the color.

new go.Binding("stroke", "color").makeTwoWay()),

and my full node function will look like this .

myDiagram.nodeTemplateMap.add("Start",
      GO(go.Node, "Spot", nodeStyle(),
        GO(go.Panel, "Auto",
          GO(go.Shape, "Circle",new go.Binding("fill", "color"),
            { minSize: new go.Size(40, 60), fill: "#79C900", stroke: null ,name: "SHAPE"},
            new go.Binding("stroke", "color").makeTwoWay()),
          GO(go.TextBlock, "Start",
            { margin: 5, font: "bold 11pt Helvetica, Arial, sans-serif", name: "TEXT", stroke: lightText })
        ),
        // three named ports, one on each side except the top, all output only:
        makePort("L", go.Spot.Left, true, false),
        makePort("R", go.Spot.Right, true, false),
        makePort("B", go.Spot.Bottom, true, false)
      ));