@deck.gl-community/graph-layers 9.0.2 → 9.1.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/dist/core/graph-engine.d.ts +16 -7
- package/dist/core/graph-engine.d.ts.map +1 -1
- package/dist/core/graph-engine.js +13 -4
- package/dist/core/graph-layout.d.ts +69 -0
- package/dist/core/graph-layout.d.ts.map +1 -0
- package/dist/core/{base-layout.js → graph-layout.js} +63 -80
- package/dist/core/interaction-manager.d.ts +1 -1
- package/dist/core/interaction-manager.d.ts.map +1 -1
- package/dist/{core → graph}/edge.d.ts +18 -17
- package/dist/graph/edge.d.ts.map +1 -0
- package/dist/{core → graph}/edge.js +12 -15
- package/dist/{core → graph}/graph.d.ts +34 -31
- package/dist/graph/graph.d.ts.map +1 -0
- package/dist/{core → graph}/graph.js +43 -36
- package/dist/{core → graph}/node.d.ts +20 -20
- package/dist/graph/node.d.ts.map +1 -0
- package/dist/{core → graph}/node.js +16 -18
- package/dist/index.cjs +1181 -434
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.ts +16 -14
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -18
- package/dist/layers/graph-layer.d.ts +45 -5
- package/dist/layers/graph-layer.d.ts.map +1 -1
- package/dist/layers/graph-layer.js +80 -38
- package/dist/layers/node-layers/{path-rounded-rectange-layer.d.ts → path-rounded-rectangle-layer.d.ts} +1 -1
- package/dist/layers/node-layers/path-rounded-rectangle-layer.d.ts.map +1 -0
- package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts +1 -1
- package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts.map +1 -1
- package/dist/layers/node-layers/rounded-rectangle-layer-fragment.js +1 -3
- package/dist/layers/node-layers/rounded-rectangle-layer.d.ts +12 -3
- package/dist/layers/node-layers/rounded-rectangle-layer.d.ts.map +1 -1
- package/dist/layers/node-layers/rounded-rectangle-layer.js +25 -11
- package/dist/layouts/d3-force/d3-force-layout.d.ts +12 -3
- package/dist/layouts/d3-force/d3-force-layout.d.ts.map +1 -1
- package/dist/layouts/d3-force/d3-force-layout.js +11 -11
- package/dist/layouts/d3-force/worker.d.ts.map +1 -1
- package/dist/layouts/experimental/force-multi-graph-layout.d.ts +43 -0
- package/dist/layouts/experimental/force-multi-graph-layout.d.ts.map +1 -0
- package/dist/layouts/experimental/force-multi-graph-layout.js +226 -0
- package/dist/layouts/experimental/hive-plot-layout.d.ts +34 -0
- package/dist/layouts/experimental/hive-plot-layout.d.ts.map +1 -0
- package/dist/layouts/experimental/hive-plot-layout.js +142 -0
- package/dist/layouts/experimental/radial-layout.d.ts +28 -0
- package/dist/layouts/experimental/radial-layout.d.ts.map +1 -0
- package/dist/layouts/experimental/radial-layout.js +164 -0
- package/dist/layouts/gpu-force/gpu-force-layout.d.ts +15 -3
- package/dist/layouts/gpu-force/gpu-force-layout.d.ts.map +1 -1
- package/dist/layouts/gpu-force/gpu-force-layout.js +20 -18
- package/dist/layouts/gpu-force/worker.d.ts.map +1 -1
- package/dist/layouts/simple-layout.d.ts +42 -0
- package/dist/layouts/simple-layout.d.ts.map +1 -0
- package/dist/layouts/{simple-layout/simple-layout.js → simple-layout.js} +8 -7
- package/dist/loaders/create-graph.d.ts +13 -0
- package/dist/loaders/create-graph.d.ts.map +1 -0
- package/dist/{utils → loaders}/create-graph.js +9 -4
- package/dist/loaders/edge-parsers.d.ts +2 -6
- package/dist/loaders/edge-parsers.d.ts.map +1 -1
- package/dist/loaders/json-loader.js +1 -1
- package/dist/loaders/node-parsers.d.ts +2 -3
- package/dist/loaders/node-parsers.d.ts.map +1 -1
- package/dist/loaders/simple-json-graph-loader.d.ts +12 -0
- package/dist/loaders/simple-json-graph-loader.d.ts.map +1 -0
- package/dist/loaders/simple-json-graph-loader.js +20 -0
- package/dist/loaders/table-graph-loader.d.ts +17 -0
- package/dist/loaders/table-graph-loader.d.ts.map +1 -0
- package/dist/loaders/table-graph-loader.js +91 -0
- package/dist/utils/log.d.ts +1 -1
- package/dist/utils/log.d.ts.map +1 -1
- package/dist/utils/log.js +3 -3
- package/dist/widgets/long-press-button.d.ts +13 -0
- package/dist/widgets/long-press-button.d.ts.map +1 -0
- package/dist/widgets/long-press-button.js +31 -0
- package/dist/widgets/view-control-widget.d.ts +78 -0
- package/dist/widgets/view-control-widget.d.ts.map +1 -0
- package/dist/widgets/view-control-widget.js +194 -0
- package/package.json +8 -6
- package/src/core/graph-engine.ts +30 -10
- package/src/core/graph-layout.ts +146 -0
- package/src/core/interaction-manager.ts +2 -2
- package/src/{core → graph}/edge.ts +19 -17
- package/src/{core → graph}/graph.ts +51 -36
- package/src/{core → graph}/node.ts +21 -20
- package/src/index.ts +28 -28
- package/src/layers/graph-layer.ts +133 -46
- package/src/layers/node-layers/rounded-rectangle-layer-fragment.ts +1 -3
- package/src/layers/node-layers/rounded-rectangle-layer.ts +34 -10
- package/src/layouts/d3-force/d3-force-layout.ts +21 -11
- package/src/layouts/experimental/force-multi-graph-layout.ts +268 -0
- package/src/layouts/experimental/hive-plot-layout.ts +182 -0
- package/src/layouts/experimental/radial-layout.ts +210 -0
- package/src/layouts/gpu-force/gpu-force-layout.ts +32 -17
- package/src/layouts/{simple-layout/simple-layout.ts → simple-layout.ts} +34 -19
- package/src/{utils → loaders}/create-graph.ts +9 -4
- package/src/loaders/edge-parsers.ts +2 -1
- package/src/loaders/json-loader.ts +1 -1
- package/src/loaders/node-parsers.ts +2 -1
- package/src/loaders/simple-json-graph-loader.ts +28 -0
- package/src/loaders/table-graph-loader.ts +124 -0
- package/src/utils/log.ts +3 -3
- package/src/widgets/long-press-button.tsx +50 -0
- package/src/widgets/view-control-widget.tsx +337 -0
- package/dist/core/base-layout.d.ts +0 -72
- package/dist/core/base-layout.d.ts.map +0 -1
- package/dist/core/edge.d.ts.map +0 -1
- package/dist/core/graph.d.ts.map +0 -1
- package/dist/core/node.d.ts.map +0 -1
- package/dist/layers/node-layers/path-rounded-rectange-layer.d.ts.map +0 -1
- package/dist/layouts/simple-layout/simple-layout.d.ts +0 -23
- package/dist/layouts/simple-layout/simple-layout.d.ts.map +0 -1
- package/dist/utils/create-graph.d.ts +0 -9
- package/dist/utils/create-graph.d.ts.map +0 -1
- package/src/core/base-layout.ts +0 -154
- /package/dist/layers/node-layers/{path-rounded-rectange-layer.js → path-rounded-rectangle-layer.js} +0 -0
- /package/src/layers/node-layers/{path-rounded-rectange-layer.ts → path-rounded-rectangle-layer.ts} +0 -0
- /package/src/layouts/d3-force/{worker.ts → worker.js} +0 -0
- /package/src/layouts/gpu-force/{worker.ts → worker.js} +0 -0
package/LICENSE
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Copyright (c) 2015 - 2021 Uber Technologies, Inc.
|
|
2
|
-
Copyright (c) 2022 - 2023
|
|
2
|
+
Copyright (c) 2022 - 2023 vis.gl contributors
|
|
3
3
|
|
|
4
4
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
5
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -1,18 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Edge } from "
|
|
3
|
-
import { Graph } from "
|
|
1
|
+
import type { Node } from "../graph/node.js";
|
|
2
|
+
import { Edge } from "../graph/edge.js";
|
|
3
|
+
import { Graph } from "../graph/graph.js";
|
|
4
|
+
import { GraphLayout } from "./graph-layout.js";
|
|
5
|
+
export type GraphEngineProps = {
|
|
6
|
+
graph: Graph;
|
|
7
|
+
layout: GraphLayout;
|
|
8
|
+
};
|
|
9
|
+
/** Graph engine controls the graph data and layout calculation */
|
|
4
10
|
export declare class GraphEngine extends EventTarget {
|
|
11
|
+
props: Readonly<Required<GraphEngineProps>>;
|
|
5
12
|
private readonly _graph;
|
|
6
13
|
private readonly _layout;
|
|
7
14
|
private readonly _cache;
|
|
8
15
|
private _layoutDirty;
|
|
9
16
|
private _transactionInProgress;
|
|
10
|
-
constructor(
|
|
17
|
+
constructor(props: GraphEngineProps);
|
|
18
|
+
/** @deprecated Use props constructor: new GraphEngine(props) */
|
|
19
|
+
constructor(graph: Graph, layout: GraphLayout);
|
|
11
20
|
/** Getters */
|
|
12
21
|
getNodes: () => Node[];
|
|
13
22
|
getEdges: () => Edge[];
|
|
14
|
-
getNodePosition: (node:
|
|
15
|
-
getEdgePosition: (edge:
|
|
23
|
+
getNodePosition: (node: Node) => [number, number];
|
|
24
|
+
getEdgePosition: (edge: Edge) => {
|
|
16
25
|
type: string;
|
|
17
26
|
sourcePosition: number[];
|
|
18
27
|
targetPosition: number[];
|
|
@@ -20,7 +29,7 @@ export declare class GraphEngine extends EventTarget {
|
|
|
20
29
|
};
|
|
21
30
|
getGraphVersion: () => number;
|
|
22
31
|
getLayoutLastUpdate: () => number;
|
|
23
|
-
getLayoutState: () =>
|
|
32
|
+
getLayoutState: () => import("./graph-layout").GraphLayoutState;
|
|
24
33
|
/** Operations on the graph */
|
|
25
34
|
lockNodePosition: (node: any, x: any, y: any) => void;
|
|
26
35
|
unlockNodePosition: (node: any) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph-engine.d.ts","sourceRoot":"","sources":["../../src/core/graph-engine.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"graph-engine.d.ts","sourceRoot":"","sources":["../../src/core/graph-engine.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,IAAI,EAAC,yBAAsB;AACxC,OAAO,EAAC,IAAI,EAAC,yBAAsB;AACnC,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,WAAW,EAAC,0BAAuB;AAG3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,kEAAkE;AAClE,qBAAa,WAAY,SAAQ,WAAW;IAC1C,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAc;IACtC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmD;IAC1E,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,sBAAsB,CAAS;gBAE3B,KAAK,EAAE,gBAAgB;IACnC,gEAAgE;gBACpD,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW;IAgB7C,cAAc;IAEd,QAAQ,QAAO,IAAI,EAAE,CAMnB;IAEF,QAAQ,QAK6B,IAAI,EAAE,CACzC;IAEF,eAAe,SAAU,IAAI,sBAAwC;IAErE,eAAe,SAAU,IAAI;;;;;MAAwC;IAErE,eAAe,eAA6B;IAE5C,mBAAmB,eAA8B;IAEjD,cAAc,kDAA4B;IAE1C,8BAA8B;IAE9B,gBAAgB,sCAA6D;IAE7E,kBAAkB,sBAAmD;IAErE;;OAEG;IACH,cAAc,aAMZ;IAEF;;OAEG;IACH,eAAe,aAMb;IAEF;;OAEG;IACH,aAAa,aAMX;IAEF;;OAEG;IACH,cAAc,aAMZ;IAEF,wBAAwB,wBAGtB;IAEF,mBAAmB,aAEjB;IAEF,iBAAiB,aAGf;IAEF,0BAA0B;IAE1B,GAAG,aAiBD;IAEF,KAAK,aAYH;IAEF,MAAM,aAA+B;IAErC,IAAI,aAA6B;IAEjC,aAAa,aAIX;IAEF,aAAa,aAIX;IAEF,YAAY,CAAC,GAAG,KAAA,EAAE,WAAW,KAAA;CAG9B"}
|
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
// deck.gl-community
|
|
2
2
|
// SPDX-License-Identifier: MIT
|
|
3
3
|
// Copyright (c) vis.gl contributors
|
|
4
|
+
import { Graph } from "../graph/graph.js";
|
|
4
5
|
import { Cache } from "./cache.js";
|
|
5
|
-
|
|
6
|
+
/** Graph engine controls the graph data and layout calculation */
|
|
6
7
|
export class GraphEngine extends EventTarget {
|
|
8
|
+
props;
|
|
7
9
|
_graph;
|
|
8
10
|
_layout;
|
|
9
11
|
_cache = new Cache();
|
|
10
12
|
_layoutDirty = false;
|
|
11
13
|
_transactionInProgress = false;
|
|
12
|
-
constructor(
|
|
14
|
+
constructor(props, layout) {
|
|
13
15
|
super();
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
if (props instanceof Graph) {
|
|
17
|
+
props = {
|
|
18
|
+
graph: props,
|
|
19
|
+
layout
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
this.props = props;
|
|
23
|
+
this._graph = props.graph;
|
|
24
|
+
this._layout = props.layout;
|
|
16
25
|
}
|
|
17
26
|
/** Getters */
|
|
18
27
|
getNodes = () => {
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import type { Graph } from "../graph/graph.js";
|
|
2
|
+
import type { Node } from "../graph/node.js";
|
|
3
|
+
import type { Edge } from "../graph/edge.js";
|
|
4
|
+
export type GraphLayoutState = 'INIT' | 'START' | 'CALCULATING' | 'DONE' | 'ERROR';
|
|
5
|
+
export type GraphLayoutOptions = {};
|
|
6
|
+
/** All the layout classes are extended from this base layout class. */
|
|
7
|
+
export declare class GraphLayout<OptionsT extends GraphLayoutOptions = GraphLayoutOptions> extends EventTarget {
|
|
8
|
+
/** Name of the layout. */
|
|
9
|
+
protected readonly _name: string;
|
|
10
|
+
/** Extra configuration options of the layout. */
|
|
11
|
+
protected _options: OptionsT;
|
|
12
|
+
version: number;
|
|
13
|
+
state: GraphLayoutState;
|
|
14
|
+
/**
|
|
15
|
+
* Constructor of GraphLayout
|
|
16
|
+
* @param options extra configuration options of the layout
|
|
17
|
+
*/
|
|
18
|
+
constructor(options: OptionsT);
|
|
19
|
+
/**
|
|
20
|
+
* Check the equality of two layouts
|
|
21
|
+
* @param layout - The layout to be compared.
|
|
22
|
+
* @return - True if the layout is the same as itself.
|
|
23
|
+
*/
|
|
24
|
+
equals(layout: GraphLayout): boolean;
|
|
25
|
+
/** virtual functions: will be implemented in the child class */
|
|
26
|
+
/** first time to pass the graph data into this layout */
|
|
27
|
+
initializeGraph(graph: Graph): void;
|
|
28
|
+
/** update the existing graph */
|
|
29
|
+
updateGraph(graph: Graph): void;
|
|
30
|
+
/** start the layout calculation */
|
|
31
|
+
start(): void;
|
|
32
|
+
/** update the layout calculation */
|
|
33
|
+
update(): void;
|
|
34
|
+
/** resume the layout calculation */
|
|
35
|
+
resume(): void;
|
|
36
|
+
/** stop the layout calculation */
|
|
37
|
+
stop(): void;
|
|
38
|
+
/** access the position of the node in the layout */
|
|
39
|
+
getNodePosition(node: Node): [number, number];
|
|
40
|
+
/** access the layout information of the edge */
|
|
41
|
+
getEdgePosition(edge: Edge): {
|
|
42
|
+
type: string;
|
|
43
|
+
sourcePosition: number[];
|
|
44
|
+
targetPosition: number[];
|
|
45
|
+
controlPoints: any[];
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Pin the node to a designated position, and the node won't move anymore
|
|
49
|
+
* @param node Node to be locked
|
|
50
|
+
* @param x x coordinate
|
|
51
|
+
* @param y y coordinate
|
|
52
|
+
*/
|
|
53
|
+
lockNodePosition(node: Node, x: number, y: number): void;
|
|
54
|
+
/**
|
|
55
|
+
* Unlock the node, the node will be able to move freely.
|
|
56
|
+
* @param {Object} node Node to be unlocked
|
|
57
|
+
*/
|
|
58
|
+
unlockNodePosition(node: Node): void;
|
|
59
|
+
protected _updateState(state: any): void;
|
|
60
|
+
/** @fires GraphLayout#onLayoutStart */
|
|
61
|
+
protected _onLayoutStart: () => void;
|
|
62
|
+
/** @fires GraphLayout#onLayoutChange */
|
|
63
|
+
protected _onLayoutChange: () => void;
|
|
64
|
+
/** @fires GraphLayout#onLayoutDone */
|
|
65
|
+
protected _onLayoutDone: () => void;
|
|
66
|
+
/** @fires GraphLayout#onLayoutError */
|
|
67
|
+
protected _onLayoutError: () => void;
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=graph-layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"graph-layout.d.ts","sourceRoot":"","sources":["../../src/core/graph-layout.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,KAAK,EAAC,0BAAuB;AAC1C,OAAO,KAAK,EAAC,IAAI,EAAC,yBAAsB;AACxC,OAAO,KAAK,EAAC,IAAI,EAAC,yBAAsB;AAMxC,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnF,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAEpC,uEAAuE;AACvE,qBAAa,WAAW,CACtB,QAAQ,SAAS,kBAAkB,GAAG,kBAAkB,CACxD,SAAQ,WAAW;IACnB,0BAA0B;IAC1B,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAiB;IACjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAEtB,OAAO,SAAK;IACZ,KAAK,EAAE,gBAAgB,CAAU;IAExC;;;OAGG;gBACS,OAAO,EAAE,QAAQ;IAK7B;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAOpC,gEAAgE;IAEhE,yDAAyD;IACzD,eAAe,CAAC,KAAK,EAAE,KAAK;IAC5B,gCAAgC;IAChC,WAAW,CAAC,KAAK,EAAE,KAAK;IACxB,mCAAmC;IACnC,KAAK;IACL,oCAAoC;IACpC,MAAM;IACN,oCAAoC;IACpC,MAAM;IACN,kCAAkC;IAClC,IAAI;IACJ,oDAAoD;IACpD,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAG7C,gDAAgD;IAChD,eAAe,CAAC,IAAI,EAAE,IAAI;;;;;;IAS1B;;;;;OAKG;IACH,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAEjD;;;OAGG;IACH,kBAAkB,CAAC,IAAI,EAAE,IAAI;IAI7B,SAAS,CAAC,YAAY,CAAC,KAAK,KAAA;IAK5B,uCAAuC;IACvC,SAAS,CAAC,cAAc,QAAO,IAAI,CASjC;IAEF,wCAAwC;IACxC,SAAS,CAAC,eAAe,QAAO,IAAI,CASlC;IAEF,sCAAsC;IACtC,SAAS,CAAC,aAAa,QAAO,IAAI,CAShC;IAEF,uCAAuC;IACvC,SAAS,CAAC,cAAc,QAAO,IAAI,CASjC;CACH"}
|
|
@@ -2,110 +2,52 @@
|
|
|
2
2
|
// SPDX-License-Identifier: MIT
|
|
3
3
|
// Copyright (c) vis.gl contributors
|
|
4
4
|
import isEqual from 'lodash.isequal';
|
|
5
|
-
import { EDGE_TYPE
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
*/
|
|
9
|
-
export class BaseLayout extends EventTarget {
|
|
5
|
+
import { EDGE_TYPE } from "./constants.js";
|
|
6
|
+
/** All the layout classes are extended from this base layout class. */
|
|
7
|
+
export class GraphLayout extends EventTarget {
|
|
10
8
|
/** Name of the layout. */
|
|
11
|
-
_name = '
|
|
9
|
+
_name = 'GraphLayout';
|
|
12
10
|
/** Extra configuration options of the layout. */
|
|
13
11
|
_options;
|
|
14
12
|
version = 0;
|
|
15
|
-
state =
|
|
13
|
+
state = 'INIT';
|
|
16
14
|
/**
|
|
17
|
-
* Constructor of
|
|
18
|
-
* @param
|
|
15
|
+
* Constructor of GraphLayout
|
|
16
|
+
* @param options extra configuration options of the layout
|
|
19
17
|
*/
|
|
20
|
-
constructor(options
|
|
18
|
+
constructor(options) {
|
|
21
19
|
super();
|
|
22
20
|
this._options = options;
|
|
23
21
|
}
|
|
24
|
-
/**
|
|
25
|
-
* @fires BaseLayout#onLayoutStart
|
|
26
|
-
* @protected
|
|
27
|
-
*/
|
|
28
|
-
_onLayoutStart() {
|
|
29
|
-
this._updateState(LAYOUT_STATE.CALCULATING);
|
|
30
|
-
/**
|
|
31
|
-
* Layout calculation start.
|
|
32
|
-
*
|
|
33
|
-
* @event BaseLayout#onLayoutChange
|
|
34
|
-
* @type {CustomEvent}
|
|
35
|
-
*/
|
|
36
|
-
this.dispatchEvent(new CustomEvent('onLayoutStart'));
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* @fires BaseLayout#onLayoutChange
|
|
40
|
-
* @protected
|
|
41
|
-
*/
|
|
42
|
-
_onLayoutChange() {
|
|
43
|
-
this._updateState(LAYOUT_STATE.CALCULATING);
|
|
44
|
-
/**
|
|
45
|
-
* Layout calculation iteration.
|
|
46
|
-
*
|
|
47
|
-
* @event BaseLayout#onLayoutChange
|
|
48
|
-
* @type {CustomEvent}
|
|
49
|
-
*/
|
|
50
|
-
this.dispatchEvent(new CustomEvent('onLayoutChange'));
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* @fires BaseLayout#onLayoutDone
|
|
54
|
-
* @protected
|
|
55
|
-
*/
|
|
56
|
-
_onLayoutDone() {
|
|
57
|
-
this._updateState(LAYOUT_STATE.DONE);
|
|
58
|
-
/**
|
|
59
|
-
* Layout calculation is done.
|
|
60
|
-
*
|
|
61
|
-
* @event BaseLayout#onLayoutDone
|
|
62
|
-
* @type {CustomEvent}
|
|
63
|
-
*/
|
|
64
|
-
this.dispatchEvent(new CustomEvent('onLayoutDone'));
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* @fires BaseLayout#onLayoutError
|
|
68
|
-
* @protected
|
|
69
|
-
*/
|
|
70
|
-
_onLayoutError() {
|
|
71
|
-
this._updateState(LAYOUT_STATE.ERROR);
|
|
72
|
-
/**
|
|
73
|
-
* Layout calculation went wrong.
|
|
74
|
-
*
|
|
75
|
-
* @event BaseLayout#onLayoutError
|
|
76
|
-
* @type {CustomEvent}
|
|
77
|
-
*/
|
|
78
|
-
this.dispatchEvent(new CustomEvent('onLayoutError'));
|
|
79
|
-
}
|
|
80
22
|
/**
|
|
81
23
|
* Check the equality of two layouts
|
|
82
|
-
* @param
|
|
83
|
-
* @return
|
|
24
|
+
* @param layout - The layout to be compared.
|
|
25
|
+
* @return - True if the layout is the same as itself.
|
|
84
26
|
*/
|
|
85
27
|
equals(layout) {
|
|
86
|
-
if (!layout || !(layout instanceof
|
|
28
|
+
if (!layout || !(layout instanceof GraphLayout)) {
|
|
87
29
|
return false;
|
|
88
30
|
}
|
|
89
31
|
return this._name === layout._name && isEqual(this._options, layout._options);
|
|
90
32
|
}
|
|
91
33
|
/** virtual functions: will be implemented in the child class */
|
|
92
|
-
|
|
34
|
+
/** first time to pass the graph data into this layout */
|
|
93
35
|
initializeGraph(graph) { }
|
|
94
|
-
|
|
36
|
+
/** update the existing graph */
|
|
95
37
|
updateGraph(graph) { }
|
|
96
|
-
|
|
38
|
+
/** start the layout calculation */
|
|
97
39
|
start() { }
|
|
98
|
-
|
|
40
|
+
/** update the layout calculation */
|
|
99
41
|
update() { }
|
|
100
|
-
|
|
42
|
+
/** resume the layout calculation */
|
|
101
43
|
resume() { }
|
|
102
|
-
|
|
44
|
+
/** stop the layout calculation */
|
|
103
45
|
stop() { }
|
|
104
|
-
|
|
46
|
+
/** access the position of the node in the layout */
|
|
105
47
|
getNodePosition(node) {
|
|
106
48
|
return [0, 0];
|
|
107
49
|
}
|
|
108
|
-
|
|
50
|
+
/** access the layout information of the edge */
|
|
109
51
|
getEdgePosition(edge) {
|
|
110
52
|
return {
|
|
111
53
|
type: EDGE_TYPE.LINE,
|
|
@@ -116,9 +58,9 @@ export class BaseLayout extends EventTarget {
|
|
|
116
58
|
}
|
|
117
59
|
/**
|
|
118
60
|
* Pin the node to a designated position, and the node won't move anymore
|
|
119
|
-
* @param
|
|
120
|
-
* @param
|
|
121
|
-
* @param
|
|
61
|
+
* @param node Node to be locked
|
|
62
|
+
* @param x x coordinate
|
|
63
|
+
* @param y y coordinate
|
|
122
64
|
*/
|
|
123
65
|
lockNodePosition(node, x, y) { }
|
|
124
66
|
/**
|
|
@@ -126,8 +68,49 @@ export class BaseLayout extends EventTarget {
|
|
|
126
68
|
* @param {Object} node Node to be unlocked
|
|
127
69
|
*/
|
|
128
70
|
unlockNodePosition(node) { }
|
|
71
|
+
// INTERNAL METHODS
|
|
129
72
|
_updateState(state) {
|
|
130
73
|
this.state = state;
|
|
131
74
|
this.version += 1;
|
|
132
75
|
}
|
|
76
|
+
/** @fires GraphLayout#onLayoutStart */
|
|
77
|
+
_onLayoutStart = () => {
|
|
78
|
+
this._updateState('CALCULATING');
|
|
79
|
+
/**
|
|
80
|
+
* Layout calculation start.
|
|
81
|
+
* @event GraphLayout#onLayoutChange
|
|
82
|
+
* @type {CustomEvent}
|
|
83
|
+
*/
|
|
84
|
+
this.dispatchEvent(new CustomEvent('onLayoutStart'));
|
|
85
|
+
};
|
|
86
|
+
/** @fires GraphLayout#onLayoutChange */
|
|
87
|
+
_onLayoutChange = () => {
|
|
88
|
+
this._updateState('CALCULATING');
|
|
89
|
+
/**
|
|
90
|
+
* Layout calculation iteration.
|
|
91
|
+
* @event GraphLayout#onLayoutChange
|
|
92
|
+
* @type {CustomEvent}
|
|
93
|
+
*/
|
|
94
|
+
this.dispatchEvent(new CustomEvent('onLayoutChange'));
|
|
95
|
+
};
|
|
96
|
+
/** @fires GraphLayout#onLayoutDone */
|
|
97
|
+
_onLayoutDone = () => {
|
|
98
|
+
this._updateState('DONE');
|
|
99
|
+
/**
|
|
100
|
+
* Layout calculation is done.
|
|
101
|
+
* @event GraphLayout#onLayoutDone
|
|
102
|
+
* @type {CustomEvent}
|
|
103
|
+
*/
|
|
104
|
+
this.dispatchEvent(new CustomEvent('onLayoutDone'));
|
|
105
|
+
};
|
|
106
|
+
/** @fires GraphLayout#onLayoutError */
|
|
107
|
+
_onLayoutError = () => {
|
|
108
|
+
this._updateState('ERROR');
|
|
109
|
+
/**
|
|
110
|
+
* Layout calculation went wrong.
|
|
111
|
+
* @event GraphLayout#onLayoutError
|
|
112
|
+
* @type {CustomEvent}
|
|
113
|
+
*/
|
|
114
|
+
this.dispatchEvent(new CustomEvent('onLayoutError'));
|
|
115
|
+
};
|
|
133
116
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interaction-manager.d.ts","sourceRoot":"","sources":["../../src/core/interaction-manager.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"interaction-manager.d.ts","sourceRoot":"","sources":["../../src/core/interaction-manager.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,IAAI,EAAC,yBAAsB;AACnC,OAAO,EAAC,WAAW,EAAC,0BAAuB;AA8B3C,UAAU,QAAQ;IAChB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,yBAAyB,EAAE,OAAO,CAAC;CACpC;AAED,qBAAa,kBAAkB;IACtB,cAAc,EAAE,QAAQ,CAAC;IAChC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,iBAAiB,CAAqB;IAEvC,UAAU,EAAE,QAAQ,CAAc;IAClC,UAAU,EAAE,QAAQ,CAAc;IAClC,MAAM,EAAE,WAAW,CAAc;IACjC,cAAc,EAAE,OAAO,CAAc;IACrC,yBAAyB,EAAE,OAAO,CAAc;gBAE3C,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,QAAQ;IAUpE,WAAW,CAAC,EACV,UAAe,EACf,UAAe,EACf,MAAM,EACN,cAAc,EACd,yBAAyB,EAC1B,EAAE,uBAAuB,GAAG,IAAI;IAQjC,kBAAkB,IAAI,MAAM;IAI5B,OAAO,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA,GAAG,IAAI;IA4B1B,eAAe,IAAI,IAAI;IAiBvB,eAAe,CAAC,IAAI,KAAA,GAAG,IAAI;IAY3B,OAAO,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAiCnB,WAAW,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAMvB,MAAM,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;IAuBlB,SAAS,CAAC,IAAI,KAAA,EAAE,KAAK,KAAA;CAUtB"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { Node } from "./node.js";
|
|
2
|
-
interface EdgeOptions {
|
|
2
|
+
export interface EdgeOptions {
|
|
3
|
+
/** the unique ID of the edge */
|
|
3
4
|
id: string | number;
|
|
5
|
+
/** the ID of the source node */
|
|
4
6
|
sourceId: string | number;
|
|
7
|
+
/** the ID of the target node */
|
|
5
8
|
targetId: string | number;
|
|
9
|
+
/** whether the edge is directed or not */
|
|
6
10
|
directed?: boolean;
|
|
7
|
-
data
|
|
11
|
+
/** origin data reference */
|
|
12
|
+
data?: Record<string, unknown>;
|
|
8
13
|
}
|
|
14
|
+
/** Basic edge data structure */
|
|
9
15
|
export declare class Edge {
|
|
10
16
|
/** Unique uuid of the edge. */
|
|
11
17
|
id: string | number;
|
|
@@ -25,11 +31,7 @@ export declare class Edge {
|
|
|
25
31
|
state: string;
|
|
26
32
|
/**
|
|
27
33
|
* The constructor
|
|
28
|
-
* @param
|
|
29
|
-
* @param {String|Number} options.sourceId - the ID of the source node
|
|
30
|
-
* @param {String|Number} options.targetId - the ID of the target node
|
|
31
|
-
* @param {Boolean} options.directed - whether the edge is directed or not
|
|
32
|
-
* @param {Record<string, unknown>} options.data - origin data reference
|
|
34
|
+
* @param options.id - information about the edge
|
|
33
35
|
*/
|
|
34
36
|
constructor({ id, sourceId, targetId, data, directed }: EdgeOptions);
|
|
35
37
|
/**
|
|
@@ -44,44 +46,43 @@ export declare class Edge {
|
|
|
44
46
|
isDirected(): boolean;
|
|
45
47
|
/**
|
|
46
48
|
* Get the ID of the source node.
|
|
47
|
-
* @return
|
|
49
|
+
* @return the ID of the source node.
|
|
48
50
|
*/
|
|
49
51
|
getSourceNodeId(): string | number;
|
|
50
52
|
/**
|
|
51
53
|
* Get the ID of the target node.
|
|
52
|
-
* @return
|
|
54
|
+
* @return the ID of the target node.
|
|
53
55
|
*/
|
|
54
56
|
getTargetNodeId(): string | number;
|
|
55
57
|
/**
|
|
56
58
|
* Return of the value of the selected property key.
|
|
57
|
-
* @param
|
|
58
|
-
* @return
|
|
59
|
+
* @param key - property key.
|
|
60
|
+
* @return - the value of the property.
|
|
59
61
|
*/
|
|
60
62
|
getPropertyValue(key: string): unknown;
|
|
61
63
|
/**
|
|
62
64
|
* Set the origin data as a reference.
|
|
63
|
-
* @param
|
|
65
|
+
* @param data - the origin data.
|
|
64
66
|
*/
|
|
65
67
|
setData(data: Record<string, unknown>): void;
|
|
66
68
|
/**
|
|
67
69
|
* Update a data property.
|
|
68
|
-
* @param
|
|
69
|
-
* @param
|
|
70
|
+
* @param key - the key of the property
|
|
71
|
+
* @param value - the value of the property.
|
|
70
72
|
*/
|
|
71
73
|
setDataProperty(key: string, value: unknown): void;
|
|
72
74
|
/**
|
|
73
75
|
* Set edge state
|
|
74
|
-
* @param
|
|
76
|
+
* @param state - one of EDGE_STATE
|
|
75
77
|
*/
|
|
76
78
|
setState(state: string): void;
|
|
77
79
|
/**
|
|
78
80
|
* Get edge state
|
|
79
|
-
* @returns
|
|
81
|
+
* @returns state - one of EDGE_STATE
|
|
80
82
|
*/
|
|
81
83
|
getState(): string;
|
|
82
84
|
addNode(node: Node): void;
|
|
83
85
|
removeNode(node: Node): void;
|
|
84
86
|
getConnectedNodes(): Node[];
|
|
85
87
|
}
|
|
86
|
-
export {};
|
|
87
88
|
//# sourceMappingURL=edge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../src/graph/edge.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,IAAI,EAAC,kBAAe;AAE5B,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,gCAAgC;AAChC,qBAAa,IAAI;IACf,+BAA+B;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,SAAS,CAAkB;IACnC,6BAA6B;IAC7B,OAAO,CAAC,SAAS,CAAkB;IACnC,2CAA2C;IAC3C,OAAO,CAAC,SAAS,CAAU;IAC3B,yCAAyC;IACzC,OAAO,CAAC,KAAK,CAA0B;IACvC,gEAAgE;IAChE,SAAgB,MAAM,QAAQ;IAC9B,wCAAwC;IACxC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA4B;IAC5D,kBAAkB;IACX,KAAK,SAAsB;IAElC;;;OAGG;gBACS,EAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAgB,EAAC,EAAE,WAAW;IAQzE;;;OAGG;IACH,KAAK,IAAI,MAAM,GAAG,MAAM;IAIxB;;;OAGG;IACH,UAAU,IAAI,OAAO;IAIrB;;;OAGG;IACH,eAAe,IAAI,MAAM,GAAG,MAAM;IAIlC;;;OAGG;IACH,eAAe,IAAI,MAAM,GAAG,MAAM;IAIlC;;;;OAIG;IACH,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAatC;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAI5C;;;;OAIG;IACH,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAIlD;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAIzB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAI5B,iBAAiB,IAAI,IAAI,EAAE;CAG5B"}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
// SPDX-License-Identifier: MIT
|
|
3
3
|
// Copyright (c) vis.gl contributors
|
|
4
4
|
// Basic data structure of an edge
|
|
5
|
-
import { EDGE_STATE } from "
|
|
5
|
+
import { EDGE_STATE } from "../core/constants.js";
|
|
6
|
+
/** Basic edge data structure */
|
|
6
7
|
export class Edge {
|
|
7
8
|
/** Unique uuid of the edge. */
|
|
8
9
|
id;
|
|
@@ -22,11 +23,7 @@ export class Edge {
|
|
|
22
23
|
state = EDGE_STATE.DEFAULT;
|
|
23
24
|
/**
|
|
24
25
|
* The constructor
|
|
25
|
-
* @param
|
|
26
|
-
* @param {String|Number} options.sourceId - the ID of the source node
|
|
27
|
-
* @param {String|Number} options.targetId - the ID of the target node
|
|
28
|
-
* @param {Boolean} options.directed - whether the edge is directed or not
|
|
29
|
-
* @param {Record<string, unknown>} options.data - origin data reference
|
|
26
|
+
* @param options.id - information about the edge
|
|
30
27
|
*/
|
|
31
28
|
constructor({ id, sourceId, targetId, data, directed = false }) {
|
|
32
29
|
this.id = id;
|
|
@@ -51,22 +48,22 @@ export class Edge {
|
|
|
51
48
|
}
|
|
52
49
|
/**
|
|
53
50
|
* Get the ID of the source node.
|
|
54
|
-
* @return
|
|
51
|
+
* @return the ID of the source node.
|
|
55
52
|
*/
|
|
56
53
|
getSourceNodeId() {
|
|
57
54
|
return this._sourceId;
|
|
58
55
|
}
|
|
59
56
|
/**
|
|
60
57
|
* Get the ID of the target node.
|
|
61
|
-
* @return
|
|
58
|
+
* @return the ID of the target node.
|
|
62
59
|
*/
|
|
63
60
|
getTargetNodeId() {
|
|
64
61
|
return this._targetId;
|
|
65
62
|
}
|
|
66
63
|
/**
|
|
67
64
|
* Return of the value of the selected property key.
|
|
68
|
-
* @param
|
|
69
|
-
* @return
|
|
65
|
+
* @param key - property key.
|
|
66
|
+
* @return - the value of the property.
|
|
70
67
|
*/
|
|
71
68
|
getPropertyValue(key) {
|
|
72
69
|
// try to search the key within this object
|
|
@@ -82,29 +79,29 @@ export class Edge {
|
|
|
82
79
|
}
|
|
83
80
|
/**
|
|
84
81
|
* Set the origin data as a reference.
|
|
85
|
-
* @param
|
|
82
|
+
* @param data - the origin data.
|
|
86
83
|
*/
|
|
87
84
|
setData(data) {
|
|
88
85
|
this._data = data;
|
|
89
86
|
}
|
|
90
87
|
/**
|
|
91
88
|
* Update a data property.
|
|
92
|
-
* @param
|
|
93
|
-
* @param
|
|
89
|
+
* @param key - the key of the property
|
|
90
|
+
* @param value - the value of the property.
|
|
94
91
|
*/
|
|
95
92
|
setDataProperty(key, value) {
|
|
96
93
|
this._data[key] = value;
|
|
97
94
|
}
|
|
98
95
|
/**
|
|
99
96
|
* Set edge state
|
|
100
|
-
* @param
|
|
97
|
+
* @param state - one of EDGE_STATE
|
|
101
98
|
*/
|
|
102
99
|
setState(state) {
|
|
103
100
|
this.state = state;
|
|
104
101
|
}
|
|
105
102
|
/**
|
|
106
103
|
* Get edge state
|
|
107
|
-
* @returns
|
|
104
|
+
* @returns state - one of EDGE_STATE
|
|
108
105
|
*/
|
|
109
106
|
getState() {
|
|
110
107
|
return this.state;
|