Trying to add parallelRoute links but not showing

GoJS
1 
diagram.linkTemplate =
            $(ParallelRouteLink,  // the whole link panel  Sample: routing: go.Link.AvoidsNodes
                { relinkableFrom: true, relinkableTo: true, reshapable: true, routing: go.Link.AvoidsNodes },
                $(go.Shape,
                    { strokeWidth: 2 },
                    new go.Binding("stroke", "color")),
                $(go.Shape,
                    { toArrow: "Standard", stroke: null },
                    new go.Binding("fill", "color")),
                $(go.Panel, "Auto",
                    $(go.TextBlock,  // the label text
                        {
                            textAlign: "center",
                            font: "10pt helvetica, arial, sans-serif",
                            stroke: "black",
                            margin: 4,
                            editable: true  // editing the text automatically updates the model data
                        },
                        new go.Binding("text", "text").makeTwoWay())
                )
            );


        diagram.linkTemplateMap.add("failedEdge",
            $(ParallelRouteLink,  // the whole link panel  Sample: routing: go.Link.AvoidsNodes
                { reshapable: true, routing: go.Link.AvoidsNodes },
                $(go.Shape,
                    { strokeWidth: 2 },
                    new go.Binding("stroke", "color")),
                $(go.Shape,
                    { toArrow: "Standard", stroke: null },
                    new go.Binding("fill", "color")),
                $(go.Panel, "Auto",
                    $(go.Shape,  // the label background, which becomes transparent around the edges
                        {
                            fill: $(go.Brush, "Radial",
                                { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240)" }),
                            stroke: null
                        }),
                    $(go.TextBlock,  // the label text
                        {
                            textAlign: "center",
                            font: "10pt helvetica, arial, sans-serif",
                            stroke: "black",
                            margin: 4,
                            editable: true  // editing the text automatically updates the model data
                        },
                        new go.Binding("text", "text").makeTwoWay())
                )
            )
        );

Here is an example of what Im producing now. How do I make the arrows parallel and as straight as possible? My end goal is to make sure all edges do not overlap each other. They can cross if needed buy they shouldnt be on top of each other if they can be parallel.

2

The purpose of ParallelRouteLink is to produce parallel, non-overlapping link routes amongst multiple links connecting the same pair of nodes/ports. View its sample: Parallel Route Links

Its purpose does not extend to routing unrelated links connecting different nodes. Don’t bother with using that extension class.

In your screenshot, it appears that you are using simple Spot values for the Link.fromSpot and toSpot. Try using “…Side” Spot values instead. When there is only one link connecting with a side of a node, the result will be the same. But when there are multiple connections, they will be spread out a bit. That might help a few cases of overlapping link segments, but in general GoJS does not offer a solution for what you seek.

3

Is there a way I can make my own routes? Im thinking If I just move the link a little lower each time they wouldnt overlap.

4

There are several ways to get your own custom routing.

  • Setting or binding various Link or GraphObject properties that affect routing. Most of their names start with “from…” or “to…”.
  • In a “LayoutCompleted” DiagramEvent listener, change the Link.points of those Links whose route you want to modify.
  • In a customized layout, operating on the Links that the Layout is responsible for.
  • In an override of one of the Link methods. Most of their names start with “compute…”, but a few start with “get…”.

But this is a potentially very complex subject. It depends on which situations you want to handle.