Multiple links between two nodes - override each other

@yafit1 wrote:

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?

Posts: 2

Participants: 2

Read full topic