From 9b2174fc1dad4693bf2d372a2b28d377609727d5 Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Thu, 24 Apr 2025 14:54:14 +0800 Subject: [PATCH 1/4] update --- .../joint-layout-directed-graph/DirectedGraph.d.ts | 14 ++++++++++++++ .../joint-layout-directed-graph/DirectedGraph.mjs | 11 +++++++++-- packages/joint-layout-directed-graph/package.json | 4 ++-- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/joint-layout-directed-graph/DirectedGraph.d.ts b/packages/joint-layout-directed-graph/DirectedGraph.d.ts index 7a3db713e6..d5b6205c2f 100644 --- a/packages/joint-layout-directed-graph/DirectedGraph.d.ts +++ b/packages/joint-layout-directed-graph/DirectedGraph.d.ts @@ -1,4 +1,5 @@ import { dia, g } from '@joint/core'; +import type { graphlib, configUnion } from '@dagrejs/dagre'; export namespace DirectedGraph { @@ -16,6 +17,17 @@ export namespace DirectedGraph { height?: number; } + interface DagreNodeProperties { + order?: number; + rank?: number; + } + + type CustomOrderCallback = ( + dagreGraph: graphlib.Graph, + graph: dia.Graph, + order: (graph: graphlib.Graph, opts?: configUnion) => void + ) => void; + interface LayoutOptions extends ImportOptions, ExportOptions { align?: 'UR' | 'UL' | 'DR' | 'DL'; rankDir?: 'TB' | 'BT' | 'LR' | 'RL'; @@ -28,6 +40,8 @@ export namespace DirectedGraph { resizeClusters?: boolean; clusterPadding?: dia.Padding | 'default'; debugTiming?: boolean; + disableOptimalOrderHeuristic?: boolean; + customOrder?: CustomOrderCallback } interface ImportOptions { diff --git a/packages/joint-layout-directed-graph/DirectedGraph.mjs b/packages/joint-layout-directed-graph/DirectedGraph.mjs index 9a33bf4f54..a1ff9e1612 100644 --- a/packages/joint-layout-directed-graph/DirectedGraph.mjs +++ b/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 @@ -171,7 +172,13 @@ export const DirectedGraph = { glGraph.setGraph(glLabel); // Executes the layout. - dagreUtil.layout(glGraph, { debugTiming: !!opt.debugTiming }); + dagreUtil.layout(glGraph, { + debugTiming: !!opt.debugTiming, + disableOptimalOrderHeuristic: opt.disableOptimalOrderHeuristic, + customOrder: util.isFunction(opt.customOrder) ? (dagreGraph, order) => { + opt.customOrder(dagreGraph, graph, order); + } : undefined, + }); // Wrap all graph changes into a batch. graph.startBatch('layout'); diff --git a/packages/joint-layout-directed-graph/package.json b/packages/joint-layout-directed-graph/package.json index 61717de80a..ab5535096d 100644 --- a/packages/joint-layout-directed-graph/package.json +++ b/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": { From 51a9ad2a5e7cf13cc766779859d4721f00e53b67 Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Tue, 29 Apr 2025 18:18:39 +0800 Subject: [PATCH 2/4] update --- packages/joint-layout-directed-graph/DirectedGraph.d.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/joint-layout-directed-graph/DirectedGraph.d.ts b/packages/joint-layout-directed-graph/DirectedGraph.d.ts index d5b6205c2f..41b15627e2 100644 --- a/packages/joint-layout-directed-graph/DirectedGraph.d.ts +++ b/packages/joint-layout-directed-graph/DirectedGraph.d.ts @@ -1,5 +1,6 @@ import { dia, g } from '@joint/core'; -import type { graphlib, configUnion } from '@dagrejs/dagre'; +import { Graph as GLibGraph} from '@dagrejs/graphlib'; +import { graphlib, configUnion } from '@dagrejs/dagre'; export namespace DirectedGraph { @@ -68,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; From 8f91ee17d18be0119555fe23629cbbf0de638382 Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Tue, 29 Apr 2025 18:28:40 +0800 Subject: [PATCH 3/4] update --- .../DirectedGraph.mjs | 14 ++++++++---- yarn.lock | 22 +++++++++---------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/joint-layout-directed-graph/DirectedGraph.mjs b/packages/joint-layout-directed-graph/DirectedGraph.mjs index a1ff9e1612..fc289d30ec 100644 --- a/packages/joint-layout-directed-graph/DirectedGraph.mjs +++ b/packages/joint-layout-directed-graph/DirectedGraph.mjs @@ -171,13 +171,19 @@ 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, - disableOptimalOrderHeuristic: opt.disableOptimalOrderHeuristic, - customOrder: util.isFunction(opt.customOrder) ? (dagreGraph, order) => { - opt.customOrder(dagreGraph, graph, order); - } : undefined, + disableOptimalOrderHeuristic: !!opt.disableOptimalOrderHeuristic, + customOrder, }); // Wrap all graph changes into a batch. diff --git a/yarn.lock b/yarn.lock index a54d90f8a7..0298ded115 100644 --- a/yarn.lock +++ b/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" From 94c76dde54fd0263ba167827267385f6246d8e62 Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Tue, 29 Apr 2025 18:40:57 +0800 Subject: [PATCH 4/4] update --- .../joint-layout-directed-graph/test/index.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/joint-layout-directed-graph/test/index.js b/packages/joint-layout-directed-graph/test/index.js index 7d621b476a..12e0c65a56 100644 --- a/packages/joint-layout-directed-graph/test/index.js +++ b/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); + } + }); + }); }); });