Skip to content

Instantly share code, notes, and snippets.

@YuriGor
Forked from michiel/dg-jsplumb.js
Last active September 3, 2016 21:37
Show Gist options
  • Save YuriGor/f464e73ae05572329bd188b6dd7fb6c3 to your computer and use it in GitHub Desktop.
Save YuriGor/f464e73ae05572329bd188b6dd7fb6c3 to your computer and use it in GitHub Desktop.
// based on http://onais-m.blogspot.nl/2014/10/automatic-graph-layout-with-javascript.html
var jsp = jsPlumb.getInstance();
// construct dagre graph from JsPlumb graph
/* global dagre */
var g = new dagre.graphlib.Graph();
g.setGraph({nodesep:30,ranksep:30,marginx:50,marginy:50});
g.setDefaultEdgeLabel(function() { return {}; });
$('.xnode').each(
function(idx, node) {
var n = $(node);
g.setNode(n.attr('id'), {
width : Math.round(n.outerWidth()),
height : Math.round(n.outerHeight())
});
}
);
jsp.getAllConnections().forEach(
function(edge) {
g.setEdge(
edge.source.id,
edge.target.id
);
});
// calculate the layout (i.e. node positions)
dagre.layout(g);
// Applying the calculated layout
g.nodes().forEach(
function(n) {
var node = dg.node(n);
var top = Math.round(node.y-node.height/2)+'px';
var left = Math.round(node.x-node.width/2)+'px';
$('#' + n).css({left:left,top:top});
});
jsp.repaintEverything();
@YuriGor
Copy link
Author

YuriGor commented Sep 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment