Store myDiagram globally in vueJS

GoJS
#1

Hello,

I am currently using GoJS with VueJS. I was able to implement a simple vuejs diagram where nodes are just linked from one to another. I want to implement the click and drag version into vue (https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/draggableLink.html)

Is there a way to store myDiagram globally in vue’s data like how i do for nodeDataArray and linkedDataArray? i.e:
data(){
return{
nodeDataArray[]: [],
linkedDataArray[]: [],
myDiagram: ??<- like this
}
}
}

I tried setting myDiagram to an empty object but when I access it with this.myDiagram it throws unable to read properties of myDiagram of undefined.

#2

You must not put any instance of Diagram or any Node or Link in a Vue model, for that will drastically slow down the performance of GoJS, perhaps by a factor of 10 or more.

Only put the Array of simple Objects that is the Model.nodeDataArray, or the Array of simple Objects that is the GraphLinksModel.linkDataArray. Those data should have no references to the Model or to the Diagram or to any Node or any Link.

The model and each part (node or link) has references (indirectly) to the diagram, which would cause the problem with the diagram’s internal state being watched. Besides, the diagram contains internal state that cannot be serialized, and the internal state might change drastically between versions so you couldn’t deserialize it in any case.

#3

Thank you walter for letting me know! In this case, is there a way to store linkData as soon as its dynamically on the diagram with click and drag with out clicking a button to save the data to linkDataArray?

In other words as soon as the diagram is altered, is there a way to immediately store linkData to linkDataArray?

#4

Actually,

I found and am trying the following:
myDiagram.addModelChangedListener(evt => {
if (evt.isTransactionFinished) {
console.log(‘something was updated on the board!’)
console.log(this.linkDataArray)
}
})

Will post back if I figured it out! Thank you again walter!

#5

Yes, that’s a good way, although I think you also want to remember any changes to the Model.nodeDataArray as well as the GraphLinksModel.linkDataArray.

Consider also the methods Model.toIncrementalJson and Model.toIncrementalData.
https://gojs.net/latest/api/symbols/Model.html#toIncrementalData
https://gojs.net/latest/api/symbols/Model.html#toIncrementalJson

#6

That is actually what I am trying to figure out. I was able to store the linkDataArray in a global state so you are able to still get the data when you leave the page and come back. However, I don’t want it to store the linkData anytime anything is changed on the diagram and just when the linkData is altered.

I’m trying the following but I can’t get it to work properly.

evt.modelChange === 'linkDataArray'

always returns false.

myDiagram.addModelChangedListener(evt => {

        if (evt.isTransactionFinished) {
          console.log('something was updated on the board!')
          console.log(evt.modelChange === 'linkDataArray')
          if (evt.modelChange === 'linkDataArray') {
            console.log('only when linkdata changes') // it is never going here
          }
        }
})

Edit: correct formatting so it’s easier to read.

#7

The evt.object is a Transaction that holds a list of all of the ChangedEvents that happened in that transaction, including changes that modified the GraphLinksModel.linkDataArray.
https://gojs.net/latest/intro/changedEvents.html
https://gojs.net/latest/intro/transactions.html

EDIT: (before, I didn’t have time to write this)

  $(go.Diagram, . . .,
      {
        "undoManager.isEnabled": true,
        "ModelChanged": function(e) {
          if (e.isTransactionFinished) {
            var txn = e.object;  // this can be the Transaction
            if (!txn) return;
            txn.changes.each(function(t) {
              // check for Inserts into and Removes from the linkDataArray
              if (t.propertyName === "linkDataArray") console.log(t.toString());
            });
          }
        }
      });
#8

I got it to work! Thanks walter :)