@sqlrooms/cosmos 0.4.2 → 0.5.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 (57) hide show
  1. package/dist/CosmosGraph.d.ts +3 -3
  2. package/dist/CosmosGraph.d.ts.map +1 -1
  3. package/dist/CosmosGraph.js +51 -13
  4. package/dist/CosmosGraph.js.map +1 -1
  5. package/dist/CosmosGraphControls.d.ts +1 -1
  6. package/dist/CosmosGraphControls.js +4 -4
  7. package/dist/CosmosGraphControls.js.map +1 -1
  8. package/dist/CosmosSimulationControls.d.ts +1 -5
  9. package/dist/CosmosSimulationControls.d.ts.map +1 -1
  10. package/dist/CosmosSimulationControls.js +7 -28
  11. package/dist/CosmosSimulationControls.js.map +1 -1
  12. package/dist/CosmosSlice.d.ts +75 -0
  13. package/dist/CosmosSlice.d.ts.map +1 -0
  14. package/dist/CosmosSlice.js +153 -0
  15. package/dist/CosmosSlice.js.map +1 -0
  16. package/dist/CosmosSliceConfig.d.ts +209 -0
  17. package/dist/CosmosSliceConfig.d.ts.map +1 -0
  18. package/dist/CosmosSliceConfig.js +187 -0
  19. package/dist/CosmosSliceConfig.js.map +1 -0
  20. package/dist/hooks/useHoverState.d.ts +11 -8
  21. package/dist/hooks/useHoverState.d.ts.map +1 -1
  22. package/dist/hooks/useHoverState.js +13 -9
  23. package/dist/hooks/useHoverState.js.map +1 -1
  24. package/dist/index.d.ts +61 -27
  25. package/dist/index.d.ts.map +1 -1
  26. package/dist/index.js +62 -26
  27. package/dist/index.js.map +1 -1
  28. package/dist/utils/coordinates.js.map +1 -1
  29. package/package.json +8 -4
  30. package/dist/CosmosGraphContext.d.ts +0 -76
  31. package/dist/CosmosGraphContext.d.ts.map +0 -1
  32. package/dist/CosmosGraphContext.js +0 -95
  33. package/dist/CosmosGraphContext.js.map +0 -1
  34. package/dist/components/CosmosGraph.d.ts +0 -14
  35. package/dist/components/CosmosGraph.d.ts.map +0 -1
  36. package/dist/components/CosmosGraph.js +0 -130
  37. package/dist/components/CosmosGraph.js.map +0 -1
  38. package/dist/config.d.ts +0 -24
  39. package/dist/config.d.ts.map +0 -1
  40. package/dist/config.js +0 -18
  41. package/dist/config.js.map +0 -1
  42. package/dist/hooks/index.d.ts +0 -29
  43. package/dist/hooks/index.d.ts.map +0 -1
  44. package/dist/hooks/index.js +0 -29
  45. package/dist/hooks/index.js.map +0 -1
  46. package/dist/hooks/useGraph.d.ts +0 -49
  47. package/dist/hooks/useGraph.d.ts.map +0 -1
  48. package/dist/hooks/useGraph.js +0 -93
  49. package/dist/hooks/useGraph.js.map +0 -1
  50. package/dist/hooks/useGraphConfig.d.ts +0 -101
  51. package/dist/hooks/useGraphConfig.d.ts.map +0 -1
  52. package/dist/hooks/useGraphConfig.js +0 -53
  53. package/dist/hooks/useGraphConfig.js.map +0 -1
  54. package/dist/hooks/useRelativeCoordinates.d.ts +0 -2
  55. package/dist/hooks/useRelativeCoordinates.d.ts.map +0 -1
  56. package/dist/hooks/useRelativeCoordinates.js +0 -10
  57. package/dist/hooks/useRelativeCoordinates.js.map +0 -1
package/dist/config.d.ts DELETED
@@ -1,24 +0,0 @@
1
- import { z } from 'zod';
2
- export declare const CosmosSimulationConfigSchema: z.ZodObject<{
3
- simulationGravity: z.ZodNumber;
4
- simulationRepulsion: z.ZodNumber;
5
- simulationLinkSpring: z.ZodNumber;
6
- simulationLinkDistance: z.ZodNumber;
7
- simulationFriction: z.ZodNumber;
8
- simulationDecay: z.ZodNumber;
9
- }, "strip", z.ZodTypeAny, {
10
- simulationDecay: number;
11
- simulationGravity: number;
12
- simulationRepulsion: number;
13
- simulationLinkSpring: number;
14
- simulationLinkDistance: number;
15
- simulationFriction: number;
16
- }, {
17
- simulationDecay: number;
18
- simulationGravity: number;
19
- simulationRepulsion: number;
20
- simulationLinkSpring: number;
21
- simulationLinkDistance: number;
22
- simulationFriction: number;
23
- }>;
24
- //# sourceMappingURL=config.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;EAsBvC,CAAC"}
package/dist/config.js DELETED
@@ -1,18 +0,0 @@
1
- import { z } from 'zod';
2
- export const CosmosSimulationConfigSchema = z.object({
3
- simulationGravity: z.number().describe('Gravity force in the simulation'),
4
- simulationRepulsion: z.number().describe('Repulsion force between nodes'),
5
- simulationLinkSpring: z
6
- .number()
7
- .describe('Spring force for links between nodes'),
8
- simulationLinkDistance: z
9
- .number()
10
- .describe('Target distance between linked nodes'),
11
- simulationFriction: z
12
- .number()
13
- .describe('Friction coefficient in the simulation'),
14
- simulationDecay: z
15
- .number()
16
- .describe('Decay coefficient in the simulation. Use smaller values if you want the simulation to "cool down" slower.'),
17
- });
18
- //# sourceMappingURL=config.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAGtB,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,CAAC,MAAM,CAAC;IACnD,iBAAiB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,iCAAiC,CAAC;IAEzE,mBAAmB,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,+BAA+B,CAAC;IAEzE,oBAAoB,EAAE,CAAC;SACpB,MAAM,EAAE;SACR,QAAQ,CAAC,sCAAsC,CAAC;IAEnD,sBAAsB,EAAE,CAAC;SACtB,MAAM,EAAE;SACR,QAAQ,CAAC,sCAAsC,CAAC;IAEnD,kBAAkB,EAAE,CAAC;SAClB,MAAM,EAAE;SACR,QAAQ,CAAC,wCAAwC,CAAC;IAErD,eAAe,EAAE,CAAC;SACf,MAAM,EAAE;SACR,QAAQ,CACP,2GAA2G,CAC5G;CACJ,CAAC,CAAC"}
@@ -1,29 +0,0 @@
1
- /**
2
- * React hooks for managing Cosmos graph state and interactions
3
- *
4
- * This module exports several hooks that help manage different aspects of a Cosmos graph:
5
- *
6
- * - `useGraph`: Core hook for managing the graph instance and its lifecycle
7
- * - `useHoverState`: Hook for managing point hover state and coordinates
8
- * - `useGraphConfig`: Hook for creating a memoized graph configuration with event handlers
9
- *
10
- * @example Using multiple hooks together
11
- * ```tsx
12
- * const MyGraph = () => {
13
- * const containerRef = useRef<HTMLDivElement>(null);
14
- * const calcRelativeCoords = useRelativeCoordinates(containerRef);
15
- *
16
- * const { hoveredPoint, onPointMouseOver } = useHoverState(calcRelativeCoords);
17
- * const config = useGraphConfig(baseConfig, onPointMouseOver, clearHoverState);
18
- * const graphRef = useGraph(containerRef, config, positions, colors, sizes);
19
- *
20
- * return <div ref={containerRef} />;
21
- * };
22
- * ```
23
- *
24
- * @packageDocumentation
25
- */
26
- export * from './useGraph';
27
- export * from './useHoverState';
28
- export * from './useGraphConfig';
29
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}
@@ -1,29 +0,0 @@
1
- /**
2
- * React hooks for managing Cosmos graph state and interactions
3
- *
4
- * This module exports several hooks that help manage different aspects of a Cosmos graph:
5
- *
6
- * - `useGraph`: Core hook for managing the graph instance and its lifecycle
7
- * - `useHoverState`: Hook for managing point hover state and coordinates
8
- * - `useGraphConfig`: Hook for creating a memoized graph configuration with event handlers
9
- *
10
- * @example Using multiple hooks together
11
- * ```tsx
12
- * const MyGraph = () => {
13
- * const containerRef = useRef<HTMLDivElement>(null);
14
- * const calcRelativeCoords = useRelativeCoordinates(containerRef);
15
- *
16
- * const { hoveredPoint, onPointMouseOver } = useHoverState(calcRelativeCoords);
17
- * const config = useGraphConfig(baseConfig, onPointMouseOver, clearHoverState);
18
- * const graphRef = useGraph(containerRef, config, positions, colors, sizes);
19
- *
20
- * return <div ref={containerRef} />;
21
- * };
22
- * ```
23
- *
24
- * @packageDocumentation
25
- */
26
- export * from './useGraph';
27
- export * from './useHoverState';
28
- export * from './useGraphConfig';
29
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}
@@ -1,49 +0,0 @@
1
- import { Graph, GraphConfigInterface } from '@cosmograph/cosmos';
2
- /**
3
- * A custom hook that manages the lifecycle and state of a Cosmos graph instance.
4
- *
5
- * This hook handles:
6
- * - Graph initialization and cleanup
7
- * - Point and link data updates
8
- * - Configuration changes
9
- * - Focus state management
10
- *
11
- * The graph is automatically initialized when the container is ready and cleaned up
12
- * when the component unmounts. It also responds to changes in data and configuration
13
- * by updating the graph accordingly.
14
- *
15
- * @example
16
- * ```tsx
17
- * const GraphComponent = () => {
18
- * const containerRef = useRef<HTMLDivElement>(null);
19
- * const config = {
20
- * backgroundColor: '#ffffff',
21
- * nodeSize: 5,
22
- * };
23
- *
24
- * const graphRef = useGraph(
25
- * containerRef,
26
- * config,
27
- * new Float32Array([0, 0, 1, 1]), // x,y coordinates for 2 points
28
- * new Float32Array([1, 0, 0, 1]), // RGBA colors for 2 points
29
- * new Float32Array([5, 5]), // sizes for 2 points
30
- * new Float32Array([0, 1]), // link between points 0 and 1
31
- * new Float32Array([0, 0, 0, 1]), // RGBA color for the link
32
- * );
33
- *
34
- * return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
35
- * };
36
- * ```
37
- *
38
- * @param containerRef - Reference to the DOM element that will contain the graph
39
- * @param config - Graph configuration object defining visual and behavioral properties
40
- * @param pointPositions - Float32Array containing x,y coordinates for each point (2 values per point)
41
- * @param pointColors - Float32Array containing RGBA values for each point (4 values per point)
42
- * @param pointSizes - Float32Array containing size values for each point (1 value per point)
43
- * @param linkIndexes - Optional Float32Array containing pairs of point indices defining links
44
- * @param linkColors - Optional Float32Array containing RGBA values for each link (4 values per link)
45
- * @param focusedPointIndex - Optional index of the point to focus on
46
- * @returns A ref containing the Graph instance
47
- */
48
- export declare const useGraph: (containerRef: React.RefObject<HTMLDivElement>, config: GraphConfigInterface, pointPositions: Float32Array, pointColors: Float32Array, pointSizes: Float32Array, linkIndexes?: Float32Array, linkColors?: Float32Array, focusedPointIndex?: number) => import("react").MutableRefObject<Graph | null>;
49
- //# sourceMappingURL=useGraph.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useGraph.d.ts","sourceRoot":"","sources":["../../src/hooks/useGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,QAAQ,iBACL,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,UACrC,oBAAoB,kBACZ,YAAY,eACf,YAAY,cACb,YAAY,gBACV,YAAY,eACb,YAAY,sBACL,MAAM,mDAkD3B,CAAC"}
@@ -1,93 +0,0 @@
1
- import { Graph } from '@cosmograph/cosmos';
2
- import { useEffect, useRef } from 'react';
3
- /**
4
- * A custom hook that manages the lifecycle and state of a Cosmos graph instance.
5
- *
6
- * This hook handles:
7
- * - Graph initialization and cleanup
8
- * - Point and link data updates
9
- * - Configuration changes
10
- * - Focus state management
11
- *
12
- * The graph is automatically initialized when the container is ready and cleaned up
13
- * when the component unmounts. It also responds to changes in data and configuration
14
- * by updating the graph accordingly.
15
- *
16
- * @example
17
- * ```tsx
18
- * const GraphComponent = () => {
19
- * const containerRef = useRef<HTMLDivElement>(null);
20
- * const config = {
21
- * backgroundColor: '#ffffff',
22
- * nodeSize: 5,
23
- * };
24
- *
25
- * const graphRef = useGraph(
26
- * containerRef,
27
- * config,
28
- * new Float32Array([0, 0, 1, 1]), // x,y coordinates for 2 points
29
- * new Float32Array([1, 0, 0, 1]), // RGBA colors for 2 points
30
- * new Float32Array([5, 5]), // sizes for 2 points
31
- * new Float32Array([0, 1]), // link between points 0 and 1
32
- * new Float32Array([0, 0, 0, 1]), // RGBA color for the link
33
- * );
34
- *
35
- * return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
36
- * };
37
- * ```
38
- *
39
- * @param containerRef - Reference to the DOM element that will contain the graph
40
- * @param config - Graph configuration object defining visual and behavioral properties
41
- * @param pointPositions - Float32Array containing x,y coordinates for each point (2 values per point)
42
- * @param pointColors - Float32Array containing RGBA values for each point (4 values per point)
43
- * @param pointSizes - Float32Array containing size values for each point (1 value per point)
44
- * @param linkIndexes - Optional Float32Array containing pairs of point indices defining links
45
- * @param linkColors - Optional Float32Array containing RGBA values for each link (4 values per link)
46
- * @param focusedPointIndex - Optional index of the point to focus on
47
- * @returns A ref containing the Graph instance
48
- */
49
- export const useGraph = (containerRef, config, pointPositions, pointColors, pointSizes, linkIndexes, linkColors, focusedPointIndex) => {
50
- const graphRef = useRef(null);
51
- useEffect(() => {
52
- if (!containerRef.current)
53
- return;
54
- if (!graphRef.current) {
55
- graphRef.current = new Graph(containerRef.current);
56
- }
57
- const graph = graphRef.current;
58
- graph.setPointPositions(pointPositions);
59
- graph.setPointColors(pointColors);
60
- graph.setPointSizes(pointSizes);
61
- if (linkIndexes && linkColors) {
62
- graph.setLinks(linkIndexes);
63
- graph.setLinkColors(linkColors);
64
- }
65
- graph.setConfig(config);
66
- graph.render();
67
- graph.start();
68
- graph.setZoomLevel(0.6);
69
- return () => {
70
- graph.pause();
71
- };
72
- }, [
73
- containerRef,
74
- pointPositions,
75
- pointColors,
76
- pointSizes,
77
- linkIndexes,
78
- linkColors,
79
- config,
80
- ]);
81
- useEffect(() => {
82
- if (!graphRef.current)
83
- return;
84
- graphRef.current.setConfig(config);
85
- }, [config]);
86
- useEffect(() => {
87
- if (!graphRef.current)
88
- return;
89
- graphRef.current.setFocusedPointByIndex(focusedPointIndex);
90
- }, [focusedPointIndex]);
91
- return graphRef;
92
- };
93
- //# sourceMappingURL=useGraph.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useGraph.js","sourceRoot":"","sources":["../../src/hooks/useGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAuB,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,YAA6C,EAC7C,MAA4B,EAC5B,cAA4B,EAC5B,WAAyB,EACzB,UAAwB,EACxB,WAA0B,EAC1B,UAAyB,EACzB,iBAA0B,EAC1B,EAAE;IACF,MAAM,QAAQ,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAClC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtB,QAAQ,CAAC,OAAO,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACrD,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;QACxC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAClC,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,WAAW,IAAI,UAAU,EAAE,CAAC;YAC9B,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;YAC5B,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC;QAED,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QACxB,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QAExB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,YAAY;QACZ,cAAc;QACd,WAAW;QACX,UAAU;QACV,WAAW;QACX,UAAU;QACV,MAAM;KACP,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}
@@ -1,101 +0,0 @@
1
- import { GraphConfigInterface } from '@cosmograph/cosmos';
2
- /**
3
- * A custom hook that creates a memoized graph configuration by combining base config with hover handlers.
4
- *
5
- * This hook merges the provided base configuration with hover-related event handlers while preserving
6
- * all the original simulation lifecycle callbacks. It ensures that hover states are properly cleared
7
- * when certain graph interactions (zoom, drag) begin.
8
- *
9
- * @example
10
- * ```tsx
11
- * const Graph = () => {
12
- * const baseConfig = {
13
- * backgroundColor: '#ffffff',
14
- * nodeSize: 5,
15
- * onSimulationStart: () => console.log('Simulation started'),
16
- * };
17
- *
18
- * const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoords);
19
- * const config = useGraphConfig(baseConfig, onPointMouseOver, clearHoverState);
20
- *
21
- * return <CosmosGraph config={config} />;
22
- * };
23
- * ```
24
- *
25
- * @param baseConfig - The base graph configuration containing visual and behavioral settings
26
- * @param onPointMouseOver - Handler function called when a point is hovered
27
- * @param clearHoverState - Handler function to clear the current hover state
28
- * @returns A memoized graph configuration that combines base settings with hover functionality
29
- */
30
- export declare const useGraphConfig: (baseConfig: GraphConfigInterface, onPointMouseOver: GraphConfigInterface["onPointMouseOver"], clearHoverState: GraphConfigInterface["onPointMouseOut"]) => {
31
- onSimulationStart: () => void;
32
- onSimulationPause: () => void;
33
- onSimulationEnd: () => void;
34
- onSimulationRestart: () => void;
35
- onPointMouseOver: ((index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined) => void) | undefined;
36
- onPointMouseOut: ((event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | undefined) => void) | undefined;
37
- onZoomStart: ((event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | undefined) => void) | undefined;
38
- onDragStart: ((event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | undefined) => void) | undefined;
39
- disableSimulation?: boolean;
40
- backgroundColor?: string | [number, number, number, number];
41
- spaceSize?: number;
42
- pointColor?: string | [number, number, number, number];
43
- pointGreyoutOpacity?: number;
44
- pointSize?: number;
45
- pointSizeScale?: number;
46
- hoveredPointCursor?: string;
47
- renderHoveredPointRing?: boolean;
48
- hoveredPointRingColor?: string | [number, number, number, number];
49
- focusedPointRingColor?: string | [number, number, number, number];
50
- focusedPointIndex?: number;
51
- renderLinks?: boolean;
52
- linkColor?: string | [number, number, number, number];
53
- linkGreyoutOpacity?: number;
54
- linkWidth?: number;
55
- linkWidthScale?: number;
56
- curvedLinks?: boolean;
57
- curvedLinkSegments?: number;
58
- curvedLinkWeight?: number;
59
- curvedLinkControlPointDistance?: number;
60
- linkArrows?: boolean;
61
- linkArrowsSizeScale?: number;
62
- linkVisibilityDistanceRange?: number[];
63
- linkVisibilityMinTransparency?: number;
64
- useQuadtree?: boolean;
65
- simulationDecay?: number;
66
- simulationGravity?: number;
67
- simulationCenter?: number;
68
- simulationRepulsion?: number;
69
- simulationRepulsionTheta?: number;
70
- simulationRepulsionQuadtreeLevels?: number;
71
- simulationLinkSpring?: number;
72
- simulationLinkDistance?: number;
73
- simulationLinkDistRandomVariationRange?: number[];
74
- simulationRepulsionFromMouse?: number;
75
- simulationFriction?: number;
76
- simulationCluster?: number;
77
- onSimulationTick?: (alpha: number, hoveredIndex?: number, pointPosition?: [number, number]) => void;
78
- onClick?: (index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void;
79
- onMouseMove?: (index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void;
80
- onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
81
- onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
82
- onDrag?: (e: D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered>) => void;
83
- onDragEnd?: (e: D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered>) => void;
84
- showFPSMonitor?: boolean;
85
- pixelRatio?: number;
86
- scalePointsOnZoom?: boolean;
87
- initialZoomLevel?: number;
88
- disableZoom?: boolean;
89
- enableSimulationDuringZoom?: boolean;
90
- enableDrag?: boolean;
91
- fitViewOnInit?: boolean;
92
- fitViewDelay?: number;
93
- fitViewPadding?: number;
94
- fitViewDuration?: number;
95
- fitViewByPointsInRect?: [[number, number], [number, number]] | [number, number][];
96
- randomSeed?: number | string;
97
- pointSamplingDistance?: number;
98
- disableAttribution?: boolean;
99
- disableRescalePositions?: boolean | undefined;
100
- };
101
- //# sourceMappingURL=useGraphConfig.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useGraphConfig.d.ts","sourceRoot":"","sources":["../../src/hooks/useGraphConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,cAAc,eACb,oBAAoB,oBACd,oBAAoB,CAAC,kBAAkB,CAAC,mBACzC,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAwB4wM,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAD91M,CAAC"}
@@ -1,53 +0,0 @@
1
- import { useMemo } from 'react';
2
- /**
3
- * A custom hook that creates a memoized graph configuration by combining base config with hover handlers.
4
- *
5
- * This hook merges the provided base configuration with hover-related event handlers while preserving
6
- * all the original simulation lifecycle callbacks. It ensures that hover states are properly cleared
7
- * when certain graph interactions (zoom, drag) begin.
8
- *
9
- * @example
10
- * ```tsx
11
- * const Graph = () => {
12
- * const baseConfig = {
13
- * backgroundColor: '#ffffff',
14
- * nodeSize: 5,
15
- * onSimulationStart: () => console.log('Simulation started'),
16
- * };
17
- *
18
- * const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoords);
19
- * const config = useGraphConfig(baseConfig, onPointMouseOver, clearHoverState);
20
- *
21
- * return <CosmosGraph config={config} />;
22
- * };
23
- * ```
24
- *
25
- * @param baseConfig - The base graph configuration containing visual and behavioral settings
26
- * @param onPointMouseOver - Handler function called when a point is hovered
27
- * @param clearHoverState - Handler function to clear the current hover state
28
- * @returns A memoized graph configuration that combines base settings with hover functionality
29
- */
30
- export const useGraphConfig = (baseConfig, onPointMouseOver, clearHoverState) => {
31
- return useMemo(() => {
32
- return {
33
- ...baseConfig,
34
- onSimulationStart: () => {
35
- baseConfig.onSimulationStart?.();
36
- },
37
- onSimulationPause: () => {
38
- baseConfig.onSimulationPause?.();
39
- },
40
- onSimulationEnd: () => {
41
- baseConfig.onSimulationEnd?.();
42
- },
43
- onSimulationRestart: () => {
44
- baseConfig.onSimulationRestart?.();
45
- },
46
- onPointMouseOver,
47
- onPointMouseOut: clearHoverState,
48
- onZoomStart: clearHoverState,
49
- onDragStart: clearHoverState,
50
- };
51
- }, [baseConfig, onPointMouseOver, clearHoverState]);
52
- };
53
- //# sourceMappingURL=useGraphConfig.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useGraphConfig.js","sourceRoot":"","sources":["../../src/hooks/useGraphConfig.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,UAAgC,EAChC,gBAA0D,EAC1D,eAAwD,EACxD,EAAE;IACF,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,OAAO;YACL,GAAG,UAAU;YACb,iBAAiB,EAAE,GAAG,EAAE;gBACtB,UAAU,CAAC,iBAAiB,EAAE,EAAE,CAAC;YACnC,CAAC;YACD,iBAAiB,EAAE,GAAG,EAAE;gBACtB,UAAU,CAAC,iBAAiB,EAAE,EAAE,CAAC;YACnC,CAAC;YACD,eAAe,EAAE,GAAG,EAAE;gBACpB,UAAU,CAAC,eAAe,EAAE,EAAE,CAAC;YACjC,CAAC;YACD,mBAAmB,EAAE,GAAG,EAAE;gBACxB,UAAU,CAAC,mBAAmB,EAAE,EAAE,CAAC;YACrC,CAAC;YACD,gBAAgB;YAChB,eAAe,EAAE,eAAe;YAChC,WAAW,EAAE,eAAe;YAC5B,WAAW,EAAE,eAAe;SACE,CAAC;IACnC,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;AACtD,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const useRelativeCoordinates: (containerRef: React.RefObject<HTMLElement>) => (x: number, y: number) => [number, number];
2
- //# sourceMappingURL=useRelativeCoordinates.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useRelativeCoordinates.d.ts","sourceRoot":"","sources":["../../src/hooks/useRelativeCoordinates.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,iBACnB,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,SAGpC,MAAM,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CAO1C,CAAC"}
@@ -1,10 +0,0 @@
1
- import { useCallback } from 'react';
2
- export const useRelativeCoordinates = (containerRef) => {
3
- return useCallback((x, y) => {
4
- if (!containerRef.current)
5
- return [0, 0];
6
- const rect = containerRef.current.getBoundingClientRect();
7
- return [x - rect.left, y - rect.top];
8
- }, [containerRef]);
9
- };
10
- //# sourceMappingURL=useRelativeCoordinates.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useRelativeCoordinates.js","sourceRoot":"","sources":["../../src/hooks/useRelativeCoordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,YAA0C,EAC1C,EAAE;IACF,OAAO,WAAW,CAChB,CAAC,CAAS,EAAE,CAAS,EAAoB,EAAE;QACzC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC1D,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AACJ,CAAC,CAAC"}