@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.
Files changed (118) hide show
  1. package/LICENSE +1 -1
  2. package/dist/core/graph-engine.d.ts +16 -7
  3. package/dist/core/graph-engine.d.ts.map +1 -1
  4. package/dist/core/graph-engine.js +13 -4
  5. package/dist/core/graph-layout.d.ts +69 -0
  6. package/dist/core/graph-layout.d.ts.map +1 -0
  7. package/dist/core/{base-layout.js → graph-layout.js} +63 -80
  8. package/dist/core/interaction-manager.d.ts +1 -1
  9. package/dist/core/interaction-manager.d.ts.map +1 -1
  10. package/dist/{core → graph}/edge.d.ts +18 -17
  11. package/dist/graph/edge.d.ts.map +1 -0
  12. package/dist/{core → graph}/edge.js +12 -15
  13. package/dist/{core → graph}/graph.d.ts +34 -31
  14. package/dist/graph/graph.d.ts.map +1 -0
  15. package/dist/{core → graph}/graph.js +43 -36
  16. package/dist/{core → graph}/node.d.ts +20 -20
  17. package/dist/graph/node.d.ts.map +1 -0
  18. package/dist/{core → graph}/node.js +16 -18
  19. package/dist/index.cjs +1181 -434
  20. package/dist/index.cjs.map +4 -4
  21. package/dist/index.d.ts +16 -14
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.js +19 -18
  24. package/dist/layers/graph-layer.d.ts +45 -5
  25. package/dist/layers/graph-layer.d.ts.map +1 -1
  26. package/dist/layers/graph-layer.js +80 -38
  27. package/dist/layers/node-layers/{path-rounded-rectange-layer.d.ts → path-rounded-rectangle-layer.d.ts} +1 -1
  28. package/dist/layers/node-layers/path-rounded-rectangle-layer.d.ts.map +1 -0
  29. package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts +1 -1
  30. package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts.map +1 -1
  31. package/dist/layers/node-layers/rounded-rectangle-layer-fragment.js +1 -3
  32. package/dist/layers/node-layers/rounded-rectangle-layer.d.ts +12 -3
  33. package/dist/layers/node-layers/rounded-rectangle-layer.d.ts.map +1 -1
  34. package/dist/layers/node-layers/rounded-rectangle-layer.js +25 -11
  35. package/dist/layouts/d3-force/d3-force-layout.d.ts +12 -3
  36. package/dist/layouts/d3-force/d3-force-layout.d.ts.map +1 -1
  37. package/dist/layouts/d3-force/d3-force-layout.js +11 -11
  38. package/dist/layouts/d3-force/worker.d.ts.map +1 -1
  39. package/dist/layouts/experimental/force-multi-graph-layout.d.ts +43 -0
  40. package/dist/layouts/experimental/force-multi-graph-layout.d.ts.map +1 -0
  41. package/dist/layouts/experimental/force-multi-graph-layout.js +226 -0
  42. package/dist/layouts/experimental/hive-plot-layout.d.ts +34 -0
  43. package/dist/layouts/experimental/hive-plot-layout.d.ts.map +1 -0
  44. package/dist/layouts/experimental/hive-plot-layout.js +142 -0
  45. package/dist/layouts/experimental/radial-layout.d.ts +28 -0
  46. package/dist/layouts/experimental/radial-layout.d.ts.map +1 -0
  47. package/dist/layouts/experimental/radial-layout.js +164 -0
  48. package/dist/layouts/gpu-force/gpu-force-layout.d.ts +15 -3
  49. package/dist/layouts/gpu-force/gpu-force-layout.d.ts.map +1 -1
  50. package/dist/layouts/gpu-force/gpu-force-layout.js +20 -18
  51. package/dist/layouts/gpu-force/worker.d.ts.map +1 -1
  52. package/dist/layouts/simple-layout.d.ts +42 -0
  53. package/dist/layouts/simple-layout.d.ts.map +1 -0
  54. package/dist/layouts/{simple-layout/simple-layout.js → simple-layout.js} +8 -7
  55. package/dist/loaders/create-graph.d.ts +13 -0
  56. package/dist/loaders/create-graph.d.ts.map +1 -0
  57. package/dist/{utils → loaders}/create-graph.js +9 -4
  58. package/dist/loaders/edge-parsers.d.ts +2 -6
  59. package/dist/loaders/edge-parsers.d.ts.map +1 -1
  60. package/dist/loaders/json-loader.js +1 -1
  61. package/dist/loaders/node-parsers.d.ts +2 -3
  62. package/dist/loaders/node-parsers.d.ts.map +1 -1
  63. package/dist/loaders/simple-json-graph-loader.d.ts +12 -0
  64. package/dist/loaders/simple-json-graph-loader.d.ts.map +1 -0
  65. package/dist/loaders/simple-json-graph-loader.js +20 -0
  66. package/dist/loaders/table-graph-loader.d.ts +17 -0
  67. package/dist/loaders/table-graph-loader.d.ts.map +1 -0
  68. package/dist/loaders/table-graph-loader.js +91 -0
  69. package/dist/utils/log.d.ts +1 -1
  70. package/dist/utils/log.d.ts.map +1 -1
  71. package/dist/utils/log.js +3 -3
  72. package/dist/widgets/long-press-button.d.ts +13 -0
  73. package/dist/widgets/long-press-button.d.ts.map +1 -0
  74. package/dist/widgets/long-press-button.js +31 -0
  75. package/dist/widgets/view-control-widget.d.ts +78 -0
  76. package/dist/widgets/view-control-widget.d.ts.map +1 -0
  77. package/dist/widgets/view-control-widget.js +194 -0
  78. package/package.json +8 -6
  79. package/src/core/graph-engine.ts +30 -10
  80. package/src/core/graph-layout.ts +146 -0
  81. package/src/core/interaction-manager.ts +2 -2
  82. package/src/{core → graph}/edge.ts +19 -17
  83. package/src/{core → graph}/graph.ts +51 -36
  84. package/src/{core → graph}/node.ts +21 -20
  85. package/src/index.ts +28 -28
  86. package/src/layers/graph-layer.ts +133 -46
  87. package/src/layers/node-layers/rounded-rectangle-layer-fragment.ts +1 -3
  88. package/src/layers/node-layers/rounded-rectangle-layer.ts +34 -10
  89. package/src/layouts/d3-force/d3-force-layout.ts +21 -11
  90. package/src/layouts/experimental/force-multi-graph-layout.ts +268 -0
  91. package/src/layouts/experimental/hive-plot-layout.ts +182 -0
  92. package/src/layouts/experimental/radial-layout.ts +210 -0
  93. package/src/layouts/gpu-force/gpu-force-layout.ts +32 -17
  94. package/src/layouts/{simple-layout/simple-layout.ts → simple-layout.ts} +34 -19
  95. package/src/{utils → loaders}/create-graph.ts +9 -4
  96. package/src/loaders/edge-parsers.ts +2 -1
  97. package/src/loaders/json-loader.ts +1 -1
  98. package/src/loaders/node-parsers.ts +2 -1
  99. package/src/loaders/simple-json-graph-loader.ts +28 -0
  100. package/src/loaders/table-graph-loader.ts +124 -0
  101. package/src/utils/log.ts +3 -3
  102. package/src/widgets/long-press-button.tsx +50 -0
  103. package/src/widgets/view-control-widget.tsx +337 -0
  104. package/dist/core/base-layout.d.ts +0 -72
  105. package/dist/core/base-layout.d.ts.map +0 -1
  106. package/dist/core/edge.d.ts.map +0 -1
  107. package/dist/core/graph.d.ts.map +0 -1
  108. package/dist/core/node.d.ts.map +0 -1
  109. package/dist/layers/node-layers/path-rounded-rectange-layer.d.ts.map +0 -1
  110. package/dist/layouts/simple-layout/simple-layout.d.ts +0 -23
  111. package/dist/layouts/simple-layout/simple-layout.d.ts.map +0 -1
  112. package/dist/utils/create-graph.d.ts +0 -9
  113. package/dist/utils/create-graph.d.ts.map +0 -1
  114. package/src/core/base-layout.ts +0 -154
  115. /package/dist/layers/node-layers/{path-rounded-rectange-layer.js → path-rounded-rectangle-layer.js} +0 -0
  116. /package/src/layers/node-layers/{path-rounded-rectange-layer.ts → path-rounded-rectangle-layer.ts} +0 -0
  117. /package/src/layouts/d3-force/{worker.ts → worker.js} +0 -0
  118. /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 react-graph-layers contributors
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 { BaseLayout } from "./base-layout.js";
2
- import { Edge } from "./edge.js";
3
- import { Graph } from "./graph.js";
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(graph: Graph, layout: BaseLayout);
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: any) => [number, number];
15
- getEdgePosition: (edge: any) => {
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: () => string;
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,UAAU,EAAC,yBAAsB;AAEzC,OAAO,EAAC,IAAI,EAAC,kBAAe;AAC5B,OAAO,EAAC,KAAK,EAAC,mBAAgB;AAG9B,qBAAa,WAAY,SAAQ,WAAW;IAC1C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAa;IACrC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmD;IAC1E,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,sBAAsB,CAAS;gBAE3B,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU;IAM5C,cAAc;IAEd,QAAQ,QAAO,IAAI,EAAE,CAMnB;IAEF,QAAQ,QAK6B,IAAI,EAAE,CACzC;IAEF,eAAe,kCAAgD;IAE/D,eAAe;;;;;MAAgD;IAE/D,eAAe,eAA6B;IAE5C,mBAAmB,eAA8B;IAEjD,cAAc,eAA4B;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
+ {"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
- // Graph engine controls the graph data and layout calculation
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(graph, layout) {
14
+ constructor(props, layout) {
13
15
  super();
14
- this._graph = graph;
15
- this._layout = layout;
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, LAYOUT_STATE } from "./constants.js";
6
- /**
7
- * All the layout classes are extended from this base layout class.
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 = 'BaseLayout';
9
+ _name = 'GraphLayout';
12
10
  /** Extra configuration options of the layout. */
13
11
  _options;
14
12
  version = 0;
15
- state = LAYOUT_STATE.INIT;
13
+ state = 'INIT';
16
14
  /**
17
- * Constructor of BaseLayout
18
- * @param {Object} options extra configuration options of the layout
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 {Object} layout The layout to be compared.
83
- * @return {Bool} True if the layout is the same as itself.
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 BaseLayout)) {
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
- // first time to pass the graph data into this layout
34
+ /** first time to pass the graph data into this layout */
93
35
  initializeGraph(graph) { }
94
- // update the existing graph
36
+ /** update the existing graph */
95
37
  updateGraph(graph) { }
96
- // start the layout calculation
38
+ /** start the layout calculation */
97
39
  start() { }
98
- // update the layout calculation
40
+ /** update the layout calculation */
99
41
  update() { }
100
- // resume the layout calculation
42
+ /** resume the layout calculation */
101
43
  resume() { }
102
- // stop the layout calculation
44
+ /** stop the layout calculation */
103
45
  stop() { }
104
- // access the position of the node in the layout
46
+ /** access the position of the node in the layout */
105
47
  getNodePosition(node) {
106
48
  return [0, 0];
107
49
  }
108
- // access the layout information of the edge
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 {Object} node Node to be locked
120
- * @param {Number} x x coordinate
121
- * @param {Number} y y coordinate
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,5 +1,5 @@
1
+ import { Node } from "../graph/node.js";
1
2
  import { GraphEngine } from "./graph-engine.js";
2
- import { Node } from "./node.js";
3
3
  interface EventMap {
4
4
  onClick?: (info: unknown, event: Event) => void;
5
5
  onHover?: (info: unknown) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"interaction-manager.d.ts","sourceRoot":"","sources":["../../src/core/interaction-manager.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,WAAW,EAAC,0BAAuB;AAC3C,OAAO,EAAC,IAAI,EAAC,kBAAe;AA8B5B,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
+ {"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: Record<string, unknown>;
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 {String|Number} options.id - the unique ID of the edge
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 {String|Number} the ID of the source node.
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 {String|Number} the ID of the target node.
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 {String} key - property key.
58
- * @return {Any} - the value of the property.
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 {Object} data - the origin data.
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 {String} key - the key of the property
69
- * @param {Any} value - the value of the property.
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 {String} state - one of EDGE_STATE
76
+ * @param state - one of EDGE_STATE
75
77
  */
76
78
  setState(state: string): void;
77
79
  /**
78
80
  * Get edge state
79
- * @returns {string} state - one of EDGE_STATE
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 "./constants.js";
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 {String|Number} options.id - the unique ID of the edge
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 {String|Number} the ID of the source node.
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 {String|Number} the ID of the target node.
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 {String} key - property key.
69
- * @return {Any} - the value of the property.
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 {Object} data - the origin data.
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 {String} key - the key of the property
93
- * @param {Any} value - the value of the property.
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 {String} state - one of EDGE_STATE
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 {string} state - one of EDGE_STATE
104
+ * @returns state - one of EDGE_STATE
108
105
  */
109
106
  getState() {
110
107
  return this.state;