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?