kieler / elkjs Goto Github PK
View Code? Open in Web Editor NEWELK's layout algorithms for JavaScript
License: Other
elkjs's People
Contributors
Stargazers
Watchers
Forkers
cube3power xefias techlord-rce expertasif brollb finger563 asaddict chandusekhar hastebrot kyungsang tanqiaofang wolvi1984 zhanglei923 blackganglion mlzboy skuramatata pqyplzxhgf jonnydubowsky pikawolfy hugebean darwinbeing belenko vpachchi1 rowhit alangreene marshallchen hhy5277 sebastbake eagerwolf jetstyle mengxhy alexandermatveev izhan intertangle-survey immrl dntzhang boykoalex joamatab gaensli amcdnl uruuru boogiebug vadorequest connor-wallace cricketnest asaflanzer qix- amazing-util johnnyghost lingxw soerendomroes mzpqnxow vishaldodiya doukemao stmarian shi27feng pewh tongwoo mercyscope babyworm benlongo ko-rei mbrukman jona898 studiovc gleme tuckergordon smetroid pingf ariswib stuartgalt creately arkajyotimukherjee c-jeongyyun gaecom vicromchatim nick-gabe extremelylatebound devdoshi carller0302 daniel-khodabakhsh zakhttp dima-getselectstar saulshanabrook skspade cjayyyelkjs's Issues
Edge in both directions?
Given the edges A->B and B->A, is it possible somehow to draw one single edge with two arrows like A<->B?
Possible layout bug in edge originating from parent and targeting child node
I am migrating from klayjs to [email protected] and noticed a possible regression laying out an edge that originates from a parent node and targets a child node. Please consider the following reduced example.
Expected layout:
Actual layout:
The expected layout was derived from [email protected].
Here is the kgraph before running layout:
{
"id": "$generated-scxml-0",
"labels": [
{
"text": ""
}
],
"edges": [
{
"id": "A:transition:0",
"source": "A",
"target": "a1",
"labels": [
{
"text": "e",
"width": 1.765625,
"height": 4.53125
}
],
},
{
"id": "$generated_A_initial_0:transition:0",
"source": "$generated_A_initial_0",
"target": "a1",
"labels": []
},
{
"id": "$generated_$generated-scxml-0_initial_0:transition:0",
"source": "$generated_$generated-scxml-0_initial_0",
"target": "A",
"labels": []
}
],
"properties": {
"borderSpacing": 6
},
"children": [
{
"id": "A",
"labels": [
{
"text": "A"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"children": [
{
"id": "a1",
"labels": [
{
"text": "a1"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 0,
"y": 0,
"width": 8.765625,
"height": 9.53125
},
{
"id": "a2",
"labels": [
{
"text": "a2"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 0,
"y": 0,
"width": 8.765625,
"height": 9.53125
},
{
"id": "$generated_A_initial_0",
"labels": [
{
"text": "◉ $generated_A_initial_0"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 0,
"y": 0,
"width": 4,
"height": 4
}
],
"x": 0,
"y": 0,
"width": 7.875,
"height": 9.53125
},
{
"id": "$generated_$generated-scxml-0_initial_0",
"labels": [
{
"text": "◉ $generated_$generated-scxml-0_initial_0"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 0,
"y": 0,
"width": 4,
"height": 4
}
],
"width": 5,
"height": 5
}Here is the kgraph after running layout for [email protected]:
{
"id": "$generated-scxml-0",
"labels": [
{
"text": "",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [
{
"id": "A:transition:0",
"source": "A",
"target": "a1",
"labels": [
{
"text": "e",
"width": 1.765625,
"height": 4.53125,
"x": 0,
"y": 0
}
],
"sections": [
{
"id": "A:transition:0_s0",
"startPoint": {
"x": 0,
"y": 0
},
"endPoint": {
"x": 0,
"y": 0
}
}
]
},
{
"id": "$generated_A_initial_0:transition:0",
"source": "$generated_A_initial_0",
"target": "a1",
"labels": [],
"sections": [
{
"id": "$generated_A_initial_0:transition:0_s0",
"startPoint": {
"x": 16,
"y": 32.296875
},
"endPoint": {
"x": 36,
"y": 32.296875
}
}
]
},
{
"id": "$generated_$generated-scxml-0_initial_0:transition:0",
"source": "$generated_$generated-scxml-0_initial_0",
"target": "A",
"labels": [],
"sections": [
{
"id": "$generated_$generated-scxml-0_initial_0:transition:0_s0",
"startPoint": {
"x": 16,
"y": 36.53125
},
"endPoint": {
"x": 36,
"y": 36.53125
}
}
]
}
],
"properties": {
"borderSpacing": 6
},
"children": [
{
"id": "A",
"labels": [
{
"text": "A",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"children": [
{
"id": "a1",
"labels": [
{
"text": "a1",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 36,
"y": 27.53125,
"width": 8.765625,
"height": 9.53125,
"$H": 281
},
{
"id": "a2",
"labels": [
{
"text": "a2",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 12,
"y": 12,
"width": 8.765625,
"height": 9.53125,
"$H": 284
},
{
"id": "$generated_A_initial_0",
"labels": [
{
"text": "◉ $generated_A_initial_0",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 12,
"y": 30.296875,
"width": 4,
"height": 4,
"$H": 287
}
],
"x": 36,
"y": 12,
"width": 56.765625,
"height": 49.0625,
"$H": 278
},
{
"id": "$generated_$generated-scxml-0_initial_0",
"labels": [
{
"text": "◉ $generated_$generated-scxml-0_initial_0",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"x": 12,
"y": 34.53125,
"width": 4,
"height": 4,
"$H": 290
}
],
"width": 104.765625,
"height": 73.0625,
"$H": 12,
"x": 0,
"y": 0
}You can see that edge A:transition:0_s0 has startPoint 0,0, and endPoint 0,0, which is unexpected.
"id": "A:transition:0_s0",
"startPoint": {
"x": 0,
"y": 0
},
"endPoint": {
"x": 0,
"y": 0
}
}I would greatly appreciate your help with this. Thank you.
Uncaught (in promise) Cannot read property 'startX' of null
Given the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="/_test/wf/elk-api.js"></script>
<!-- use elk-api.js here! -->
<script>
var wf = {"id":"root","children":[{"id":"57da8b44fffd97e2179faa24","width":174,"height":80,"ports":[{"id":"57da8b44fffd97e2179faa24_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da8b5efffd97e2179fb9d9","width":232,"height":80},{"id":"57da7b5dfffd97e2179e06df","width":165,"height":80,"ports":[{"id":"57da7b5dfffd97e2179e06df_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}},{"id":"57da7b5dfffd97e2179e06df_1","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"1"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da78b9fffd97e2179de456","width":165,"height":80,"ports":[{"id":"57da78b9fffd97e2179de456_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}},{"id":"57da78b9fffd97e2179de456_1","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"1"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7725fffd97e2179dda52","width":232,"height":80,"ports":[{"id":"57da7725fffd97e2179dda52_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da80bcfffd97e2179ecfcc","width":165,"height":80,"ports":[{"id":"57da80bcfffd97e2179ecfcc_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}},{"id":"57da80bcfffd97e2179ecfcc_1","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"1"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7be7fffd97e2179e1aab","width":174,"height":80,"ports":[{"id":"57da7be7fffd97e2179e1aab_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7a5efffd97e2179dfcc3","width":174,"height":80,"ports":[{"id":"57da7a5efffd97e2179dfcc3_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da75fdfffd97e2179dd20a","width":232,"height":80},{"id":"57da8b77fffd97e2179fc13f","width":188,"height":80,"ports":[{"id":"57da8b77fffd97e2179fc13f_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}},{"id":"57da8b77fffd97e2179fc13f_1","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"1"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"581b09ebfffd970e5c907418","width":292,"height":80,"ports":[{"id":"581b09ebfffd970e5c907418_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da8a27fffd97e2179f4546","width":194,"height":80,"ports":[{"id":"57da8a27fffd97e2179f4546_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da79b5fffd97e2179dedc6","width":165,"height":80,"ports":[{"id":"57da79b5fffd97e2179dedc6_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}},{"id":"57da79b5fffd97e2179dedc6_1","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"1"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da87fbfffd97e2179ef368","width":174,"height":80,"ports":[{"id":"57da87fbfffd97e2179ef368_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7827fffd97e2179ddf9a","width":294,"height":80,"ports":[{"id":"57da7827fffd97e2179ddf9a_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da79f7fffd97e2179df786","width":167,"height":80,"ports":[{"id":"57da79f7fffd97e2179df786_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7babfffd97e2179e1374","width":167,"height":80,"ports":[{"id":"57da7babfffd97e2179e1374_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7920fffd97e2179de7aa","width":254,"height":80,"ports":[{"id":"57da7920fffd97e2179de7aa_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7aa8fffd97e2179e001f","width":246,"height":80,"ports":[{"id":"57da7aa8fffd97e2179e001f_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da8aacfffd97e2179f53be","width":165,"height":80,"ports":[{"id":"57da8aacfffd97e2179f53be_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}},{"id":"57da8aacfffd97e2179f53be_1","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"1"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da8bcafffd97e2179ffd5e","width":174,"height":80,"ports":[{"id":"57da8bcafffd97e2179ffd5e_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7f59fffd97e2179ebf83","width":233,"height":80,"ports":[{"id":"57da7f59fffd97e2179ebf83_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7634fffd97e2179dd89a","width":187,"height":80,"ports":[{"id":"57da7634fffd97e2179dd89a_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"581b0995fffd970e5c9061d9","width":313,"height":80,"ports":[{"id":"581b0995fffd970e5c9061d9_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da8115fffd97e2179eea72","width":167,"height":80,"ports":[{"id":"57da8115fffd97e2179eea72_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da8b03fffd97e2179f6a93","width":167,"height":80,"ports":[{"id":"57da8b03fffd97e2179f6a93_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da9b1ffffd97e217a2b164","width":168,"height":80,"ports":[{"id":"57da9b1ffffd97e217a2b164_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da7776fffd97e2179ddbce","width":273,"height":80,"ports":[{"id":"57da7776fffd97e2179ddbce_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}},{"id":"57da9b3ffffd97e217a2c5b0","width":463,"height":80,"ports":[{"id":"57da9b3ffffd97e217a2c5b0_0","width":18,"height":18,"properties":{"port.side":"NORTH","port.index":"0"}}],"properties":{"portConstraints":"FIXED_ORDER"}}],"edges":[{"id":"57da8b44fffd97e2179faa24:57da8b77fffd97e2179fc13f","sources":["57da8b44fffd97e2179faa24"],"targets":["57da8b77fffd97e2179fc13f_0"]},{"id":"57da8b5efffd97e2179fb9d9:57da8b77fffd97e2179fc13f","sources":["57da8b5efffd97e2179fb9d9"],"targets":["57da8b77fffd97e2179fc13f_1"]},{"id":"57da7b5dfffd97e2179e06df:57da7babfffd97e2179e1374","sources":["57da7b5dfffd97e2179e06df"],"targets":["57da7babfffd97e2179e1374_0"]},{"id":"57da78b9fffd97e2179de456:57da79b5fffd97e2179dedc6","sources":["57da78b9fffd97e2179de456"],"targets":["57da79b5fffd97e2179dedc6_0"]},{"id":"57da7725fffd97e2179dda52:57da7776fffd97e2179ddbce","sources":["57da7725fffd97e2179dda52"],"targets":["57da7776fffd97e2179ddbce_0"]},{"id":"57da80bcfffd97e2179ecfcc:57da8115fffd97e2179eea72","sources":["57da80bcfffd97e2179ecfcc"],"targets":["57da8115fffd97e2179eea72_0"]},{"id":"57da7be7fffd97e2179e1aab:57da80bcfffd97e2179ecfcc","sources":["57da7be7fffd97e2179e1aab"],"targets":["57da80bcfffd97e2179ecfcc_0"]},{"id":"57da7a5efffd97e2179dfcc3:57da7b5dfffd97e2179e06df","sources":["57da7a5efffd97e2179dfcc3"],"targets":["57da7b5dfffd97e2179e06df_0"]},{"id":"57da75fdfffd97e2179dd20a:57da7634fffd97e2179dd89a","sources":["57da75fdfffd97e2179dd20a"],"targets":["57da7634fffd97e2179dd89a_0"]},{"id":"57da75fdfffd97e2179dd20a:57da7725fffd97e2179dda52","sources":["57da75fdfffd97e2179dd20a"],"targets":["57da7725fffd97e2179dda52_0"]},{"id":"57da75fdfffd97e2179dd20a:57da7920fffd97e2179de7aa","sources":["57da75fdfffd97e2179dd20a"],"targets":["57da7920fffd97e2179de7aa_0"]},{"id":"57da75fdfffd97e2179dd20a:57da7aa8fffd97e2179e001f","sources":["57da75fdfffd97e2179dd20a"],"targets":["57da7aa8fffd97e2179e001f_0"]},{"id":"57da75fdfffd97e2179dd20a:57da7f59fffd97e2179ebf83","sources":["57da75fdfffd97e2179dd20a"],"targets":["57da7f59fffd97e2179ebf83_0"]},{"id":"57da75fdfffd97e2179dd20a:57da8a27fffd97e2179f4546","sources":["57da75fdfffd97e2179dd20a"],"targets":["57da8a27fffd97e2179f4546_0"]},{"id":"57da8b77fffd97e2179fc13f:57da8bcafffd97e2179ffd5e","sources":["57da8b77fffd97e2179fc13f"],"targets":["57da8bcafffd97e2179ffd5e_0"]},{"id":"581b09ebfffd970e5c907418:581b0995fffd970e5c9061d9","sources":["581b09ebfffd970e5c907418"],"targets":["581b0995fffd970e5c9061d9_0"]},{"id":"57da8a27fffd97e2179f4546:57da8aacfffd97e2179f53be","sources":["57da8a27fffd97e2179f4546"],"targets":["57da8aacfffd97e2179f53be_1"]},{"id":"57da79b5fffd97e2179dedc6:57da79f7fffd97e2179df786","sources":["57da79b5fffd97e2179dedc6"],"targets":["57da79f7fffd97e2179df786_0"]},{"id":"57da87fbfffd97e2179ef368:57da8aacfffd97e2179f53be","sources":["57da87fbfffd97e2179ef368"],"targets":["57da8aacfffd97e2179f53be_0"]},{"id":"57da7827fffd97e2179ddf9a:57da78b9fffd97e2179de456","sources":["57da7827fffd97e2179ddf9a"],"targets":["57da78b9fffd97e2179de456_1"]},{"id":"57da79f7fffd97e2179df786:57da7a5efffd97e2179dfcc3","sources":["57da79f7fffd97e2179df786"],"targets":["57da7a5efffd97e2179dfcc3_0"]},{"id":"57da7babfffd97e2179e1374:57da7be7fffd97e2179e1aab","sources":["57da7babfffd97e2179e1374"],"targets":["57da7be7fffd97e2179e1aab_0"]},{"id":"57da7920fffd97e2179de7aa:57da79b5fffd97e2179dedc6","sources":["57da7920fffd97e2179de7aa"],"targets":["57da79b5fffd97e2179dedc6_1"]},{"id":"57da7aa8fffd97e2179e001f:57da7b5dfffd97e2179e06df","sources":["57da7aa8fffd97e2179e001f"],"targets":["57da7b5dfffd97e2179e06df_1"]},{"id":"57da8aacfffd97e2179f53be:57da8b03fffd97e2179f6a93","sources":["57da8aacfffd97e2179f53be"],"targets":["57da8b03fffd97e2179f6a93_0"]},{"id":"57da8bcafffd97e2179ffd5e:57da9b1ffffd97e217a2b164","sources":["57da8bcafffd97e2179ffd5e"],"targets":["57da9b1ffffd97e217a2b164_0"]},{"id":"57da8bcafffd97e2179ffd5e:57da9b3ffffd97e217a2c5b0","sources":["57da8bcafffd97e2179ffd5e"],"targets":["57da9b3ffffd97e217a2c5b0_0"]},{"id":"57da8bcafffd97e2179ffd5e:581b09ebfffd970e5c907418","sources":["57da8bcafffd97e2179ffd5e"],"targets":["581b09ebfffd970e5c907418_0"]},{"id":"57da7f59fffd97e2179ebf83:57da80bcfffd97e2179ecfcc","sources":["57da7f59fffd97e2179ebf83"],"targets":["57da80bcfffd97e2179ecfcc_1"]},{"id":"57da7634fffd97e2179dd89a:57da78b9fffd97e2179de456","sources":["57da7634fffd97e2179dd89a"],"targets":["57da78b9fffd97e2179de456_0"]},{"id":"57da8115fffd97e2179eea72:57da87fbfffd97e2179ef368","sources":["57da8115fffd97e2179eea72"],"targets":["57da87fbfffd97e2179ef368_0"]},{"id":"57da8b03fffd97e2179f6a93:57da8b44fffd97e2179faa24","sources":["57da8b03fffd97e2179f6a93"],"targets":["57da8b44fffd97e2179faa24_0"]},{"id":"57da7776fffd97e2179ddbce:57da7827fffd97e2179ddf9a","sources":["57da7776fffd97e2179ddbce"],"targets":["57da7827fffd97e2179ddf9a_0"]}],"properties":{"elk.algorithm":"layered"}}
const elk = new ELK({
workerUrl: '/_test/wf/elk-worker.js'
})
elk.layout(wf)
.then(function(g) {
document.body.innerHTML = "<pre>" + JSON.stringify(g, null, " ") + "</pre>"
})
</script>
</html>
I am getting Uncaught (in promise) Cannot read property 'startX' of null
If I change the portConstraints to FREE it works, however as soon as i switch it to any other, case in point FIXED_ORDER , that error pops up.
Is it possible to specify the size of the final drawing?
I have two questions regarding size:
- Is it possible to specify the final size of the drawing?
- I see that the option Layer Bound forces the drawing to have at most k nodes on each layer. Is this option usable in klayjs? I tried it and it didn't work but I'm not sure I'm doing everything correctly: I simply specified the following as an option:
'org.eclipse.elk.layered.layering.coffmanGraham.layerBound': 2
Can I set defaultLayoutOptions at node level?
I know that I can set defaultLayoutOptions when I initialize an ELK instance:
new ELK({
defaultLayoutOptions: {
'elk.layered.spacing.nodeNodeBetweenLayers': 33
}
})So that every node in the graph will use this defaultLayoutOptions unless you specify layoutOption to override it.
Problem is: layoutOption at node level is not inherited by children nodes. So if I want all children nodes to have the same layoutOptions, I need to set them one by one.
I know that if I set elk.hierarchyHandling to INCLUDE_CHILDREN, the algorithm is responsible to process all hierarchy levels that are contained in the associated parent node. But this is not what I want: I cannot customize each children separately. This issue was reported here: #26
So question is: is here an defaultLayoutOptions setting at node level, not only all its children inherit this setting but also can override it?
Bring children on 1 line
Is there a way to put all the children on one line if they are not connected?
So I'm having this:
{
id: "root",
properties: { 'algorithm': 'layered', 'elk.direction': 'RIGHT', 'elk.alignment': 'RIGHT' },
children: [
{ id: "n1", width: 30, height: 30 },
{ id: "n2", width: 30, height: 30 },
{ id: "n3", width: 30, height: 30 },
{ id: "n4", width: 30, height: 30 },
{ id: "n5", width: 30, height: 30 },
{ id: "n6", width: 30, height: 30 },
{ id: "n7", width: 30, height: 30 },
{ id: "n8", width: 30, height: 30 },
{ id: "n9", width: 30, height: 30 },
],
edges: [ ]
}
What I now get is a 3 x 3 matrix. I thought because of adding the elk.alignment I would get a 1 x 9 matrix. Is it possible that when there are no connections that they are on 1 line?
Concise json graph format
In #27 @tylerlong suggested to create a more concise version of ELK's json format, which is transformed into the classic json format. Comments are welcome, I'll update this description until a final decision is made.
In my oppinion in should be consistent to ELK's text format where possible.
Features shall include:
- Optional ids. They shall be generated automatically if omitted. I feel, however, that the generation should be as deterministic as possible.
- Inheritence of layout options.
- More concise syntax for edges and labels.
- Allow to specify a (global) default for element dimensions.
Labels
{ id: "n1", label: "foo" } and { id: "n1", labels: { "foo" } }
translate to { id: "n1", labels: [ { id: "l1", text: "foo" } ]
Edges
Syntax consistent with ELK text:
edges: [ "n1->n2", "n2->n3" ]
translates to edges: [ { id: "e1", sources: ["n1"], targets: ["n2"] }, { id: "e2", sources: ["n2"], targets: ["n3"] }]
Mixing objects and strings:
edges: [ 'n1->n2', { sources: ["n2"], targets: ["n3"] } ]
Equally spaced layers?
Is there any option or combination of options that allow me to obtain equally spaced layers? Assume for a moment that nodes have fixed height and I am drawing top-to-bottom
elk.hierarchyHandling INCLUDE_CHILDREN and elk.direction
According to #4, if I want to create edges between hierarchical nodes, I need to set elk.hierarchyHandling to INCLUDE_CHILDREN
{
"id": "org.eclipse.elk.hierarchyHandling",
"name": "Hierarchy Handling",
"description": "If this option is set to SEPARATE_CHILDREN, each hierarchy level of the graph is processed independently, possibly by different layout algorithms, beginning with the lowest level. If it is set to INCLUDE_CHILDREN, the algorithm is responsible to process all hierarchy levels that are contained in the associated parent node. If the root node is set to inherit (or not set at all), the default behavior is SEPARATE_CHILDREN.",
"group": "",
"type": "ENUM",
"targets": [
"PARENTS",
"NODES"
]
},Problem is: I can no longer set elk.direction for children nodes, it always use parent settings.
So question is: is it possible for the parent nodes and children nodes to have different elk.direction, and also to have edges between hierarchical nodes?
Empty edge.sections array on layout
Please consider the following reduced example.
Given the following JSON:
{
"id": "root",
"labels": [
{
"text": "root"
}
],
"edges": [
{
"id": "a1:0",
"sources": [
"a1"
],
"targets": [
"A"
],
"labels": [
{
"text": "e"
}
]
},
{
"id": "$generated_A_initial_0:0",
"sources": [
"$generated_A_initial_0"
],
"targets": [
"a1"
],
"labels": []
},
{
"id": "$generated_root_initial_0:0",
"sources": [
"$generated_root_initial_0"
],
"targets": [
"A"
],
"labels": []
}
],
"children": [
{
"id": "A",
"labels": [
{
"text": "A"
}
],
"edges": [],
"children": [
{
"id": "a1",
"labels": [
{
"text": "a1"
}
],
"edges": []
},
{
"id": "a2",
"labels": [
{
"text": "a2"
}
],
"edges": []
},
{
"id": "$generated_A_initial_0",
"labels": [],
"edges": []
}
]
},
{
"id": "$generated_root_initial_0",
"labels": [],
"edges": []
}
]
}Calling elk.layout generates the following graph:
{
"id": "root",
"labels": [
{
"text": "root",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [
{
"id": "a1:0",
"sources": [
"a1"
],
"targets": [
"A"
],
"labels": [
{
"text": "e",
"width": 2.046875,
"height": 4.484375,
"x": 0,
"y": 0
}
],
"sections": []
},
{
"id": "$generated_A_initial_0:0",
"sources": [
"$generated_A_initial_0"
],
"targets": [
"a1"
],
"labels": [],
"sections": [
{
"id": "$generated_A_initial_0:0_s0",
"startPoint": {
"x": 16,
"y": 38.2265625
},
"endPoint": {
"x": 36,
"y": 38.2265625
}
}
]
},
{
"id": "$generated_root_initial_0:0",
"sources": [
"$generated_root_initial_0"
],
"targets": [
"A"
],
"labels": [],
"sections": [
{
"id": "$generated_root_initial_0:0_s0",
"startPoint": {
"x": 16,
"y": 39.484375
},
"endPoint": {
"x": 36,
"y": 39.484375
}
}
]
}
],
"children": [
{
"id": "A",
"labels": [
{
"text": "A",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"children": [
{
"id": "a1",
"labels": [
{
"text": "a1",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"x": 36,
"y": 33.484375,
"width": 9.015625,
"height": 9.484375,
"$H": 376
},
{
"id": "a2",
"labels": [
{
"text": "a2",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"edges": [],
"x": 12,
"y": 12,
"width": 9.015625,
"height": 9.484375,
"$H": 379
},
{
"id": "$generated_A_initial_0",
"labels": [],
"edges": [],
"x": 12,
"y": 36.2265625,
"width": 4,
"height": 4,
"$H": 382
}
],
"x": 36,
"y": 12,
"width": 57.015625,
"height": 54.96875,
"$H": 373
},
{
"id": "$generated_root_initial_0",
"labels": [],
"edges": [],
"x": 12,
"y": 37.484375,
"width": 4,
"height": 4,
"$H": 384
}
],
"width": 105.015625,
"height": 78.96875,
"$H": 370,
"x": 0,
"y": 0
}Expected behavior: the edge with id "a1:0" should have populated array sections.
Actual behavior: the edge with id "a1:0" has empty array sections.
Note that this bug does not occur when using primitive edge format, as described here:https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html
In that case, the graph is layed out as follows:
Thank you for your help looking into this.
Support for twopi layout
It would be great if you could add support for the Twopi layout.
Edge label for self-to-self edge doesn't position properly.
const elk = new ELK({
defaultLayoutOptions: {
'elk.algorithm': 'layered',
'elk.direction': 'RIGHT',
'elk.padding': '[top=25,left=25,bottom=25,right=25]',
'elk.spacing.componentComponent': 25
'elk.layered.spacing.nodeNodeBetweenLayers': 25,
'elk.edgeLabels.inline': true
}
})const graph = {
id: 'root',
children: [
{
id: 'n1',
width: 100,
height: 100,
labels: [{ text: 'n1' }]
},
{
id: 'n2',
width: 100,
height: 100,
labels: [{ text: 'n2' }]
}
],
edges: [
{
type: 'DIRECTED',
id: 'e1',
sources: ['n1'],
targets: ['n2'],
labels: [
{
width: 80,
height: 20,
text: 'hello'
}
]
},
{
type: 'DIRECTED',
id: 'e2',
sources: ['n2'],
targets: ['n2'],
labels: [
{
width: 80,
height: 20,
text: 'world'
}
]
}
]
}Code above produces:
Problem is: edge label world is not positioned properly.
Here is graph after layout:
{
"id": "root",
"children": [
{
"id": "n1",
"width": 100,
"height": 100,
"labels": [
{
"text": "n1",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"$H": 15,
"x": 25,
"y": 25
},
{
"id": "n2",
"width": 100,
"height": 100,
"labels": [
{
"text": "n2",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"$H": 280,
"x": 255,
"y": 41.66666666666667
}
],
"edges": [
{
"type": "DIRECTED",
"id": "e1",
"sources": [
"n1"
],
"targets": [
"n2"
],
"labels": [
{
"width": 80,
"height": 20,
"text": "hello",
"x": 150,
"y": 64.5
}
],
"sections": [
{
"id": "e1_s0",
"startPoint": {
"x": 125,
"y": 75
},
"endPoint": {
"x": 255,
"y": 75
}
}
]
},
{
"type": "DIRECTED",
"id": "e2",
"sources": [
"n2"
],
"targets": [
"n2"
],
"labels": [
{
"width": 80,
"height": 20,
"text": "world",
"x": 25,
"y": 25
}
],
"sections": [
{
"id": "e2_s0",
"startPoint": {
"x": 355,
"y": 91.66666666666667
},
"endPoint": {
"x": 255,
"y": 108.33333333333333
},
"bendPoints": [
{
"x": 365,
"y": 91.66666666666667
},
{
"x": 365,
"y": 151.66666666666669
},
{
"x": 240,
"y": 151.66666666666669
},
{
"x": 240,
"y": 108.33333333333333
}
]
}
]
}
],
"$H": 12,
"x": 0,
"y": 0,
"width": 390,
"height": 176.66666666666669
}Help required with this JSON. Edges are coming with out sections between
HI
What is wrong with this JSON. Unable to get this work.
Simple graph.
root ==> top1 ==>
N1 and N2 are in top1
N3 & N4 are in insides its own group node
Edge between N1 and N2 comes with section. Edge between N3==>N1 and N4==>N2 are not having sections calculated. All edges are between nodes. I need to have root & top1 as i have multiple childs at top1 place in actual requirement.
{
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.layered.feedbackEdges": true,
"org.eclipse.elk.spacing.edgeEdge": 25,
"elk.direction": "RIGHT"
},
"children": [
{
"id": "top1",
"layoutOptions": {
"elk.direction": "RIGHT"
},
"children": [
{
"id": "n1-noGrp",
"ports": [
{
"id": "n1-noGrp-p1",
"width": 10,
"height": 10,
"properties": {
"org.eclipse.elk.port.index": 0,
"org.eclipse.elk.port.side": "SIDES_NORTH_EAST"
}
},
{
"id": "n1-noGrp-p2",
"width": 10,
"height": 10,
"properties": {
"org.eclipse.elk.port.index": 0,
"org.eclipse.elk.port.side": "SIDES_NORTH_WEST"
}
}
],
"properties": {
"org.eclipse.elk.nodeSize.constraints": "MINIMUM_SIZE PORTS PORT_LABELS",
"org.eclipse.elk.nodeSize.minimum": "(150,75)",
"portSpacing": 25
},
"tag": {},
"labels": []
},
{
"id": "n2-noGrp",
"ports": [
{
"id": "n2-noGrp-p1",
"width": 10,
"height": 10,
"properties": {
"org.eclipse.elk.port.index": 0,
"org.eclipse.elk.port.side": "SIDES_NORTH_WEST"
}
},
{
"id": "n2-noGrp-p2",
"width": 10,
"height": 10,
"properties": {
"org.eclipse.elk.port.index": 0,
"org.eclipse.elk.port.side": "SIDES_NORTH_EAST"
}
}
],
"properties": {
"org.eclipse.elk.nodeSize.constraints": "MINIMUM_SIZE PORTS PORT_LABELS",
"org.eclipse.elk.nodeSize.minimum": "(150,75)",
"portSpacing": 25
},
"tag": {},
"labels": []
},
{
"id": "Group1",
"ports": [],
"properties": {
"portSpacing": 25
},
"children": [
{
"id": "N3-in-Group1",
"ports": [
{
"id": "N3-in-Group1-P1",
"width": 10,
"height": 10,
"properties": {
"org.eclipse.elk.port.index": 0,
"org.eclipse.elk.port.side": "SIDES_NORTH_EAST"
}
}
],
"properties": {
"portSpacing": 25
},
"width": 60,
"height": 60,
"tag": {},
"labels": []
}
],
"edges": [],
"width": 120,
"height": 120,
"tag": {},
"labels": []
},
{
"id": "Group2",
"ports": [],
"properties": {
"portSpacing": 25
},
"children": [
{
"id": "N4-in-Group2",
"ports": [
{
"id": "N4-in-Group2-P1",
"width": 10,
"height": 10,
"properties": {
"org.eclipse.elk.port.index": 0,
"org.eclipse.elk.port.side": "SIDES_NORTH_WEST"
}
}
],
"properties": {
"portSpacing": 25
},
"width": 60,
"height": 60,
"tag": {},
"labels": []
}
],
"edges": [],
"width": 120,
"height": 120,
"tag": {},
"labels": []
}
],
"edges": [
{
"id": "E1",
"sources": [
"n1-noGrp-p1"
],
"targets": [
"n2-noGrp-p1"
],
"properties": {
"org.eclipse.elk.edge.thickness": "15",
"org.eclipse.elk.spacing.edgeEdge": "15"
}
},
{
"id": "E2",
"sources": [
"N3-in-Group1-P1"
],
"targets": [
"n1-noGrp-p2"
],
"properties": {
"org.eclipse.elk.edge.thickness": "15",
"org.eclipse.elk.spacing.edgeEdge": "15"
}
},
{
"id": "E3",
"sources": [
"n2-noGrp-p2"
],
"targets": [
"N4-in-Group2-P1"
],
"properties": {
"org.eclipse.elk.edge.thickness": "15",
"org.eclipse.elk.spacing.edgeEdge": "15"
}
}
],
"tag": {},
"labels": []
}
],
"edges": []
}
Return proper error from web worker
Currently, the worker only returns the error's message. Instead the whole error should be turned into a json object and then be returned.
In ElkJs.java:
try {
_this.dispatch(event)
} catch (err) {
delete err['__java$exception']
worker.postMessage({ id: event.data.id, error: err.message })
}
external ports
Hello,
how to mark node as external port? Elk JSON?
(I am using elkjs updated to elk 0.4.0-SNAPSHOT by my self)
sprotty does not use elkjs
Hi,
Note that elkjs is not a diagramming framework itself - it computes positions for the elements of a diagrams. You can see it live in action in conjunction with TypeFox's sprotty diagramming framework.
Just wanted to mention that I think your information is incorrect. While sprotty does have a browser component it uses a java server which makes use of elk directly.
Try to replicate a dagre layout
I have experience with https://github.com/dagrejs/dagre. And below is a layout produced by it:
Let's ignore the shapes and assume all of them are rectangles.
I tried the following:
const elk = new ELK({
defaultLayoutOptions: {
'elk.algorithm': 'layered',
'elk.direction': 'RIGHT',
'elk.padding': '[top=25,left=25,bottom=25,right=25]',
'elk.spacing.componentComponent': 25, // unconnected nodes are individual subgraphs, referred to as named components
'elk.layered.spacing.nodeNodeBetweenLayers': 25, // this has effect, but only if there are edges.
'elk.edgeLabels.inline': true
}
})const graph = {
id: 'root',
layoutOptions: { 'elk.direction': 'DOWN' },
children: [
{
id: 'n1',
width: 100,
height: 50,
labels: [{ text: 'Chrismas' }]
},
{
id: 'n2',
width: 100,
height: 50,
labels: [{ text: 'Go shopping' }]
},
{
id: 'n3',
width: 100,
height: 50,
labels: [{ text: 'Let me think' }]
},
{
id: 'n4',
width: 100,
height: 50,
labels: [{ text: 'Laptop' }]
},
{
id: 'n5',
width: 100,
height: 50,
labels: [{ text: 'iPhone' }]
},
{
id: 'n6',
width: 100,
height: 50,
labels: [{ text: 'Car' }]
}
],
edges: [
{
id: 'e1',
sources: ['n1'],
targets: ['n2'],
type: 'DIRECTED',
labels: [{ width: 80, height: 20, text: 'Get money' }]
},
{
id: 'e2',
sources: ['n2'],
targets: ['n3'],
type: 'DIRECTED'
},
{
id: 'e3',
sources: ['n3'],
targets: ['n4'],
type: 'DIRECTED',
labels: [{ width: 60, height: 20, text: 'One' }]
},
{
id: 'e4',
sources: ['n3'],
targets: ['n5'],
type: 'DIRECTED',
labels: [{ width: 60, height: 20, text: 'Two' }]
},
{
id: 'e5',
sources: ['n3'],
targets: ['n6'],
type: 'DIRECTED',
labels: [{ width: 60, height: 20, text: 'Three' }]
}
]
}What I produced is:
It is actually not bad!
But I am wondering is it possible to do the following:
- make the layout horizontally symmetric
- reserve the order of edge labels
One,Two&Three.
With above two points achieved, it will be a perfect dagre layout replication.
I am not saying dagre is better. Actually I think elkjs is more flexible. Here I just investigate and learn something about elkjs.
Problems when linking node to port
I have the following graph that I am trying to layout (p prefixes ports, n prefixes childnodes)
{
'id':'n72',
'children':[
{ 'id':'n96', 'width':50, 'height':50, },
{ 'id':'n64', 'width':50, 'height':50, }
],
'ports':[
{ 'id':'p84', 'width':50, 'height':20, },
{ 'id':'p40', 'width':50, 'height':20, },
{ 'id':'p28', 'width':50, 'height':20, }
],
'edges':[
{ 'id':'e08', 'sources':[ 'n96' ], 'targets':[ 'n64' ], },
{ 'id':'e20', 'sources':[ 'n64' ], 'targets':[ 'n96' ], },
{ 'id':'e76', 'sources':[ 'p84' ], 'targets':[ 'p28' ], },
{ 'id':'e52', 'sources':[ 'n64' ], 'targets':[ 'p28' ], },
{ 'id':'e12', 'sources':[ 'p28' ], 'targets':[ 'n96' ], }
]
}
I experience problems with the last two edges. The first three edges (node-to-node, port-to-port) are plotted without problem.
When I try to add the last two edges (node-to-port, port-to-node) from the child to the port and vice versa, I receive an error message.
Is there any way to add such an edge?
edges targeting nodes in a hierarchical node don't have coordinates (sections is empty)
input:
{"id":"root","properties":{"algorithm":"layered"},"children":[{"id":"composite","properties":{"algorithm":"layered"},"children":[{"id":"n3","width":30,"height":30},{"id":"n4","width":30,"height":10}]},{"id":"n1","width":30,"height":30},{"id":"n2","width":30,"height":10}],"edges":[{"id":"e1","sources":["n1"],"targets":["n2"]},{"id":"e2","sources":["n2"],"targets":["n3"]},{"id":"e3","sources":["n2"],"targets":["n4"]}]}
output from elkjs layout function
{"id":"root","properties":{"algorithm":"layered"},"children":[{"id":"composite","properties":{"algorithm":"layered"},"children":[{"id":"n3","width":30,"height":30,"$H":278,"x":12,"y":34},{"id":"n4","width":30,"height":10,"$H":280,"x":12,"y":12}],"$H":276,"x":12,"y":54,"width":54,"height":76},{"id":"n1","width":30,"height":30,"$H":282,"x":12,"y":12},{"id":"n2","width":30,"height":10,"$H":284,"x":62,"y":22}],"edges":[{"id":"e1","sources":["n1"],"targets":["n2"],"sections":[{"id":"e1_s0","startPoint":{"x":42,"y":27},"endPoint":{"x":62,"y":27},"incomingShape":"n1","outgoingShape":"n2"}]},{"id":"e2","sources":["n2"],"targets":["n3"],"sections":[]},{"id":"e3","sources":["n2"],"targets":["n4"],"sections":[]}],"$H":12,"x":0,"y":0,"width":104,"height":142}
sections is empty for edges going to n3 and n4 which are in composite. it worked fine in klaysjs.
Require edges always go left to right?
Hello! I apologize - I know I've asked a lot of questions. I'm wondering how to force the edges to go left to right, i.e. an edge leaves its source node on the right side of the node, and attaches on the left side of the target node.
I thought I could use org.eclipse.elk.core.options.Direction, but nothing seems to be happening. Because this uses an Enum, I'm not sure I'm using it correctly.
'elk.core.options.Direction': 'RIGHT' or 'elk.core.options.Direction': 'Direction.RIGHT' or something else?
Or if you know another way. Thanks.
Create type definitions
elkjs should bundle d.ts files for proper use of the library in TypeScript projects.
Some types are already available at https://github.com/OpenKieler/elkgraph-web/blob/master/client/src/json/elkgraph-json.ts
How to get diagram in browser
Hi
It might be a simple question. I could not find steps for getting the image. The HTML sample prints json. How to get Image? If there is a link which explains this, might be great. Also the json used to generate the sample image will also be of great help for beginners.
Can I use elkjs/sprotty in a jscript client side app
I stumbled across your library and really like the power of elkjs sprotty displayed here: https://rtsys.informatik.uni-kiel.de/elklive/
However I am not sure these examples work with just client side or that they in fact need a (java) server component.
What I am really looking for is a code pen or jsfiddle showing how to get elkjs/sprotty running. I have looked at the source code of the demos (especially the json demo https://rtsys.informatik.uni-kiel.de/elklive/json.html) but it seems impossible for me to recreate that in a codepen or fiddle.
Am I missing something?
Release elkjs 0.4.0
ELK 0.4.0 has been released a while ago. From the code's side of things everything should be fine to finalize elkjs 0.4.0 as well.
However, I'm currently facing issues with the xtext-related part of the gradle plugin, which tells me:
> GC overhead limit exceeded
Maybe related to xtext/xtext-gradle-plugin#120
Best way to scale the graph?
If I want the graph to fill some x amount of space (i.e. larger or smaller than it draws by default), what is the best way to scale / limit the graph's size?
'elk.edgeLabels.inline': true and 'elk.edgeRouting': 'POLYLINE'
With both of the following options:
'elk.edgeLabels.inline': true'elk.edgeRouting': 'POLYLINE'
Some of the edge labels are not inline. Because inline means the edge should go through the middle of the label.
Here is a sample: #21 (comment)
'elk.edgeRouting': 'SPLINES' & 'elk.edgeRouting': 'ORTHOGONAL' don't have this issue.
Tree - Random node placement between subsequent calls, and orphans between siblings
Objective
I'm trying to get a tree hierarchy of nodes (think family tree) and be able to add to the graph new nodes over time (when people are born for example).
Background:
I started using the MrTree algorithm but the edges kept crossing and I couldn't seem to un-cross them and the placement of nodes trees was in a wrapped manner not horizontal as I require.
So I ended up with the config below (some settings don't seem to do much e.g hierarchicalSweepiness)...
'org.eclipse.elk.layered.crossingMinimization.hierarchicalSweepiness': 1,
'org.eclipse.elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.debugMode': true,
'org.eclipse.elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
'org.eclipse.elk.direction': 'DOWN',
'org.eclipse.elk.layered.layering.strategy': 'LONGEST_PATH',
'org.eclipse.elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
'org.eclipse.elk.zoomToFit': true,
'org.eclipse.elk.alignment': 'TOP'
The Problems
I've got 2 issues, mentioned in the screenshot below. This shows orphan nodes being added repeatedly over time.
In short these are:
- Placement of new nodes between siblings nodes of a tree isn't acceptable
- The random arrangement of nodes between layout calls
I think I'm missing something, I've tried using the INTERACTIVE for node placement but again I have edge crossing issues. Any suggestions would be greatly appreciated.
Gwt build error with latest elk master
Hi,
I wanted to let you know that the latest elk fails to compile with gwt. I think this might be a regression that was introduced in commit eclipse/elk@8b194ed yesterday. Here is the error:
root@ubuntu-s-16vcpu-64gb-nyc1-01:~/elkjs# npm run build
> [email protected] build /root/elkjs
> npm run gradle && npm run js
> [email protected] gradle /root/elkjs
> ./gradlew lib
To honour the JVM settings for this build a new JVM will be forked. Please consider using the daemon: http://gradle.org/docs/2.5/userguide/gradle_daemon.html.
:copyElkJs UP-TO-DATE
:copyElk UP-TO-DATE
:copyEmul UP-TO-DATE
:generateXtextXtext UP-TO-DATE
:copyMelk UP-TO-DATE
:generateXtext SKIPPED
:compileJava UP-TO-DATE
:gwtcMinified
Compiling module org.eclipse.elk.js.ElkJs
Ignored 27 units with compilation errors in first pass.
Compile with -strict or with -logLevel set to TRACE or DEBUG to see all errors.
[ERROR] Errors in 'file:/root/elkjs/build/src/elk/org/eclipse/elk/alg/layered/p5edges/loops/labeling/SelfLoopLabelPositionEvaluator.java'
[ERROR] Line 253: No source code is available for type java.awt.geom.Rectangle2D.Double; did you forget to inherit a required module?
Tracing compile failure path for type 'org.eclipse.elk.alg.layered.p5edges.loops.labeling.SelfLoopLabelPositionEvaluator'
[ERROR] Errors in 'file:/root/elkjs/build/src/elk/org/eclipse/elk/alg/layered/p5edges/loops/labeling/SelfLoopLabelPositionEvaluator.java'
[ERROR] Line 253: No source code is available for type java.awt.geom.Rectangle2D.Double; did you forget to inherit a required module?
[ERROR] Hint: Your source appears not to live underneath a subpackage called 'client'; no problem, but you'll need to use the <source> directive in your module to make it accessible
:gwtcMinified FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':gwtcMinified'.
> Process 'command '/usr/lib/jvm/java-8-openjdk-amd64/bin/java'' finished with non-zero exit value 1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 21.564 secs
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gradle: `./gradlew lib`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gradle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-08-15T13_25_49_351Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run gradle && npm run js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-08-15T13_25_49_372Z-debug.log
I can look into fixing this error, if that would be a useful contribution. Let me know what you think. Thanks.
"Every element must have an id" error
For some reason, I am getting the error Every element must have an id with the following trivial graph:
{
"id": "root",
"edges": [],
"children": []
}
and the following larger graph:
{
"id": "root",
"edges": [
{
"id": "/e/V-/e/7",
"source": "/e/V",
"target": "/e/7",
"sources": [
"/e/V"
],
"targets": [
"/e/7"
]
},
{
"id": "/e/7-/e/W",
"source": "/e/7",
"target": "/e/W",
"sources": [
"/e/7"
],
"targets": [
"/e/W"
]
},
{
"id": "/e/W-/e/C",
"source": "/e/W",
"target": "/e/C",
"sources": [
"/e/W"
],
"targets": [
"/e/C"
]
},
{
"id": "/e/V-/e/d",
"source": "/e/V",
"target": "/e/d",
"sources": [
"/e/V"
],
"targets": [
"/e/d"
]
}
],
"children": [
{
"id": "/e/7",
"height": 50,
"width": 100,
"ports": [
{
"id": "/e/7/f",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 25,
"y": 24
},
{
"id": "/e/7/b",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 50,
"y": 24
},
{
"id": "/e/7/k",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 75,
"y": 24
},
{
"id": "/e/7/u",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 50,
"y": 74
}
]
},
{
"id": "/e/V",
"height": 50,
"width": 100,
"ports": [
{
"id": "/e/V/I",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 50,
"y": 74
}
]
},
{
"id": "/e/W",
"height": 50,
"width": 100,
"ports": [
{
"id": "/e/W/3",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 20,
"y": 24
},
{
"id": "/e/W/5",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 40,
"y": 24
},
{
"id": "/e/W/e",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 60,
"y": 24
},
{
"id": "/e/W/r",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 80,
"y": 24
},
{
"id": "/e/W/6",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 25,
"y": 74
},
{
"id": "/e/W/q",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 50,
"y": 74
},
{
"id": "/e/W/V",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 75,
"y": 74
}
]
},
{
"id": "/e/C",
"height": 50,
"width": 100,
"ports": [
{
"id": "/e/C/o",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 50,
"y": 24
},
{
"id": "/e/C/u",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 50,
"y": 74
}
]
},
{
"id": "/e/d",
"height": 50,
"width": 100,
"ports": [
{
"id": "/e/d/E",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 25,
"y": 24
},
{
"id": "/e/d/5",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 50,
"y": 24
},
{
"id": "/e/d/M",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "NORTH"
},
"x": 75,
"y": 24
},
{
"id": "/e/d/y",
"width": 1,
"height": 1,
"properties": {
"de.cau.cs.kieler.portSide": "SOUTH"
},
"x": 50,
"y": 74
}
]
}
]
}
As I don't see any nodes without an id, I am not sure what to do about this... Am I missing something?
Uncaught error in elk master (possible regression from [email protected])
I believe there is a regression in elk master. Please consider the following reduced example:
Expected output (generated in [email protected]):
Actual output:
An uncaught error is thrown:
localhost/:1 Uncaught (in promise) java.lang.IndexOutOfBoundsException: Index: 2, Size: 2
Here is kgraph before layout:
{
"id": "$generated-scxml-0",
"labels": [
{
"text": ""
}
],
"edges": [
{
"id": "A:transition:0",
"source": "A",
"target": "a1",
"labels": [],
"sourcePort": "A_enter:0",
"targetPort": "a1_enter:0",
"$hyperlink": "A_exit:1_A_enter:0"
},
{
"id": "$generated_A_initial_0:transition:0",
"source": "$generated_A_initial_0",
"target": "a1",
"labels": []
},
{
"id": "$generated_$generated-scxml-0_initial_0:transition:0",
"source": "$generated_$generated-scxml-0_initial_0",
"target": "A",
"labels": []
},
{
"id": "A_exit:1_A_enter:0",
"source": "A",
"target": "A",
"sourcePort": "A_exit:1",
"targetPort": "A_enter:0",
"labels": [
{
"text": "e",
"width": 1.765625,
"height": 4.53125
}
],
"$type": "hyperlink"
}
],
"properties": {
"borderSpacing": 6
},
"$type": "scxml",
"children": [
{
"id": "A",
"labels": [
{
"text": "A"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"$type": "state",
"children": [
{
"id": "a1",
"labels": [
{
"text": "a1"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"$type": "state",
"ports": [
{
"id": "a1_enter:0"
},
{
"id": "a1_exit:1"
}
],
"x": 0,
"y": 0,
"width": 8.765625,
"height": 9.53125
},
{
"id": "a2",
"labels": [
{
"text": "a2"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"$type": "state",
"x": 0,
"y": 0,
"width": 8.765625,
"height": 9.53125
},
{
"id": "$generated_A_initial_0",
"labels": [
{
"text": "◉ $generated_A_initial_0"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"$type": "initial",
"x": 0,
"y": 0,
"width": 4,
"height": 4
}
],
"ports": [
{
"id": "A_enter:0"
},
{
"id": "A_exit:1"
}
],
"x": 0,
"y": 0,
"width": 7.875,
"height": 9.53125
},
{
"id": "$generated_$generated-scxml-0_initial_0",
"labels": [
{
"text": "◉ $generated_$generated-scxml-0_initial_0"
}
],
"edges": [],
"properties": {
"borderSpacing": 6
},
"$type": "initial",
"x": 0,
"y": 0,
"width": 4,
"height": 4
}
],
"width": 5,
"height": 5,
"layoutOptions": {
"org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
"org.eclipse.elk.algorithm": "org.eclipse.elk.layered",
"org.eclipse.elk.padding": 0,
"org.eclipse.elk.nodeLabels.padding": 0
}
}This might be related to the new self-loop label placement code.
Thank you for your help with this.
Can't locate all files that are said to be provided
According to the read me, there should be 4 files provided: elk-api.js, elk-worker.js, elk.bundled.js, and main.js. The only file out of these I can locate is elk-api.js... Can this be clarified? I wasn't sure if the read me was out of date, but I'm looking for all four of these. Thanks :)
Is it possible to draw an edge from/to an edge?
I would like to draw an edge from the middle of one edge to e.g. a port or a node.
In the example below, the first edge connects two children.
At the moment I receive a org.eclipse.elk.graph.json.JsonImportException: Referenced shape does not exist: e08 error message in the console.
I tried to insert an intermediate node between the two first nodes, from which the second edge can depart, however it breaks the design somewhat with layered algorithm.
Is there any way to add something like a ''virtual node'' that is not considered during layouting of the original edge, but allows attachment of an edge? for my task this departure point can even be hardcoded if necessary (e.g. always right in the middle)
graph = {
'id': 'root',
'children': [{
'id':'n72',
'children':[
{ 'id':'n96', 'width':50, 'height':80 },
{ 'id':'n64', 'width':50, 'height':50 }
],
'ports':[
{ 'id':'p84', 'width':50, 'height':20 },
],
'edges':[
{ 'id':'e08', 'sources':[ 'n96' ], 'targets':[ 'n64' ] },
{ 'id':'e12', 'sources':[ 'e08' ], 'targets':[ 'p84' ] }
]
}]
}
Current browser support.
Can you publish the supported browsers please?
Gradle build target "generateXtextXtext" fails
I've been unable to get elkjs 0.3.0 (from https://github.com/OpenKieler/elkjs/releases/tag/0.3.0) to build. I've tried npm run build, ./gradlew lib, and ./gradlew build. In all cases I get the following errors and a failure to build.
:copyElkJs
:copyElk UP-TO-DATE
:copyEmul
:generateXtextXtext
Warning: NLS unused message: line_separator_platform_mac_os_9 in: org.eclipse.core.internal.runtime.messages
Warning: NLS missing message: auth_alreadySpecified in: org.eclipse.core.internal.runtime.messages
Warning: NLS missing message: plugin_unableToGetActivator in: org.eclipse.core.internal.runtime.messages
ERROR:JsonImportException cannot be resolved. (file:/tmp/elkjs-0.3.0/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 59 column : 13)
ERROR:The method formatError(String) from the type JsonAdapter refers to the missing type Object (file:/tmp/elkjs-0.3.0/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 33 column : 19)
ERROR:The method formatError(String) from the type JsonAdapter refers to the missing type Object (file:/tmp/elkjs-0.3.0/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 42 column : 28)
WARNING:Null-safe call of primitive-valued feature doubleValue, default value 0 will be used (file:/tmp/elkjs-0.3.0/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 106 column : 13)
:generateXtextXtext FAILED
FAILURE: Build failed with an exception.
This is on Linux. I've also tried building a checkout from head, but get the same issue.
How can I get this to build successfully?
[bug] Cannot find module 'webworker-threads'
NPM says that
Error: Cannot find module 'webworker-threads' from "....../node_modules/elkjs/lib"
Code, causing the error:
var ELK = require('elkjs');
elkjs version: 0.0.1
Connect element externally to element inside another element
Hello,
how can I connect an element B with an element D that is inside the element C? I'm using 0.3.0 version.
{
id: 'a',
layoutOptions: {
'elk.algorithm': 'layered'
},
edges: [{
id: 'connection1',
name: 'connection1',
sources: ['b'],
targets: ['d'],
}],
children: [
{
id: 'b',
labels: [{text: 'b'}],
width: 100,
height: 50,
},
{
id: 'c',
labels: [{text: 'c'}],
width: 100,
height: 50,
children: [{
id: 'd',
labels: [{text: 'd'}],
width: 50,
height: 25,
}]
},
]
}
Graph obtained by library is:
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered"
},
"edges": [
{
"id": "connection1",
"name": "connection1",
"sources": [
"b"
],
"targets": [
"d"
],
"sections": []
}
],
"children": [
{
"id": "b",
"labels": [
{
"text": "b",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"width": 100,
"height": 50,
"$H": 276,
"x": 12,
"y": 73
},
{
"id": "c",
"labels": [
{
"text": "c",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"width": 74,
"height": 49,
"children": [
{
"id": "d",
"labels": [
{
"text": "d",
"x": 0,
"y": 0,
"width": 0,
"height": 0
}
],
"width": 50,
"height": 25,
"$H": 283,
"x": 12,
"y": 12
}
],
"$H": 280,
"x": 12,
"y": 12
}
],
"$H": 12,
"x": 0,
"y": 0,
"width": 124,
"height": 135
}
Regards
Xtext validation failed during build
When I try to build elkjs with npm run build, I get an error with Xtext validation failed, see build log for details.. I think I saw this before but I am not sure how I resolved it so I thought I would post it here for others (and maybe myself in the future).
I suspect this may be an issue that belongs with elk itself and not elkjs but I am not exactly sure.
Why are there different styles to specify layout option values?
Let's take elk.padding and elk.position for example:
{
"id": "org.eclipse.elk.padding",
"name": "Padding",
"description": "The padding to be left to a parent element's border when placing child elements. This can also serve as an output option of a layout algorithm if node size calculation is setup appropriately.",
"group": "",
"type": "OBJECT",
"targets": [
"PARENTS",
"NODES"
]
}{
"id": "org.eclipse.elk.position",
"name": "Position",
"description": "The position of a node, port, or label. This is used by the 'Fixed Layout' algorithm to specify a pre-defined position.",
"group": "",
"type": "OBJECT",
"targets": [
"NODES",
"PORTS",
"LABELS"
]
}We can see that both of them are of type OBJECT. But when I specify values for them, I need to use two different styles:
'elk.padding': '[top=25,left=25,bottom=25,right=25]''elk.position': '(10,20)'A real sample: #21 (comment)
My question is: why are there two different styles to specify value for OBJECT type?
I know that ELK is implemented in Java. And elkjs is auto-generated from ELK Java code. So I think it has something to do with Java serialization and deserialization.
I have experience with both JS and Java. But I feel lost at the moment. Could you please point me to the right direction so that I can continue my investigation?
mrtree layout doesn't honour nodeNodeBetweenLayers
Using elklive and the following json:
{
id: "root",
children:[{
id: "n10",
properties: { 'algorithm': 'mrtree',
'spacing.nodeNodeBetweenLayers': 100},
children: [
{ id: "n1", width: 30, height: 30 },
{ id: "n2", width: 30, height: 30 },
{ id: "n3", width: 30, height: 30,
properties: {
portConstraints: 'FIXED_SIDE'
},
ports: [{
height:20,
id:"p28",
width:10,
"properties":{"port.side":"SOUTH"}
}]
}
],
edges: [
{ id: "e1", sources: [ "n2" ], targets: [ "n3" ] },
{ id: "e2", sources: [ "n1" ], targets: [ "n3" ] }
]
}]
}
If I use 'layered' as the algorithm I get the expected results, but mrtree doesn't change when I introduce the 'spacing.nodeNodeBetweenLayers' property. Any ideas/suggestions?
If some properties relate to only some algorithms how can I tell which are applicable from the documentation?
bendPoints issue when 'elk.edgeRouting': 'SPLINES'
const elk = new ELK({
defaultLayoutOptions: {
'elk.algorithm': 'layered',
'elk.direction': 'RIGHT',
'elk.padding': '[top=25,left=25,bottom=25,right=25]',
'elk.spacing.componentComponent': 25,
'elk.layered.spacing.nodeNodeBetweenLayers': 25,
'elk.edgeLabels.inline': true,
'elk.edgeRouting': 'SPLINES'
}
})const graph = {
id: 'root',
children: [
{
id: 'n1',
width: 100,
height: 100
},
{
id: 'n2',
width: 100,
height: 100
}
],
edges: [
{
id: 'e1',
sources: [ 'n1' ],
targets: [ 'n2' ]
}
]
}graph after layout:
{
"id": "root",
"children": [
{
"id": "n1",
"width": 100,
"height": 100,
"$H": 15,
"x": 25,
"y": 25
},
{
"id": "n2",
"width": 100,
"height": 100,
"$H": 17,
"x": 150,
"y": 25
}
],
"edges": [
{
"id": "e1",
"sources": [
"n1"
],
"targets": [
"n2"
],
"sections": [
{
"id": "e1_s0",
"startPoint": {
"x": 125,
"y": 75
},
"endPoint": {
"x": 150,
"y": 75
},
"bendPoints": [
{
"x": 125,
"y": 75
},
{
"x": 137.5,
"y": 75
}
]
}
]
}
],
"$H": 12,
"x": 0,
"y": 0,
"width": 275,
"height": 150
}
In the data above:
"bendPoints": [
{
"x": 125,
"y": 75
},
{
"x": 137.5,
"y": 75
}
]The first point is the same as startPoint, and all the four points (start, bend & end) are in the same line. So there is actually no 'bend' at all.
By the way, what is $H?
Layered layout direction
Hello! Does Layered layout algorithm offer other directions than ltr?
"layoutOptions": {
"elk.algorithm": "layered",
"direction": "DIRECTION.DOWN",
"spacing": 100
},
Build error
I attempted to follow the build instructions here, and ran into the following error:
jbeard4@Jacobs-MBP-3:~/workspace/projects/elkjs$ npm run build
> [email protected] build /Users/jbeard4/workspace/projects/elkjs
> npm run gradle && npm run js
> [email protected] gradle /Users/jbeard4/workspace/projects/elkjs
> ./gradlew lib
To honour the JVM settings for this build a new JVM will be forked. Please consider using the daemon: http://gradle.org/docs/2.5/userguide/gradle_daemon.html.
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'elkjs'.
> Could not resolve all dependencies for configuration ':classpath'.
> Could not resolve com.google.guava:guava:18.0.
Required by:
:elkjs:unspecified > org.xtext:xtext-gradle-plugin:1.0.19
> Could not resolve com.google.guava:guava:18.0.
> Could not get resource 'https://plugins.gradle.org/m2/com/google/guava/guava/18.0/guava-18.0.pom'.
> Could not HEAD 'https://plugins.gradle.org/m2/com/google/guava/guava/18.0/guava-18.0.pom'.
> peer not authenticated
> Could not resolve org.eclipse.xtend:org.eclipse.xtend.lib:2.9.0.
Required by:
:elkjs:unspecified > org.xtext:xtext-gradle-plugin:1.0.19
> Could not resolve org.eclipse.xtend:org.eclipse.xtend.lib:2.9.0.
> Could not get resource 'https://plugins.gradle.org/m2/org/eclipse/xtend/org.eclipse.xtend.lib/2.9.0/org.eclipse.xtend.lib-2.9.0.pom'.
> Could not GET 'https://plugins.gradle.org/m2/org/eclipse/xtend/org.eclipse.xtend.lib/2.9.0/org.eclipse.xtend.lib-2.9.0.pom'.
> peer not authenticated
> Could not resolve org.eclipse.core:org.eclipse.core.runtime:3.7.0.
Required by:
:elkjs:unspecified > org.xtext:xtext-gradle-plugin:1.0.19
> Could not resolve org.eclipse.core:org.eclipse.core.runtime:3.7.0.
> Could not get resource 'https://plugins.gradle.org/m2/org/eclipse/core/org.eclipse.core.runtime/3.7.0/org.eclipse.core.runtime-3.7.0.pom'.
> Could not GET 'https://plugins.gradle.org/m2/org/eclipse/core/org.eclipse.core.runtime/3.7.0/org.eclipse.core.runtime-3.7.0.pom'.
> peer not authenticated
> Could not resolve org.xtext:xtext-gradle-protocol:1.0.19.
Required by:
:elkjs:unspecified > org.xtext:xtext-gradle-plugin:1.0.19
> Could not resolve org.xtext:xtext-gradle-protocol:1.0.19.
> Could not get resource 'https://plugins.gradle.org/m2/org/xtext/xtext-gradle-protocol/1.0.19/xtext-gradle-protocol-1.0.19.pom'.
> Could not GET 'https://plugins.gradle.org/m2/org/xtext/xtext-gradle-protocol/1.0.19/xtext-gradle-protocol-1.0.19.pom'.
> peer not authenticated
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 13.939 secs
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gradle: `./gradlew lib`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gradle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jbeard4/.npm/_logs/2018-08-14T15_34_33_329Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run gradle && npm run js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jbeard4/.npm/_logs/2018-08-14T15_34_33_348Z-debug.log
I looked at the maven repository, and found that, indeed, com.google.guava:guava:18.0 does not exist in the maven repository:
https://search.maven.org/artifact/com.google.guava/guava-tests-jdk5/18.0/jar
Is there a particular maven repository that I should be using for the build? Thank you.
Possibility to set max width of the graph
Do current algorithms have the ability to limit the maximum width of a graph? That construction of the graph not go beyond the given width, but expand in height.
Build error
Hi,
I am attempting to build elkjs master, and I am getting the following error:
> [email protected] build /home/jacob/workspace/projects/elkjs
> npm run gradle && npm run js
> [email protected] gradle /home/jacob/workspace/projects/elkjs
> ./gradlew lib
To honour the JVM settings for this build a new JVM will be forked. Please consider using the daemon: http://gradle.org/docs/2.5/userguide/gradle_daemon.html.
:copyElkJs UP-TO-DATE
:copyElk UP-TO-DATE
:copyEmul UP-TO-DATE
:generateXtextXtext
ERROR:JsonImportException cannot be resolved. (file:/home/jacob/workspace/projects/elkjs/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 59 column : 13)
ERROR:The method formatError(String) from the type JsonAdapter refers to the missing type Object (file:/home/jacob/workspace/projects/elkjs/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 33 column : 19)
ERROR:The method formatError(String) from the type JsonAdapter refers to the missing type Object (file:/home/jacob/workspace/projects/elkjs/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 42 column : 28)
WARNING:Null-safe call of primitive-valued feature doubleValue, default value 0 will be used (file:/home/jacob/workspace/projects/elkjs/build/src/elk/org/eclipse/elk/graph/json/JsonAdapter.xtend line : 106 column : 13)
:generateXtextXtext FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':generateXtextXtext'.
> Xtext validation failed, see build log for details.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 28.143 secs
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gradle: `./gradlew lib`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gradle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jacob/.npm/_logs/2018-08-14T21_12_00_598Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run gradle && npm run js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jacob/.npm/_logs/2018-08-14T21_12_00_633Z-debug.log
elk is also checked out at master. This is after maven has successfully downloaded all package dependencies.
Here is my java information:
openjdk version "1.8.0_151"
OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-0ubuntu0.17.04.2-b12)
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)
Thank you very much for your help with this.
Graph style
I came across your project and I'm interested in using it in my project.
However, I'm not sure how to modify the style of certain parts of the graph.
Is there a way to specify the shape/colour of nodes/ports/labels?
Is it possible to specify a CSS class within the graph-JSON?
I am trying to do something like this https://codepen.io/anon/pen/GEaOQQ (created with https://github.com/cytoscape/cytoscape.js ) but use your layout algorithms.
layoutOption `elk.spacing.nodeNode` has no effect
const elk = new ELK({
defaultLayoutOptions: {
'elk.algorithm': 'layered',
'elk.direction': 'RIGHT',
'elk.spacing.nodeNode': 500,
'elk.layered.spacing.nodeNodeBetweenLayers': 500
}
})const graph = {
id: 'root',
children: [
{
id: 'n1',
width: 100,
height: 100
},
{
id: 'n2',
width: 100,
height: 100
}
]
}With the code above, spacing between n1 and n2 is very small, I expect it to be 500. Did I miss anything?
Node placed over edge in layout output
tl;dr - I am getting an undesirable layout from a small graph in which an edge is covered by a node. The easiest way to see it would be to copy the JSON into https://rtsys.informatik.uni-kiel.de/elklive/json.html. I have a suspicion that this may be better suited for the main ELK project and not elkjs (or maybe this is the desired behavior - although I hope not). Regardless, I will try to explain the situation below and any help is appreciated.
I have a simple graph with 4 nodes with basically two paths from the source to the terminal:
a -> b -> c -> d
a -> b -> d
I expect it to be rendered in a way in which I can see all the connections and edges. However, the resulting layout shows essentially a path from a to d with the edge from b to d completely covered by c.
{
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"org.eclipse.elk.direction": "DOWN",
"org.eclipse.elk.spacing.nodeNode": 40,
"org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": 40
},
"edges": [
{
"id": "/x/H/k-/x/i/i",
"source": "/x/H",
"target": "/x/i",
"sourcePort": "/x/H/k",
"targetPort": "/x/i/i"
},
{
"id": "/x/i/R-/x/W/f",
"source": "/x/i",
"target": "/x/W",
"sourcePort": "/x/i/R",
"targetPort": "/x/W/f"
},
{
"id": "/x/i/R-/x/C/4",
"source": "/x/i",
"target": "/x/C",
"sourcePort": "/x/i/R",
"targetPort": "/x/C/4"
},
{
"id": "/x/W/D-/x/C/4",
"source": "/x/W",
"target": "/x/C",
"sourcePort": "/x/W/D",
"targetPort": "/x/C/4"
}
],
"children": [
{
"id": "/x/H",
"height": 50,
"width": 100,
"ports": [
{
"id": "/x/H/k",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "SOUTH"
},
"x": 50,
"y": 74
}
],
"properties": {
"org.eclipse.elk.portConstraints": "FIXED_POS"
}
},
{
"id": "/x/i",
"height": 50,
"width": 100,
"ports": [
{
"id": "/x/i/i",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "NORTH"
},
"x": 50,
"y": 24
},
{
"id": "/x/i/R",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "SOUTH"
},
"x": 50,
"y": 74
}
],
"properties": {
"org.eclipse.elk.portConstraints": "FIXED_POS"
}
},
{
"id": "/x/W",
"height": 50,
"width": 164.90625,
"ports": [
{
"id": "/x/W/f",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "NORTH"
},
"x": 82.453125,
"y": 24
},
{
"id": "/x/W/D",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "SOUTH"
},
"x": 82.453125,
"y": 74
}
],
"properties": {
"org.eclipse.elk.portConstraints": "FIXED_POS"
}
},
{
"id": "/x/C",
"height": 50,
"width": 122.828125,
"ports": [
{
"id": "/x/C/4",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "NORTH"
},
"x": 61.4140625,
"y": 24
},
{
"id": "/x/C/r",
"width": 1,
"height": 1,
"properties": {
"org.eclipse.elk.port.side": "SOUTH"
},
"x": 61.4140625,
"y": 74
}
],
"properties": {
"org.eclipse.elk.portConstraints": "FIXED_POS"
}
}
]
}
Modularize library
It would be nice to have have several modules instead of one large file: core, alg.layered, alg.stress, etc. However, I don't see any way to realize this with the current GWT compilation solution.
Currently the library is about 1.3 MB in size (minified); about 600 kB for core and layered, and 100 kB for the remaining algorithms.
Could you provide a release number?
In the releases section, there is no any release number.
Could you provide an official release?
Ex. 0.3.0?
For open source request, we have to provide a release number.
Thanks
ClassCastException with a graph with many ports
Version: ElkJS 0.3.0 (current)
This library is really great, but I am getting a ClassCastException with the following graph. It works if I remove the last edge, or if I set its source from gen-node-7/no to gen-node-1/no. The same error occurs when I try displaying the graph with https://rtsys.informatik.uni-kiel.de/elklive/json.html (Dev tools, pause on exceptions shows the ClassCastException).
{
"id": "graph",
"children": [{
"id": "gen-node-1",
"ports": [{
"id": "gen-node-1/in",
"x": 80.26339721679688,
"y": -20
},
{
"id": "gen-node-1/yes",
"x": 80.26339721679688,
"y": 180.52679443359375
},
{
"id": "gen-node-1/no",
"x": 180.52679443359375,
"y": 80.26339721679688
},
{
"id": "gen-node-3/in",
"x": 360.7901916503906,
"y": -20
},
{
"id": "gen-node-3/yes",
"x": 360.7901916503906,
"y": 180.52679443359375
},
{
"id": "gen-node-3/no",
"x": 461.0535888671875,
"y": 80.26339721679688
},
{
"id": "gen-node-5/in",
"x": 641.3169860839844,
"y": -20
},
{
"id": "gen-node-5/yes",
"x": 641.3169860839844,
"y": 180.52679443359375
},
{
"id": "gen-node-5/no",
"x": 741.5803833007812,
"y": 80.26339721679688
},
{
"id": "gen-node-7/in",
"x": 921.8437805175781,
"y": -20
},
{
"id": "gen-node-7/yes",
"x": 921.8437805175781,
"y": 180.52679443359375
},
{
"id": "gen-node-7/no",
"x": 1022.107177734375,
"y": 80.26339721679688
},
{
"id": "gen-node-9/in",
"x": 1245.4094924926758,
"y": 29.945755004882812
},
{
"id": "gen-node-9/out",
"x": 1245.4094924926758,
"y": 130.58103942871094
}
],
"layoutOptions": {
"org.eclipse.elk.portConstraints": "FIXED_POS"
},
"width": 1368.7118072509766,
"height": 160.52679443359375,
},
{
"id": "action-1",
"ports": [{
"id": "action-1/in",
"x": 123.30231475830078,
"y": -20
},
{
"id": "action-1/out",
"x": 123.30231475830078,
"y": 80.63528442382812
}
],
"x": 268.9610824584961,
"y": 32,
"width": 246.60462951660156,
"height": 60.635284423828125,
"layoutOptions": {
"org.eclipse.elk.portConstraints": "FIXED_POS"
},
}
],
"edges": [{
"id": "gen-link-2",
"sources": [
"action-1/out"
],
"targets": [
"gen-node-1/in"
]
},
{
"id": "gen-link-4",
"sources": [
"gen-node-1/no"
],
"targets": [
"gen-node-3/in"
]
},
{
"id": "gen-link-6",
"sources": [
"gen-node-3/no"
],
"targets": [
"gen-node-5/in"
]
},
{
"id": "gen-link-8",
"sources": [
"gen-node-5/no"
],
"targets": [
"gen-node-7/in"
]
},
{
"id": "gen-link-10",
"sources": [
"gen-node-7/no"
],
"targets": [
"gen-node-9/in"
]
}
],
"layoutOptions": {
"elk.algorithm": "layered",
"org.eclipse.elk.direction": "DOWN",
"org.eclipse.elk.spacing.nodeNode": 200,
"org.eclipse.elk.spacing.edgeEdge": 200,
"org.eclipse.elk.layered.spacing.edgeEdgeBetweenLayers": 90,
"org.eclipse.elk.layered.spacing.edgeNodeBetweenLayers": 100,
"org.eclipse.elk.spacing.edgeNode": 100,
"org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": 200,
"org.eclipse.elk.graphviz.layerSpacingFactor": 9
},
}The error with an unminified version I build from source (v0.3.0, I also tried building with a clone of the current elk/elkjs repository, but the build process is giving me errors)
And the property it is trying to cast:
$getProperty(upperNode, ($clinit_InternalProperties_0(), ORIGIN_0))
// => LEdge {bendPoints: KVectorChain, labels: ArrayList_0, propertyMap: HashMap, source: null, target: null}From the Java source, the error seems to occur in NorthSouthEdgeNeighbouringNodeCrossingsCounter#countCrossings
package org.eclipse.elk.alg.layered.intermediate.greedyswitch;
public class NorthSouthEdgeNeighbouringNodeCrossingsCounter {
// ...
private LNode originOf(final LNode node) {
return (LNode) node.getProperty(InternalProperties.ORIGIN);
}
}So as far as I can tell, ELK expects the internal property ORIGIN to be an LNode, when it is in fact an LEdge.
Am I doing something wrong with my graph?
(Background: The general layout direction is top-bottom. I want some nodes to be placed left to right next to each other. So instead of those nodes I add one large node with all ports of the original nodes to the graph. The image below shows the situation just before I got the ClassCastException.
The graph contains the large gray node instead of the four smaller ones. I was trying to add a node and create an edge between it and the port marked red.
)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.