How to improve edge routing after positioning nodes with elkjs

[LucasWijk]

Introduction

I could not get direction-graph JointJS addon to work, so I am currently using elkjs to position the nodes and then JointJs router to route the edges. This is because the diagram is interactive, so moving a node should recalculate the incoming/outgoing edges of that node and position them nicely in the diagram without overlapping other edges.

Currently the edges are overlapping and since I am new with the JointJS library, I would like to know the best way to tackle a problem like this. For example, what are the most important configuration options? How to make it look nice is basically my question.

The links currently have arrow.router('manhattan', { padding: 20, }); and arrow.connector('straight', { cornerType: 'cubic' }); and for the source/target options anchor: { name: 'center' }, and connectionPoint: { name: 'boundary' }.

`
import { dia } from '@joint/core';

export const FLOW_WIDTH: number = 200;

export const Stock = dia.Element.define(
'custom.Stock',
{
size: { width: 100, height: 80 },
attrs: {
root: {
cursor: 'move',
},
body: {
width: 'calc(w)',
height: 'calc(h)',
strokeWidth: 2,
stroke: '#000000',
fill: '#156082',
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
x: 'calc(0.5w)',
y: 'calc(0.5h)',
fontSize: 18,
fontFamily: 'sans-serif',
fill: '#ffffff',
},
inflow_outline: {
x: -FLOW_WIDTH,
y: 0,
width: FLOW_WIDTH,
height: 'calc(h)',
strokeWidth: 2,
stroke: '#0000ff',
fill: 'transparent',
},
outflow_outline: {
x: 'calc(w)',
y: 0,
width: FLOW_WIDTH,
height: 'calc(h)',
strokeWidth: 2,
stroke: '#0000ff',
fill: 'transparent',
},
},
},
{
markup: [
{ tagName: 'rect', selector: 'body' },
{ tagName: 'text', selector: 'label' },
{ tagName: 'rect', selector: 'inflow_outline' },
{ tagName: 'rect', selector: 'outflow_outline' },
],
},
);

export const Other = dia.Element.define(
'custom.Other',
{
size: { width: 120, height: 50 },
attrs: {
root: {
cursor: 'move',
},
body: {
rx: 'calc(0.5w)',
ry: 'calc(0.5h)',
cx: 'calc(0.5w)',
cy: 'calc(0.5h)',
strokeWidth: 2,
stroke: '#000000',
fill: '#156082',
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
x: 'calc(0.5w)',
y: 'calc(0.5h)',
fontSize: 18,
fontFamily: 'sans-serif',
fill: '#ffffff',
},
},
},
{
markup: [
{ tagName: 'ellipse', selector: 'body' },
{ tagName: 'text', selector: 'label' },
],
},
);

export const Dot = dia.Element.define(
'custom.Dot',
{
size: { width: 30, height: 30 },
attrs: {
root: {
cursor: 'move',
},
body: {
x: 0,
y: 0,
width: 'calc(w)',
height: 'calc(h)',
strokeWidth: 2,
stroke: '#ff0000',
//stroke: 'none',
fill: 'transparent',
},
},
},
{
markup: [
{ tagName: 'rect', selector: 'body' }
],
},
);

/export const Cloud = dia.Element.define('custom.Cloud', {
size: { width: 100, height: 80 },
attrs: {
root: {
cursor: 'move'
},
outline: {
stroke: '#581e1e',
fill: 'transparent',
width: 'calc(w)',
height: 'calc(h)'
},
image: {
d: m125.504,170.212c-16.188,0 -32.287,-3.771 -46.78,-10.931c-6.164,3.61 -13.109,5.507 -20.299,5.507c-14.905,0 -28.546,-8.419 -35.485,-21.218c-17.376,11.594 -37.46,17.692 -58.541,17.692c-38.319,0 -73.255,-20.484 -92.093,-53.708c-0.131,0.006 -0.263,0.006 -0.394,0.006c-58.404,0 -105.912,-47.514 -105.912,-105.912c0,-58.404 47.508,-105.912 105.912,-105.912c9.923,0 19.822,1.438 29.524,4.284c14.416,-42.705 54.782,-72.02 100.255,-72.02c33.295,0 64.711,15.8 84.694,42.43c0.609,-0.03 1.211,-0.048 1.826,-0.048c58.398,0 105.912,47.508 105.912,105.912c0,2.369 -0.084,4.744 -0.257,7.202c23.909,20.21 37.549,49.477 37.549,80.803c0.001,58.399 -47.513,105.913 -105.911,105.913zm-47.568,-24.834l3.276,1.76c13.557,7.292 28.88,11.14 44.292,11.14c51.822,0 93.978,-42.156 93.978,-93.978c0,-28.736 -12.954,-55.534 -35.539,-73.518l-2.536,-2.017l0.316,-3.228c0.316,-3.234 0.465,-6.259 0.465,-9.249c0,-51.822 -42.156,-93.978 -93.978,-93.978c-0.901,0 -1.79,0.066 -2.673,0.125l-5.048,0.263l-1.886,-2.691c-17.625,-25.096 -46.373,-40.079 -76.912,-40.079c-42.198,0 -79.437,28.462 -90.565,69.204l-1.695,6.212l-6.062,-2.154c-10.293,-3.664 -20.878,-5.519 -31.457,-5.519c-51.822,0 -93.978,42.156 -93.978,93.978s42.156,93.978 93.978,93.978c0.632,0 1.259,-0.048 1.886,-0.089l5.501,-0.239l1.742,3.347c16.272,31.26 48.212,50.683 83.357,50.683c20.985,0 40.861,-6.814 57.479,-19.691l6.868,-5.328l2.5,8.33c3.574,11.898 14.75,20.216 27.179,20.216c5.931,0 11.635,-1.838 16.492,-5.316l3.02,-2.162z,
transform: 'translate(calc(0.5w), calc(0.5h)) scale(0.2)',
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
x: 'calc(0.5w)',
y: 'calc(0.5h)',
fontSize: 18,
fontFamily: 'sans-serif',
fill: '#333333'
}
}
}, {
markup: [
{ tagName: 'rect', selector: 'outline' },
{ tagName: 'rect', selector: 'inline' },
{ tagName: 'path', selector: 'image' },
{ tagName: 'text', selector: 'label' }
]
});/

export const Arrow = dia.Link.define(
'custom.Arrow',
{
attrs: {
line: {
connection: true,
stroke: '#000000',
fill: 'none',
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round',
targetMarker: {
type: 'path',
d: 'M 10 -5 0 0 10 5 z',
},
},
},
},
{
markup: [
{
tagName: 'path',
selector: 'line',
attributes: {
'pointer-events': 'none',
},
},
],
},
);

//const valve: string = svg van valve;

export const Flow = dia.Link.define(
'custom.Flow',
{
attrs: {
outline: {
connection: true,
strokeWidth: 32,
stroke: '#000000',
fill: 'none',
targetMarker: {
type: 'path',
markerUnits: 'strokeWidth',
d: 'M 0.1,-0.1 0,0 0.1,0.1 Z',
},
},
line: {
connection: true,
stroke: '#156082',
fill: 'none',
strokeWidth: 28,
targetMarker: {
type: 'path',
markerUnits: 'strokeWidth',
d: 'M 0.1,-0.1 0,0 0.1,0.1 Z',
},
},
dot: {
stroke: '#ff0000',
fill: 'transparent',
x: -15,
y: -15,
width: 30,
height: 30,
strokeWidth: 2,
atConnectionRatio: 0.5
},
},
labels: [{
size: { width: 200, height: 30 },
position: { distance: 0.5 },
attrs: {
label: {
/textWrap: {
width: 'calc(w - 5)',
height: 'calc(h - 5)'
},
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontSize: 16,
fontFamily: 'sans-serif',
text: 'EEN TEKST',/
width: 'calc(w)',
height: 'calc(h)',
x: 0,
y: 0,
//fill: '#ff0000',
//stroke: '#00ff00'
fill: 'transparent'
}
},
markup: [
{ tagName: 'rect', selector: 'label' }
],
}]
},
{
markup: [
{
tagName: 'path',
selector: 'outline',
attributes: {
'pointer-events': 'none',
},
},
{
tagName: 'path',
selector: 'line',
attributes: {
'pointer-events': 'none',
},
},
{
tagName: 'rect',
selector: 'dot',
}
],
},
);
`

This is the elkjs code.
const elkGraph: ElkGraph = { layoutOptions: { 'elk.algorithm': 'layered', 'elk.layered.spacing.nodeNodeBetweenLayers': '100', 'elk.spacing.nodeNode': '50', 'elk.spacing.edgeNode': '20', 'elk.spacing.edgeEdge': '20', 'elk.edgeRouting': 'POLYLINE', 'elk.partitioning.activate': 'false', 'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX' }, id: 'root', children: [], edges: [], };

this.stocks.forEach((stock) => { const totalWidth = this.elementVisuals[stock].attributes.size!.width + (this.inflows[stock].size > 0 ? FLOW_WIDTH : 0) + (this.outflows[stock].size > 0 ? FLOW_WIDTH : 0); const totalHeight = this.elementVisuals[stock].attributes.size!.height;

  `const elkNode: ElkNode = {
    id: stock + '_compound',
    width: totalWidth,
    height: totalHeight,
    ports: [
      { id: stock + '_inflow_port', x: 0, y: totalHeight / 2 },
      { id: stock, x: totalWidth / 2, y: totalHeight / 2 },
      { id: stock + '_outflow_port', x: totalWidth, y: totalHeight / 2 },
    ],
    layoutOptions: {
      'elk.portConstraints': 'FIXED_POS'
    }
  };
  elkGraph.children.push(elkNode);
});`

`this.others.forEach((other) => {
  const elkNode: ElkNode = {
    id: other,
    width: this.elementVisuals[other].attributes.size!.width,
    height: this.elementVisuals[other].attributes.size!.height,
  };
  elkGraph.children.push(elkNode);
});`

`for (const stock in this.inflows) {
  const influencers = this.inflows[stock];
  influencers.forEach((influencer) => {
    const extendedEdge: ElkExtendedEdge = {
      id: influencer + '-' + stock + '_inflow',
      sources: [influencer],
      targets: [stock + '_inflow_port'],
    };
    elkGraph.edges.push(extendedEdge);
  });
}`

`for (const stock in this.outflows) {
  const influencers = this.outflows[stock];
  influencers.forEach((influencer) => {
    const extendedEdge: ElkExtendedEdge = {
      id: influencer + '-' + stock + '_outflow',
      sources: [influencer],
      targets: [stock + '_outflow_port'],
    };
    elkGraph.edges.push(extendedEdge);
  });
}`

`for (const influenced in this.arrows) {
  const influencers = this.arrows[influenced];
  influencers.forEach((influencer) => {
    const extendedEdge: ElkExtendedEdge = {
      id: influencer + '-' + influenced,
      sources: [influencer],
      targets: [influenced],
    };
    elkGraph.edges.push(extendedEdge);
  });
}`

The thin links are arrows, the thick links are inflows and outflows. The blue rectangles are stocks (stock variables). The ellipses are others (other variables). The outlines are for debugging.

Steps to reproduce

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS