refactor(DirectedGraph): utilize opt.deep for fitToChildren call when resizing clusters

packages/joint-layout-directed-graph/DirectedGraph.mjs

@@ -173,20 +173,15 @@ export const DirectedGraph = {
         });
 
         if (opt.resizeClusters) {
-            // Resize and reposition cluster elements (parents of other elements)
-            // to fit their children.
-            // 1. filter clusters only
-            // 2. map id on cells
-            // 3. sort cells by their depth (the deepest first)
-            // 4. resize cell to fit their direct children only.
-            var clusters = glGraph.nodes()
-                .filter(function(v) { return glGraph.children(v).length > 0; })
-                .map(graph.getCell.bind(graph))
-                .sort(function(aCluster, bCluster) {
-                    return bCluster.getAncestors().length - aCluster.getAncestors().length;
-                });
-
-            util.invoke(clusters, 'fitToChildren', { padding: opt.clusterPadding });
+            // Resize and reposition cluster elements
+            // Filter out top-level clusters and map them to cells
+            const topLevelClusters = glGraph.nodes()
+                .filter(v => !glGraph.parent(v))
+                .map(graph.getCell.bind(graph));
+
+            // Since the `opt.deep` is set to `true`, the `fitToChildren` method is applied in reverse-depth
+            // order starting from the deepest descendant - working its way up to the top-level clusters.
+            util.invoke(topLevelClusters, 'fitToChildren', { padding: opt.clusterPadding, deep: true });
         }
 
         graph.stopBatch('layout');
@@ -215,9 +210,9 @@ export const DirectedGraph = {
             if (this instanceof dia.Graph) {
                 // Backwards compatibility.
                 graph = this;
-             } else {
+            } else {
                 graph = new dia.Graph();
-             }
+            }
         }
 
         // Import all nodes.

packages/joint-layout-directed-graph/test/index.js

@@ -317,5 +317,42 @@ QUnit.module('DirectedGraph', function(hooks) {
             assert.deepEqual(bbox.toJSON(), graph.getBBox().toJSON());
 
         });
+
+        QUnit.test('should resize clusters', function(assert) {
+
+            const deepestSize = {
+                width: 500,
+                height: 500
+            };
+
+            const elements = [
+                new joint.shapes.standard.Rectangle({ size: { width: 60, height: 60 }}),
+                new joint.shapes.standard.Rectangle({ size: { width: 120, height: 120 }}),
+                new joint.shapes.standard.Rectangle({ size: { width: 100, height: 300 }}),
+                new joint.shapes.standard.Rectangle({ size: deepestSize })
+            ];
+
+            elements[0].embed(elements[1]);
+            elements[1].embed(elements[2]);
+            elements[2].embed(elements[3]);
+
+            graph.resetCells(elements);
+
+            const padding = 20;
+
+            // opt.resizeClusters = `true` by default
+            DirectedGraph.layout(graph, {
+                clusterPadding: padding
+            });
+
+            const nextExpectedSize = deepestSize;
+
+            // Parents should be resized to fit all children
+            for (let i = elements.length - 1; i >= 0; i--) {
+                assert.deepEqual(elements[i].size(), nextExpectedSize);
+                nextExpectedSize.width += padding * 2;
+                nextExpectedSize.height += padding * 2;
+            }
+        });
     });
 });