myDiagram.model not saving correctly

GoJS
1

Hello,

I recently changed up my structure for goJS in Vue to have its myDiagram in a diagram component. In my diagram component, my myDiagram.model is behaving strangely.

I am using :

myDiagram.model = $(go.GraphLinksModel, {
  linkFromPortIdProperty: 'fromPort', // required information:
  linkToPortIdProperty: 'toPort', // identifies data property names
  nodeDataArray: this.modelData.nodeDataArray,
  linkDataArray: this.modelData.linkDataArray
})

To alter the model. If I do console.log(myDiagram.model) and check the console, linkFromPortIdProperty is set to ‘fromPort’ and so forth, which seems good. And to do more checking, since I altered the linkTemplate prior to the model, if I do console.log(myDiagram.linkTemplate) the routing and corners are set to Orthogonal and 3 respectively. However, if I console.log(myDiagram) and look for the model and linkTemplate objects, the linkTemplate is updated but the model is not. This is causing my diagram to no link correctly. Any idea why this is happening?

My full diagram component can be found here: https://pastebin.com/904RPUY5

2

Is updateModel being called? If so, does it call the constructor but not set all of the properties the model needs?

3

updateModel is being called at the very end of mounted() and I believe it sets properties for but not for linkFromPortIdProperty and linkToPortIdProperty

Correct me if I am wrong,

    const m = new go.GraphLinksModel()
    if (val) {
      for (const p in val) {
        m[p] = val[p]
      }
    }
    this.diagram.model = m

I believe a new GraphLinksModel is defined here, which then takes the node and array link data and apply it. How would I manipulate this to also set linkFromPortIdProperty to ‘fromPort’ and so forth?

4

Just set those properties right there after the constructor is called.

You might also want to debug the code calling that updateModel to understand why it is geing called that way.

5

I got it to work! Thank you