Adding second link templates

GoJS
1

Hi,
I want to have a Diamond Shape node for Conditions and my default linkTemplate is Bezier and don’t have a predetermined text for labels. but I want to use Orthogonal type Links for the Conditional node. and I want the link that are from the left side of the Node has the predetermined label text of “No” and the links that are from the right side of the node has the text label of “Yes”.
should I write a new linkTemplate? and how can I tell the conditional node that use the new link template?

2

You can probably still use just one link template, and add some ofObject bindings on the fromNode and fromPortId. Here’s an example: https://codepen.io/jhardy/pen/agQzZj?editors=1010. You’ll need to modify it to use the category instead of key and update it with proper ports.

3

thanks.
my nodes has ports like the ports in the gojs flowchart sample. so

new go.Binding("text", "fromPortId", (p)=>{...})

doesn’t work.
what should I use instead of “fromPortId” ?

4

Notice how in the FlowChart sample, the showLinkLabel function is called whenever a new Link is drawn by the user or an existing Link is reconnected by the user. Instead of using any additional Bindings, perhaps you could modify that function so that when the label is visible (i.e. when the link is coming from a “Conditional” node) it also automatically sets the text to “Yes” or “No” based on the e.subject.fromPortId. Perhaps it should only do so if there is not already a data.text string on the link data object, in case the user has edited the text already.

5

I changed my mind. I just want to give different color to the links from right and left.
so I need to have access to the from spot of the fromNode or the portId. but in the event listener I can’t have access to it. I think it’s because of the port I made with makePort function like the ports in the flowchart sample. maybe it can’t find the fromSpot.

this.diagram.addDiagramListener("LinkDrawn", (e)=>{
    let link = e.subject;
    let node = link.fromNode;
    if(node.data.category === "Conditional"){
        console.log(link.fromPortId)
    }
})

it doesn’t show anything.
what should I do?

6

Did you mean link.fromPortId?

7

yes. in makeport function the portId is set to “L” or “R” for left spot ports and right spot ports.
but in the event listener I cant get the link.fromPortId

8

So you are saying that with that typo corrected, you are still not getting the port ID? Is the event handler being called at all? Are you getting the expected node data object?

9

yes.
this is my code : link

Unfortunately stackblitz doesn’t preview the app and I don’t know how to fix it. but it works. you can see my code.
the diagramListener is at line 58
linktemplate line 263
conditional node line 122
makeport function line 405

this is the result of console.log(link.data) :

 {__gohashid: 3015, from: -3, to: -2}
  from: -3
  to: -2
  __gohashid: 3015
  __proto__: Object

and console.log(link.portId , link.fromPortID) :
null " "

10

Your link data object doesn’t have either port identifier property. Have you not set GraphLinksModel.linkFromPortIdProperty and GraphLinksModel.linkToPortIdProperty?

11

Thanks I added it and now it works.