Add link interactively

GoJS
1

Hi
Basically, I want to be able to draw link between shapes and each link can be customised (eg. link 1 is single arrowhead, link 2 is double arrowhead, etc).
I have done something like this:
diagram.linkTemplate =
$(go.Link,
$(go.Shape, { stroke: “red” }),
$(go.Shape, new go.Binding(“fromArrow”, “fromArrow”)),
$(go.Shape, new go.Binding(“toArrow”, “toArrow”))
);

Then if I do this
var nodeDataArray = [
{ key: “Alpha”, loc: “0 0” },
{ key: “Beta”, loc: “50 50” },
{ key: “Gamma”, loc: “100 25” }
];
var linkDataArray = [
{ from: “Alpha”, to: “Beta”, fromArrow:‘Backward’, toArrow:‘Standard’},
{ from: “Alpha”, to: “Gamma”, fromArrow:’’, toArrow:’’}
];

diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

I get the expected behaviour. So, it’s not a problem if I add it programmatically (either like above or using addLinkData)

The problem that I have is what about if I draw the link interactively? How do I tell eg. for link 3 draw it as double arrow, for link 4 single arrow? How do I specify “fromArrow” and “toArrow” properties?
I’ve tried to catch event “LinkDrawn” and hoped to be able to customise it there but there is no luck.
Thanks in advance

2

You could change the link data in a “LinkDrawn” DiagramEvent. That should work. This is demonstrated by the Links To Links sample: Links to Links. In that sample the maybeChangeLinkCategory function is changing the category of the link data, but you could change any number of data properties.

Or you could decide beforehand what kind of link the user wants to draw. Perhaps you have some global state like a “mode” indicator or a set of properties that specify the user’s current choices. When that state changes you just change the corresponding desired properties on the LinkingTool.archetypeLinkData object. From then on each new link will use a copy of that link data, so you’ll get the appearance that you want. The Grafcet sample demonstrates this: Grafcet Diagrams

Or as a third alternative you could override LinkingTool.insertLink and decide dynamically what you want to appear. This too modifies the LinkingTool.archetypeLinkData object. The System Dynamics sample demonstrates this: System Dynamics