Hi, i’m trying out GoJS for my company, i’m trying to create a demo similar to Draggable Link, but on the left side, other than having different types of Nodes, is it also possible to have different type of Links, each have different appearances(dashed, solid) and custom properties(id, state). It would also be nice if you can only connect nodes by drag one type of Link on the main canvas then link them up.
You can either use data bindings to make your links look different, or different link templates in your Diagram.linkTemplateMap and have different categories of links.
Thanks for the reply Simon, is there a example where the user have different choices of Links from the left palette? I’m struggling to create it myself
// the Palette also has a disconnected Link, which the user can drag-and-drop
{ points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
In the draggable link example, this line seems to create a link on the palette, but what does points do?
In the link data “points” is meaningful only because the link template has a data-binding on points:
myDiagram.linkTemplate =
$(go.Link,
// ... start of the template
new go.Binding("points").makeTwoWay(),
// ... rest of the template
);
That binding lets you specify stuff in the node and link data and change each node or link accordingly. Read more about data binding here: GoJS Data Binding -- Northwoods Software
If you just add two link templates that are different OR add a data-binding on color, you can get different-looking links in the palette.