Get source/dest node & port when a link is drawn

GoJS
1

Hello,

I see your demo Update Demo GoJS Sample
when 2 nodes are linked, How can I get the Key of the node and the portIn, portOut ?

I see that with the folowing code I get an GraphLinksModel object but I don’t see how to get the Key of source /dest node and the port id connected / removed

model.addChangedListener(e => {
if (e.isTransactionFinished) {
var tx = e.object;
if (tx instanceof go.Transaction && window.console) {
window.console.log(tx.toString());
tx.changes.each(c => {

          if (( c.change === go.ChangedEvent.Insert || c.change === go.ChangedEvent.Remove)  && c.propertyName === "linkDataArray")
          {

            console.log("B:" + c.modelChange);

            if (c.object !== null)
            {
              console.error ("object:" + c.object.toString());
            }
          }


          if (c.model) window.console.log("  " + c.toString());
        });
      }
    }

like with the link validation but also with removed link:

function sameColor(fromnode, fromport, tonode, toport) {
return fromnode.data.color === tonode.data.color;
// this could look at the fromport.fill and toport.fill instead,
// assuming that the ports are Shapes, which they are because portID was set on them,
// and that there is a data Binding on the Shape.fill
}

// only allow new links between ports of the same color
diagram.toolManager.linkingTool.linkValidation = sameColor;

// only allow reconnecting an existing link to a port of the same color
diagram.toolManager.relinkingTool.linkValidation = sameColor;

BR

Laurent

2

In your loop, when looking at a ChangedEvent named c, the new link data object should be the value of c.newValue. So you can look at its properties.

3

Thanks for your feedback,

I check the newValue , I change a littel the code to check, display them with:

model.addChangedListener(e => {
if (e.isTransactionFinished) {
var tx = e.object;
if (tx instanceof go.Transaction && window.console) {
window.console.log(tx.toString());
tx.changes.each(c => {

          if (( c.change === go.ChangedEvent.Insert || c.change === go.ChangedEvent.Remove)  && c.propertyName === "linkDataArray")
          {
            if (c.newValue !== null) {

              for (var val in c.newValue) {
                console.error("val:" + val.toString());

              }
              //console.error("c.newValue FromKey:" + c.newValue[0].linkFromKeyProperty);
            }
            
            if (c.object.newValue !== null)
              console.error ("log" + c.object.newValue);
              //console.error ("object:" + c.object.newParam);
          }
          
          if (c.model) window.console.log("  " + c.toString());
        });
      }
    }

I get as result:
val:from
val:to

so I have an array with the from & to ref, but I still don’t see how to acess the value of the key, port, …

any idea ?
BR

Laurent

4

Three choices:

  $(go.Diagram, . . .,
    {
// at the Diagram level, only when the user finishes drawing a new Link
"LinkDrawn": e => {  // the "LinkDrawn" DiagramEvent is raised by the LinkingTool
  const link = e.subject;  // the new Link
  console.log(link.fromNode.key, link.toNode.key);  // show the connected Nodes' keys
},

// at the Model level, two choices:
// 1, as each ChangedEvent happens
// 2, at the end of the transaction
"ModelChanged": e => {
  // choice 1:
  if (e.change === go.ChangedEvent.Insert && e.propertyName === "linkDataArray") {
    // if it's an Insertion into the GraphLinkModel.linkDataArray,
    const data = e.newValue;
    console.log(data);  // show the new data object, which includes the connected node's keys
  }
  // choice 2:
  if (e.isTransactionFinished) {  // at the end of a transaction or undo or redo
    const tx = e.object;
    if (tx instanceof go.Transaction) {
      tx.changes.each(c => {  // review all of the ChangedEvents in the Transaction
        if (c.change === go.ChangedEvent.Insert && c.propertyName === "linkDataArray") {
          // if it's an Insertion into the GraphLinkModel.linkDataArray,
          const data = c.newValue;
          console.log(data);  // show the new data object, which includes the connected node's keys
        }
      });
    }
  }
}

    });