@cosmos.gl/graph 2.6.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 (185) hide show
  1. package/dist/config.d.ts +4 -1
  2. package/dist/helper.d.ts +2 -2
  3. package/dist/index.d.ts +3 -2
  4. package/dist/index.js +4949 -14407
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +1 -1690
  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 +1 -1
  17. package/dist/modules/Lines/index.d.ts +2 -2
  18. package/dist/modules/Points/index.d.ts +2 -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 -19
  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/pinned-points/data-gen.d.ts +0 -5
  44. package/dist/stories/beginners/pinned-points/index.d.ts +0 -5
  45. package/dist/stories/beginners/point-labels/data.d.ts +0 -13
  46. package/dist/stories/beginners/point-labels/index.d.ts +0 -9
  47. package/dist/stories/beginners/point-labels/labels.d.ts +0 -8
  48. package/dist/stories/beginners/quick-start.d.ts +0 -5
  49. package/dist/stories/beginners/remove-points/config.d.ts +0 -2
  50. package/dist/stories/beginners/remove-points/data-gen.d.ts +0 -4
  51. package/dist/stories/beginners/remove-points/index.d.ts +0 -5
  52. package/dist/stories/beginners.stories.d.ts +0 -11
  53. package/dist/stories/clusters/polygon-selection/index.d.ts +0 -6
  54. package/dist/stories/clusters/polygon-selection/polygon.d.ts +0 -20
  55. package/dist/stories/clusters/radial.d.ts +0 -5
  56. package/dist/stories/clusters/with-labels.d.ts +0 -6
  57. package/dist/stories/clusters/worm.d.ts +0 -5
  58. package/dist/stories/clusters.stories.d.ts +0 -9
  59. package/dist/stories/create-cluster-labels.d.ts +0 -4
  60. package/dist/stories/create-cosmos.d.ts +0 -16
  61. package/dist/stories/create-story.d.ts +0 -16
  62. package/dist/stories/experiments/full-mesh.d.ts +0 -5
  63. package/dist/stories/experiments/mesh-with-holes.d.ts +0 -5
  64. package/dist/stories/experiments.stories.d.ts +0 -7
  65. package/dist/stories/generate-mesh-data.d.ts +0 -12
  66. package/dist/stories/geospatial/moscow-metro-stations/index.d.ts +0 -15
  67. package/dist/stories/geospatial/moscow-metro-stations/moscow-metro-coords.d.ts +0 -1
  68. package/dist/stories/geospatial/moscow-metro-stations/point-colors.d.ts +0 -1
  69. package/dist/stories/geospatial.stories.d.ts +0 -6
  70. package/dist/stories/shapes/all-shapes/index.d.ts +0 -5
  71. package/dist/stories/shapes/image-example/index.d.ts +0 -5
  72. package/dist/stories/shapes.stories.d.ts +0 -7
  73. package/logo.svg +0 -3
  74. package/rollup.config.js +0 -70
  75. package/src/config.ts +0 -734
  76. package/src/declaration.d.ts +0 -12
  77. package/src/graph/utils/error-message.ts +0 -23
  78. package/src/helper.ts +0 -74
  79. package/src/index.ts +0 -1635
  80. package/src/modules/Clusters/calculate-centermass.frag +0 -9
  81. package/src/modules/Clusters/calculate-centermass.vert +0 -26
  82. package/src/modules/Clusters/force-cluster.frag +0 -39
  83. package/src/modules/Clusters/index.ts +0 -200
  84. package/src/modules/Drag/index.ts +0 -33
  85. package/src/modules/FPSMonitor/css.ts +0 -53
  86. package/src/modules/FPSMonitor/index.ts +0 -28
  87. package/src/modules/ForceCenter/calculate-centermass.frag +0 -9
  88. package/src/modules/ForceCenter/calculate-centermass.vert +0 -18
  89. package/src/modules/ForceCenter/force-center.frag +0 -27
  90. package/src/modules/ForceCenter/index.ts +0 -104
  91. package/src/modules/ForceGravity/force-gravity.frag +0 -27
  92. package/src/modules/ForceGravity/index.ts +0 -33
  93. package/src/modules/ForceLink/force-spring.ts +0 -73
  94. package/src/modules/ForceLink/index.ts +0 -149
  95. package/src/modules/ForceManyBody/calculate-level.frag +0 -9
  96. package/src/modules/ForceManyBody/calculate-level.vert +0 -25
  97. package/src/modules/ForceManyBody/force-centermass.frag +0 -52
  98. package/src/modules/ForceManyBody/force-level.frag +0 -121
  99. package/src/modules/ForceManyBody/index.ts +0 -223
  100. package/src/modules/ForceManyBody/quadtree-frag-shader.ts +0 -90
  101. package/src/modules/ForceManyBodyQuadtree/calculate-level.frag +0 -9
  102. package/src/modules/ForceManyBodyQuadtree/calculate-level.vert +0 -25
  103. package/src/modules/ForceManyBodyQuadtree/index.ts +0 -157
  104. package/src/modules/ForceManyBodyQuadtree/quadtree-frag-shader.ts +0 -93
  105. package/src/modules/ForceMouse/force-mouse.frag +0 -24
  106. package/src/modules/ForceMouse/index.ts +0 -32
  107. package/src/modules/GraphData/index.ts +0 -384
  108. package/src/modules/Lines/draw-curve-line.frag +0 -46
  109. package/src/modules/Lines/draw-curve-line.vert +0 -194
  110. package/src/modules/Lines/geometry.ts +0 -18
  111. package/src/modules/Lines/hovered-line-index.frag +0 -27
  112. package/src/modules/Lines/hovered-line-index.vert +0 -8
  113. package/src/modules/Lines/index.ts +0 -273
  114. package/src/modules/Points/atlas-utils.ts +0 -137
  115. package/src/modules/Points/drag-point.frag +0 -20
  116. package/src/modules/Points/draw-highlighted.frag +0 -16
  117. package/src/modules/Points/draw-highlighted.vert +0 -86
  118. package/src/modules/Points/draw-points.frag +0 -243
  119. package/src/modules/Points/draw-points.vert +0 -127
  120. package/src/modules/Points/fill-sampled-points.frag +0 -9
  121. package/src/modules/Points/fill-sampled-points.vert +0 -29
  122. package/src/modules/Points/find-hovered-point.frag +0 -9
  123. package/src/modules/Points/find-hovered-point.vert +0 -57
  124. package/src/modules/Points/find-points-on-area-selection.frag +0 -48
  125. package/src/modules/Points/find-points-on-polygon-selection.frag +0 -65
  126. package/src/modules/Points/index.ts +0 -968
  127. package/src/modules/Points/track-positions.frag +0 -18
  128. package/src/modules/Points/update-position.frag +0 -37
  129. package/src/modules/Shared/buffer.ts +0 -37
  130. package/src/modules/Shared/clear.frag +0 -7
  131. package/src/modules/Shared/quad.vert +0 -12
  132. package/src/modules/Store/index.ts +0 -173
  133. package/src/modules/Zoom/index.ts +0 -148
  134. package/src/modules/core-module.ts +0 -28
  135. package/src/stories/1. welcome.mdx +0 -81
  136. package/src/stories/2. configuration.mdx +0 -113
  137. package/src/stories/3. api-reference.mdx +0 -591
  138. package/src/stories/beginners/basic-set-up/data-gen.ts +0 -33
  139. package/src/stories/beginners/basic-set-up/index.ts +0 -163
  140. package/src/stories/beginners/basic-set-up/style.css +0 -35
  141. package/src/stories/beginners/link-hovering/data-generator.ts +0 -198
  142. package/src/stories/beginners/link-hovering/index.ts +0 -61
  143. package/src/stories/beginners/link-hovering/style.css +0 -73
  144. package/src/stories/beginners/pinned-points/data-gen.ts +0 -153
  145. package/src/stories/beginners/pinned-points/index.ts +0 -61
  146. package/src/stories/beginners/point-labels/data.ts +0 -73
  147. package/src/stories/beginners/point-labels/index.ts +0 -65
  148. package/src/stories/beginners/point-labels/labels.ts +0 -46
  149. package/src/stories/beginners/point-labels/style.css +0 -16
  150. package/src/stories/beginners/quick-start.ts +0 -50
  151. package/src/stories/beginners/remove-points/config.ts +0 -25
  152. package/src/stories/beginners/remove-points/data-gen.ts +0 -30
  153. package/src/stories/beginners/remove-points/index.ts +0 -92
  154. package/src/stories/beginners/remove-points/style.css +0 -31
  155. package/src/stories/beginners.stories.ts +0 -131
  156. package/src/stories/clusters/polygon-selection/index.ts +0 -51
  157. package/src/stories/clusters/polygon-selection/polygon.ts +0 -143
  158. package/src/stories/clusters/polygon-selection/style.css +0 -8
  159. package/src/stories/clusters/radial.ts +0 -24
  160. package/src/stories/clusters/with-labels.ts +0 -53
  161. package/src/stories/clusters/worm.ts +0 -40
  162. package/src/stories/clusters.stories.ts +0 -77
  163. package/src/stories/create-cluster-labels.ts +0 -50
  164. package/src/stories/create-cosmos.ts +0 -68
  165. package/src/stories/create-story.ts +0 -51
  166. package/src/stories/experiments/full-mesh.ts +0 -13
  167. package/src/stories/experiments/mesh-with-holes.ts +0 -13
  168. package/src/stories/experiments.stories.ts +0 -43
  169. package/src/stories/generate-mesh-data.ts +0 -125
  170. package/src/stories/geospatial/moscow-metro-stations/index.ts +0 -62
  171. package/src/stories/geospatial/moscow-metro-stations/moscow-metro-coords.ts +0 -1
  172. package/src/stories/geospatial/moscow-metro-stations/point-colors.ts +0 -46
  173. package/src/stories/geospatial/moscow-metro-stations/style.css +0 -30
  174. package/src/stories/geospatial.stories.ts +0 -30
  175. package/src/stories/shapes/all-shapes/index.ts +0 -69
  176. package/src/stories/shapes/image-example/icons/box.png +0 -0
  177. package/src/stories/shapes/image-example/icons/lego.png +0 -0
  178. package/src/stories/shapes/image-example/icons/s.png +0 -0
  179. package/src/stories/shapes/image-example/icons/swift.png +0 -0
  180. package/src/stories/shapes/image-example/icons/toolbox.png +0 -0
  181. package/src/stories/shapes/image-example/index.ts +0 -238
  182. package/src/stories/shapes.stories.ts +0 -37
  183. package/src/variables.ts +0 -68
  184. package/tsconfig.json +0 -41
  185. package/vite.config.ts +0 -54
@@ -1,9 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- varying vec4 rgba;
6
-
7
- void main() {
8
- gl_FragColor = rgba;
9
- }
@@ -1,26 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- uniform sampler2D positionsTexture;
6
- uniform sampler2D clusterTexture;
7
- uniform float pointsTextureSize;
8
- uniform float clustersTextureSize;
9
-
10
- attribute vec2 pointIndices;
11
-
12
- varying vec4 rgba;
13
-
14
- void main() {
15
- vec4 pointPosition = texture2D(positionsTexture, pointIndices / pointsTextureSize);
16
- rgba = vec4(pointPosition.xy, 1.0, 0.0);
17
-
18
- vec4 pointClusterIndices = texture2D(clusterTexture, pointIndices / pointsTextureSize);
19
- vec2 xy = vec2(0.0);
20
- if (pointClusterIndices.x >= 0.0 && pointClusterIndices.y >= 0.0) {
21
- xy = 2.0 * (pointClusterIndices.xy + 0.5) / clustersTextureSize - 1.0;
22
- }
23
-
24
- gl_Position = vec4(xy, 0.0, 1.0);
25
- gl_PointSize = 1.0;
26
- }
@@ -1,39 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- uniform sampler2D positionsTexture;
6
- uniform sampler2D centermassTexture;
7
- uniform sampler2D clusterTexture;
8
- uniform sampler2D clusterPositionsTexture;
9
- uniform sampler2D clusterForceCoefficient;
10
- uniform float alpha;
11
- uniform float clustersTextureSize;
12
- uniform float clusterCoefficient;
13
-
14
- varying vec2 textureCoords;
15
-
16
-
17
- void main() {
18
- vec4 pointPosition = texture2D(positionsTexture, textureCoords);
19
- vec4 velocity = vec4(0.0);
20
- vec4 pointClusterIndices = texture2D(clusterTexture, textureCoords);
21
- // no cluster, so no forces
22
- if (pointClusterIndices.x >= 0.0 && pointClusterIndices.y >= 0.0) {
23
- // positioning points to custom cluster position or either to the center of mass
24
- vec2 clusterPositions = texture2D(clusterPositionsTexture, pointClusterIndices.xy / clustersTextureSize).xy;
25
- if (clusterPositions.x < 0.0 || clusterPositions.y < 0.0) {
26
- vec4 centermassValues = texture2D(centermassTexture, pointClusterIndices.xy / clustersTextureSize);
27
- clusterPositions = centermassValues.xy / centermassValues.b;
28
- }
29
- vec4 clusterCustomCoeff = texture2D(clusterForceCoefficient, textureCoords);
30
- vec2 distVector = clusterPositions.xy - pointPosition.xy;
31
- float dist = length(distVector);
32
- if (dist > 0.0) {
33
- float addV = alpha * dist * clusterCoefficient * clusterCustomCoeff.r;
34
- velocity.rg += addV * normalize(distVector);
35
- }
36
- }
37
-
38
- gl_FragColor = velocity;
39
- }
@@ -1,200 +0,0 @@
1
- import regl from 'regl'
2
- import { CoreModule } from '@/graph/modules/core-module'
3
- import calculateCentermassFrag from '@/graph/modules/Clusters/calculate-centermass.frag'
4
- import calculateCentermassVert from '@/graph/modules/Clusters/calculate-centermass.vert'
5
- import forceFrag from '@/graph/modules/Clusters/force-cluster.frag'
6
- import { createQuadBuffer, createIndexesForBuffer } from '@/graph/modules/Shared/buffer'
7
- import clearFrag from '@/graph/modules/Shared/clear.frag'
8
- import updateVert from '@/graph/modules/Shared/quad.vert'
9
-
10
- export class Clusters extends CoreModule {
11
- public centermassFbo: regl.Framebuffer2D | undefined
12
- public clusterCount: number | undefined
13
-
14
- private clusterFbo: regl.Framebuffer2D | undefined
15
- private clusterPositionsFbo: regl.Framebuffer2D | undefined
16
- private clusterForceCoefficientFbo: regl.Framebuffer2D | undefined
17
- private clearCentermassCommand: regl.DrawCommand | undefined
18
- private calculateCentermassCommand: regl.DrawCommand | undefined
19
- private applyForcesCommand: regl.DrawCommand | undefined
20
- private clusterTexture: regl.Texture2D | undefined
21
- private clusterPositionsTexture: regl.Texture2D | undefined
22
- private clusterForceCoefficientTexture: regl.Texture2D | undefined
23
- private centermassTexture: regl.Texture2D | undefined
24
- private pointIndices: regl.Buffer | undefined
25
- private clustersTextureSize: number | undefined
26
-
27
- public create (): void {
28
- const { reglInstance, store, data } = this
29
- const { pointsTextureSize } = store
30
- if (data.pointsNumber === undefined || (!data.pointClusters && !data.clusterPositions)) return
31
-
32
- // Find the highest cluster index in the array and add 1 (since cluster indices start at 0).
33
- this.clusterCount = (data.pointClusters ?? []).reduce<number>((max, clusterIndex) => {
34
- if (clusterIndex === undefined || clusterIndex < 0) return max
35
- return Math.max(max, clusterIndex)
36
- }, 0) + 1
37
-
38
- this.clustersTextureSize = Math.ceil(Math.sqrt(this.clusterCount))
39
-
40
- const clusterState = new Float32Array(pointsTextureSize * pointsTextureSize * 4)
41
- const clusterPositions = new Float32Array(this.clustersTextureSize * this.clustersTextureSize * 4).fill(-1)
42
- const clusterForceCoefficient = new Float32Array(pointsTextureSize * pointsTextureSize * 4).fill(1)
43
- if (data.clusterPositions) {
44
- for (let cluster = 0; cluster < this.clusterCount; ++cluster) {
45
- clusterPositions[cluster * 4 + 0] = data.clusterPositions[cluster * 2 + 0] ?? -1
46
- clusterPositions[cluster * 4 + 1] = data.clusterPositions[cluster * 2 + 1] ?? -1
47
- }
48
- }
49
-
50
- for (let i = 0; i < data.pointsNumber; ++i) {
51
- const clusterIndex = data.pointClusters?.[i]
52
- if (clusterIndex === undefined) {
53
- // no cluster, so no forces
54
- clusterState[i * 4 + 0] = -1
55
- clusterState[i * 4 + 1] = -1
56
- } else {
57
- clusterState[i * 4 + 0] = clusterIndex % this.clustersTextureSize
58
- clusterState[i * 4 + 1] = Math.floor(clusterIndex / this.clustersTextureSize)
59
- }
60
-
61
- if (data.clusterStrength) clusterForceCoefficient[i * 4 + 0] = data.clusterStrength[i] ?? 1
62
- }
63
-
64
- if (!this.clusterTexture) this.clusterTexture = reglInstance.texture()
65
- this.clusterTexture({
66
- data: clusterState,
67
- shape: [pointsTextureSize, pointsTextureSize, 4],
68
- type: 'float',
69
- })
70
- if (!this.clusterFbo) this.clusterFbo = reglInstance.framebuffer()
71
- this.clusterFbo({
72
- color: this.clusterTexture,
73
- depth: false,
74
- stencil: false,
75
- })
76
-
77
- if (!this.clusterPositionsTexture) this.clusterPositionsTexture = reglInstance.texture()
78
- this.clusterPositionsTexture({
79
- data: clusterPositions,
80
- shape: [this.clustersTextureSize, this.clustersTextureSize, 4],
81
- type: 'float',
82
- })
83
- if (!this.clusterPositionsFbo) this.clusterPositionsFbo = reglInstance.framebuffer()
84
- this.clusterPositionsFbo({
85
- color: this.clusterPositionsTexture,
86
- depth: false,
87
- stencil: false,
88
- })
89
-
90
- if (!this.clusterForceCoefficientTexture) this.clusterForceCoefficientTexture = reglInstance.texture()
91
- this.clusterForceCoefficientTexture({
92
- data: clusterForceCoefficient,
93
- shape: [pointsTextureSize, pointsTextureSize, 4],
94
- type: 'float',
95
- })
96
- if (!this.clusterForceCoefficientFbo) this.clusterForceCoefficientFbo = reglInstance.framebuffer()
97
- this.clusterForceCoefficientFbo({
98
- color: this.clusterForceCoefficientTexture,
99
- depth: false,
100
- stencil: false,
101
- })
102
-
103
- if (!this.centermassTexture) this.centermassTexture = reglInstance.texture()
104
- this.centermassTexture({
105
- data: new Float32Array(this.clustersTextureSize * this.clustersTextureSize * 4).fill(0),
106
- shape: [this.clustersTextureSize, this.clustersTextureSize, 4],
107
- type: 'float',
108
- })
109
- if (!this.centermassFbo) this.centermassFbo = reglInstance.framebuffer()
110
- this.centermassFbo({
111
- color: this.centermassTexture,
112
- depth: false,
113
- stencil: false,
114
- })
115
-
116
- if (!this.pointIndices) this.pointIndices = reglInstance.buffer(0)
117
- this.pointIndices(createIndexesForBuffer(store.pointsTextureSize))
118
- }
119
-
120
- public initPrograms (): void {
121
- const { reglInstance, store, data, points } = this
122
- if (data.pointClusters === undefined) return
123
-
124
- if (!this.clearCentermassCommand) {
125
- this.clearCentermassCommand = reglInstance({
126
- frag: clearFrag,
127
- vert: updateVert,
128
- framebuffer: () => this.centermassFbo as regl.Framebuffer2D,
129
- primitive: 'triangle strip',
130
- count: 4,
131
- attributes: { vertexCoord: createQuadBuffer(reglInstance) },
132
- })
133
- }
134
- if (!this.calculateCentermassCommand) {
135
- this.calculateCentermassCommand = reglInstance({
136
- frag: calculateCentermassFrag,
137
- vert: calculateCentermassVert,
138
- framebuffer: () => this.centermassFbo as regl.Framebuffer2D,
139
- primitive: 'points',
140
- count: () => data.pointsNumber ?? 0,
141
- attributes: {
142
- pointIndices: {
143
- buffer: this.pointIndices,
144
- size: 2,
145
- },
146
- },
147
- uniforms: {
148
- positionsTexture: () => points?.previousPositionFbo,
149
- pointsTextureSize: () => store.pointsTextureSize,
150
- clusterTexture: () => this.clusterFbo,
151
- clustersTextureSize: () => this.clustersTextureSize,
152
- },
153
- blend: {
154
- enable: true,
155
- func: {
156
- src: 'one',
157
- dst: 'one',
158
- },
159
- equation: {
160
- rgb: 'add',
161
- alpha: 'add',
162
- },
163
- },
164
- depth: { enable: false, mask: false },
165
- stencil: { enable: false },
166
- })
167
- }
168
- if (!this.applyForcesCommand) {
169
- this.applyForcesCommand = reglInstance({
170
- frag: forceFrag,
171
- vert: updateVert,
172
- framebuffer: () => points?.velocityFbo as regl.Framebuffer2D,
173
- primitive: 'triangle strip',
174
- count: 4,
175
- attributes: { vertexCoord: createQuadBuffer(reglInstance) },
176
- uniforms: {
177
- positionsTexture: () => points?.previousPositionFbo,
178
- clusterTexture: () => this.clusterFbo,
179
- centermassTexture: () => this.centermassFbo,
180
- clusterPositionsTexture: () => this.clusterPositionsFbo,
181
- clusterForceCoefficient: () => this.clusterForceCoefficientFbo,
182
- alpha: () => store.alpha,
183
- clustersTextureSize: () => this.clustersTextureSize,
184
- clusterCoefficient: () => this.config.simulationCluster,
185
- },
186
- })
187
- }
188
- }
189
-
190
- public calculateCentermass (): void {
191
- this.clearCentermassCommand?.()
192
- this.calculateCentermassCommand?.()
193
- }
194
-
195
- public run (): void {
196
- if (!this.data.pointClusters && !this.data.clusterPositions) return
197
- this.calculateCentermass()
198
- this.applyForcesCommand?.()
199
- }
200
- }
@@ -1,33 +0,0 @@
1
- import { drag } from 'd3-drag'
2
- import { Store } from '@/graph/modules/Store'
3
- import { GraphConfigInterface } from '@/graph/config'
4
-
5
- export class Drag {
6
- public readonly store: Store
7
- public readonly config: GraphConfigInterface
8
- public isActive = false
9
- public behavior = drag<HTMLCanvasElement, undefined>()
10
- .subject((event) => {
11
- return this.store.hoveredPoint && !this.store.isSpaceKeyPressed ? { x: event.x, y: event.y } : undefined
12
- })
13
- .on('start', (e) => {
14
- if (this.store.hoveredPoint) {
15
- this.store.draggingPointIndex = this.store.hoveredPoint.index
16
- this.isActive = true
17
- this.config?.onDragStart?.(e)
18
- }
19
- })
20
- .on('drag', (e) => {
21
- this.config?.onDrag?.(e)
22
- })
23
- .on('end', (e) => {
24
- this.isActive = false
25
- this.store.draggingPointIndex = undefined
26
- this.config?.onDragEnd?.(e)
27
- })
28
-
29
- public constructor (store: Store, config: GraphConfigInterface) {
30
- this.store = store
31
- this.config = config
32
- }
33
- }
@@ -1,53 +0,0 @@
1
- export const benchCSS = `
2
- #gl-bench {
3
- position:absolute;
4
- right:0;
5
- top:0;
6
- z-index:1000;
7
- -webkit-user-select: none;
8
- -moz-user-select: none;
9
- user-select: none;
10
- }
11
- #gl-bench div {
12
- position: relative;
13
- display: block;
14
- margin: 4px;
15
- padding: 0 7px 0 10px;
16
- background: #5f69de;
17
- border-radius: 15px;
18
- cursor: pointer;
19
- opacity: 0.9;
20
- }
21
- #gl-bench svg {
22
- height: 60px;
23
- margin: 0 -1px;
24
- }
25
- #gl-bench text {
26
- font-size: 12px;
27
- font-family: Helvetica,Arial,sans-serif;
28
- font-weight: 700;
29
- dominant-baseline: middle;
30
- text-anchor: middle;
31
- }
32
- #gl-bench .gl-mem {
33
- font-size: 9px;
34
- }
35
- #gl-bench line {
36
- stroke-width: 5;
37
- stroke: #112211;
38
- stroke-linecap: round;
39
- }
40
- #gl-bench polyline {
41
- fill: none;
42
- stroke: #112211;
43
- stroke-linecap: round;
44
- stroke-linejoin: round;
45
- stroke-width: 3.5;
46
- }
47
- #gl-bench rect {
48
- fill: #8288e4;
49
- }
50
- #gl-bench .opacity {
51
- stroke: #8288e4;
52
- }
53
- `
@@ -1,28 +0,0 @@
1
-
2
- import { select } from 'd3-selection'
3
- import GLBench from 'gl-bench/dist/gl-bench'
4
- import { benchCSS } from './css'
5
-
6
- export class FPSMonitor {
7
- private bench: GLBench | undefined
8
-
9
- public constructor (canvas: HTMLCanvasElement) {
10
- this.destroy()
11
- const gl = (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')) as WebGL2RenderingContext
12
- this.bench = new GLBench(gl, { css: benchCSS })
13
- }
14
-
15
- public begin (): void {
16
- this.bench?.begin('frame')
17
- }
18
-
19
- public end (now: number): void {
20
- this.bench?.end('frame')
21
- this.bench?.nextFrame(now)
22
- }
23
-
24
- public destroy (): void {
25
- this.bench = undefined
26
- select('#gl-bench').remove()
27
- }
28
- }
@@ -1,9 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- varying vec4 rgba;
6
-
7
- void main() {
8
- gl_FragColor = rgba;
9
- }
@@ -1,18 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- uniform sampler2D positionsTexture;
6
- uniform float pointsTextureSize;
7
-
8
- attribute vec2 pointIndices;
9
-
10
- varying vec4 rgba;
11
-
12
- void main() {
13
- vec4 pointPosition = texture2D(positionsTexture, pointIndices / pointsTextureSize);
14
- rgba = vec4(pointPosition.xy, 1.0, 0.0);
15
-
16
- gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
17
- gl_PointSize = 1.0;
18
- }
@@ -1,27 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- uniform sampler2D positionsTexture;
6
- uniform sampler2D centermassTexture;
7
- uniform float centerForce;
8
- uniform float alpha;
9
-
10
- varying vec2 textureCoords;
11
-
12
-
13
- void main() {
14
- vec4 pointPosition = texture2D(positionsTexture, textureCoords);
15
- vec4 velocity = vec4(0.0);
16
- vec4 centermassValues = texture2D(centermassTexture, vec2(0.0));
17
- vec2 centermassPosition = centermassValues.xy / centermassValues.b;
18
- vec2 distVector = centermassPosition - pointPosition.xy;
19
- float dist = sqrt(dot(distVector, distVector));
20
- if (dist > 0.0) {
21
- float angle = atan(distVector.y, distVector.x);
22
- float addV = alpha * centerForce * dist * 0.01;
23
- velocity.rg += addV * vec2(cos(angle), sin(angle));
24
- }
25
-
26
- gl_FragColor = velocity;
27
- }
@@ -1,104 +0,0 @@
1
- import regl from 'regl'
2
- import { CoreModule } from '@/graph/modules/core-module'
3
- import calculateCentermassFrag from '@/graph/modules/ForceCenter/calculate-centermass.frag'
4
- import calculateCentermassVert from '@/graph/modules/ForceCenter/calculate-centermass.vert'
5
- import forceFrag from '@/graph/modules/ForceCenter/force-center.frag'
6
- import { createQuadBuffer, createIndexesForBuffer } from '@/graph/modules/Shared/buffer'
7
- import clearFrag from '@/graph/modules/Shared/clear.frag'
8
- import updateVert from '@/graph/modules/Shared/quad.vert'
9
-
10
- export class ForceCenter extends CoreModule {
11
- private centermassFbo: regl.Framebuffer2D | undefined
12
- private clearCentermassCommand: regl.DrawCommand | undefined
13
- private calculateCentermassCommand: regl.DrawCommand | undefined
14
- private runCommand: regl.DrawCommand | undefined
15
- private centermassTexture: regl.Texture2D | undefined
16
- private pointIndices: regl.Buffer | undefined
17
-
18
- public create (): void {
19
- const { reglInstance, store } = this
20
- if (!this.centermassTexture) this.centermassTexture = reglInstance.texture()
21
- this.centermassTexture({
22
- data: new Float32Array(4).fill(0),
23
- shape: [1, 1, 4],
24
- type: 'float',
25
- })
26
- if (!this.centermassFbo) this.centermassFbo = reglInstance.framebuffer()
27
- this.centermassFbo({
28
- color: this.centermassTexture,
29
- depth: false,
30
- stencil: false,
31
- })
32
-
33
- if (!this.pointIndices) this.pointIndices = reglInstance.buffer(0)
34
- this.pointIndices(createIndexesForBuffer(store.pointsTextureSize))
35
- }
36
-
37
- public initPrograms (): void {
38
- const { reglInstance, config, store, data, points } = this
39
- if (!this.clearCentermassCommand) {
40
- this.clearCentermassCommand = reglInstance({
41
- frag: clearFrag,
42
- vert: updateVert,
43
- framebuffer: () => this.centermassFbo as regl.Framebuffer2D,
44
- primitive: 'triangle strip',
45
- count: 4,
46
- attributes: { vertexCoord: createQuadBuffer(reglInstance) },
47
- })
48
- }
49
- if (!this.calculateCentermassCommand) {
50
- this.calculateCentermassCommand = reglInstance({
51
- frag: calculateCentermassFrag,
52
- vert: calculateCentermassVert,
53
- framebuffer: () => this.centermassFbo as regl.Framebuffer2D,
54
- primitive: 'points',
55
- count: () => data.pointsNumber ?? 0,
56
- attributes: {
57
- pointIndices: {
58
- buffer: this.pointIndices,
59
- size: 2,
60
- },
61
- },
62
- uniforms: {
63
- positionsTexture: () => points?.previousPositionFbo,
64
- pointsTextureSize: () => store.pointsTextureSize,
65
- },
66
- blend: {
67
- enable: true,
68
- func: {
69
- src: 'one',
70
- dst: 'one',
71
- },
72
- equation: {
73
- rgb: 'add',
74
- alpha: 'add',
75
- },
76
- },
77
- depth: { enable: false, mask: false },
78
- stencil: { enable: false },
79
- })
80
- }
81
- if (!this.runCommand) {
82
- this.runCommand = reglInstance({
83
- frag: forceFrag,
84
- vert: updateVert,
85
- framebuffer: () => points?.velocityFbo as regl.Framebuffer2D,
86
- primitive: 'triangle strip',
87
- count: 4,
88
- attributes: { vertexCoord: createQuadBuffer(reglInstance) },
89
- uniforms: {
90
- positionsTexture: () => points?.previousPositionFbo,
91
- centermassTexture: () => this.centermassFbo,
92
- centerForce: () => config.simulationCenter,
93
- alpha: () => store.alpha,
94
- },
95
- })
96
- }
97
- }
98
-
99
- public run (): void {
100
- this.clearCentermassCommand?.()
101
- this.calculateCentermassCommand?.()
102
- this.runCommand?.()
103
- }
104
- }
@@ -1,27 +0,0 @@
1
- #ifdef GL_ES
2
- precision highp float;
3
- #endif
4
-
5
- uniform sampler2D positionsTexture;
6
- uniform float gravity;
7
- uniform float spaceSize;
8
- uniform float alpha;
9
-
10
- varying vec2 textureCoords;
11
-
12
- void main() {
13
- vec4 pointPosition = texture2D(positionsTexture, textureCoords);
14
-
15
- vec4 velocity = vec4(0.0);
16
-
17
- vec2 centerPosition = vec2(spaceSize / 2.0);
18
- vec2 distVector = centerPosition - pointPosition.rg;
19
- float dist = sqrt(dot(distVector, distVector));
20
- if (dist > 0.0) {
21
- float angle = atan(distVector.y, distVector.x);
22
- float additionalVelocity = alpha * gravity * dist * 0.1;
23
- velocity.rg += additionalVelocity * vec2(cos(angle), sin(angle));
24
- }
25
-
26
- gl_FragColor = velocity;
27
- }
@@ -1,33 +0,0 @@
1
- import regl from 'regl'
2
- import { CoreModule } from '@/graph/modules/core-module'
3
- import forceFrag from '@/graph/modules/ForceGravity/force-gravity.frag'
4
- import { createQuadBuffer } from '@/graph/modules/Shared/buffer'
5
- import updateVert from '@/graph/modules/Shared/quad.vert'
6
-
7
- export class ForceGravity extends CoreModule {
8
- private runCommand: regl.DrawCommand | undefined
9
-
10
- public initPrograms (): void {
11
- const { reglInstance, config, store, points } = this
12
- if (!this.runCommand) {
13
- this.runCommand = reglInstance({
14
- frag: forceFrag,
15
- vert: updateVert,
16
- framebuffer: () => points?.velocityFbo as regl.Framebuffer2D,
17
- primitive: 'triangle strip',
18
- count: 4,
19
- attributes: { vertexCoord: createQuadBuffer(reglInstance) },
20
- uniforms: {
21
- positionsTexture: () => points?.previousPositionFbo,
22
- gravity: () => config.simulationGravity,
23
- spaceSize: () => store.adjustedSpaceSize,
24
- alpha: () => store.alpha,
25
- },
26
- })
27
- }
28
- }
29
-
30
- public run (): void {
31
- this.runCommand?.()
32
- }
33
- }
@@ -1,73 +0,0 @@
1
- export function forceFrag (maxLinks: number): string {
2
- return `
3
- #ifdef GL_ES
4
- precision highp float;
5
- #endif
6
-
7
- uniform sampler2D positionsTexture;
8
- uniform float linkSpring;
9
- uniform float linkDistance;
10
- uniform vec2 linkDistRandomVariationRange;
11
-
12
- uniform sampler2D linkInfoTexture; // Texture storing first link indices and amount
13
- uniform sampler2D linkIndicesTexture;
14
- uniform sampler2D linkPropertiesTexture; // Texture storing link bias and strength
15
- uniform sampler2D linkRandomDistanceTexture;
16
-
17
- uniform float pointsTextureSize;
18
- uniform float linksTextureSize;
19
- uniform float alpha;
20
-
21
- varying vec2 textureCoords;
22
-
23
- const float MAX_LINKS = ${maxLinks}.0;
24
-
25
- void main() {
26
- vec4 pointPosition = texture2D(positionsTexture, textureCoords);
27
- vec4 velocity = vec4(0.0);
28
-
29
- vec4 linkInfo = texture2D(linkInfoTexture, textureCoords);
30
- float iCount = linkInfo.r;
31
- float jCount = linkInfo.g;
32
- float linkAmount = linkInfo.b;
33
- if (linkAmount > 0.0) {
34
- for (float i = 0.0; i < MAX_LINKS; i += 1.0) {
35
- if (i < linkAmount) {
36
- if (iCount >= linksTextureSize) {
37
- iCount = 0.0;
38
- jCount += 1.0;
39
- }
40
- vec2 linkTextureIndex = (vec2(iCount, jCount) + 0.5) / linksTextureSize;
41
- vec4 connectedPointIndex = texture2D(linkIndicesTexture, linkTextureIndex);
42
- vec4 biasAndStrength = texture2D(linkPropertiesTexture, linkTextureIndex);
43
- vec4 randomMinDistance = texture2D(linkRandomDistanceTexture, linkTextureIndex);
44
- float bias = biasAndStrength.r;
45
- float strength = biasAndStrength.g;
46
- float randomMinLinkDist = randomMinDistance.r * (linkDistRandomVariationRange.g - linkDistRandomVariationRange.r) + linkDistRandomVariationRange.r;
47
- randomMinLinkDist *= linkDistance;
48
-
49
- iCount += 1.0;
50
-
51
- vec4 connectedPointPosition = texture2D(positionsTexture, (connectedPointIndex.rg + 0.5) / pointsTextureSize);
52
- float x = connectedPointPosition.x - (pointPosition.x + velocity.x);
53
- float y = connectedPointPosition.y - (pointPosition.y + velocity.y);
54
- float l = sqrt(x * x + y * y);
55
-
56
- // Apply the link force
57
- l = max(l, randomMinLinkDist * 0.99);
58
- l = (l - randomMinLinkDist) / l;
59
- l *= linkSpring * alpha;
60
- l *= strength;
61
- l *= bias;
62
- x *= l;
63
- y *= l;
64
- velocity.x += x;
65
- velocity.y += y;
66
- }
67
- }
68
- }
69
-
70
- gl_FragColor = vec4(velocity.rg, 0.0, 0.0);
71
- }
72
- `
73
- }