@sqlrooms/cosmos 0.4.2 → 0.5.0

package/dist/hooks/useGraph.d.ts

@@ -1,49 +0,0 @@
-import { Graph, GraphConfigInterface } from '@cosmograph/cosmos';
-/**
- * A custom hook that manages the lifecycle and state of a Cosmos graph instance.
- *
- * This hook handles:
- * - Graph initialization and cleanup
- * - Point and link data updates
- * - Configuration changes
- * - Focus state management
- *
- * The graph is automatically initialized when the container is ready and cleaned up
- * when the component unmounts. It also responds to changes in data and configuration
- * by updating the graph accordingly.
- *
- * @example
- * ```tsx
- * const GraphComponent = () => {
- *   const containerRef = useRef<HTMLDivElement>(null);
- *   const config = {
- *     backgroundColor: '#ffffff',
- *     nodeSize: 5,
- *   };
- *
- *   const graphRef = useGraph(
- *     containerRef,
- *     config,
- *     new Float32Array([0, 0, 1, 1]), // x,y coordinates for 2 points
- *     new Float32Array([1, 0, 0, 1]), // RGBA colors for 2 points
- *     new Float32Array([5, 5]), // sizes for 2 points
- *     new Float32Array([0, 1]), // link between points 0 and 1
- *     new Float32Array([0, 0, 0, 1]), // RGBA color for the link
- *   );
- *
- *   return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
- * };
- * ```
- *
- * @param containerRef - Reference to the DOM element that will contain the graph
- * @param config - Graph configuration object defining visual and behavioral properties
- * @param pointPositions - Float32Array containing x,y coordinates for each point (2 values per point)
- * @param pointColors - Float32Array containing RGBA values for each point (4 values per point)
- * @param pointSizes - Float32Array containing size values for each point (1 value per point)
- * @param linkIndexes - Optional Float32Array containing pairs of point indices defining links
- * @param linkColors - Optional Float32Array containing RGBA values for each link (4 values per link)
- * @param focusedPointIndex - Optional index of the point to focus on
- * @returns A ref containing the Graph instance
- */
-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>;
-//# sourceMappingURL=useGraph.d.ts.map

package/dist/hooks/useGraph.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/hooks/useGraph.js

@@ -1,93 +0,0 @@
-import { Graph } from '@cosmograph/cosmos';
-import { useEffect, useRef } from 'react';
-/**
- * A custom hook that manages the lifecycle and state of a Cosmos graph instance.
- *
- * This hook handles:
- * - Graph initialization and cleanup
- * - Point and link data updates
- * - Configuration changes
- * - Focus state management
- *
- * The graph is automatically initialized when the container is ready and cleaned up
- * when the component unmounts. It also responds to changes in data and configuration
- * by updating the graph accordingly.
- *
- * @example
- * ```tsx
- * const GraphComponent = () => {
- *   const containerRef = useRef<HTMLDivElement>(null);
- *   const config = {
- *     backgroundColor: '#ffffff',
- *     nodeSize: 5,
- *   };
- *
- *   const graphRef = useGraph(
- *     containerRef,
- *     config,
- *     new Float32Array([0, 0, 1, 1]), // x,y coordinates for 2 points
- *     new Float32Array([1, 0, 0, 1]), // RGBA colors for 2 points
- *     new Float32Array([5, 5]), // sizes for 2 points
- *     new Float32Array([0, 1]), // link between points 0 and 1
- *     new Float32Array([0, 0, 0, 1]), // RGBA color for the link
- *   );
- *
- *   return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
- * };
- * ```
- *
- * @param containerRef - Reference to the DOM element that will contain the graph
- * @param config - Graph configuration object defining visual and behavioral properties
- * @param pointPositions - Float32Array containing x,y coordinates for each point (2 values per point)
- * @param pointColors - Float32Array containing RGBA values for each point (4 values per point)
- * @param pointSizes - Float32Array containing size values for each point (1 value per point)
- * @param linkIndexes - Optional Float32Array containing pairs of point indices defining links
- * @param linkColors - Optional Float32Array containing RGBA values for each link (4 values per link)
- * @param focusedPointIndex - Optional index of the point to focus on
- * @returns A ref containing the Graph instance
- */
-export const useGraph = (containerRef, config, pointPositions, pointColors, pointSizes, linkIndexes, linkColors, focusedPointIndex) => {
-    const graphRef = useRef(null);
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        if (!graphRef.current) {
-            graphRef.current = new Graph(containerRef.current);
-        }
-        const graph = graphRef.current;
-        graph.setPointPositions(pointPositions);
-        graph.setPointColors(pointColors);
-        graph.setPointSizes(pointSizes);
-        if (linkIndexes && linkColors) {
-            graph.setLinks(linkIndexes);
-            graph.setLinkColors(linkColors);
-        }
-        graph.setConfig(config);
-        graph.render();
-        graph.start();
-        graph.setZoomLevel(0.6);
-        return () => {
-            graph.pause();
-        };
-    }, [
-        containerRef,
-        pointPositions,
-        pointColors,
-        pointSizes,
-        linkIndexes,
-        linkColors,
-        config,
-    ]);
-    useEffect(() => {
-        if (!graphRef.current)
-            return;
-        graphRef.current.setConfig(config);
-    }, [config]);
-    useEffect(() => {
-        if (!graphRef.current)
-            return;
-        graphRef.current.setFocusedPointByIndex(focusedPointIndex);
-    }, [focusedPointIndex]);
-    return graphRef;
-};
-//# sourceMappingURL=useGraph.js.map

package/dist/hooks/useGraph.js.map

@@ -1 +0,0 @@
-{"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"}

package/dist/hooks/useGraphConfig.d.ts

@@ -1,101 +0,0 @@
-import { GraphConfigInterface } from '@cosmograph/cosmos';
-/**
- * A custom hook that creates a memoized graph configuration by combining base config with hover handlers.
- *
- * This hook merges the provided base configuration with hover-related event handlers while preserving
- * all the original simulation lifecycle callbacks. It ensures that hover states are properly cleared
- * when certain graph interactions (zoom, drag) begin.
- *
- * @example
- * ```tsx
- * const Graph = () => {
- *   const baseConfig = {
- *     backgroundColor: '#ffffff',
- *     nodeSize: 5,
- *     onSimulationStart: () => console.log('Simulation started'),
- *   };
- *
- *   const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoords);
- *   const config = useGraphConfig(baseConfig, onPointMouseOver, clearHoverState);
- *
- *   return <CosmosGraph config={config} />;
- * };
- * ```
- *
- * @param baseConfig - The base graph configuration containing visual and behavioral settings
- * @param onPointMouseOver - Handler function called when a point is hovered
- * @param clearHoverState - Handler function to clear the current hover state
- * @returns A memoized graph configuration that combines base settings with hover functionality
- */
-export declare const useGraphConfig: (baseConfig: GraphConfigInterface, onPointMouseOver: GraphConfigInterface["onPointMouseOver"], clearHoverState: GraphConfigInterface["onPointMouseOut"]) => {
-    onSimulationStart: () => void;
-    onSimulationPause: () => void;
-    onSimulationEnd: () => void;
-    onSimulationRestart: () => void;
-    onPointMouseOver: ((index: number, pointPosition: [number, number], event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | D3ZoomEvent<HTMLCanvasElement, undefined> | undefined) => void) | undefined;
-    onPointMouseOut: ((event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | undefined) => void) | undefined;
-    onZoomStart: ((event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | undefined) => void) | undefined;
-    onDragStart: ((event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered> | undefined) => void) | undefined;
-    disableSimulation?: boolean;
-    backgroundColor?: string | [number, number, number, number];
-    spaceSize?: number;
-    pointColor?: string | [number, number, number, number];
-    pointGreyoutOpacity?: number;
-    pointSize?: number;
-    pointSizeScale?: number;
-    hoveredPointCursor?: string;
-    renderHoveredPointRing?: boolean;
-    hoveredPointRingColor?: string | [number, number, number, number];
-    focusedPointRingColor?: string | [number, number, number, number];
-    focusedPointIndex?: number;
-    renderLinks?: boolean;
-    linkColor?: string | [number, number, number, number];
-    linkGreyoutOpacity?: number;
-    linkWidth?: number;
-    linkWidthScale?: number;
-    curvedLinks?: boolean;
-    curvedLinkSegments?: number;
-    curvedLinkWeight?: number;
-    curvedLinkControlPointDistance?: number;
-    linkArrows?: boolean;
-    linkArrowsSizeScale?: number;
-    linkVisibilityDistanceRange?: number[];
-    linkVisibilityMinTransparency?: number;
-    useQuadtree?: boolean;
-    simulationDecay?: number;
-    simulationGravity?: number;
-    simulationCenter?: number;
-    simulationRepulsion?: number;
-    simulationRepulsionTheta?: number;
-    simulationRepulsionQuadtreeLevels?: number;
-    simulationLinkSpring?: number;
-    simulationLinkDistance?: number;
-    simulationLinkDistRandomVariationRange?: number[];
-    simulationRepulsionFromMouse?: number;
-    simulationFriction?: number;
-    simulationCluster?: number;
-    onSimulationTick?: (alpha: number, hoveredIndex?: number, pointPosition?: [number, number]) => void;
-    onClick?: (index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void;
-    onMouseMove?: (index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent) => void;
-    onZoom?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
-    onZoomEnd?: (e: D3ZoomEvent<HTMLCanvasElement, undefined>, userDriven: boolean) => void;
-    onDrag?: (e: D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered>) => void;
-    onDragEnd?: (e: D3DragEvent<HTMLCanvasElement, undefined, import("@cosmograph/cosmos/dist/modules/Store").Hovered>) => void;
-    showFPSMonitor?: boolean;
-    pixelRatio?: number;
-    scalePointsOnZoom?: boolean;
-    initialZoomLevel?: number;
-    disableZoom?: boolean;
-    enableSimulationDuringZoom?: boolean;
-    enableDrag?: boolean;
-    fitViewOnInit?: boolean;
-    fitViewDelay?: number;
-    fitViewPadding?: number;
-    fitViewDuration?: number;
-    fitViewByPointsInRect?: [[number, number], [number, number]] | [number, number][];
-    randomSeed?: number | string;
-    pointSamplingDistance?: number;
-    disableAttribution?: boolean;
-    disableRescalePositions?: boolean | undefined;
-};
-//# sourceMappingURL=useGraphConfig.d.ts.map

package/dist/hooks/useGraphConfig.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/hooks/useGraphConfig.js

@@ -1,53 +0,0 @@
-import { useMemo } from 'react';
-/**
- * A custom hook that creates a memoized graph configuration by combining base config with hover handlers.
- *
- * This hook merges the provided base configuration with hover-related event handlers while preserving
- * all the original simulation lifecycle callbacks. It ensures that hover states are properly cleared
- * when certain graph interactions (zoom, drag) begin.
- *
- * @example
- * ```tsx
- * const Graph = () => {
- *   const baseConfig = {
- *     backgroundColor: '#ffffff',
- *     nodeSize: 5,
- *     onSimulationStart: () => console.log('Simulation started'),
- *   };
- *
- *   const { hoveredPoint, onPointMouseOver, clearHoverState } = useHoverState(calcRelativeCoords);
- *   const config = useGraphConfig(baseConfig, onPointMouseOver, clearHoverState);
- *
- *   return <CosmosGraph config={config} />;
- * };
- * ```
- *
- * @param baseConfig - The base graph configuration containing visual and behavioral settings
- * @param onPointMouseOver - Handler function called when a point is hovered
- * @param clearHoverState - Handler function to clear the current hover state
- * @returns A memoized graph configuration that combines base settings with hover functionality
- */
-export const useGraphConfig = (baseConfig, onPointMouseOver, clearHoverState) => {
-    return useMemo(() => {
-        return {
-            ...baseConfig,
-            onSimulationStart: () => {
-                baseConfig.onSimulationStart?.();
-            },
-            onSimulationPause: () => {
-                baseConfig.onSimulationPause?.();
-            },
-            onSimulationEnd: () => {
-                baseConfig.onSimulationEnd?.();
-            },
-            onSimulationRestart: () => {
-                baseConfig.onSimulationRestart?.();
-            },
-            onPointMouseOver,
-            onPointMouseOut: clearHoverState,
-            onZoomStart: clearHoverState,
-            onDragStart: clearHoverState,
-        };
-    }, [baseConfig, onPointMouseOver, clearHoverState]);
-};
-//# sourceMappingURL=useGraphConfig.js.map

package/dist/hooks/useGraphConfig.js.map

@@ -1 +0,0 @@
-{"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"}

package/dist/hooks/useRelativeCoordinates.d.ts

@@ -1,2 +0,0 @@
-export declare const useRelativeCoordinates: (containerRef: React.RefObject<HTMLElement>) => (x: number, y: number) => [number, number];
-//# sourceMappingURL=useRelativeCoordinates.d.ts.map

package/dist/hooks/useRelativeCoordinates.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/hooks/useRelativeCoordinates.js

@@ -1,10 +0,0 @@
-import { useCallback } from 'react';
-export const useRelativeCoordinates = (containerRef) => {
-    return useCallback((x, y) => {
-        if (!containerRef.current)
-            return [0, 0];
-        const rect = containerRef.current.getBoundingClientRect();
-        return [x - rect.left, y - rect.top];
-    }, [containerRef]);
-};
-//# sourceMappingURL=useRelativeCoordinates.js.map

package/dist/hooks/useRelativeCoordinates.js.map

@@ -1 +0,0 @@
-{"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"}