Different type of Links

GoJS
#1

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.

Thanks

#2

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.

This sample does both: http://gojs.net/latest/samples/orgChartExtras.html

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.

EDIT: Sorry, I think I misunderstood you the first time. You can do that by turning off the linking tool:

myDiagram =
  $(go.Diagram, "myDiagram",
    {
      "linkingTool.isEnabled":false,
      ...

Previous answer:

You can choose the type of link that the LinkingTool uses by modifying the LinkingTool.archetypeLinkData

Unless you mean making different rules for different kinds of nodes and links, in which case see: http://gojs.net/latest/intro/validation.html

#3

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?

#4

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: http://gojs.net/latest/intro/dataBinding.html

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.

Here’s one example: http://codepen.io/simonsarris/pen/oXOowP

That’s a very simplified Draggable Link sample that showcases how you can make multiple colors of links in the palette and diagram via data-binding.

#5

Hi Scott,

I want to switch between different linkTempkateMap. Like I can switch between them. Can you help me in this?

#6

You can replace the Diagram.linkTemplateMap. https://gojs.net/latest/intro/templateMaps.html#ChangingTemplateMaps