CODEWITHSUNDEEP
javascriptgojs
blackhard
blackhard

Reputation: 542

Why in GoJS the length of diagram.model.nodeDataArray differs from the result of diagram.findNodesByExample({})

On the first load of diagram I add three elements in my model:

var model = new go.GraphLinksModel();
model.nodeKeyProperty = 'goKey';
model.nodeCategoryProperty = 'goType';
model.addNodeDataCollection([
  {
      goKey: 'instance1',
      goType: 'component',
      //other data
  }, {
      goKey: 'instance2',
      goType: 'tcp',
      //other data
  }, {
      goKey: 'instance3',
      goType: 'tcp',
      //other data
  }]);
diagram.model = model;
console.log(diagram.findNodesByExample({}).count); //3
console.log(diagram.model.nodeDataArray.length); //3

Then I remove two items with goType: 'tcp' using diagram.model.removeNodeData method and add them again in the model:

var item2 = _.find(diagram.model.nodeDataArray, {goKey: 'instance2'});
var item3 = _.find(diagram.model.nodeDataArray, {goKey: 'instance3'});
model.removeNodeData(item2);
model.removeNodeData(item3);
console.log(diagram.model.nodeDataArray.length); //1
console.log(diagram.findNodesByExample({}).count); //1

diagram.model.addNodeDataCollection([{
     goKey: 'instance2',
     goType: 'tcp',
     //other data
  }, {
     goKey: 'instance3',
     goType: 'tcp',
     //other data
}]);

But after this the amount of nodes in diagram differs and I see only two nodes on canvas:

console.log(diagram.model.nodeDataArray.length); //3
console.log(diagram.findNodesByExample({}).count); //2

If take a look at the result of diagram.findNodesByExample({}) using method each, I see that the instance2 was added only:

diagram.findNodesByExample({}).each(function (item) {
   console.log(item.data.goKey);
});
// instance1
// instance2

What am I doing wrong?

Upvotes: 0

Views: 691

Answers (2)

blackhard
blackhard

Reputation: 542

The problem was finally found. After removing the nodes from model (I save them in copies), I added them again, so if take a look at these nodes, we will see an extra property __gohashid that should be removed before adding it to the model again. I don't know how it works, but this string of code

delete node.__gohashid;

fixes the problem described above. Hope it will be useful for somebody.

Upvotes: 0

Walter Northwoods
Walter Northwoods

Reputation: 4106

I just tried your code but could not reproduce the problem. Here's the whole page that I used:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.28/go-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    diagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,
          layout: $(go.GridLayout)
        });

    diagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.TextBlock, new go.Binding("text", "goKey")),
        $(go.TextBlock, new go.Binding("text", "goType"))
      );

    var model = new go.GraphLinksModel();
    model.nodeKeyProperty = 'goKey';
    model.nodeCategoryProperty = 'goType';
    model.addNodeDataCollection([
      {
        goKey: 'instance1',
        goType: 'component',
        //other data
      }, {
        goKey: 'instance2',
        goType: 'tcp',
        //other data
      }, {
        goKey: 'instance3',
        goType: 'tcp',
        //other data
      }]);
    diagram.model = model;
    console.log(diagram.findNodesByExample({}).count); //3
    console.log(diagram.model.nodeDataArray.length); //3 
  }

  function replaceTwo() {
    var model = diagram.model;
    model.startTransaction();
    var item2 = _.find(model.nodeDataArray, { goKey: 'instance2' });
    var item3 = _.find(model.nodeDataArray, { goKey: 'instance3' });
    model.removeNodeData(item2);
    model.removeNodeData(item3);
    console.log(model.nodeDataArray.length); //1
    console.log(diagram.findNodesByExample({}).count); //1

    model.addNodeDataCollection([{
      goKey: 'instance2',
      goType: 'tcp',
      //other data
    }, {
      goKey: 'instance3',
      goType: 'tcp',
      //other data
      }]);
    model.commitTransaction("replace two");

    console.log(diagram.model.nodeDataArray.length); //3
    console.log(diagram.findNodesByExample({}).count); //2??? -- No, I get 3
    diagram.findNodesByExample({}).each(function(item) {
      console.log(item.data.goKey);
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="replaceTwo()">Replace Two</button>
</body>
</html>

Upvotes: 1

Related Questions