@cosmos.gl/graph 2.4.0 → 2.6.0

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 (49) hide show
  1. package/.github/SECURITY.md +7 -1
  2. package/dist/config.d.ts +73 -1
  3. package/dist/index.d.ts +34 -6
  4. package/dist/index.js +4087 -3837
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +124 -44
  7. package/dist/index.min.js.map +1 -1
  8. package/dist/modules/GraphData/index.d.ts +1 -0
  9. package/dist/modules/Lines/index.d.ts +8 -0
  10. package/dist/modules/Points/index.d.ts +3 -0
  11. package/dist/modules/Store/index.d.ts +14 -2
  12. package/dist/modules/core-module.d.ts +1 -0
  13. package/dist/stories/beginners/link-hovering/data-generator.d.ts +19 -0
  14. package/dist/stories/beginners/link-hovering/index.d.ts +5 -0
  15. package/dist/stories/beginners/pinned-points/data-gen.d.ts +5 -0
  16. package/dist/stories/beginners/pinned-points/index.d.ts +5 -0
  17. package/dist/stories/beginners.stories.d.ts +2 -0
  18. package/dist/variables.d.ts +5 -2
  19. package/package.json +1 -1
  20. package/src/config.ts +95 -3
  21. package/src/index.ts +179 -32
  22. package/src/modules/GraphData/index.ts +2 -1
  23. package/src/modules/Lines/draw-curve-line.frag +12 -1
  24. package/src/modules/Lines/draw-curve-line.vert +29 -2
  25. package/src/modules/Lines/hovered-line-index.frag +27 -0
  26. package/src/modules/Lines/hovered-line-index.vert +8 -0
  27. package/src/modules/Lines/index.ts +112 -2
  28. package/src/modules/Points/index.ts +34 -0
  29. package/src/modules/Points/update-position.frag +12 -0
  30. package/src/modules/Store/index.ts +33 -2
  31. package/src/modules/core-module.ts +1 -0
  32. package/src/stories/1. welcome.mdx +11 -4
  33. package/src/stories/2. configuration.mdx +13 -3
  34. package/src/stories/3. api-reference.mdx +13 -4
  35. package/src/stories/beginners/basic-set-up/index.ts +21 -11
  36. package/src/stories/beginners/link-hovering/data-generator.ts +198 -0
  37. package/src/stories/beginners/link-hovering/index.ts +61 -0
  38. package/src/stories/beginners/link-hovering/style.css +73 -0
  39. package/src/stories/beginners/pinned-points/data-gen.ts +153 -0
  40. package/src/stories/beginners/pinned-points/index.ts +61 -0
  41. package/src/stories/beginners/quick-start.ts +3 -2
  42. package/src/stories/beginners/remove-points/config.ts +1 -1
  43. package/src/stories/beginners/remove-points/index.ts +28 -30
  44. package/src/stories/beginners.stories.ts +31 -0
  45. package/src/stories/clusters/polygon-selection/index.ts +2 -4
  46. package/src/stories/create-cosmos.ts +1 -1
  47. package/src/stories/geospatial/moscow-metro-stations/index.ts +1 -1
  48. package/src/stories/shapes/image-example/index.ts +7 -8
  49. package/src/variables.ts +5 -2
package/src/stories/clusters/polygon-selection/index.ts CHANGED
@@ -17,10 +17,8 @@ export const polygonSelection = (): {div: HTMLDivElement; graph: Graph; destroy:
17
17
  pointSize: 8,
18
18
  backgroundColor: '#1a1a2e',
19
19
  pointGreyoutOpacity: 0.2,
20
- onClick: (index: number | undefined): void => {
21
- if (index === undefined) {
22
- graph.unselectPoints()
23
- }
20
+ onBackgroundClick: (): void => {
21
+ graph.unselectPoints()
24
22
  },
25
23
  })
26
24
 
package/src/stories/create-cosmos.ts CHANGED
@@ -23,7 +23,7 @@ export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; gr
23
23
  const config: GraphConfigInterface = {
24
24
  backgroundColor: '#2d313a',
25
25
  pointSize: 3,
26
- pointColor: '#4B5BBF',
26
+ pointDefaultColor: '#4B5BBF',
27
27
  pointGreyoutOpacity: 0.1,
28
28
  scalePointsOnZoom: true,
29
29
  linkWidth: 0.8,
package/src/stories/geospatial/moscow-metro-stations/index.ts CHANGED
@@ -31,7 +31,7 @@ export const moscowMetroStations = (): {graph: Graph; div: HTMLDivElement} => {
31
31
  backgroundColor: '#2d313a',
32
32
  scalePointsOnZoom: false,
33
33
  rescalePositions,
34
- pointColor: '#FEE08B',
34
+ pointDefaultColor: '#FEE08B',
35
35
  enableSimulation: false,
36
36
  enableDrag: false,
37
37
  fitViewOnInit: true,
package/src/stories/shapes/image-example/index.ts CHANGED
@@ -194,14 +194,13 @@ export const imageExample = async (): Promise<{div: HTMLDivElement; graph: Graph
194
194
  renderHoveredPointRing: true,
195
195
 
196
196
  // Add click handler for point and background selection
197
- onClick: (pointIndex: number | undefined): void => {
198
- if (pointIndex !== undefined) {
199
- // Use built-in functionality to select the clicked point and its neighbors
200
- graph.selectPointByIndex(pointIndex, true)
201
- } else {
202
- // Clear selection when clicking on background
203
- graph.unselectPoints()
204
- }
197
+ onPointClick: (pointIndex: number): void => {
198
+ // Use built-in functionality to select the clicked point and its neighbors
199
+ graph.selectPointByIndex(pointIndex, true)
200
+ },
201
+ onBackgroundClick: (): void => {
202
+ // Clear selection when clicking on background
203
+ graph.unselectPoints()
205
204
  },
206
205
  })
207
206
 
package/src/variables.ts CHANGED
@@ -14,18 +14,21 @@ export const defaultConfigValues = {
14
14
  spaceSize: 8192,
15
15
  pointSizeScale: 1,
16
16
  linkWidthScale: 1,
17
- arrowSizeScale: 1,
17
+ linkArrowsSizeScale: 1,
18
18
  renderLinks: true,
19
19
  curvedLinks: false,
20
20
  curvedLinkSegments: 19,
21
21
  curvedLinkWeight: 0.8,
22
22
  curvedLinkControlPointDistance: 0.5,
23
- arrowLinks: false,
23
+ linkArrows: false,
24
24
  linkVisibilityDistanceRange: [50, 150],
25
25
  linkVisibilityMinTransparency: 0.25,
26
26
  hoveredPointCursor: 'auto',
27
+ hoveredLinkCursor: 'auto',
27
28
  renderHoveredPointRing: false,
28
29
  hoveredPointRingColor: 'white',
30
+ hoveredLinkColor: undefined,
31
+ hoveredLinkWidthIncrease: 5,
29
32
  focusedPointRingColor: 'white',
30
33
  focusedPointIndex: undefined,
31
34
  useClassicQuadtree: false,