@cosmos.gl/graph 2.5.0 → 2.6.1

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 (181) hide show
  1. package/dist/config.d.ts +8 -2
  2. package/dist/helper.d.ts +2 -2
  3. package/dist/index.d.ts +21 -2
  4. package/dist/index.js +4950 -14357
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +1 -1678
  7. package/dist/index.min.js.map +1 -1
  8. package/dist/modules/Clusters/index.d.ts +2 -2
  9. package/dist/modules/Drag/index.d.ts +3 -3
  10. package/dist/modules/ForceCenter/index.d.ts +1 -1
  11. package/dist/modules/ForceGravity/index.d.ts +1 -1
  12. package/dist/modules/ForceLink/index.d.ts +1 -1
  13. package/dist/modules/ForceManyBody/index.d.ts +1 -1
  14. package/dist/modules/ForceManyBodyQuadtree/index.d.ts +1 -1
  15. package/dist/modules/ForceMouse/index.d.ts +1 -1
  16. package/dist/modules/GraphData/index.d.ts +2 -1
  17. package/dist/modules/Lines/index.d.ts +2 -2
  18. package/dist/modules/Points/index.d.ts +5 -2
  19. package/dist/modules/Shared/buffer.d.ts +1 -1
  20. package/dist/modules/Store/index.d.ts +1 -1
  21. package/dist/modules/Zoom/index.d.ts +3 -3
  22. package/dist/modules/core-module.d.ts +5 -5
  23. package/package.json +5 -1
  24. package/.eslintrc +0 -147
  25. package/.github/SECURITY.md +0 -13
  26. package/.github/dco.yml +0 -4
  27. package/.github/workflows/github_pages.yml +0 -54
  28. package/.storybook/main.ts +0 -26
  29. package/.storybook/manager-head.html +0 -1
  30. package/.storybook/manager.ts +0 -14
  31. package/.storybook/preview.ts +0 -29
  32. package/.storybook/style.css +0 -3
  33. package/CHARTER.md +0 -69
  34. package/CODE_OF_CONDUCT.md +0 -178
  35. package/CONTRIBUTING.md +0 -22
  36. package/GOVERNANCE.md +0 -21
  37. package/cosmos-2-0-migration-notes.md +0 -98
  38. package/cosmos_awesome.md +0 -96
  39. package/dist/stories/beginners/basic-set-up/data-gen.d.ts +0 -4
  40. package/dist/stories/beginners/basic-set-up/index.d.ts +0 -5
  41. package/dist/stories/beginners/link-hovering/data-generator.d.ts +0 -19
  42. package/dist/stories/beginners/link-hovering/index.d.ts +0 -5
  43. package/dist/stories/beginners/point-labels/data.d.ts +0 -13
  44. package/dist/stories/beginners/point-labels/index.d.ts +0 -9
  45. package/dist/stories/beginners/point-labels/labels.d.ts +0 -8
  46. package/dist/stories/beginners/quick-start.d.ts +0 -5
  47. package/dist/stories/beginners/remove-points/config.d.ts +0 -2
  48. package/dist/stories/beginners/remove-points/data-gen.d.ts +0 -4
  49. package/dist/stories/beginners/remove-points/index.d.ts +0 -5
  50. package/dist/stories/beginners.stories.d.ts +0 -10
  51. package/dist/stories/clusters/polygon-selection/index.d.ts +0 -6
  52. package/dist/stories/clusters/polygon-selection/polygon.d.ts +0 -20
  53. package/dist/stories/clusters/radial.d.ts +0 -5
  54. package/dist/stories/clusters/with-labels.d.ts +0 -6
  55. package/dist/stories/clusters/worm.d.ts +0 -5
  56. package/dist/stories/clusters.stories.d.ts +0 -9
  57. package/dist/stories/create-cluster-labels.d.ts +0 -4
  58. package/dist/stories/create-cosmos.d.ts +0 -16
  59. package/dist/stories/create-story.d.ts +0 -16
  60. package/dist/stories/experiments/full-mesh.d.ts +0 -5
  61. package/dist/stories/experiments/mesh-with-holes.d.ts +0 -5
  62. package/dist/stories/experiments.stories.d.ts +0 -7
  63. package/dist/stories/generate-mesh-data.d.ts +0 -12
  64. package/dist/stories/geospatial/moscow-metro-stations/index.d.ts +0 -15
  65. package/dist/stories/geospatial/moscow-metro-stations/moscow-metro-coords.d.ts +0 -1
  66. package/dist/stories/geospatial/moscow-metro-stations/point-colors.d.ts +0 -1
  67. package/dist/stories/geospatial.stories.d.ts +0 -6
  68. package/dist/stories/shapes/all-shapes/index.d.ts +0 -5
  69. package/dist/stories/shapes/image-example/index.d.ts +0 -5
  70. package/dist/stories/shapes.stories.d.ts +0 -7
  71. package/logo.svg +0 -3
  72. package/rollup.config.js +0 -70
  73. package/src/config.ts +0 -726
  74. package/src/declaration.d.ts +0 -12
  75. package/src/graph/utils/error-message.ts +0 -23
  76. package/src/helper.ts +0 -74
  77. package/src/index.ts +0 -1608
  78. package/src/modules/Clusters/calculate-centermass.frag +0 -9
  79. package/src/modules/Clusters/calculate-centermass.vert +0 -26
  80. package/src/modules/Clusters/force-cluster.frag +0 -39
  81. package/src/modules/Clusters/index.ts +0 -200
  82. package/src/modules/Drag/index.ts +0 -33
  83. package/src/modules/FPSMonitor/css.ts +0 -53
  84. package/src/modules/FPSMonitor/index.ts +0 -28
  85. package/src/modules/ForceCenter/calculate-centermass.frag +0 -9
  86. package/src/modules/ForceCenter/calculate-centermass.vert +0 -18
  87. package/src/modules/ForceCenter/force-center.frag +0 -27
  88. package/src/modules/ForceCenter/index.ts +0 -104
  89. package/src/modules/ForceGravity/force-gravity.frag +0 -27
  90. package/src/modules/ForceGravity/index.ts +0 -33
  91. package/src/modules/ForceLink/force-spring.ts +0 -73
  92. package/src/modules/ForceLink/index.ts +0 -149
  93. package/src/modules/ForceManyBody/calculate-level.frag +0 -9
  94. package/src/modules/ForceManyBody/calculate-level.vert +0 -25
  95. package/src/modules/ForceManyBody/force-centermass.frag +0 -52
  96. package/src/modules/ForceManyBody/force-level.frag +0 -121
  97. package/src/modules/ForceManyBody/index.ts +0 -223
  98. package/src/modules/ForceManyBody/quadtree-frag-shader.ts +0 -90
  99. package/src/modules/ForceManyBodyQuadtree/calculate-level.frag +0 -9
  100. package/src/modules/ForceManyBodyQuadtree/calculate-level.vert +0 -25
  101. package/src/modules/ForceManyBodyQuadtree/index.ts +0 -157
  102. package/src/modules/ForceManyBodyQuadtree/quadtree-frag-shader.ts +0 -93
  103. package/src/modules/ForceMouse/force-mouse.frag +0 -24
  104. package/src/modules/ForceMouse/index.ts +0 -32
  105. package/src/modules/GraphData/index.ts +0 -383
  106. package/src/modules/Lines/draw-curve-line.frag +0 -46
  107. package/src/modules/Lines/draw-curve-line.vert +0 -194
  108. package/src/modules/Lines/geometry.ts +0 -18
  109. package/src/modules/Lines/hovered-line-index.frag +0 -27
  110. package/src/modules/Lines/hovered-line-index.vert +0 -8
  111. package/src/modules/Lines/index.ts +0 -273
  112. package/src/modules/Points/atlas-utils.ts +0 -137
  113. package/src/modules/Points/drag-point.frag +0 -20
  114. package/src/modules/Points/draw-highlighted.frag +0 -16
  115. package/src/modules/Points/draw-highlighted.vert +0 -86
  116. package/src/modules/Points/draw-points.frag +0 -243
  117. package/src/modules/Points/draw-points.vert +0 -127
  118. package/src/modules/Points/fill-sampled-points.frag +0 -9
  119. package/src/modules/Points/fill-sampled-points.vert +0 -29
  120. package/src/modules/Points/find-hovered-point.frag +0 -9
  121. package/src/modules/Points/find-hovered-point.vert +0 -57
  122. package/src/modules/Points/find-points-on-area-selection.frag +0 -48
  123. package/src/modules/Points/find-points-on-polygon-selection.frag +0 -65
  124. package/src/modules/Points/index.ts +0 -934
  125. package/src/modules/Points/track-positions.frag +0 -18
  126. package/src/modules/Points/update-position.frag +0 -25
  127. package/src/modules/Shared/buffer.ts +0 -37
  128. package/src/modules/Shared/clear.frag +0 -7
  129. package/src/modules/Shared/quad.vert +0 -12
  130. package/src/modules/Store/index.ts +0 -173
  131. package/src/modules/Zoom/index.ts +0 -148
  132. package/src/modules/core-module.ts +0 -28
  133. package/src/stories/1. welcome.mdx +0 -75
  134. package/src/stories/2. configuration.mdx +0 -112
  135. package/src/stories/3. api-reference.mdx +0 -591
  136. package/src/stories/beginners/basic-set-up/data-gen.ts +0 -33
  137. package/src/stories/beginners/basic-set-up/index.ts +0 -163
  138. package/src/stories/beginners/basic-set-up/style.css +0 -35
  139. package/src/stories/beginners/link-hovering/data-generator.ts +0 -198
  140. package/src/stories/beginners/link-hovering/index.ts +0 -61
  141. package/src/stories/beginners/link-hovering/style.css +0 -73
  142. package/src/stories/beginners/point-labels/data.ts +0 -73
  143. package/src/stories/beginners/point-labels/index.ts +0 -65
  144. package/src/stories/beginners/point-labels/labels.ts +0 -46
  145. package/src/stories/beginners/point-labels/style.css +0 -16
  146. package/src/stories/beginners/quick-start.ts +0 -50
  147. package/src/stories/beginners/remove-points/config.ts +0 -25
  148. package/src/stories/beginners/remove-points/data-gen.ts +0 -30
  149. package/src/stories/beginners/remove-points/index.ts +0 -92
  150. package/src/stories/beginners/remove-points/style.css +0 -31
  151. package/src/stories/beginners.stories.ts +0 -117
  152. package/src/stories/clusters/polygon-selection/index.ts +0 -51
  153. package/src/stories/clusters/polygon-selection/polygon.ts +0 -143
  154. package/src/stories/clusters/polygon-selection/style.css +0 -8
  155. package/src/stories/clusters/radial.ts +0 -24
  156. package/src/stories/clusters/with-labels.ts +0 -53
  157. package/src/stories/clusters/worm.ts +0 -40
  158. package/src/stories/clusters.stories.ts +0 -77
  159. package/src/stories/create-cluster-labels.ts +0 -50
  160. package/src/stories/create-cosmos.ts +0 -68
  161. package/src/stories/create-story.ts +0 -51
  162. package/src/stories/experiments/full-mesh.ts +0 -13
  163. package/src/stories/experiments/mesh-with-holes.ts +0 -13
  164. package/src/stories/experiments.stories.ts +0 -43
  165. package/src/stories/generate-mesh-data.ts +0 -125
  166. package/src/stories/geospatial/moscow-metro-stations/index.ts +0 -62
  167. package/src/stories/geospatial/moscow-metro-stations/moscow-metro-coords.ts +0 -1
  168. package/src/stories/geospatial/moscow-metro-stations/point-colors.ts +0 -46
  169. package/src/stories/geospatial/moscow-metro-stations/style.css +0 -30
  170. package/src/stories/geospatial.stories.ts +0 -30
  171. package/src/stories/shapes/all-shapes/index.ts +0 -69
  172. package/src/stories/shapes/image-example/icons/box.png +0 -0
  173. package/src/stories/shapes/image-example/icons/lego.png +0 -0
  174. package/src/stories/shapes/image-example/icons/s.png +0 -0
  175. package/src/stories/shapes/image-example/icons/swift.png +0 -0
  176. package/src/stories/shapes/image-example/icons/toolbox.png +0 -0
  177. package/src/stories/shapes/image-example/index.ts +0 -238
  178. package/src/stories/shapes.stories.ts +0 -37
  179. package/src/variables.ts +0 -68
  180. package/tsconfig.json +0 -41
  181. package/vite.config.ts +0 -54
package/src/config.ts DELETED
@@ -1,726 +0,0 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
- import { D3ZoomEvent } from 'd3-zoom'
3
- import { D3DragEvent } from 'd3-drag'
4
- import {
5
- defaultPointColor,
6
- defaultGreyoutPointOpacity,
7
- defaultGreyoutPointColor,
8
- defaultPointOpacity,
9
- defaultPointSize,
10
- defaultLinkColor,
11
- defaultGreyoutLinkOpacity,
12
- defaultLinkOpacity,
13
- defaultLinkWidth,
14
- defaultBackgroundColor,
15
- defaultConfigValues,
16
- } from '@/graph/variables'
17
- import { isPlainObject } from '@/graph/helper'
18
- import { type Hovered } from '@/graph/modules/Store'
19
-
20
- export interface GraphConfigInterface {
21
- /**
22
- * If set to `false`, the simulation will not run.
23
- * This property will be applied only on component initialization and it
24
- * can't be changed using the `setConfig` method.
25
- * Default value: `true`
26
- */
27
- enableSimulation?: boolean;
28
- /**
29
- * Canvas background color.
30
- * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
31
- * Default value: '#222222'
32
- */
33
- backgroundColor?: string | [number, number, number, number];
34
- /**
35
- * Simulation space size (max 8192).
36
- * Default value: `8192`
37
- */
38
- spaceSize?: number;
39
-
40
- /**
41
- * The default color to use for points when no point colors are provided,
42
- * or if the color value in the array is `undefined` or `null`.
43
- * This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values
44
- * in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255.
45
- * Default value: '#b3b3b3'
46
- */
47
- pointColor?: string | [number, number, number, number];
48
-
49
- /**
50
- * The color to use for points when they are greyed out (when selection is active).
51
- * This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values
52
- * in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255.
53
- *
54
- * If not provided, the color will be the same as the `pointColor`,
55
- * but darkened or lightened depending on the background color.
56
- *
57
- * If `pointGreyoutOpacity` is also defined, it will override the alpha/opacity component
58
- * of this color.
59
- *
60
- * Default value: `undefined`
61
- */
62
- pointGreyoutColor?: string | [number, number, number, number];
63
-
64
- /**
65
- * Opacity value for points when they are greyed out (when selection is active).
66
- * Values range from 0 (completely transparent) to 1 (fully opaque).
67
- *
68
- * If defined, this value will override the alpha/opacity component of `pointGreyoutColor`.
69
- *
70
- * Default value: `undefined`
71
- */
72
- pointGreyoutOpacity?: number;
73
-
74
- /**
75
- * The default size value to use for points when no point sizes are provided or
76
- * if the size value in the array is `undefined` or `null`.
77
- * Default value: `4`
78
- */
79
- pointSize?: number;
80
-
81
- /**
82
- * Universal opacity value applied to all points.
83
- * This value multiplies with individual point alpha values (if set via setPointColors).
84
- * Useful for dynamically controlling opacity of all points without updating individual RGBA arrays.
85
- * Default value: `1.0`
86
- */
87
- pointOpacity?: number;
88
-
89
- /**
90
- * Scale factor for the point size.
91
- * Default value: `1`
92
- */
93
- pointSizeScale?: number;
94
-
95
- /**
96
- * Cursor style to use when hovering over a point
97
- * Default value: `auto`
98
- */
99
- hoveredPointCursor?: string;
100
-
101
- /**
102
- * Cursor style to use when hovering over a link
103
- * Default value: `auto`
104
- */
105
- hoveredLinkCursor?: string;
106
-
107
- /**
108
- * Turns ring rendering around a point on hover on / off
109
- * Default value: `false`
110
- */
111
- renderHoveredPointRing?: boolean;
112
-
113
- /**
114
- * Hovered point ring color hex value.
115
- * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
116
- * Default value: `white`
117
- */
118
- hoveredPointRingColor?: string | [number, number, number, number];
119
-
120
- /**
121
- * Focused point ring color hex value.
122
- * Can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values.
123
- * Default value: `white`
124
- */
125
- focusedPointRingColor?: string | [number, number, number, number];
126
-
127
- /**
128
- * Set focus on a point by index. A ring will be highlighted around the focused point.
129
- * When set to `undefined`, no point is focused.
130
- * Default value: `undefined`
131
- */
132
- focusedPointIndex?: number;
133
-
134
- /**
135
- * Turns link rendering on / off.
136
- * Default value: `true`
137
- */
138
- renderLinks?: boolean;
139
-
140
- /**
141
- * The default color to use for links when no link colors are provided,
142
- * or if the color value in the array is `undefined` or `null`.
143
- * This can be either a hex color string (e.g., '#666666') or an array of RGBA values
144
- * in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255.
145
- * Default value: '#666666'
146
- */
147
- linkColor?: string | [number, number, number, number];
148
-
149
- /**
150
- * Universal opacity value applied to all links.
151
- * This value multiplies with individual link alpha values (if set via setLinkColors).
152
- * Useful for dynamically controlling opacity of all links without updating individual RGBA arrays.
153
- * Default value: `1.0`
154
- */
155
- linkOpacity?: number;
156
-
157
- /**
158
- * Greyed out link opacity value when the selection is active.
159
- * Default value: `0.1`
160
- */
161
- linkGreyoutOpacity?: number;
162
- /**
163
- * The default width value to use for links when no link widths are provided or if the width value in the array is `undefined` or `null`.
164
- * Default value: `1`
165
- */
166
- linkWidth?: number;
167
- /**
168
- * The color to use for links when they are hovered.
169
- * This can be either a hex color string (e.g., '#ff3333') or an array of RGBA values
170
- * in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255.
171
- * Default value: `undefined`
172
- */
173
- hoveredLinkColor?: string | [number, number, number, number];
174
- /**
175
- * Number of pixels to add to the link width when hovered.
176
- * The hovered width is calculated as: originalWidth + hoveredLinkWidthIncrease
177
- * Default value: `5`
178
- */
179
- hoveredLinkWidthIncrease?: number;
180
- /**
181
- * Scale factor for the link width.
182
- * Default value: `1`
183
- */
184
- linkWidthScale?: number;
185
- /**
186
- * Increase or decrease the size of the links when zooming in or out.
187
- * Default value: `false`
188
- */
189
- scaleLinksOnZoom?: boolean;
190
- /**
191
- * If set to true, links are rendered as curved lines.
192
- * Otherwise as straight lines.
193
- * Default value: `false`
194
- */
195
- curvedLinks?: boolean;
196
- /**
197
- * Number of segments in a curved line.
198
- * Default value: `19`.
199
- */
200
- curvedLinkSegments?: number;
201
- /**
202
- * Weight affects the shape of the curve.
203
- * Default value: `0.8`.
204
- */
205
- curvedLinkWeight?: number;
206
- /**
207
- * Defines the position of the control point of the curve on the normal from the centre of the line.
208
- * If set to 1 then the control point is at a distance equal to the length of the line.
209
- * Default value: `0.5`
210
- */
211
- curvedLinkControlPointDistance?: number;
212
- /**
213
- * The default link arrow value that controls whether or not to display link arrows.
214
- * Default value: `false`
215
- */
216
- linkArrows?: boolean;
217
- /**
218
- * Scale factor for the link arrows size.
219
- * Default value: `1`
220
- */
221
- linkArrowsSizeScale?: number;
222
- /**
223
- * The range defines the minimum and maximum link visibility distance in pixels.
224
- * The link will be fully opaque when its length is less than the first number in the array,
225
- * and will have `linkVisibilityMinTransparency` transparency when its length is greater than
226
- * the second number in the array.
227
- * This distance is defined in screen space coordinates and will change as you zoom in and out
228
- * (e.g. links become longer when you zoom in, and shorter when you zoom out).
229
- * Default value: `[50, 150]`
230
- */
231
- linkVisibilityDistanceRange?: number[];
232
- /**
233
- * The transparency value that the link will have when its length reaches
234
- * the maximum link distance value from `linkVisibilityDistanceRange`.
235
- * Default value: `0.25`
236
- */
237
- linkVisibilityMinTransparency?: number;
238
- /**
239
- * Use the classic quadtree algorithm for the Many-Body force.
240
- * This property will be applied only on component initialization and it
241
- * can't be changed using the `setConfig` method.
242
- * Default value: `false`
243
- */
244
- useClassicQuadtree?: boolean;
245
-
246
- /**
247
- * Decay coefficient. Use smaller values if you want the simulation to "cool down" slower.
248
- * Default value: `5000`
249
- */
250
- simulationDecay?: number;
251
- /**
252
- * Gravity force coefficient.
253
- * Default value: `0.25`
254
- */
255
- simulationGravity?: number;
256
- /**
257
- * Centering to center mass force coefficient.
258
- * Default value: `0`
259
- */
260
- simulationCenter?: number;
261
- /**
262
- * Repulsion force coefficient.
263
- * Default value: `1.0`
264
- */
265
- simulationRepulsion?: number;
266
- /**
267
- * Decreases / increases the detalization of the Many-Body force calculations.
268
- * When `useClassicQuadtree` is set to `true`, this property corresponds to the Barnes–Hut approximation criterion.
269
- * Default value: `1.15`
270
- */
271
- simulationRepulsionTheta?: number;
272
- /**
273
- * Barnes–Hut approximation depth.
274
- * Can only be used when `useClassicQuadtree` is set `true`.
275
- * Default value: `12`
276
- */
277
- simulationRepulsionQuadtreeLevels?: number;
278
- /**
279
- * Link spring force coefficient.
280
- * Default value: `1`
281
- */
282
- simulationLinkSpring?: number;
283
- /**
284
- * Minimum link distance.
285
- * Default value: `10`
286
- */
287
- simulationLinkDistance?: number;
288
- /**
289
- * Range of random link distance values.
290
- * Default value: `[1, 1.2]`
291
- */
292
- simulationLinkDistRandomVariationRange?: number[];
293
- /**
294
- * Repulsion coefficient from mouse position.
295
- * The repulsion force is activated by pressing the right mouse button.
296
- * Default value: `2`
297
- */
298
- simulationRepulsionFromMouse?: number;
299
- /**
300
- * Enable or disable the repulsion force from mouse when right-clicking.
301
- * When set to `true`, holding the right mouse button will activate the mouse repulsion force.
302
- * When set to `false`, right-clicking will not trigger any repulsion force.
303
- * Default value: `false`
304
- */
305
- enableRightClickRepulsion?: boolean;
306
- /**
307
- * Friction coefficient.
308
- * Values range from 0 (high friction, stops quickly) to 1 (no friction, keeps moving).
309
- * Default value: `0.85`
310
- */
311
- simulationFriction?: number;
312
- /**
313
- * Cluster coefficient.
314
- * Default value: `0.1`
315
- */
316
- simulationCluster?: number;
317
-
318
- /**
319
- * Callback function that will be called when the simulation starts.
320
- * Default value: `undefined`
321
- */
322
- onSimulationStart?: () => void;
323
- /**
324
- * Callback function that will be called on every simulation tick.
325
- * The value of the first argument `alpha` will decrease over time as the simulation "cools down".
326
- * If there's a point under the mouse pointer, its index will be passed as the second argument
327
- * and position as the third argument:
328
- * `(alpha: number, hoveredIndex: number | undefined, pointPosition: [number, number] | undefined) => void`.
329
- * Default value: `undefined`
330
- */
331
- onSimulationTick?: (
332
- alpha: number, hoveredIndex?: number, pointPosition?: [number, number]
333
- ) => void;
334
- /**
335
- * Callback function that will be called when the simulation stops.
336
- * Default value: `undefined`
337
- */
338
- onSimulationEnd?: () => void;
339
- /**
340
- * Callback function that will be called when the simulation gets paused.
341
- * Default value: `undefined`
342
- */
343
- onSimulationPause?: () => void;
344
- /**
345
- * Callback function that will be called when the simulation is restarted.
346
- * @deprecated Use `onSimulationUnpause` instead. This callback will be removed in a future version.
347
- * Default value: `undefined`
348
- */
349
- onSimulationRestart?: () => void;
350
- /**
351
- * Callback function that will be called when the simulation is unpaused.
352
- * Default value: `undefined`
353
- */
354
- onSimulationUnpause?: () => void;
355
-
356
- /**
357
- * Callback function that will be called on every canvas click.
358
- * If clicked on a point, its index will be passed as the first argument,
359
- * position as the second argument and the corresponding mouse event as the third argument:
360
- * `(index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void`.
361
- * Default value: `undefined`
362
- */
363
- onClick?: (
364
- index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent
365
- ) => void;
366
-
367
- /**
368
- * Callback function that will be called when a point is clicked.
369
- * The point index will be passed as the first argument,
370
- * position as the second argument and the corresponding mouse event as the third argument:
371
- * `(index: number, pointPosition: [number, number], event: MouseEvent) => void`.
372
- * Default value: `undefined`
373
- */
374
- onPointClick?: (
375
- index: number,
376
- pointPosition: [number, number],
377
- event: MouseEvent
378
- ) => void;
379
-
380
- /**
381
- * Callback function that will be called when a link is clicked.
382
- * The link index will be passed as the first argument and the corresponding mouse event as the second argument:
383
- * `(linkIndex: number, event: MouseEvent) => void`.
384
- * Default value: `undefined`
385
- */
386
- onLinkClick?: (
387
- linkIndex: number,
388
- event: MouseEvent
389
- ) => void;
390
-
391
- /**
392
- * Callback function that will be called when the background (empty space) is clicked.
393
- * The mouse event will be passed as the first argument:
394
- * `(event: MouseEvent) => void`.
395
- * Default value: `undefined`
396
- */
397
- onBackgroundClick?: (
398
- event: MouseEvent
399
- ) => void;
400
-
401
- /**
402
- * Callback function that will be called when mouse movement happens.
403
- * If the mouse moves over a point, its index will be passed as the first argument,
404
- * position as the second argument and the corresponding mouse event as the third argument:
405
- * `(index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void`.
406
- * Default value: `undefined`
407
- */
408
- onMouseMove?: (
409
- index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent
410
- ) => void;
411
-
412
- /**
413
- * Callback function that will be called when a point appears under the mouse
414
- * as a result of a mouse event, zooming and panning, or movement of points.
415
- * The point index will be passed as the first argument, position as the second argument
416
- * and the corresponding mouse event or D3's zoom event as the third argument:
417
- * `(index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered>
418
- * | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined) => void`.
419
- * Default value: `undefined`
420
- */
421
- onPointMouseOver?: (
422
- index: number,
423
- pointPosition: [number, number],
424
- event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined
425
- ) => void;
426
-
427
- /**
428
- * Callback function that will be called when a point is no longer underneath
429
- * the mouse pointer because of a mouse event, zoom/pan event, or movement of points.
430
- * The corresponding mouse event or D3's zoom event will be passed as the first argument:
431
- * `(event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void`.
432
- * Default value: `undefined`
433
- */
434
- onPointMouseOut?: (event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void;
435
-
436
- /**
437
- * Callback function that will be called when the mouse moves over a link.
438
- * The link index will be passed as the first argument:
439
- * `(linkIndex: number) => void`.
440
- * Default value: `undefined`
441
- */
442
- onLinkMouseOver?: (linkIndex: number) => void;
443
-
444
- /**
445
- * Callback function that will be called when the mouse moves out of a link.
446
- * The event will be passed as the first argument:
447
- * `(event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void`.
448
- * Default value: `undefined`
449
- */
450
- onLinkMouseOut?: (event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void;
451
-
452
- /**
453
- * Callback function that will be called when zooming or panning starts.
454
- * First argument is a D3 Zoom Event and second indicates whether
455
- * the event has been initiated by a user interaction (e.g. a mouse event):
456
- * `(event: D3ZoomEvent, userDriven: boolean) => void`.
457
- * Default value: `undefined`
458
- */
459
- onZoomStart?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
460
-
461
- /**
462
- * Callback function that will be called continuously during zooming or panning.
463
- * First argument is a D3 Zoom Event and second indicates whether
464
- * the event has been initiated by a user interaction (e.g. a mouse event):
465
- * `(event: D3ZoomEvent, userDriven: boolean) => void`.
466
- * Default value: `undefined`
467
- */
468
- onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
469
-
470
- /**
471
- * Callback function that will be called when zooming or panning ends.
472
- * First argument is a D3 Zoom Event and second indicates whether
473
- * the event has been initiated by a user interaction (e.g. a mouse event):
474
- * `(event: D3ZoomEvent, userDriven: boolean) => void`.
475
- * Default value: `undefined`
476
- */
477
- onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
478
-
479
- /**
480
- * Callback function that will be called when dragging starts.
481
- * First argument is a D3 Drag Event:
482
- * `(event: D3DragEvent) => void`.
483
- * Default value: `undefined`
484
- */
485
- onDragStart?: (e: D3DragEvent<HTMLCanvasElement, undefined, Hovered>) => void;
486
-
487
- /**
488
- * Callback function that will be called continuously during dragging.
489
- * First argument is a D3 Drag Event:
490
- * `(event: D3DragEvent) => void`.
491
- * Default value: `undefined`
492
- */
493
- onDrag?: (e: D3DragEvent<HTMLCanvasElement, undefined, Hovered>) => void;
494
-
495
- /**
496
- * Callback function that will be called when dragging ends.
497
- * First argument is a D3 Drag Event:
498
- * `(event: D3DragEvent) => void`.
499
- * Default value: `undefined`
500
- */
501
- onDragEnd?: (e: D3DragEvent<HTMLCanvasElement, undefined, Hovered>) => void;
502
-
503
- /**
504
- * Show WebGL performance monitor.
505
- * Default value: `false`
506
- */
507
- showFPSMonitor?: boolean;
508
- /**
509
- * Canvas pixel ratio.
510
- * Default value: `2`
511
- */
512
- pixelRatio?: number;
513
- /**
514
- * Increase or decrease the size of the points when zooming in or out.
515
- * Default value: `false`
516
- */
517
- scalePointsOnZoom?: boolean;
518
- /**
519
- * Initial zoom level. Can be set once during graph initialization.
520
- * If set, `fitViewOnInit` value will be ignored.
521
- * Default value: `undefined`
522
- */
523
- initialZoomLevel?: number;
524
- /**
525
- * Enables or disables zooming in and out.
526
- * Default: `true`
527
- */
528
- enableZoom?: boolean;
529
- /**
530
- * Controls whether the simulation remains active during zoom operations.
531
- * When set to `true`, the simulation continues running while zooming.
532
- * When set to `false`, the simulation pauses during zoom operations.
533
- * Default value: `false`
534
- */
535
- enableSimulationDuringZoom?: boolean;
536
- /**
537
- * Enables or disables dragging of points in the graph.
538
- * Default value: `false`
539
- */
540
- enableDrag?: boolean;
541
- /**
542
- * Whether to center and zoom the view to fit all points in the scene on initialization or not.
543
- * Ignored if `initialZoomLevel` is set.
544
- * Default: `true`
545
- */
546
- fitViewOnInit?: boolean;
547
- /**
548
- * Delay in milliseconds before fitting the view when `fitViewOnInit` is enabled.
549
- * Useful if you want the layout to stabilize a bit before fitting.
550
- * Default: `250`
551
- */
552
- fitViewDelay?: number;
553
- /**
554
- * Padding to apply when fitting the view to show all points.
555
- * This value is added to the calculated bounding box to provide some extra space around the points.
556
- * This is used when the `fitViewOnInit` option is enabled.
557
- * Default: `0.1`
558
- */
559
- fitViewPadding?: number;
560
- /**
561
- * Duration in milliseconds for fitting the view to show all points when fitViewOnInit is enabled.
562
- * Default: `250`
563
- */
564
- fitViewDuration?: number;
565
- /**
566
- * When `fitViewOnInit` is set to `true`, fits the view to show the points within a rectangle
567
- * defined by its two corner coordinates `[[left, bottom], [right, top]]` in the scene space.
568
- * Default: `undefined`
569
- */
570
- fitViewByPointsInRect?: [[number, number], [number, number]] | [number, number][];
571
- /**
572
- * When `fitViewOnInit` is set to `true`, fits the view to show only the specified points by their indices.
573
- * Takes precedence over `fitViewByPointsInRect` when both are provided.
574
- * Default: `undefined`
575
- */
576
- fitViewByPointIndices?: number[];
577
- /**
578
- * Providing a `randomSeed` value allows you to control
579
- * the randomness of the layout across different simulation runs.
580
- * It is useful when you want the graph to always look the same on same datasets.
581
- * This property will be applied only on component initialization and it
582
- * can't be changed using the `setConfig` method.
583
- * Default value: undefined
584
- */
585
- randomSeed?: number | string;
586
- /**
587
- * Point sampling distance in pixels between neighboring points when calling the `getSampledPointPositionsMap` method.
588
- * This parameter determines how many points will be included in the sample.
589
- * Default value: `150`
590
- */
591
- pointSamplingDistance?: number;
592
- /**
593
- * Controls automatic position adjustment of points in the visible space.
594
- *
595
- * When `undefined` (default):
596
- * - If simulation is disabled (`enableSimulation: false`), points will be automatically
597
- * repositioned to fit within the visible space
598
- * - If simulation is enabled, points will not be rescaled
599
- *
600
- * When explicitly set:
601
- * - `true`: Forces points positions to be rescaled
602
- * - `false`: Forces points positions to not be rescaled
603
- */
604
- rescalePositions?: boolean | undefined;
605
- /**
606
- * Controls the text shown in the bottom right corner.
607
- * - When a non-empty string is provided: Displays the string as HTML
608
- * - When empty string or not provided: No text is displayed
609
- */
610
- attribution?: string;
611
- }
612
-
613
- export class GraphConfig implements GraphConfigInterface {
614
- public enableSimulation = defaultConfigValues.enableSimulation
615
- public backgroundColor = defaultBackgroundColor
616
- public spaceSize = defaultConfigValues.spaceSize
617
- public pointColor = defaultPointColor
618
- public pointGreyoutOpacity = defaultGreyoutPointOpacity
619
- public pointGreyoutColor = defaultGreyoutPointColor
620
- public pointSize = defaultPointSize
621
- public pointOpacity = defaultPointOpacity
622
- public pointSizeScale = defaultConfigValues.pointSizeScale
623
- public hoveredPointCursor = defaultConfigValues.hoveredPointCursor
624
- public hoveredLinkCursor = defaultConfigValues.hoveredLinkCursor
625
- public renderHoveredPointRing = defaultConfigValues.renderHoveredPointRing
626
- public hoveredPointRingColor = defaultConfigValues.hoveredPointRingColor
627
- public focusedPointRingColor = defaultConfigValues.focusedPointRingColor
628
- public focusedPointIndex = defaultConfigValues.focusedPointIndex
629
- public linkColor = defaultLinkColor
630
- public linkOpacity = defaultLinkOpacity
631
- public linkGreyoutOpacity = defaultGreyoutLinkOpacity
632
- public linkWidth = defaultLinkWidth
633
- public linkWidthScale = defaultConfigValues.linkWidthScale
634
- public hoveredLinkColor = defaultConfigValues.hoveredLinkColor
635
- public hoveredLinkWidthIncrease = defaultConfigValues.hoveredLinkWidthIncrease
636
- public renderLinks = defaultConfigValues.renderLinks
637
- public curvedLinks = defaultConfigValues.curvedLinks
638
- public curvedLinkSegments = defaultConfigValues.curvedLinkSegments
639
- public curvedLinkWeight = defaultConfigValues.curvedLinkWeight
640
- public curvedLinkControlPointDistance = defaultConfigValues.curvedLinkControlPointDistance
641
- public linkArrows = defaultConfigValues.linkArrows
642
- public linkArrowsSizeScale = defaultConfigValues.linkArrowsSizeScale
643
- public scaleLinksOnZoom = defaultConfigValues.scaleLinksOnZoom
644
- public linkVisibilityDistanceRange = defaultConfigValues.linkVisibilityDistanceRange
645
- public linkVisibilityMinTransparency = defaultConfigValues.linkVisibilityMinTransparency
646
- public useClassicQuadtree = defaultConfigValues.useClassicQuadtree
647
-
648
- public simulationDecay = defaultConfigValues.simulation.decay
649
- public simulationGravity = defaultConfigValues.simulation.gravity
650
- public simulationCenter = defaultConfigValues.simulation.center
651
- public simulationRepulsion = defaultConfigValues.simulation.repulsion
652
- public simulationRepulsionTheta = defaultConfigValues.simulation.repulsionTheta
653
- public simulationRepulsionQuadtreeLevels = defaultConfigValues.simulation.repulsionQuadtreeLevels
654
- public simulationLinkSpring = defaultConfigValues.simulation.linkSpring
655
- public simulationLinkDistance = defaultConfigValues.simulation.linkDistance
656
- public simulationLinkDistRandomVariationRange = defaultConfigValues.simulation.linkDistRandomVariationRange
657
- public simulationRepulsionFromMouse = defaultConfigValues.simulation.repulsionFromMouse
658
- public enableRightClickRepulsion = defaultConfigValues.enableRightClickRepulsion
659
- public simulationFriction = defaultConfigValues.simulation.friction
660
- public simulationCluster = defaultConfigValues.simulation.cluster
661
-
662
- public onSimulationStart: GraphConfigInterface['onSimulationStart'] = undefined
663
- public onSimulationTick: GraphConfigInterface['onSimulationTick'] = undefined
664
- public onSimulationEnd: GraphConfigInterface['onSimulationEnd'] = undefined
665
- public onSimulationPause: GraphConfigInterface['onSimulationPause'] = undefined
666
- public onSimulationRestart: GraphConfigInterface['onSimulationRestart'] = undefined
667
- public onSimulationUnpause: GraphConfigInterface['onSimulationUnpause'] = undefined
668
-
669
- public onClick: GraphConfigInterface['onClick'] = undefined
670
- public onPointClick: GraphConfigInterface['onPointClick'] = undefined
671
- public onLinkClick: GraphConfigInterface['onLinkClick'] = undefined
672
- public onBackgroundClick: GraphConfigInterface['onBackgroundClick'] = undefined
673
- public onMouseMove: GraphConfigInterface['onMouseMove'] = undefined
674
- public onPointMouseOver: GraphConfigInterface['onPointMouseOver'] = undefined
675
- public onPointMouseOut: GraphConfigInterface['onPointMouseOut'] = undefined
676
- public onLinkMouseOver: GraphConfigInterface['onLinkMouseOver'] = undefined
677
- public onLinkMouseOut: GraphConfigInterface['onLinkMouseOut'] = undefined
678
- public onZoomStart: GraphConfigInterface['onZoomStart'] = undefined
679
- public onZoom: GraphConfigInterface['onZoom'] = undefined
680
- public onZoomEnd: GraphConfigInterface['onZoomEnd'] = undefined
681
- public onDragStart: GraphConfigInterface['onDragStart'] = undefined
682
- public onDrag: GraphConfigInterface['onDrag'] = undefined
683
- public onDragEnd: GraphConfigInterface['onDragEnd'] = undefined
684
-
685
- public showFPSMonitor = defaultConfigValues.showFPSMonitor
686
-
687
- public pixelRatio = defaultConfigValues.pixelRatio
688
-
689
- public scalePointsOnZoom = defaultConfigValues.scalePointsOnZoom
690
- public initialZoomLevel = undefined
691
- public enableZoom = defaultConfigValues.enableZoom
692
- public enableSimulationDuringZoom = defaultConfigValues.enableSimulationDuringZoom
693
- public enableDrag = defaultConfigValues.enableDrag
694
- public fitViewOnInit = defaultConfigValues.fitViewOnInit
695
- public fitViewDelay = defaultConfigValues.fitViewDelay
696
- public fitViewPadding = defaultConfigValues.fitViewPadding
697
- public fitViewDuration = defaultConfigValues.fitViewDuration
698
- public fitViewByPointsInRect = undefined
699
- public fitViewByPointIndices = undefined
700
-
701
- public randomSeed = undefined
702
- public pointSamplingDistance = defaultConfigValues.pointSamplingDistance
703
- public attribution = defaultConfigValues.attribution
704
- public rescalePositions = defaultConfigValues.rescalePositions
705
-
706
- public init (config: GraphConfigInterface): void {
707
- (Object.keys(config) as (keyof GraphConfigInterface)[])
708
- .forEach(configParameter => {
709
- this.deepMergeConfig(this.getConfig(), config, configParameter)
710
- })
711
- }
712
-
713
- public deepMergeConfig <T> (current: T, next: T, key: keyof T): void {
714
- if (isPlainObject(current[key]) && isPlainObject(next[key])) {
715
- // eslint-disable-next-line @typescript-eslint/ban-types
716
- (Object.keys(next[key] as Object) as (keyof T[keyof T])[])
717
- .forEach(configParameter => {
718
- this.deepMergeConfig(current[key], next[key], configParameter)
719
- })
720
- } else current[key] = next[key]
721
- }
722
-
723
- private getConfig (): GraphConfigInterface {
724
- return this
725
- }
726
- }