@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
@@ -1,383 +0,0 @@
1
- import { getRgbaColor, isNumber } from '@/graph/helper'
2
- import { GraphConfig } from '@/graph/config'
3
-
4
- export enum PointShape {
5
- Circle = 0,
6
- Square = 1,
7
- Triangle = 2,
8
- Diamond = 3,
9
- Pentagon = 4,
10
- Hexagon = 5,
11
- Star = 6,
12
- Cross = 7,
13
- None = 8
14
- }
15
-
16
- export class GraphData {
17
- public inputPointPositions: Float32Array | undefined
18
- public inputPointColors: Float32Array | undefined
19
- public inputPointSizes: Float32Array | undefined
20
- public inputPointShapes: Float32Array | undefined
21
- public inputImageData: ImageData[] | undefined
22
- public inputPointImageIndices: Float32Array | undefined
23
- public inputPointImageSizes: Float32Array | undefined
24
- public inputLinkColors: Float32Array | undefined
25
- public inputLinkWidths: Float32Array | undefined
26
- public inputLinkStrength: Float32Array | undefined
27
- public inputPointClusters: (number | undefined)[] | undefined
28
- public inputClusterPositions: (number | undefined)[] | undefined
29
- public inputClusterStrength: Float32Array | undefined
30
-
31
- public pointPositions: Float32Array | undefined
32
- public pointColors: Float32Array | undefined
33
- public pointSizes: Float32Array | undefined
34
- public pointShapes: Float32Array | undefined
35
- public pointImageIndices: Float32Array | undefined
36
- public pointImageSizes: Float32Array | undefined
37
-
38
- public inputLinks: Float32Array | undefined
39
- public links: Float32Array | undefined
40
- public linkColors: Float32Array | undefined
41
- public linkWidths: Float32Array | undefined
42
- public linkArrowsBoolean: boolean[] | undefined
43
- public linkArrows: number[] | undefined
44
- public linkStrength: Float32Array | undefined
45
-
46
- public pointClusters: (number | undefined)[] | undefined
47
- public clusterPositions: (number | undefined)[] | undefined
48
- public clusterStrength: Float32Array | undefined
49
-
50
- /**
51
- * Each inner array of `sourceIndexToTargetIndices` and `targetIndexToSourceIndices` contains pairs where:
52
- * - The first value is the target/source index in the point array.
53
- * - The second value is the link index in the array of links.
54
- */
55
- public sourceIndexToTargetIndices: ([number, number][] | undefined)[] | undefined
56
- public targetIndexToSourceIndices: ([number, number][] | undefined)[] | undefined
57
-
58
- public degree: number[] | undefined
59
- public inDegree: number[] | undefined
60
- public outDegree: number[] | undefined
61
-
62
- private _config: GraphConfig
63
-
64
- public constructor (config: GraphConfig) {
65
- this._config = config
66
- }
67
-
68
- public get pointsNumber (): number | undefined {
69
- return this.pointPositions && this.pointPositions.length / 2
70
- }
71
-
72
- public get linksNumber (): number | undefined {
73
- return this.links && this.links.length / 2
74
- }
75
-
76
- public updatePoints (): void {
77
- this.pointPositions = this.inputPointPositions
78
- }
79
-
80
- /**
81
- * Updates the point colors based on the input data or default config value.
82
- */
83
- public updatePointColor (): void {
84
- if (this.pointsNumber === undefined) {
85
- this.pointColors = undefined
86
- return
87
- }
88
-
89
- // Sets point colors to default values from config if the input is missing or does not match input points number.
90
- const defaultRgba = getRgbaColor(this._config.pointColor)
91
- if (this.inputPointColors === undefined || this.inputPointColors.length / 4 !== this.pointsNumber) {
92
- this.pointColors = new Float32Array(this.pointsNumber * 4)
93
- for (let i = 0; i < this.pointColors.length / 4; i++) {
94
- this.pointColors[i * 4] = defaultRgba[0]
95
- this.pointColors[i * 4 + 1] = defaultRgba[1]
96
- this.pointColors[i * 4 + 2] = defaultRgba[2]
97
- this.pointColors[i * 4 + 3] = defaultRgba[3]
98
- }
99
- } else {
100
- this.pointColors = this.inputPointColors
101
- for (let i = 0; i < this.pointColors.length / 4; i++) {
102
- if (!isNumber(this.pointColors[i * 4])) this.pointColors[i * 4] = defaultRgba[0]
103
- if (!isNumber(this.pointColors[i * 4 + 1])) this.pointColors[i * 4 + 1] = defaultRgba[1]
104
- if (!isNumber(this.pointColors[i * 4 + 2])) this.pointColors[i * 4 + 2] = defaultRgba[2]
105
- if (!isNumber(this.pointColors[i * 4 + 3])) this.pointColors[i * 4 + 3] = defaultRgba[3]
106
- }
107
- }
108
- }
109
-
110
- /**
111
- * Updates the point sizes based on the input data or default config value.
112
- */
113
- public updatePointSize (): void {
114
- if (this.pointsNumber === undefined) {
115
- this.pointSizes = undefined
116
- return
117
- }
118
-
119
- // Sets point sizes to default values from config if the input is missing or does not match input points number.
120
- if (this.inputPointSizes === undefined || this.inputPointSizes.length !== this.pointsNumber) {
121
- this.pointSizes = new Float32Array(this.pointsNumber).fill(this._config.pointSize)
122
- } else {
123
- this.pointSizes = this.inputPointSizes
124
- for (let i = 0; i < this.pointSizes.length; i++) {
125
- if (!isNumber(this.pointSizes[i])) {
126
- this.pointSizes[i] = this._config.pointSize
127
- }
128
- }
129
- }
130
- }
131
-
132
- /**
133
- * Updates the point shapes based on the input data or default shape.
134
- * Default behavior: Circle (0).
135
- * Images are rendered above shapes.
136
- */
137
- public updatePointShape (): void {
138
- if (this.pointsNumber === undefined) {
139
- this.pointShapes = undefined
140
- return
141
- }
142
-
143
- // Determine default shape: Circle
144
- const defaultShape = PointShape.Circle
145
-
146
- // Sets point shapes to default values if the input is missing or does not match input points number.
147
- if (this.inputPointShapes === undefined || this.inputPointShapes.length !== this.pointsNumber) {
148
- this.pointShapes = new Float32Array(this.pointsNumber).fill(defaultShape)
149
- } else {
150
- this.pointShapes = new Float32Array(this.inputPointShapes)
151
- const pointShapes = this.pointShapes
152
- for (let i = 0; i < pointShapes.length; i++) {
153
- const shape = pointShapes[i]
154
- if (shape == null || !isNumber(shape) || shape < 0 || shape > 8) {
155
- pointShapes[i] = defaultShape
156
- }
157
- }
158
- }
159
- }
160
-
161
- /**
162
- * Updates the point image indices based on the input data or default value (-1 for no image).
163
- */
164
- public updatePointImageIndices (): void {
165
- if (this.pointsNumber === undefined) {
166
- this.pointImageIndices = undefined
167
- return
168
- }
169
-
170
- // Sets point image indices to -1 if input is missing or doesn't match points count
171
- if (this.inputPointImageIndices === undefined || this.inputPointImageIndices.length !== this.pointsNumber) {
172
- this.pointImageIndices = new Float32Array(this.pointsNumber).fill(-1)
173
- } else {
174
- const pointImageIndices = new Float32Array(this.inputPointImageIndices)
175
- for (let i = 0; i < pointImageIndices.length; i++) {
176
- const rawIndex = pointImageIndices[i]
177
- const imageIndex = (rawIndex === undefined) ? NaN : rawIndex
178
- if (!Number.isFinite(imageIndex) || imageIndex < 0) {
179
- pointImageIndices[i] = -1
180
- } else {
181
- pointImageIndices[i] = Math.trunc(imageIndex)
182
- }
183
- }
184
- this.pointImageIndices = pointImageIndices
185
- }
186
- }
187
-
188
- /**
189
- * Updates the point image sizes based on the input data or default to point sizes.
190
- */
191
- public updatePointImageSizes (): void {
192
- if (this.pointsNumber === undefined) {
193
- this.pointImageSizes = undefined
194
- return
195
- }
196
-
197
- // Sets point image sizes to point sizes if the input is missing or does not match input points number.
198
- if (this.inputPointImageSizes === undefined || this.inputPointImageSizes.length !== this.pointsNumber) {
199
- this.pointImageSizes = this.pointSizes ? new Float32Array(this.pointSizes) : new Float32Array(this.pointsNumber).fill(this._config.pointSize)
200
- } else {
201
- this.pointImageSizes = new Float32Array(this.inputPointImageSizes)
202
- for (let i = 0; i < this.pointImageSizes.length; i++) {
203
- if (!isNumber(this.pointImageSizes[i])) {
204
- this.pointImageSizes[i] = this.pointSizes?.[i] ?? this._config.pointSize
205
- }
206
- }
207
- }
208
- }
209
-
210
- public updateLinks (): void {
211
- this.links = this.inputLinks
212
- }
213
-
214
- /**
215
- * Updates the link colors based on the input data or default config value.
216
- */
217
- public updateLinkColor (): void {
218
- if (this.linksNumber === undefined) {
219
- this.linkColors = undefined
220
- return
221
- }
222
-
223
- // Sets link colors to default values from config if the input is missing or does not match input links number.
224
- const defaultRgba = getRgbaColor(this._config.linkColor)
225
- if (this.inputLinkColors === undefined || this.inputLinkColors.length / 4 !== this.linksNumber) {
226
- this.linkColors = new Float32Array(this.linksNumber * 4)
227
-
228
- for (let i = 0; i < this.linkColors.length / 4; i++) {
229
- this.linkColors[i * 4] = defaultRgba[0]
230
- this.linkColors[i * 4 + 1] = defaultRgba[1]
231
- this.linkColors[i * 4 + 2] = defaultRgba[2]
232
- this.linkColors[i * 4 + 3] = defaultRgba[3]
233
- }
234
- } else {
235
- this.linkColors = this.inputLinkColors
236
- for (let i = 0; i < this.linkColors.length / 4; i++) {
237
- if (!isNumber(this.linkColors[i * 4])) this.linkColors[i * 4] = defaultRgba[0]
238
- if (!isNumber(this.linkColors[i * 4 + 1])) this.linkColors[i * 4 + 1] = defaultRgba[1]
239
- if (!isNumber(this.linkColors[i * 4 + 2])) this.linkColors[i * 4 + 2] = defaultRgba[2]
240
- if (!isNumber(this.linkColors[i * 4 + 3])) this.linkColors[i * 4 + 3] = defaultRgba[3]
241
- }
242
- }
243
- }
244
-
245
- /**
246
- * Updates the link width based on the input data or default config value.
247
- */
248
- public updateLinkWidth (): void {
249
- if (this.linksNumber === undefined) {
250
- this.linkWidths = undefined
251
- return
252
- }
253
-
254
- // Sets link widths to default values from config if the input is missing or does not match input links number.
255
- if (this.inputLinkWidths === undefined || this.inputLinkWidths.length !== this.linksNumber) {
256
- this.linkWidths = new Float32Array(this.linksNumber).fill(this._config.linkWidth)
257
- } else {
258
- this.linkWidths = this.inputLinkWidths
259
- for (let i = 0; i < this.linkWidths.length; i++) {
260
- if (!isNumber(this.linkWidths[i])) {
261
- this.linkWidths[i] = this._config.linkWidth
262
- }
263
- }
264
- }
265
- }
266
-
267
- /**
268
- * Updates the link arrows based on the input data or default config value.
269
- */
270
- public updateArrows (): void {
271
- if (this.linksNumber === undefined) {
272
- this.linkArrows = undefined
273
- return
274
- }
275
-
276
- // Sets link arrows to default values from config if the input is missing or does not match input links number.
277
- if (this.linkArrowsBoolean === undefined || this.linkArrowsBoolean.length !== this.linksNumber) {
278
- this.linkArrows = new Array(this.linksNumber).fill(+this._config.linkArrows)
279
- } else {
280
- this.linkArrows = this.linkArrowsBoolean.map(d => +d)
281
- }
282
- }
283
-
284
- public updateLinkStrength (): void {
285
- if (this.linksNumber === undefined) {
286
- this.linkStrength = undefined
287
- }
288
-
289
- if (this.inputLinkStrength === undefined || this.inputLinkStrength.length !== this.linksNumber) {
290
- this.linkStrength = undefined
291
- } else {
292
- this.linkStrength = this.inputLinkStrength
293
- }
294
- }
295
-
296
- public updateClusters (): void {
297
- if (this.pointsNumber === undefined) {
298
- this.pointClusters = undefined
299
- this.clusterPositions = undefined
300
- return
301
- }
302
- if (this.inputPointClusters === undefined || this.inputPointClusters.length !== this.pointsNumber) {
303
- this.pointClusters = undefined
304
- } else {
305
- this.pointClusters = this.inputPointClusters
306
- }
307
- if (this.inputClusterPositions === undefined) {
308
- this.clusterPositions = undefined
309
- } else {
310
- this.clusterPositions = this.inputClusterPositions
311
- }
312
- if (this.inputClusterStrength === undefined || this.inputClusterStrength.length !== this.pointsNumber) {
313
- this.clusterStrength = undefined
314
- } else {
315
- this.clusterStrength = this.inputClusterStrength
316
- }
317
- }
318
-
319
- public update (): void {
320
- this.updatePoints()
321
- this.updatePointColor()
322
- this.updatePointSize()
323
- this.updatePointShape()
324
- this.updatePointImageIndices()
325
- this.updatePointImageSizes()
326
-
327
- this.updateLinks()
328
- this.updateLinkColor()
329
- this.updateLinkWidth()
330
- this.updateArrows()
331
- this.updateLinkStrength()
332
-
333
- this.updateClusters()
334
-
335
- this._createAdjacencyLists()
336
- this._calculateDegrees()
337
- }
338
-
339
- public getAdjacentIndices (index: number): number[] | undefined {
340
- return [...(this.sourceIndexToTargetIndices?.[index]?.map(d => d[0]) || []), ...(this.targetIndexToSourceIndices?.[index]?.map(d => d[0]) || [])]
341
- }
342
-
343
- private _createAdjacencyLists (): void {
344
- if (this.linksNumber === undefined || this.links === undefined) {
345
- this.sourceIndexToTargetIndices = undefined
346
- this.targetIndexToSourceIndices = undefined
347
- return
348
- }
349
-
350
- this.sourceIndexToTargetIndices = new Array(this.pointsNumber).fill(undefined)
351
- this.targetIndexToSourceIndices = new Array(this.pointsNumber).fill(undefined)
352
- for (let i = 0; i < this.linksNumber; i++) {
353
- const sourceIndex = this.links[i * 2]
354
- const targetIndex = this.links[i * 2 + 1]
355
- if (sourceIndex !== undefined && targetIndex !== undefined) {
356
- if (this.sourceIndexToTargetIndices[sourceIndex] === undefined) this.sourceIndexToTargetIndices[sourceIndex] = []
357
- this.sourceIndexToTargetIndices[sourceIndex]?.push([targetIndex, i])
358
-
359
- if (this.targetIndexToSourceIndices[targetIndex] === undefined) this.targetIndexToSourceIndices[targetIndex] = []
360
- this.targetIndexToSourceIndices[targetIndex]?.push([sourceIndex, i])
361
- }
362
- }
363
- }
364
-
365
- private _calculateDegrees (): void {
366
- if (this.pointsNumber === undefined) {
367
- this.degree = undefined
368
- this.inDegree = undefined
369
- this.outDegree = undefined
370
- return
371
- }
372
-
373
- this.degree = new Array(this.pointsNumber).fill(0)
374
- this.inDegree = new Array(this.pointsNumber).fill(0)
375
- this.outDegree = new Array(this.pointsNumber).fill(0)
376
-
377
- for (let i = 0; i < this.pointsNumber; i++) {
378
- this.inDegree[i] = this.targetIndexToSourceIndices?.[i]?.length ?? 0
379
- this.outDegree[i] = this.sourceIndexToTargetIndices?.[i]?.length ?? 0
380
- this.degree[i] = (this.inDegree[i] ?? 0) + (this.outDegree[i] ?? 0)
381
- }
382
- }
383
- }
@@ -1,46 +0,0 @@
1
- precision highp float;
2
-
3
- varying vec4 rgbaColor;
4
- varying vec2 pos;
5
- varying float arrowLength;
6
- varying float useArrow;
7
- varying float smoothing;
8
- varying float arrowWidthFactor;
9
- varying float linkIndex;
10
-
11
- // renderMode: 0.0 = normal rendering, 1.0 = index buffer rendering for picking
12
- uniform float renderMode;
13
-
14
- float map(float value, float min1, float max1, float min2, float max2) {
15
- return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
16
- }
17
-
18
- void main() {
19
- float opacity = 1.0;
20
- vec3 color = rgbaColor.rgb;
21
-
22
- if (useArrow > 0.5) {
23
- float end_arrow = 0.5 + arrowLength / 2.0;
24
- float start_arrow = end_arrow - arrowLength;
25
- float arrowWidthDelta = arrowWidthFactor / 2.0;
26
- float linkOpacity = rgbaColor.a * smoothstep(0.5 - arrowWidthDelta, 0.5 - arrowWidthDelta - smoothing / 2.0, abs(pos.y));
27
- float arrowOpacity = 1.0;
28
- if (pos.x > start_arrow && pos.x < start_arrow + arrowLength) {
29
- float xmapped = map(pos.x, start_arrow, end_arrow, 0.0, 1.0);
30
- arrowOpacity = rgbaColor.a * smoothstep(xmapped - smoothing, xmapped, map(abs(pos.y), 0.5, 0.0, 0.0, 1.0));
31
- if (linkOpacity != arrowOpacity) {
32
- linkOpacity = max(linkOpacity, arrowOpacity);
33
- }
34
- }
35
- opacity = linkOpacity;
36
- } else opacity = rgbaColor.a * smoothstep(0.5, 0.5 - smoothing, abs(pos.y));
37
-
38
- if (renderMode > 0.0) {
39
- if (opacity > 0.0) {
40
- gl_FragColor = vec4(linkIndex, 0.0, 0.0, 1.0);
41
- } else {
42
- gl_FragColor = vec4(-1.0, 0.0, 0.0, 0.0);
43
- }
44
- } else gl_FragColor = vec4(color, opacity);
45
-
46
- }
@@ -1,194 +0,0 @@
1
- precision highp float;
2
-
3
- attribute vec2 position, pointA, pointB;
4
- attribute vec4 color;
5
- attribute float width;
6
- attribute float arrow;
7
- attribute float linkIndices;
8
-
9
- uniform sampler2D positionsTexture;
10
- uniform sampler2D pointGreyoutStatus;
11
- uniform mat3 transformationMatrix;
12
- uniform float pointsTextureSize;
13
- uniform float widthScale;
14
- uniform float linkArrowsSizeScale;
15
- uniform float spaceSize;
16
- uniform vec2 screenSize;
17
- uniform vec2 linkVisibilityDistanceRange;
18
- uniform float linkVisibilityMinTransparency;
19
- uniform float linkOpacity;
20
- uniform float greyoutOpacity;
21
- uniform float curvedWeight;
22
- uniform float curvedLinkControlPointDistance;
23
- uniform float curvedLinkSegments;
24
- uniform bool scaleLinksOnZoom;
25
- uniform float maxPointSize;
26
- // renderMode: 0.0 = normal rendering, 1.0 = index buffer rendering for picking
27
- uniform float renderMode;
28
- uniform float hoveredLinkIndex;
29
- uniform vec4 hoveredLinkColor;
30
- uniform float hoveredLinkWidthIncrease;
31
-
32
- varying vec4 rgbaColor;
33
- varying vec2 pos;
34
- varying float arrowLength;
35
- varying float useArrow;
36
- varying float smoothing;
37
- varying float arrowWidthFactor;
38
- varying float linkIndex;
39
-
40
- float map(float value, float min1, float max1, float min2, float max2) {
41
- return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
42
- }
43
-
44
- vec2 conicParametricCurve(vec2 A, vec2 B, vec2 ControlPoint, float t, float w) {
45
- vec2 divident = (1.0 - t) * (1.0 - t) * A + 2.0 * (1.0 - t) * t * w * ControlPoint + t * t * B;
46
- float divisor = (1.0 - t) * (1.0 - t) + 2.0 * (1.0 - t) * t * w + t * t;
47
- return divident / divisor;
48
- }
49
-
50
- float calculateLinkWidth(float width) {
51
- float linkWidth;
52
- if (scaleLinksOnZoom) {
53
- // Use original width if links should scale with zoom
54
- linkWidth = width;
55
- } else {
56
- // Adjust width based on zoom level to maintain visual size
57
- linkWidth = width / transformationMatrix[0][0];
58
- // Apply a non-linear scaling to avoid extreme widths
59
- linkWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
60
- }
61
- // Limit link width based on whether it has an arrow
62
- if (useArrow > 0.5) {
63
- return min(linkWidth, (maxPointSize * 2.0) / transformationMatrix[0][0]);
64
- } else {
65
- return min(linkWidth, maxPointSize / transformationMatrix[0][0]);
66
- }
67
- }
68
-
69
- float calculateArrowWidth(float arrowWidth) {
70
- if (scaleLinksOnZoom) {
71
- return arrowWidth;
72
- } else {
73
- // Apply the same scaling logic as calculateLinkWidth to maintain proportionality
74
- arrowWidth = arrowWidth / transformationMatrix[0][0];
75
- // Apply the same non-linear scaling to avoid extreme widths
76
- arrowWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
77
- return arrowWidth;
78
- }
79
- }
80
-
81
- void main() {
82
- pos = position;
83
- linkIndex = linkIndices;
84
-
85
- vec2 pointTexturePosA = (pointA + 0.5) / pointsTextureSize;
86
- vec2 pointTexturePosB = (pointB + 0.5) / pointsTextureSize;
87
-
88
- vec4 greyoutStatusA = texture2D(pointGreyoutStatus, pointTexturePosA);
89
- vec4 greyoutStatusB = texture2D(pointGreyoutStatus, pointTexturePosB);
90
-
91
- vec4 pointPositionA = texture2D(positionsTexture, pointTexturePosA);
92
- vec4 pointPositionB = texture2D(positionsTexture, pointTexturePosB);
93
- vec2 a = pointPositionA.xy;
94
- vec2 b = pointPositionB.xy;
95
-
96
- // Calculate direction vector and its perpendicular
97
- vec2 xBasis = b - a;
98
- vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
99
-
100
- // Calculate link distance and control point for curved link
101
- float linkDist = length(xBasis);
102
- float h = curvedLinkControlPointDistance;
103
- vec2 controlPoint = (a + b) / 2.0 + yBasis * linkDist * h;
104
-
105
- // Convert link distance to screen pixels
106
- float linkDistPx = linkDist * transformationMatrix[0][0];
107
-
108
- // Calculate line width using the width scale
109
- float linkWidth = width * widthScale;
110
- float k = 2.0;
111
- // Arrow width is proportionally larger than the line width
112
- float arrowWidth = linkWidth * k;
113
- arrowWidth *= linkArrowsSizeScale;
114
-
115
- // Ensure arrow width difference is non-negative to prevent unwanted changes to link width
116
- float arrowWidthDifference = max(0.0, arrowWidth - linkWidth);
117
-
118
- // Calculate arrow width in pixels
119
- float arrowWidthPx = calculateArrowWidth(arrowWidth);
120
-
121
- // Calculate arrow length proportional to its width
122
- // 0.866 is approximately sqrt(3)/2 - related to equilateral triangle geometry
123
- // Cap the length to avoid overly long arrows on short links
124
- arrowLength = min(0.3, (0.866 * arrowWidthPx * 2.0) / linkDist);
125
-
126
- useArrow = arrow;
127
- if (useArrow > 0.5) {
128
- linkWidth += arrowWidthDifference;
129
- }
130
-
131
- arrowWidthFactor = arrowWidthDifference / linkWidth;
132
-
133
- // Calculate final link width in pixels with smoothing
134
- float linkWidthPx = calculateLinkWidth(linkWidth);
135
-
136
- if (renderMode > 0.0) {
137
- // Add 5 pixels padding for better hover detection
138
- linkWidthPx += 5.0 / transformationMatrix[0][0];
139
- } else {
140
- // Add pixel increase if this is the hovered link
141
- if (hoveredLinkIndex == linkIndex) {
142
- linkWidthPx += hoveredLinkWidthIncrease / transformationMatrix[0][0];
143
- }
144
- }
145
- float smoothingPx = 0.5 / transformationMatrix[0][0];
146
- smoothing = smoothingPx / linkWidthPx;
147
- linkWidthPx += smoothingPx;
148
-
149
-
150
-
151
- // Calculate final color with opacity based on link distance
152
- vec3 rgbColor = color.rgb;
153
- // Adjust opacity based on link distance
154
- float opacity = color.a * linkOpacity * max(linkVisibilityMinTransparency, map(linkDistPx, linkVisibilityDistanceRange.g, linkVisibilityDistanceRange.r, 0.0, 1.0));
155
-
156
- // Apply greyed out opacity if either endpoint is greyed out
157
- if (greyoutStatusA.r > 0.0 || greyoutStatusB.r > 0.0) {
158
- opacity *= greyoutOpacity;
159
- }
160
-
161
- // Pass final color to fragment shader
162
- rgbaColor = vec4(rgbColor, opacity);
163
-
164
- // Apply hover color if this is the hovered link and hover color is defined
165
- if (hoveredLinkIndex == linkIndex && hoveredLinkColor.a > -0.5) {
166
- // Keep existing RGB values but multiply opacity with hover color opacity
167
- rgbaColor.rgb = hoveredLinkColor.rgb;
168
- rgbaColor.a *= hoveredLinkColor.a;
169
- }
170
-
171
- // Calculate position on the curved path
172
- float t = position.x;
173
- float w = curvedWeight;
174
-
175
- float tPrev = t - 1.0 / curvedLinkSegments;
176
- float tNext = t + 1.0 / curvedLinkSegments;
177
-
178
- vec2 pointCurr = conicParametricCurve(a, b, controlPoint, t, w);
179
-
180
- vec2 pointPrev = conicParametricCurve(a, b, controlPoint, max(0.0, tPrev), w);
181
- vec2 pointNext = conicParametricCurve(a, b, controlPoint, min(tNext, 1.0), w);
182
-
183
- vec2 xBasisCurved = pointNext - pointPrev;
184
- vec2 yBasisCurved = normalize(vec2(-xBasisCurved.y, xBasisCurved.x));
185
-
186
- pointCurr += yBasisCurved * linkWidthPx * position.y;
187
-
188
- // Transform to clip space coordinates
189
- vec2 p = 2.0 * pointCurr / spaceSize - 1.0;
190
- p *= spaceSize / screenSize;
191
- vec3 final = transformationMatrix * vec3(p, 1);
192
-
193
- gl_Position = vec4(final.rg, 0, 1);
194
- }
@@ -1,18 +0,0 @@
1
- import { scalePow } from 'd3-scale'
2
- import { range } from 'd3-array'
3
-
4
- export const getCurveLineGeometry = (segments: number): number[][] => {
5
- const scale = scalePow()
6
- .exponent(2)
7
- .range([0, 1])
8
- .domain([-1, 1])
9
-
10
- const hodographValues = range(0, segments).map(d => -0.5 + d / segments)
11
- hodographValues.push(0.5)
12
- const result = new Array(hodographValues.length * 2)
13
- hodographValues.forEach((d, i) => {
14
- result[i * 2] = [scale(d * 2), 0.5]
15
- result[i * 2 + 1] = [scale(d * 2), -0.5]
16
- })
17
- return result
18
- }
@@ -1,27 +0,0 @@
1
- precision highp float;
2
-
3
- uniform sampler2D linkIndexTexture;
4
- uniform vec2 mousePosition;
5
- uniform vec2 screenSize;
6
-
7
- varying vec2 vTexCoord;
8
-
9
- void main() {
10
- // Convert mouse position to texture coordinates
11
- vec2 texCoord = mousePosition / screenSize;
12
-
13
- // Read the link index from the linkIndexFbo texture at mouse position
14
- vec4 linkIndexData = texture2D(linkIndexTexture, texCoord);
15
-
16
- // Extract the link index (stored in the red channel)
17
- float linkIndex = linkIndexData.r;
18
-
19
- // Check if there's a valid link at this position (alpha > 0)
20
- if (linkIndexData.a > 0.0 && linkIndex >= 0.0) {
21
- // Output the link index
22
- gl_FragColor = vec4(linkIndex, 0.0, 0.0, 1.0);
23
- } else {
24
- // No link at this position, output -1 to indicate no hover
25
- gl_FragColor = vec4(-1.0, 0.0, 0.0, 0.0);
26
- }
27
- }
@@ -1,8 +0,0 @@
1
- attribute vec2 position;
2
-
3
- varying vec2 vTexCoord;
4
-
5
- void main() {
6
- vTexCoord = position * 0.5 + 0.5;
7
- gl_Position = vec4(position, 0.0, 1.0);
8
- }