@sqlrooms/cosmos 0.7.0 → 0.8.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.
- package/dist/CosmosGraph.js +1 -1
- package/dist/CosmosGraph.js.map +1 -1
- package/dist/CosmosGraphControls.js +1 -1
- package/dist/CosmosGraphControls.js.map +1 -1
- package/dist/CosmosSimulationControls.js +2 -2
- package/dist/CosmosSimulationControls.js.map +1 -1
- package/dist/CosmosSlice.js +5 -5
- package/dist/CosmosSlice.js.map +1 -1
- package/dist/hooks/useHoverState.d.ts.map +1 -1
- package/dist/utils/coordinates.d.ts.map +1 -1
- package/package.json +5 -5
package/dist/CosmosGraph.js
CHANGED
|
@@ -84,7 +84,7 @@ export const CosmosGraph = ({ config, pointPositions, pointSizes, pointColors, l
|
|
|
84
84
|
useEffect(() => {
|
|
85
85
|
setFocusedPoint(focusedPointIndex);
|
|
86
86
|
}, [setFocusedPoint, focusedPointIndex]);
|
|
87
|
-
return (_jsxs("div", { className: "relative
|
|
87
|
+
return (_jsxs("div", { className: "relative h-full w-full", children: [_jsx("div", { ref: containerRef, className: "absolute h-full w-full" }), renderPointTooltip ? (_jsx("div", { className: cn('absolute z-50 max-w-xs', 'rounded-md bg-white/90 p-2 shadow-lg dark:bg-gray-800/90', 'pointer-events-none flex items-center gap-2 text-xs transition-opacity duration-150', hoveredPoint ? 'opacity-100' : 'opacity-0'), style: {
|
|
88
88
|
transform: `translate(${hoveredPoint?.position?.[0] ?? 0}px, ${hoveredPoint?.position?.[1] ?? 0}px) translate(-50%, 5px)`,
|
|
89
89
|
visibility: hoveredPoint ? 'visible' : 'hidden',
|
|
90
90
|
}, children: _jsx("div", { children: renderPointTooltip?.(hoveredPoint?.index ?? 0) }) })) : null, children] }));
|
package/dist/CosmosGraph.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosGraph.js","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"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","sourcesContent":["import {GraphConfigInterface} from '@cosmograph/cosmos';\nimport {cn, useRelativeCoordinates} from '@sqlrooms/ui';\nimport {FC, useEffect, useRef} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {useHoverState} from './hooks/useHoverState';\n\n/**\n * Props for the CosmosGraph component.\n */\nexport type CosmosGraphProps = {\n /** Configuration object for the graph's visual and behavioral properties */\n config: GraphConfigInterface;\n /** Float32Array containing x,y coordinates for each point (2 values per point) */\n pointPositions: Float32Array;\n /** Float32Array containing size values for each point (1 value per point) */\n pointSizes: Float32Array;\n /** Float32Array containing RGBA values for each point (4 values per point) */\n pointColors: Float32Array;\n /** Optional Float32Array containing pairs of point indices defining links */\n linkIndexes?: Float32Array;\n /** Optional Float32Array containing RGBA values for each link (4 values per link) */\n linkColors?: Float32Array;\n /** Optional index of the point to focus on */\n focusedPointIndex?: number | undefined;\n /** Optional function to render custom tooltip content for a point */\n renderPointTooltip?: (index: number) => React.ReactNode;\n /** Optional child elements to render inside the graph container */\n children?: React.ReactNode;\n};\n\n/**\n * A React component that renders an interactive graph visualization using Cosmos.\n *\n * Features:\n * - Renders points and optional links in a WebGL canvas\n * - Supports point hovering with customizable tooltips\n * - Handles point focusing\n * - Provides graph state to child components through zustand store\n *\n * @example\n * ```tsx\n * const MyGraph = () => {\n * const config = {\n * backgroundColor: '#ffffff',\n * nodeSize: 5,\n * simulation: {\n * repulsion: 0.5,\n * gravity: 0.1,\n * },\n * };\n *\n * return (\n * <div style={{ width: '800px', height: '600px' }}>\n * <CosmosGraph\n * config={config}\n * pointPositions={new Float32Array([0, 0, 1, 1])}\n * pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}\n * pointSizes={new Float32Array([5, 5])}\n * renderPointTooltip={(index) => `Point ${index}`}\n * >\n * <GraphControls />\n * </CosmosGraph>\n * </div>\n * );\n * };\n * ```\n */\nexport const CosmosGraph: FC<CosmosGraphProps> = ({\n config,\n pointPositions,\n pointSizes,\n pointColors,\n linkIndexes,\n linkColors,\n focusedPointIndex,\n renderPointTooltip,\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const calcRelativeCoordinates = useRelativeCoordinates(containerRef);\n const {hoveredPoint, eventHandlers} = useHoverState(calcRelativeCoordinates);\n const createGraph = useStoreWithCosmos((s) => s.cosmos.createGraph);\n const destroyGraph = useStoreWithCosmos((s) => s.cosmos.destroyGraph);\n const updateGraphConfig = useStoreWithCosmos(\n (s) => s.cosmos.updateGraphConfig,\n );\n const updateGraphData = useStoreWithCosmos((s) => s.cosmos.updateGraphData);\n const setFocusedPoint = useStoreWithCosmos((s) => s.cosmos.setFocusedPoint);\n\n // Create graph instance and clean up on unmount\n useEffect(() => {\n if (!containerRef.current) return;\n createGraph(containerRef.current);\n return () => destroyGraph();\n }, [createGraph, destroyGraph]);\n\n // Update graph config when it changes\n useEffect(() => {\n updateGraphConfig({\n ...config,\n ...eventHandlers,\n });\n }, [config, eventHandlers, updateGraphConfig]);\n\n // Update graph data when props change\n useEffect(() => {\n updateGraphData({\n pointPositions,\n pointColors,\n pointSizes,\n linkIndexes,\n linkColors,\n });\n }, [\n updateGraphData,\n pointPositions,\n pointColors,\n pointSizes,\n linkIndexes,\n linkColors,\n ]);\n\n // Update focus when it changes\n useEffect(() => {\n setFocusedPoint(focusedPointIndex);\n }, [setFocusedPoint, focusedPointIndex]);\n\n return (\n <div className=\"relative
|
|
1
|
+
{"version":3,"file":"CosmosGraph.js","sourceRoot":"","sources":["../src/CosmosGraph.tsx"],"names":[],"mappings":"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","sourcesContent":["import {GraphConfigInterface} from '@cosmograph/cosmos';\nimport {cn, useRelativeCoordinates} from '@sqlrooms/ui';\nimport {FC, useEffect, useRef} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {useHoverState} from './hooks/useHoverState';\n\n/**\n * Props for the CosmosGraph component.\n */\nexport type CosmosGraphProps = {\n /** Configuration object for the graph's visual and behavioral properties */\n config: GraphConfigInterface;\n /** Float32Array containing x,y coordinates for each point (2 values per point) */\n pointPositions: Float32Array;\n /** Float32Array containing size values for each point (1 value per point) */\n pointSizes: Float32Array;\n /** Float32Array containing RGBA values for each point (4 values per point) */\n pointColors: Float32Array;\n /** Optional Float32Array containing pairs of point indices defining links */\n linkIndexes?: Float32Array;\n /** Optional Float32Array containing RGBA values for each link (4 values per link) */\n linkColors?: Float32Array;\n /** Optional index of the point to focus on */\n focusedPointIndex?: number | undefined;\n /** Optional function to render custom tooltip content for a point */\n renderPointTooltip?: (index: number) => React.ReactNode;\n /** Optional child elements to render inside the graph container */\n children?: React.ReactNode;\n};\n\n/**\n * A React component that renders an interactive graph visualization using Cosmos.\n *\n * Features:\n * - Renders points and optional links in a WebGL canvas\n * - Supports point hovering with customizable tooltips\n * - Handles point focusing\n * - Provides graph state to child components through zustand store\n *\n * @example\n * ```tsx\n * const MyGraph = () => {\n * const config = {\n * backgroundColor: '#ffffff',\n * nodeSize: 5,\n * simulation: {\n * repulsion: 0.5,\n * gravity: 0.1,\n * },\n * };\n *\n * return (\n * <div style={{ width: '800px', height: '600px' }}>\n * <CosmosGraph\n * config={config}\n * pointPositions={new Float32Array([0, 0, 1, 1])}\n * pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}\n * pointSizes={new Float32Array([5, 5])}\n * renderPointTooltip={(index) => `Point ${index}`}\n * >\n * <GraphControls />\n * </CosmosGraph>\n * </div>\n * );\n * };\n * ```\n */\nexport const CosmosGraph: FC<CosmosGraphProps> = ({\n config,\n pointPositions,\n pointSizes,\n pointColors,\n linkIndexes,\n linkColors,\n focusedPointIndex,\n renderPointTooltip,\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const calcRelativeCoordinates = useRelativeCoordinates(containerRef);\n const {hoveredPoint, eventHandlers} = useHoverState(calcRelativeCoordinates);\n const createGraph = useStoreWithCosmos((s) => s.cosmos.createGraph);\n const destroyGraph = useStoreWithCosmos((s) => s.cosmos.destroyGraph);\n const updateGraphConfig = useStoreWithCosmos(\n (s) => s.cosmos.updateGraphConfig,\n );\n const updateGraphData = useStoreWithCosmos((s) => s.cosmos.updateGraphData);\n const setFocusedPoint = useStoreWithCosmos((s) => s.cosmos.setFocusedPoint);\n\n // Create graph instance and clean up on unmount\n useEffect(() => {\n if (!containerRef.current) return;\n createGraph(containerRef.current);\n return () => destroyGraph();\n }, [createGraph, destroyGraph]);\n\n // Update graph config when it changes\n useEffect(() => {\n updateGraphConfig({\n ...config,\n ...eventHandlers,\n });\n }, [config, eventHandlers, updateGraphConfig]);\n\n // Update graph data when props change\n useEffect(() => {\n updateGraphData({\n pointPositions,\n pointColors,\n pointSizes,\n linkIndexes,\n linkColors,\n });\n }, [\n updateGraphData,\n pointPositions,\n pointColors,\n pointSizes,\n linkIndexes,\n linkColors,\n ]);\n\n // Update focus when it changes\n useEffect(() => {\n setFocusedPoint(focusedPointIndex);\n }, [setFocusedPoint, focusedPointIndex]);\n\n return (\n <div className=\"relative h-full w-full\">\n <div ref={containerRef} className=\"absolute h-full w-full\" />\n {renderPointTooltip ? (\n <div\n className={cn(\n 'absolute z-50 max-w-xs',\n 'rounded-md bg-white/90 p-2 shadow-lg dark:bg-gray-800/90',\n 'pointer-events-none flex items-center gap-2 text-xs transition-opacity duration-150',\n hoveredPoint ? 'opacity-100' : 'opacity-0',\n )}\n style={{\n transform: `translate(${hoveredPoint?.position?.[0] ?? 0}px, ${\n hoveredPoint?.position?.[1] ?? 0\n }px) translate(-50%, 5px)`,\n visibility: hoveredPoint ? 'visible' : 'hidden',\n }}\n >\n <div>{renderPointTooltip?.(hoveredPoint?.index ?? 0)}</div>\n </div>\n ) : null}\n {children}\n </div>\n );\n};\n"]}
|
|
@@ -36,6 +36,6 @@ import { useStoreWithCosmos } from './CosmosSlice';
|
|
|
36
36
|
*/
|
|
37
37
|
export const CosmosGraphControls = ({ className, children }) => {
|
|
38
38
|
const { fitView } = useStoreWithCosmos((s) => s.cosmos);
|
|
39
|
-
return (_jsxs("div", { className: cn('absolute
|
|
39
|
+
return (_jsxs("div", { className: cn('absolute left-1 top-1 flex gap-2', className), children: [_jsx(Button, { onClick: fitView, variant: "outline", size: "sm", children: _jsx(Maximize2, { className: "h-4 w-4" }) }), children] }));
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=CosmosGraphControls.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosGraphControls.js","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC5B,MAAM,EAAC,OAAO,EAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,aAC/D,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACnD,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAC1B,EACR,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport {Maximize2} from 'lucide-react';\nimport {FC, PropsWithChildren} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\n\ninterface CosmosGraphControlsProps {\n /**\n * Optional className to override the default positioning and styling of the controls container.\n * By default, controls are positioned at the top-left corner.\n * @example\n * ```tsx\n * // Position controls at the bottom-right\n * <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n * ```\n */\n className?: string;\n}\n\n/**\n * A flexible control panel component for CosmosGraph that provides view controls.\n * Must be used within a CosmosGraph component as it relies on the graph state from the store.\n *\n * The component shows the default fit view control and allows adding custom controls as children.\n * For simulation controls, use the CosmosSimulationControls component.\n *\n * @example Default usage\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls />\n * </CosmosGraph>\n * ```\n *\n * @example Custom positioning\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n * </CosmosGraph>\n * ```\n *\n * @example Adding custom controls\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls>\n * <Button onClick={handleExport}>\n * <Download className=\"h-4 w-4\" />\n * </Button>\n * </CosmosGraphControls>\n * </CosmosGraph>\n * ```\n */\nexport const CosmosGraphControls: FC<\n PropsWithChildren<CosmosGraphControlsProps>\n> = ({className, children}) => {\n const {fitView} = useStoreWithCosmos((s) => s.cosmos);\n\n return (\n <div className={cn('absolute
|
|
1
|
+
{"version":3,"file":"CosmosGraphControls.js","sourceRoot":"","sources":["../src/CosmosGraphControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAE,EAAE,EAAC,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAE5B,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC5B,MAAM,EAAC,OAAO,EAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,aAC/D,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACnD,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAC1B,EACR,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {Button, cn} from '@sqlrooms/ui';\nimport {Maximize2} from 'lucide-react';\nimport {FC, PropsWithChildren} from 'react';\nimport {useStoreWithCosmos} from './CosmosSlice';\n\ninterface CosmosGraphControlsProps {\n /**\n * Optional className to override the default positioning and styling of the controls container.\n * By default, controls are positioned at the top-left corner.\n * @example\n * ```tsx\n * // Position controls at the bottom-right\n * <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n * ```\n */\n className?: string;\n}\n\n/**\n * A flexible control panel component for CosmosGraph that provides view controls.\n * Must be used within a CosmosGraph component as it relies on the graph state from the store.\n *\n * The component shows the default fit view control and allows adding custom controls as children.\n * For simulation controls, use the CosmosSimulationControls component.\n *\n * @example Default usage\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls />\n * </CosmosGraph>\n * ```\n *\n * @example Custom positioning\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls className=\"absolute bottom-4 right-4\" />\n * </CosmosGraph>\n * ```\n *\n * @example Adding custom controls\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls>\n * <Button onClick={handleExport}>\n * <Download className=\"h-4 w-4\" />\n * </Button>\n * </CosmosGraphControls>\n * </CosmosGraph>\n * ```\n */\nexport const CosmosGraphControls: FC<\n PropsWithChildren<CosmosGraphControlsProps>\n> = ({className, children}) => {\n const {fitView} = useStoreWithCosmos((s) => s.cosmos);\n\n return (\n <div className={cn('absolute left-1 top-1 flex gap-2', className)}>\n <Button onClick={fitView} variant=\"outline\" size=\"sm\">\n <Maximize2 className=\"h-4 w-4\" />\n </Button>\n {children}\n </div>\n );\n};\n"]}
|
|
@@ -110,10 +110,10 @@ const simulationSliders = [
|
|
|
110
110
|
*/
|
|
111
111
|
export const CosmosSimulationControls = ({ className, }) => {
|
|
112
112
|
const { isSimulationRunning, toggleSimulation, startWithEnergy, updateSimulationConfig, } = useStoreWithCosmos((s) => s.cosmos);
|
|
113
|
-
const config = useStoreWithCosmos((s) => s.
|
|
113
|
+
const config = useStoreWithCosmos((s) => s.config.cosmos);
|
|
114
114
|
const handleParameterChange = (paramKey, value) => {
|
|
115
115
|
updateSimulationConfig({ [paramKey]: value[0] });
|
|
116
116
|
};
|
|
117
|
-
return (_jsxs("div", { className: cn('
|
|
117
|
+
return (_jsxs("div", { className: cn('bg-card/90 dark:bg-card/90 w-48 space-y-4 rounded-lg p-3 shadow-lg', className), children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: toggleSimulation, variant: "outline", size: "sm", className: "flex-1", children: isSimulationRunning ? (_jsx(Pause, { className: "h-4 w-4" })) : (_jsx(Play, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "bottom", children: isSimulationRunning ? 'Pause simulation' : 'Start simulation' })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: startWithEnergy, variant: "outline", size: "sm", className: "flex-1", children: _jsx(Wind, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Push energy into simulation" })] })] }), simulationSliders.map(({ key, label, min, max, step }) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Label, { htmlFor: key, className: "flex cursor-help items-center gap-1 text-xs font-medium", children: [_jsx(Info, { className: "text-muted-foreground/50 h-3 w-3" }), label] }) }), _jsx(TooltipContent, { side: "left", className: "max-w-[200px]", children: CosmosSliceConfig.shape.cosmos.shape[key].description })] }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: config[key].toFixed(2) })] }), _jsx(Slider, { id: key, min: min, max: max, step: step, value: [config[key]], onValueChange: (value) => handleParameterChange(key, value), className: "w-full" })] }, key)))] }));
|
|
118
118
|
};
|
|
119
119
|
//# sourceMappingURL=CosmosSimulationControls.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosSimulationControls.js","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,EAAE,EACF,MAAM,EACN,KAAK,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,MAAM,GACP,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AACrD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAmBtD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG;IACxB;QACE,GAAG,EAAE,mBAAmB;QACxB,KAAK,EAAE,SAAS;QAChB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,qBAAqB;QAC1B,KAAK,EAAE,WAAW;QAClB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,sBAAsB;QAC3B,KAAK,EAAE,eAAe;QACtB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,wBAAwB;QAC7B,KAAK,EAAE,eAAe;QACtB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD;QACE,GAAG,EAAE,oBAAoB;QACzB,KAAK,EAAE,UAAU;QACjB,GAAG,EAAE,CAAC;QACN,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,IAAI;KACX;IACD;QACE,GAAG,EAAE,iBAAiB;QACtB,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,GAAG;QACR,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,GAAG;KACV;CACO,CAAC;AAIX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsC,CAAC,EAC1E,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EACJ,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,GACvB,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAExC,MAAM,MAAM,GAAG,kBAAkB,CAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"CosmosSimulationControls.js","sourceRoot":"","sources":["../src/CosmosSimulationControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n cn,\n Slider,\n Label,\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n Button,\n} from '@sqlrooms/ui';\nimport {FC} from 'react';\nimport {Info, Pause, Play, Wind} from 'lucide-react';\nimport {useStoreWithCosmos} from './CosmosSlice';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\n\n/**\n * Props for the CosmosSimulationControls component.\n */\ninterface CosmosSimulationControlsProps {\n /**\n * Optional className to override the default positioning and styling of the controls container.\n * By default, controls are positioned at the top-right corner.\n *\n * @example\n * ```tsx\n * // Position controls at the bottom-right\n * <CosmosSimulationControls className=\"absolute bottom-4 right-4\" />\n * ```\n */\n className?: string;\n}\n\n/**\n * Configuration for each simulation parameter slider.\n * These values define the range and step size for each parameter.\n *\n * @internal\n */\nconst simulationSliders = [\n {\n key: 'simulationGravity',\n label: 'Gravity',\n min: 0,\n max: 0.5,\n step: 0.01,\n },\n {\n key: 'simulationRepulsion',\n label: 'Repulsion',\n min: 0,\n max: 2,\n step: 0.01,\n },\n {\n key: 'simulationLinkSpring',\n label: 'Link Strength',\n min: 0,\n max: 2,\n step: 0.01,\n },\n {\n key: 'simulationLinkDistance',\n label: 'Link Distance',\n min: 1,\n max: 20,\n step: 1,\n },\n {\n key: 'simulationFriction',\n label: 'Friction',\n min: 0,\n max: 1,\n step: 0.01,\n },\n {\n key: 'simulationDecay',\n label: 'Decay',\n min: 100,\n max: 10000,\n step: 100,\n },\n] as const;\n\ntype SimulationKey = (typeof simulationSliders)[number]['key'];\n\n/**\n * A component that provides fine-grained controls for adjusting graph simulation parameters.\n * Uses the zustand store to access and control the graph state.\n *\n * Features:\n * - Slider controls for all simulation parameters\n * - Real-time parameter adjustment\n * - Tooltips with parameter descriptions\n * - Customizable positioning\n * - Default values optimized for common use cases\n *\n * Available parameters:\n * - Gravity (0-0.5): Controls how strongly nodes are pulled toward the center\n * - Repulsion (0-2): Controls how strongly nodes push away from each other\n * - Link Strength (0-2): Controls the spring force between connected nodes\n * - Link Distance (1-20): Sets the natural length of links between nodes\n * - Friction (0-1): Controls how quickly node movement decays\n * - Decay (100-10000): Controls how quickly the simulation \"cools down\"\n *\n * @example Basic usage\n * ```tsx\n * import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n * return (\n * <CosmosGraph {...graphProps}>\n * <CosmosSimulationControls />\n * </CosmosGraph>\n * );\n * };\n * ```\n *\n * @example Custom positioning with other controls\n * ```tsx\n * import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';\n *\n * const MyGraph = () => {\n * return (\n * <CosmosGraph {...graphProps}>\n * <CosmosGraphControls className=\"absolute top-4 left-4\" />\n * <CosmosSimulationControls className=\"absolute top-4 right-4\" />\n * </CosmosGraph>\n * );\n * };\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <CosmosGraph {...graphProps}>\n * <CosmosSimulationControls\n * className=\"absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm\"\n * />\n * </CosmosGraph>\n * ```\n */\nexport const CosmosSimulationControls: FC<CosmosSimulationControlsProps> = ({\n className,\n}) => {\n const {\n isSimulationRunning,\n toggleSimulation,\n startWithEnergy,\n updateSimulationConfig,\n } = useStoreWithCosmos((s) => s.cosmos);\n\n const config = useStoreWithCosmos(\n (s) => s.config.cosmos,\n ) as CosmosSliceConfig['cosmos'];\n\n const handleParameterChange = (paramKey: SimulationKey, value: number[]) => {\n updateSimulationConfig({[paramKey]: value[0]});\n };\n\n return (\n <div\n className={cn(\n 'bg-card/90 dark:bg-card/90 w-48 space-y-4 rounded-lg p-3 shadow-lg',\n className,\n )}\n >\n <div className=\"flex gap-2\">\n <Tooltip>\n <TooltipTrigger asChild>\n <Button\n onClick={toggleSimulation}\n variant=\"outline\"\n size=\"sm\"\n className=\"flex-1\"\n >\n {isSimulationRunning ? (\n <Pause className=\"h-4 w-4\" />\n ) : (\n <Play className=\"h-4 w-4\" />\n )}\n </Button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n {isSimulationRunning ? 'Pause simulation' : 'Start simulation'}\n </TooltipContent>\n </Tooltip>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button\n onClick={startWithEnergy}\n variant=\"outline\"\n size=\"sm\"\n className=\"flex-1\"\n >\n <Wind className=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n Push energy into simulation\n </TooltipContent>\n </Tooltip>\n </div>\n {simulationSliders.map(({key, label, min, max, step}) => (\n <div key={key} className=\"space-y-2\">\n <div className=\"flex items-center justify-between\">\n <Tooltip>\n <TooltipTrigger asChild>\n <Label\n htmlFor={key}\n className=\"flex cursor-help items-center gap-1 text-xs font-medium\"\n >\n <Info className=\"text-muted-foreground/50 h-3 w-3\" />\n {label}\n </Label>\n </TooltipTrigger>\n <TooltipContent side=\"left\" className=\"max-w-[200px]\">\n {CosmosSliceConfig.shape.cosmos.shape[key].description}\n </TooltipContent>\n </Tooltip>\n <span className=\"text-muted-foreground text-xs tabular-nums\">\n {config[key].toFixed(2)}\n </span>\n </div>\n <Slider\n id={key}\n min={min}\n max={max}\n step={step}\n value={[config[key]]}\n onValueChange={(value) => handleParameterChange(key, value)}\n className=\"w-full\"\n />\n </div>\n ))}\n </div>\n );\n};\n"]}
|
package/dist/CosmosSlice.js
CHANGED
|
@@ -25,7 +25,7 @@ export function createCosmosSlice() {
|
|
|
25
25
|
}
|
|
26
26
|
// Create and configure new graph
|
|
27
27
|
const graph = new Graph(container);
|
|
28
|
-
const config = get().
|
|
28
|
+
const config = get().config.cosmos;
|
|
29
29
|
graph.setConfig(config);
|
|
30
30
|
graph.start();
|
|
31
31
|
set((state) => produce(state, (draft) => {
|
|
@@ -67,18 +67,18 @@ export function createCosmosSlice() {
|
|
|
67
67
|
updateSimulationConfig: (config) => {
|
|
68
68
|
const { graph } = get().cosmos;
|
|
69
69
|
set((state) => produce(state, (draft) => {
|
|
70
|
-
Object.assign(draft.
|
|
70
|
+
Object.assign(draft.config.cosmos, config);
|
|
71
71
|
if (graph) {
|
|
72
|
-
graph.setConfig(draft.
|
|
72
|
+
graph.setConfig(draft.config.cosmos);
|
|
73
73
|
}
|
|
74
74
|
}));
|
|
75
75
|
},
|
|
76
76
|
updateGraphConfig: (config) => {
|
|
77
77
|
const { graph } = get().cosmos;
|
|
78
78
|
set((state) => produce(state, (draft) => {
|
|
79
|
-
Object.assign(draft.
|
|
79
|
+
Object.assign(draft.config.cosmos, config);
|
|
80
80
|
if (graph) {
|
|
81
|
-
graph.setConfig(draft.
|
|
81
|
+
graph.setConfig(draft.config.cosmos);
|
|
82
82
|
}
|
|
83
83
|
}));
|
|
84
84
|
},
|
package/dist/CosmosSlice.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CosmosSlice.js","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Cosmos graph visualization state management using Zustand.\n * This module provides state management and control functions for the Cosmos graph visualization.\n */\n\nimport {Graph, GraphConfigInterface} from '@cosmograph/cosmos';\nimport {\n createSlice,\n useBaseProjectStore,\n type ProjectState,\n} from '@sqlrooms/project-builder';\nimport type {BaseProjectConfig} from '@sqlrooms/project-config';\nimport type {StateCreator} from 'zustand';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\nimport {produce} from 'immer';\n\n/**\n * Core state interface for the Cosmos graph visualization.\n * Contains the graph instance, simulation state, and all control functions.\n */\nexport type CosmosSliceState = {\n cosmos: {\n /** The current graph instance */\n graph: Graph | null;\n /** Whether the physics simulation is currently running */\n isSimulationRunning: boolean;\n /** Creates a new graph instance in the specified container */\n createGraph: (container: HTMLDivElement) => void;\n /** Toggles the physics simulation on/off */\n toggleSimulation: () => void;\n /** Adjusts the view to fit all nodes */\n fitView: () => void;\n /** Starts the simulation with initial energy */\n startWithEnergy: () => void;\n /** Cleans up and removes the current graph */\n destroyGraph: () => void;\n /** Updates the simulation configuration parameters */\n updateSimulationConfig: (\n config: Partial<CosmosSliceConfig['cosmos']>,\n ) => void;\n /** Updates the graph's visual configuration */\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;\n /** Updates the graph's data (points, links, colors, etc.) */\n updateGraphData: (data: {\n pointPositions?: Float32Array;\n pointColors?: Float32Array;\n pointSizes?: Float32Array;\n linkIndexes?: Float32Array;\n linkColors?: Float32Array;\n }) => void;\n /** Sets the currently focused point by its index */\n setFocusedPoint: (index: number | undefined) => void;\n /** Sets the zoom level of the graph view */\n setZoomLevel: (level: number) => void;\n };\n};\n\n/**\n * Combined type representing the full project state including Cosmos functionality.\n * Merges the base project state with Cosmos-specific state and configuration.\n */\nexport type ProjectStateWithCosmos = ProjectState<\n BaseProjectConfig & CosmosSliceConfig\n> &\n CosmosSliceState;\n\n/**\n * Creates a Zustand slice for managing Cosmos graph state.\n * This slice handles graph creation, destruction, configuration, and data updates.\n *\n * @returns A state creator function for the Cosmos slice\n */\nexport function createCosmosSlice(): StateCreator<CosmosSliceState> {\n return createSlice<BaseProjectConfig & CosmosSliceConfig, CosmosSliceState>(\n (set, get) => ({\n cosmos: {\n graph: null,\n isSimulationRunning: true,\n\n createGraph: (container: HTMLDivElement) => {\n // Clean up old graph if it exists\n const oldGraph = get().cosmos.graph;\n if (oldGraph) {\n oldGraph.pause();\n oldGraph.destroy();\n }\n\n // Create and configure new graph\n const graph = new Graph(container);\n const config = get().project.config.cosmos;\n graph.setConfig(config);\n graph.start();\n\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = graph;\n }),\n );\n },\n\n toggleSimulation: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (graph.isSimulationRunning) {\n graph.pause();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n } else {\n graph.restart();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n }\n },\n\n fitView: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.fitView();\n },\n\n startWithEnergy: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.start(1);\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n },\n\n updateSimulationConfig: (\n config: Partial<CosmosSliceConfig['cosmos']>,\n ) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.project.config.cosmos, config);\n if (graph) {\n graph.setConfig(draft.project.config.cosmos);\n }\n }),\n );\n },\n\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.project.config.cosmos, config);\n if (graph) {\n graph.setConfig(draft.project.config.cosmos);\n }\n }),\n );\n },\n\n updateGraphData: (data) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (data.pointPositions) {\n graph.setPointPositions(data.pointPositions);\n }\n if (data.pointColors) {\n graph.setPointColors(data.pointColors);\n }\n if (data.pointSizes) {\n graph.setPointSizes(data.pointSizes);\n }\n if (data.linkIndexes) {\n graph.setLinks(data.linkIndexes);\n }\n if (data.linkColors) {\n graph.setLinkColors(data.linkColors);\n }\n\n graph.render();\n },\n\n setFocusedPoint: (index) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setFocusedPointByIndex(index);\n },\n\n setZoomLevel: (level) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setZoomLevel(level);\n },\n\n destroyGraph: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n // TODO: this should be happening in cosmos\n if ((graph as any).store.div?.firstChild) {\n (graph as any).store.div.innerHTML = '';\n }\n graph.pause();\n graph.destroy();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = null;\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n },\n },\n }),\n );\n}\n\n/**\n * Hook to access the Cosmos store with proper typing.\n * Provides type-safe access to the combined project and Cosmos state.\n *\n * @template T The type of the selected state slice\n * @param selector A function that selects a portion of the state\n * @returns The selected state portion\n *\n * @example\n * ```typescript\n * const graph = useStoreWithCosmos(state => state.cosmos.graph);\n * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);\n * ```\n */\nexport function useStoreWithCosmos<T>(\n selector: (state: ProjectStateWithCosmos) => T,\n): T {\n return useBaseProjectStore<\n BaseProjectConfig & CosmosSliceConfig,\n ProjectStateWithCosmos,\n T\n >((state) => selector(state as ProjectStateWithCosmos));\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CosmosSlice.js","sourceRoot":"","sources":["../src/CosmosSlice.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Cosmos graph visualization state management using Zustand.\n * This module provides state management and control functions for the Cosmos graph visualization.\n */\n\nimport {Graph, GraphConfigInterface} from '@cosmograph/cosmos';\nimport {\n createSlice,\n useBaseProjectStore,\n type ProjectState,\n} from '@sqlrooms/project-builder';\nimport type {BaseProjectConfig} from '@sqlrooms/project-config';\nimport type {StateCreator} from 'zustand';\nimport {CosmosSliceConfig} from './CosmosSliceConfig';\nimport {produce} from 'immer';\n\n/**\n * Core state interface for the Cosmos graph visualization.\n * Contains the graph instance, simulation state, and all control functions.\n */\nexport type CosmosSliceState = {\n cosmos: {\n /** The current graph instance */\n graph: Graph | null;\n /** Whether the physics simulation is currently running */\n isSimulationRunning: boolean;\n /** Creates a new graph instance in the specified container */\n createGraph: (container: HTMLDivElement) => void;\n /** Toggles the physics simulation on/off */\n toggleSimulation: () => void;\n /** Adjusts the view to fit all nodes */\n fitView: () => void;\n /** Starts the simulation with initial energy */\n startWithEnergy: () => void;\n /** Cleans up and removes the current graph */\n destroyGraph: () => void;\n /** Updates the simulation configuration parameters */\n updateSimulationConfig: (\n config: Partial<CosmosSliceConfig['cosmos']>,\n ) => void;\n /** Updates the graph's visual configuration */\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => void;\n /** Updates the graph's data (points, links, colors, etc.) */\n updateGraphData: (data: {\n pointPositions?: Float32Array;\n pointColors?: Float32Array;\n pointSizes?: Float32Array;\n linkIndexes?: Float32Array;\n linkColors?: Float32Array;\n }) => void;\n /** Sets the currently focused point by its index */\n setFocusedPoint: (index: number | undefined) => void;\n /** Sets the zoom level of the graph view */\n setZoomLevel: (level: number) => void;\n };\n};\n\n/**\n * Combined type representing the full project state including Cosmos functionality.\n * Merges the base project state with Cosmos-specific state and configuration.\n */\nexport type ProjectStateWithCosmos = ProjectState<\n BaseProjectConfig & CosmosSliceConfig\n> &\n CosmosSliceState;\n\n/**\n * Creates a Zustand slice for managing Cosmos graph state.\n * This slice handles graph creation, destruction, configuration, and data updates.\n *\n * @returns A state creator function for the Cosmos slice\n */\nexport function createCosmosSlice(): StateCreator<CosmosSliceState> {\n return createSlice<BaseProjectConfig & CosmosSliceConfig, CosmosSliceState>(\n (set, get) => ({\n cosmos: {\n graph: null,\n isSimulationRunning: true,\n\n createGraph: (container: HTMLDivElement) => {\n // Clean up old graph if it exists\n const oldGraph = get().cosmos.graph;\n if (oldGraph) {\n oldGraph.pause();\n oldGraph.destroy();\n }\n\n // Create and configure new graph\n const graph = new Graph(container);\n const config = get().config.cosmos;\n graph.setConfig(config);\n graph.start();\n\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = graph;\n }),\n );\n },\n\n toggleSimulation: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (graph.isSimulationRunning) {\n graph.pause();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n } else {\n graph.restart();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n }\n },\n\n fitView: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.fitView();\n },\n\n startWithEnergy: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.start(1);\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.isSimulationRunning = true;\n }),\n );\n },\n\n updateSimulationConfig: (\n config: Partial<CosmosSliceConfig['cosmos']>,\n ) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.config.cosmos, config);\n if (graph) {\n graph.setConfig(draft.config.cosmos);\n }\n }),\n );\n },\n\n updateGraphConfig: (config: Partial<GraphConfigInterface>) => {\n const {graph} = get().cosmos;\n\n set((state) =>\n produce(state, (draft) => {\n Object.assign(draft.config.cosmos, config);\n if (graph) {\n graph.setConfig(draft.config.cosmos);\n }\n }),\n );\n },\n\n updateGraphData: (data) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n\n if (data.pointPositions) {\n graph.setPointPositions(data.pointPositions);\n }\n if (data.pointColors) {\n graph.setPointColors(data.pointColors);\n }\n if (data.pointSizes) {\n graph.setPointSizes(data.pointSizes);\n }\n if (data.linkIndexes) {\n graph.setLinks(data.linkIndexes);\n }\n if (data.linkColors) {\n graph.setLinkColors(data.linkColors);\n }\n\n graph.render();\n },\n\n setFocusedPoint: (index) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setFocusedPointByIndex(index);\n },\n\n setZoomLevel: (level) => {\n const {graph} = get().cosmos;\n if (!graph) return;\n graph.setZoomLevel(level);\n },\n\n destroyGraph: () => {\n const {graph} = get().cosmos;\n if (!graph) return;\n // TODO: this should be happening in cosmos\n if ((graph as any).store.div?.firstChild) {\n (graph as any).store.div.innerHTML = '';\n }\n graph.pause();\n graph.destroy();\n set((state) =>\n produce(state, (draft) => {\n draft.cosmos.graph = null;\n draft.cosmos.isSimulationRunning = false;\n }),\n );\n },\n },\n }),\n );\n}\n\n/**\n * Hook to access the Cosmos store with proper typing.\n * Provides type-safe access to the combined project and Cosmos state.\n *\n * @template T The type of the selected state slice\n * @param selector A function that selects a portion of the state\n * @returns The selected state portion\n *\n * @example\n * ```typescript\n * const graph = useStoreWithCosmos(state => state.cosmos.graph);\n * const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);\n * ```\n */\nexport function useStoreWithCosmos<T>(\n selector: (state: ProjectStateWithCosmos) => T,\n): T {\n return useBaseProjectStore<\n BaseProjectConfig & CosmosSliceConfig,\n ProjectStateWithCosmos,\n T\n >((state) => selector(state as ProjectStateWithCosmos));\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAKpD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,IAAI,CAAC;AAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"useHoverState.d.ts","sourceRoot":"","sources":["../../src/hooks/useHoverState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,cAAc,CAAC;AAKpD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5B,GAAG,IAAI,CAAC;AAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,aAAa,GACxB,yBAAyB,UAAU,CAAC,OAAO,sBAAsB,CAAC;IAkChE,sHAAsH;;IAEtH,0DAA0D;;;;;;;CAG7D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/coordinates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"coordinates.d.ts","sourceRoot":"","sources":["../../src/utils/coordinates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,OAAO,KACb,KAAK,IAAI,qBASX,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/cosmos",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@cosmograph/cosmos": "2.0.0-beta.22",
|
|
23
|
-
"@sqlrooms/project-builder": "0.
|
|
24
|
-
"@sqlrooms/project-config": "0.
|
|
25
|
-
"@sqlrooms/ui": "0.
|
|
23
|
+
"@sqlrooms/project-builder": "0.8.1",
|
|
24
|
+
"@sqlrooms/project-config": "0.8.1",
|
|
25
|
+
"@sqlrooms/ui": "0.8.1",
|
|
26
26
|
"immer": "^10.1.1",
|
|
27
27
|
"lucide-react": "^0.474.0",
|
|
28
28
|
"zod": "^3.24.1",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"lint": "eslint .",
|
|
39
39
|
"typedoc": "typedoc"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "7b5e727b79d675c17b93412c109d1ba1b22699c8"
|
|
42
42
|
}
|