Nested layout

Gruntfile.js

@@ -345,6 +345,7 @@ module.exports.jsFiles = [
     'src/graphviz_layout.js',
     'src/d3_force_layout.js',
     'src/d3v4_force_layout.js',
+    'src/nested_layout.js',
     'src/flexbox_layout.js',
     'src/manual_layout.js',
     'src/place_ports.js',

src/cola_layout.js

@@ -20,6 +20,7 @@ dc_graph.cola_layout = function(id) {
             .avoidOverlaps(true)
             .size([options.width, options.height])
             .handleDisconnected(options.handleDisconnected);
+
         if(_d3cola.tickSize) // non-standard
             _d3cola.tickSize(options.tickSize);
 
@@ -51,6 +52,7 @@ dc_graph.cola_layout = function(id) {
             v1.width = v.width;
             v1.height = v.height;
             v1.fixed = !!v.dcg_nodeFixed;
+            v1.attrs = v.attrs;
 
             if(v1.fixed && typeof v.dcg_nodeFixed === 'object') {
                 v1.x = v.dcg_nodeFixed.x;
@@ -73,11 +75,14 @@ dc_graph.cola_layout = function(id) {
             e1.source = _nodes[e.dcg_edgeSource];
             e1.target = _nodes[e.dcg_edgeTarget];
             e1.dcg_edgeLength = e.dcg_edgeLength;
+            e1.attrs = e.attrs;
         });
 
         // cola needs each node object to have an index property
         wnodes.forEach(function(v, i) {
             v.index = i;
+            //use user defined attribute extractor to get needed attributes
+            engine.extractNodeAttrs(v, v.attrs);
         });
 
         var groups = null;
@@ -103,10 +108,29 @@ dc_graph.cola_layout = function(id) {
         }).on('end', /* _done = */ function() {
             dispatchState('end');
         });
-        _d3cola.nodes(wnodes)
-            .links(wedges)
-            .constraints(constraints)
-            .groups(groups);
+
+        if(engine.setcolaSpec !== undefined) {
+            var setcola_result = setcola
+                .nodes(wnodes)        // Set the graph nodes
+                .links(wedges)        // Set the graph links
+                .guides(engine.setcolaGuides)
+                .constraints(engine.setcolaSpec)  // Set the constraints
+                .gap(10) //default value is 10, can be customized in setcolaSpec
+                .layout();
+
+             console.log('applying setcola constrains');
+
+            _d3cola.nodes(setcola_result.nodes)
+                .links(setcola_result.links)
+                .constraints(setcola_result.constraints)
+                .groups(groups);
+        } else {
+            _d3cola.nodes(wnodes)
+                .links(wedges)
+                .constraints(constraints)
+                .groups(groups);
+        }
+
     }
 
     function start() {
@@ -240,9 +264,13 @@ dc_graph.cola_layout = function(id) {
         allConstraintsIterations: property(20),
         gridSnapIterations: property(0),
         tickSize: property(1),
-        groupConnected: property(false)
+        groupConnected: property(false),
+        setcolaSpec: undefined,
+        setcolaGuides: undefined,
+        extractNodeAttrs: function(_node, _attrs) {}, //add new attributes to _node from _attrs
+        extractEdgeAttrs: function(_edge, _attrs) {},
     });
     return engine;
 };
 
-dc_graph.cola_layout.scripts = ['d3.js', 'cola.js'];
+dc_graph.cola_layout.scripts = ['d3.js', 'cola.js', 'setcola.js'];

src/d3v4_force_layout.js

@@ -19,12 +19,17 @@ dc_graph.d3v4_force_layout = function(id) {
     function init(options) {
         _options = options;
 
+        var collideFunc = d3v4.forceCollide(_options.collisionRadius);
+        if(_options.radiusAccessor) {
+          collideFunc = d3v4.forceCollide().radius(_options.radiusAccessor);
+        }
+
         _simulation = d3v4.forceSimulation()
             .force('link', d3v4.forceLink())
             .force('center', d3v4.forceCenter(options.width / 2, options.height / 2))
             .force('gravityX', d3v4.forceX(options.width / 2).strength(_options.gravityStrength))
             .force('gravityY', d3v4.forceY(options.height / 2).strength(_options.gravityStrength))
-            .force('collision', d3v4.forceCollide(_options.collisionRadius))
+            .force('collision', collideFunc)
             .force('charge', d3v4.forceManyBody())
             .stop();
     }
@@ -51,6 +56,8 @@ dc_graph.d3v4_force_layout = function(id) {
             v1.width = v.width;
             v1.height = v.height;
             v1.id = v.dcg_nodeKey;
+            v1.r = v.r;
+            v1.attrs = v.attrs;
             if(v.dcg_nodeFixed) {
                 v1.fx = v.dcg_nodeFixed.x;
                 v1.fy = v.dcg_nodeFixed.y;

src/diagram.js

@@ -1792,8 +1792,16 @@ dc_graph.diagram = function (parent, chartGroup) {
             _dispatch.start(); // cola doesn't seem to fire this itself?
             _diagram.layoutEngine().data(
                 { width: _diagram.width(), height: _diagram.height() },
-                wnodes.map(function(v) { return v.cola; }),
-                layout_edges.map(function(v) { return v.cola; }),
+                wnodes.map(function(v) {
+                    var _v = v.cola;
+                    _v.attrs = v.orig;
+                    return _v;
+                }),
+                layout_edges.map(function(v) {
+                    var _v = v.cola;
+                    _v.attrs = v.orig;
+                    return _v;
+                }),
                 constraints
             );
             _diagram.layoutEngine().start();

src/engine.js

@@ -46,7 +46,13 @@ dc_graph._engines = [
         instantiate: function() {
             return dc_graph.cola_layout();
         }
-    }
+    },
+    {
+        name: 'nested',
+        instantiate: function() {
+            return dc_graph.nested_layout();
+        }
+    },
 ];
 dc_graph._default_engine = 'cola';