feat(layout-directed-graph): add disableOptimalOrderHeuristic and customOrder options

packages/joint-layout-directed-graph/DirectedGraph.d.ts

@@ -1,4 +1,6 @@
 import { dia, g } from '@joint/core';
+import { Graph as GLibGraph} from '@dagrejs/graphlib';
+import { graphlib, configUnion } from '@dagrejs/dagre';
 
 export namespace DirectedGraph {
 
@@ -16,6 +18,17 @@ export namespace DirectedGraph {
         height?: number;
     }
 
+    interface DagreNodeProperties {
+        order?: number;
+        rank?: number;
+    }
+
+    type CustomOrderCallback = (
+        dagreGraph: graphlib.Graph<DagreNodeProperties>,
+        graph: dia.Graph,
+        order: (graph: graphlib.Graph<DagreNodeProperties>, opts?: configUnion) => void
+    ) => void;
+
     interface LayoutOptions extends ImportOptions, ExportOptions {
         align?: 'UR' | 'UL' | 'DR' | 'DL';
         rankDir?: 'TB' | 'BT' | 'LR' | 'RL';
@@ -28,6 +41,8 @@ export namespace DirectedGraph {
         resizeClusters?: boolean;
         clusterPadding?: dia.Padding | 'default';
         debugTiming?: boolean;
+        disableOptimalOrderHeuristic?: boolean;
+        customOrder?: CustomOrderCallback
     }
 
     interface ImportOptions {
@@ -54,9 +69,9 @@ export namespace DirectedGraph {
 
     export function layout(graph: dia.Graph | dia.Cell[], opt?: LayoutOptions): g.Rect;
 
-    export function toGraphLib(graph: dia.Graph, opt?: ToGraphLibOptions): any;
+    export function toGraphLib(graph: dia.Graph, opt?: ToGraphLibOptions): GLibGraph;
 
-    export function fromGraphLib(glGraph: any, opt?: FromGraphLibOptions): dia.Graph;
+    export function fromGraphLib(glGraph: GLibGraph, opt?: FromGraphLibOptions): dia.Graph;
 
     /** @deprecated pass the `graph` option instead */
     export function fromGraphLib(this: dia.Graph, glGraph: any, opt?: { [key: string]: any }): dia.Graph;

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

@@ -124,7 +124,8 @@ export const DirectedGraph = {
             resizeClusters: true,
             clusterPadding: 10,
             exportElement: this.exportElement,
-            exportLink: this.exportLink
+            exportLink: this.exportLink,
+            disableOptimalOrderHeuristic: false
         });
 
         // create a graphlib.Graph that represents the joint.dia.Graph
@@ -170,8 +171,20 @@ export const DirectedGraph = {
         // Set the option object for the graph label.
         glGraph.setGraph(glLabel);
 
+        // Custom order callback.
+        let customOrder;
+        if (util.isFunction(opt.customOrder)) {
+            customOrder = (dagreGraph, order) => {
+                opt.customOrder(dagreGraph, graph, order);
+            }
+        }
+
         // Executes the layout.
-        dagreUtil.layout(glGraph, { debugTiming: !!opt.debugTiming });
+        dagreUtil.layout(glGraph, {
+            debugTiming: !!opt.debugTiming,
+            disableOptimalOrderHeuristic: !!opt.disableOptimalOrderHeuristic,
+            customOrder,
+        });
 
         // Wrap all graph changes into a batch.
         graph.startBatch('layout');

packages/joint-layout-directed-graph/package.json

@@ -47,8 +47,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@dagrejs/dagre": "~1.0.4",
-    "@dagrejs/graphlib": "~2.1.13",
+    "@dagrejs/dagre": "~1.1.4",
+    "@dagrejs/graphlib": "~2.2.4",
     "@joint/core": "workspace:~"
   },
   "devDependencies": {

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

@@ -556,5 +556,32 @@ QUnit.module('DirectedGraph', function(hooks) {
             assert.deepEqual(container1.size(), containerSize);
             assert.deepEqual(container2.size(), containerSize);
         });
+
+        QUnit.test('customOrder: function - should allow to specify a custom order of the elements', function(assert) {
+
+            assert.expect(4);
+
+            const cells = [
+                new joint.shapes.standard.Rectangle({ id: '1' }),
+                new joint.shapes.standard.Rectangle({ id: '2' }),
+                new joint.shapes.standard.Link({
+                    id: 'link',
+                    source: { id: '1' },
+                    target: { id: '2' },
+                }),
+            ];
+
+            graph.resetCells(cells);
+
+            DirectedGraph.layout(graph, {
+                customOrder: function(glGraph, graph, order) {
+                    assert.ok(graph instanceof joint.dia.Graph);
+                    assert.ok(graph.getCell('1'));
+                    assert.ok(graph.getCell('2'));
+                    assert.ok(graph.getCell('link'));
+                    order(glGraph);
+                }
+            });
+        });
     });
 });

yarn.lock

@@ -1570,19 +1570,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@dagrejs/dagre@npm:~1.0.4":
-  version: 1.0.4
-  resolution: "@dagrejs/dagre@npm:1.0.4"
+"@dagrejs/dagre@npm:~1.1.4":
+  version: 1.1.4
+  resolution: "@dagrejs/dagre@npm:1.1.4"
   dependencies:
-    "@dagrejs/graphlib": "npm:2.1.13"
-  checksum: 10/12be892151efa2d47f2cd72a49bea0566c2d6d2446f9798f743aa5aac5dec1f62c408f594f64aa3dec436045d7dcbef64a9ef164c97a1a437a8fcc84dc79ded4
+    "@dagrejs/graphlib": "npm:2.2.4"
+  checksum: 10/0b3744b170c68ae0666e03aca19c3100d5131feafeb54b3ea096b749a9f0fe5385b8bd8889c11a49493cfab945b2486b9e30bc41b321755ed718e9f5cb4b74f1
   languageName: node
   linkType: hard
 
-"@dagrejs/graphlib@npm:2.1.13, @dagrejs/graphlib@npm:~2.1.13":
-  version: 2.1.13
-  resolution: "@dagrejs/graphlib@npm:2.1.13"
-  checksum: 10/92b49b6f57007593174d53f8f90228d7f3e9f2e7869348424057fd2bcca2b0ca393c74181ec9e1c7f02b30a925de2a59ec4cdfcd0fe75f873c2f85fa3cfd4da0
+"@dagrejs/graphlib@npm:2.2.4, @dagrejs/graphlib@npm:~2.2.4":
+  version: 2.2.4
+  resolution: "@dagrejs/graphlib@npm:2.2.4"
+  checksum: 10/1fc5393525a3d666284ca740867d082768bc87ff61f5f181eb5c1a73c1a6e328ad23581f7415c81df2614171b8a4b4a8e6a417eefd7f9fca74a4a625ec3aa848
   languageName: node
   linkType: hard
 
@@ -2376,8 +2376,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@joint/layout-directed-graph@workspace:packages/joint-layout-directed-graph"
   dependencies:
-    "@dagrejs/dagre": "npm:~1.0.4"
-    "@dagrejs/graphlib": "npm:~2.1.13"
+    "@dagrejs/dagre": "npm:~1.1.4"
+    "@dagrejs/graphlib": "npm:~2.2.4"
     "@joint/core": "workspace:~"
     "@rollup/plugin-node-resolve": "npm:^15.2.3"
     globals: "npm:16.0.0"