How to draw a new links and setting data while doing it


#1

Hi Walter,
following this example I tried to draw a link between two of my entities, but with some issues.
I tried to follow this post but with no result.

The code to draw the link is the same as the above example

const drawLink = (e, button) => {
  var node = button.part.adornedPart
  var tool = e.diagram.toolManager.linkingTool
  tool.startObject = node.port
  e.diagram.currentTool = tool
  tool.doActivate()
}

I’ve add to my diagram these options and the linkConnected callback

  fromLinkable: true,
  fromLinkableDuplicates: true, 

  toLinkable: true,
  toLinkableDuplicates: true, 

  linkConnected: (node, link, port) => {
    if (link.fromNode !== null) {
      link.fromNode.invalidateConnectedLinks()
    }
    if (link.toNode !== null) {
      link.toNode.invalidateConnectedLinks()
    }
   }

and I also wrote this piece of code to handle the event of drawing a new link

myDiagram.addDiagramListener("LinkDrawn", e => {
  const subject = e.subject
  const { from, to } = subject.data
  const fromEntity = myDiagram.findPartForKey(from)
  const toEntity = myDiagram.findPartForKey(to)
  ....
})

in the “LinkDrawn” listener I get the “fromEntity” and “toEntity” in order to do a post to my server and store in my db my new link.

When I draw a link between two entities, I have the issue that after the drawing phase, the arrow goes to an empty place and I get this error:

Uncaught TypeError: Cannot read property 'LinkId' of null
    at selectionChanged (VM38 bundle.js:114665)
    at X.<anonymous> (VM38 bundle.js:21707)
    at E../node_modules/gojs/release/go.js.E.select.E.select (VM38 bundle.js:21011)
    at Vj../node_modules/gojs/release/go.js.qg.standardMouseSelect (VM38 bundle.js:20658)
    at Vj../node_modules/gojs/release/go.js.Vj.doMouseUp (VM38 bundle.js:20792)
    at hh../node_modules/gojs/release/go.js.hh.doMouseUp (VM38 bundle.js:20851)
    at E../node_modules/gojs/release/go.js.E.doMouseUp (VM38 bundle.js:20923)

I can’t find where is the problem and to be honest I didn’t understand how it works the tool for drawing the link.
Thanks


#2

I’m not sure where that error is coming from, but it seems like it is probably something in your code. This example just takes the Selection Adornment Buttons sample you used and adds a LinkDrawn listener, which properly outputs the from and to nodes to the console.


#3

A more general approach for sending diagram changes to the server is to implement a Model Changed listener, and when a transaction has finished, iterate through the Transaction.changes and send what information you want. That could be just calling Model.toIncrementalJson, https://gojs.net/latest/api/symbols/Model.html#toIncrementalJson, as demonstrated in https://gojs.net/latest/samples/stateChartIncremental.html.


#4

The error was due to the “selectionChanged” callback in the linktemplate, the new link dragged did not have the id and when inserted my code checked an empty id.

I solved my issue adding a temporary link using the "linkingTool.archetypeLinkData" : { ... }.

Thanks for your help