Add node data asynchronous

GoJS
1

Hello,

i have a problem when i add node data asynchronous. See the video…

https://cloud.bfe.tv/index.php/s/3DIWYUQ3kWGLe1R

When i refresh the site then i have no problem.

I use Angular 2 Component with RxJs.

this.subscription = this.service.nodes$.subscribe(arrData => { let isTA = false; arrData.forEach(d => { var data = MyDiagram.diagram.model.findNodeDataForKey(d.name); if (data === null) { if (isTA === false) { MyDiagram.diagram.model.startTransaction('add'); isTA = true; } MyDiagram.diagram.model.addNodeData(d); } }) if (isTA) { MyDiagram.diagram.model.commitTransaction('add'); }

Thank you for help

2

Could you please describe what the problem is? I could not tell from reading your post or watching your video.

By the way, in your code, it’s probably wiser to always start a transaction and then commit it afterwards. If there are no new node data objects, you won’t call Model.addNodeData, so the transaction is basically a no-op.

3

I don’t understand, when the property “initialContentAlignment” applies.
When i create a model and set immediately the nodeDataArray then the contentAlignment works.
But when I add the node with a method addNodeData asynchronous or in a timeout-Function the contentAlignment is not working

const myModel = new go.GraphLinksModel();
myModel.nodeKeyProperty = 'id';

MyDiagram.diagram.model = myModel;
    // devArr.forEach(d => {
    //   var data = MyDiagram.diagram.model.findNodeDataForKey(d.name);
    //   if (data === null) {
    //     MyDiagram.diagram.model.addNodeData(d);
    //   }
    // })


setTimeout(function() {
    devArr.forEach(d => {
      var data = MyDiagram.diagram.model.findNodeDataForKey(d.name);
      if (data === null) {
        MyDiagram.diagram.model.addNodeData(d);
      }
    })
 }, 2000 );
4

Diagram.initialContentAlignment only specifies the alignment of the document to the viewport after replacing the Diagram.model.

Diagram.contentAlignment applies the alignment after every transaction.

5 
setTimeout(function() {
    let isTA = false;
    DeviceService.devArr.forEach(d => {
      var data = MyDiagram.diagram.model.findNodeDataForKey(d.name);
      if (data === null) {
        if (isTA === false) {
          MyDiagram.diagram.startTransaction('add');
          isTA = true;
        }
        MyDiagram.diagram.model.addNodeData(d);
      }
      if (isTA) {
        MyDiagram.diagram.commitTransaction('add');
        isTA = false;
      }
    })
 }, 4000 );


// this.devicesSubscription = this.deviceService.devices$.subscribe(devices => {
//   let isTA = false;
//   devices.forEach(d => {
//     var data = MyDiagram.diagram.model.findNodeDataForKey(d.name);
//     if (data === null) {
//       if (isTA === false) {
//         MyDiagram.diagram.startTransaction('add');
//         isTA = true;
//       }
//       MyDiagram.diagram.model.addNodeData(d);
//       console.log('addnodedata (Id: '+d.id+')');
//     }
//   })
//   if (isTA) {
//     MyDiagram.diagram.commitTransaction('add');
//   }
// })

okay but why i have the effect of expanding in the first sample with the timeout-Function and not in the second function within the subscription. What is the diffrent?

6

That depends on what was happening when your original code executed. (I’m assuming the data is the same both times.)