Is it possible to add flash to the picture

GoJS
#1

I’m trying to blink the picture from green to red and red to green.
my code is:

   $(go.Node, "Auto",
        $(go.Shape, "Rectangle",
            new go.Binding("stroke", "highlight", function(v) { return v ? "green" : "red"; }),
            new go.Binding("strokeWidth", "highlight", function(v) { return v ? 3 : 1; })),
        $(go.Picture,
           { maxSize: new go.Size(100, 100) },
           new go.Binding("source", "geo")),
        $(go.TextBlock,
          {
            margin: 5,
            editable: true,
            alignment: go.Spot.Bottom,
            font:"bold 11pt Arial",
            stroke: "#446700"
          },
          new go.Binding("text","text"))
        ));

function flash() {
    myDiagram.model.commit(function(m) {
    var data = m.nodeDataArray[0];
    m.model.set(data, "highlight",!data.highlight)},"flash"),

function loop() {
  setTimeout(function() { flash(); loop(); }, 500);
}

loop();
}
#2

I just tried your code, and found that it basically worked.

    function flash() {
      myDiagram.model.commit(function(m) {
        var data = m.nodeDataArray[0];
        m.set(data, "highlight", !data.highlight);
      }, null);
    }

    function loop() {
      setTimeout(function() { flash(); loop(); }, 500);
    }

    loop();

I have changed the second argument to commit to be null, so that the UndoManager does not record any state changes.

What’s wrong? What would you like to know about?

#3

It’s working for the single node, but when I apply this code to the group, I’m getting this error."

azure.html:93 Uncaught TypeError: Cannot read property 'highlight' of undefined
    at azure.html:93
    at P.F.commit.F.commit (go.js:334)
    at flash (azure.html:91)
    at azure.html:98
#4

It seems like you have a JavaScript error somewhere, and and not a GoJS problem per se. What’s undefined, and why?

var data = m.nodeDataArray[0]

If data is undefined here, is the array zero-length? Do you have no nodes in your model?

#5

gojs
gojs.PNG561×856 36.8 KB

#6

m.nodeDataArray[8] is undefined, presumably because there are only 8 or fewer nodes in the nodeDataArray.

Why are you using m.nodeDataArray[8]? Are you trying to get the node with the key of 8? Instead, do:

var node = myDiagram.findNodeForKey(8);
var data = node.data;

Note that myDiagram.findNodeForKey may return null if there is no Node or Group found with the specified key.

#7

Is it possible to add flash function to multiple nodes in a different groups at a time in one diagram?

#8

Yes, do it inside the function that you pass to commit.

#9

Thank you Walter, sorry ,Could you please explain this more detail.

#10

The code that I posted above just does it for a single node, the first one in the model. You can do it for as many nodes in your model as you like.