Multiple links between two nodes - override each other

GoJS
#1

Hi,

I’m creating a flow chart base on a model I’m getting from a 3rd party.
The model include step data & link data, but no ports information is given.

This is my code (I’m using Angular2 but it’s irrelevant to my question) :

ngAfterViewInit() {

const $ = go.GraphObject.make;

const diagram = $(go.Diagram, this.element.nativeElement, { initialContentAlignment: go.Spot.Center });

diagram.model = $(go.GraphLinksModel,
  {
    nodeKeyProperty: 'stepId',
    linkFromKeyProperty: 'fromId',
    linkToKeyProperty: 'toId'
  });

diagram.nodeTemplate = 
  $(go.Node, 'Spot',
   { locationSpot: go.Spot.Center },
   new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
   $(go.Panel, 'Vertical', { margin: new go.Margin(20, 0, 0, 20) },
      $(go.Shape, 'RoundedRectangle',
        { fill: '#467DD6', stroke: null }
       ),
      $(go.TextBlock, '',
        { textAlign: 'center', verticalAlignment: go.Spot.BottomCenter },
         new go.Binding('text', 'stepName')
        )
  );

diagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5  },
    $(go.Shape, { strokeWidth: 2 } ),
    $(go.Shape, { toArrow: 'Standard', stroke: null } ),
    $(go.TextBlock,
      new go.Binding('text', 'pathName')
     )
  );

diagram.model.nodeDataArray = this.nodeDataArray;
diagram.model.linkDataArray = this.linksArray;

}


/ An example of received model:
nodeDataArray = 
[
  {
     'stepId': '822d9697-d4c2-4043-aeff-4cd61e3f9c35',
     'stepName': 'Step 1',
     'loc': '384 319',
     ...
   },
  {
     'stepId': '06095b7b-e274-4c29-920a-06435a2a05fe',
     'stepName': 'Step 2',
     'loc': '101 204',
     ...
   }
];

linkDataArray  =
[
 {
  'connectionId':  '19edda60-cddf-4dd8-b889-07e2d3dc40e2',
  'fromId':  '822d9697-d4c2-4043-aeff-4cd61e3f9c35',
  'toId': ' '06095b7b-e274-4c29-920a-06435a2a05fe',
  ...
 },
 {
  'connectionId':  '61c8efbf-2ee4-4ee9-82b0-9e4f909f2b81',
  'fromId':  '06095b7b-e274-4c29-920a-06435a2a05fe',
  'toId': ' '822d9697-d4c2-4043-aeff-4cd61e3f9c35',
  ...
 }  
];

The two links are one on top of each other, and I want to have a space between them.
Again, I have no info regarding ports, just nodes (steps) and links.

What can I do to prevent the links from overriding each other?

#2

Your templates and model data look pretty good. I think what’s missing is that you want to spread out the link connection points on the blue rounded rectangles. To do that you need to declare that that Shape is a port and to specify its fromSpot and toSpot Spots. Maybe something like:

    myDiagram.nodeTemplate =
      $(go.Node, 'Spot',
        { locationSpot: go.Spot.Center, locationObjectName: "BODY" },
        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, 'Vertical',
          { margin: new go.Margin(20, 0, 0, 20) },
          $(go.Shape, 'RoundedRectangle',
            {
              name: "BODY",
              fill: '#467DD6', stroke: null,
              portId: "", fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides
            }),
          $(go.TextBlock,
            { textAlign: 'center' },
            new go.Binding('text', 'stepName'))
        )
        //?? I assume you have simplified this template by leaving out the stuff that goes here
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal, corner: 5 },
        $(go.Shape, { strokeWidth: 2 }),
        $(go.Shape, { toArrow: 'Standard', stroke: null }),
        $(go.TextBlock,
          new go.Binding('text', 'pathName'))
      );

    myDiagram.model = $(go.GraphLinksModel,
      {
        nodeKeyProperty: 'stepId',
        linkKeyProperty: 'connectionId',
        linkFromKeyProperty: 'fromId',
        linkToKeyProperty: 'toId',
        nodeDataArray: [
          {
            'stepId': '822d9697-d4c2-4043-aeff-4cd61e3f9c35',
            'stepName': 'Step 1',
            'loc': '384 319'
          },
          {
            'stepId': '06095b7b-e274-4c29-920a-06435a2a05fe',
            'stepName': 'Step 2',
            'loc': '101 204'
           }
        ],
        linkDataArray: [
          {
            'connectionId': '19edda60-cddf-4dd8-b889-07e2d3dc40e2',
            'fromId': '822d9697-d4c2-4043-aeff-4cd61e3f9c35',
            'toId': '06095b7b-e274-4c29-920a-06435a2a05fe'
          },
          {
            'connectionId': '61c8efbf-2ee4-4ee9-82b0-9e4f909f2b81',
            'fromId': '06095b7b-e274-4c29-920a-06435a2a05fe',
            'toId': '822d9697-d4c2-4043-aeff-4cd61e3f9c35'
           } 
        ]
      });

Read more at:
http://gojs.net/latest/intro/connectionPoints.html#ToSpotAndFromSpot
http://gojs.net/latest/intro/ports.html

Also, note how I assigned the model’s properties when creating and initializing it. I also added GraphLinksModel.linkKeyProperty, based on your example link data.