@rfkit/charts 1.2.9 → 1.2.10

package/components/FrequencyDataBoard/useStationFinder.d.ts

@@ -0,0 +1,12 @@
+import type { StationInfoType } from '../../types';
+interface UseStationFinderProps {
+    frequency: string;
+}
+/**
+ * 台站查找 Hook
+ * 基于鼠标位置（left）和频率，在台站数据中查找匹配的台站
+ *
+ * 使用索引 + 容差判断，解决 step 跳跃和窄台站难以 hover 的问题
+ */
+export declare function useStationFinder({ frequency }: UseStationFinderProps): StationInfoType | undefined;
+export {};

package/components/StationAllocation/SegmentContainer.d.ts

@@ -6,6 +6,8 @@ interface StationPosition {
         left: string;
         width: string;
     };
+    startIndex: number;
+    stopIndex: number;
     signalColor?: string;
     signalTypeName?: string;
     tooltip: string;
@@ -16,9 +18,7 @@ interface SegmentContainerProps {
     currentFrequency: number;
     segmentIndex: number;
     isCurrentSegment: boolean;
-    onStationMouseEnter: (station: StationInfoType) => void;
-    onStationMouseLeave: () => void;
-    isStationInHoverRange: (station: StationInfoType) => boolean;
+    currentPointIndex: number;
 }
 declare const SegmentContainer: React.FC<SegmentContainerProps>;
 export default SegmentContainer;

package/index.js

@@ -2726,14 +2726,13 @@ var __webpack_modules__ = {
   white-space: nowrap;
   text-overflow: ellipsis;
   text-align: center;
-  height: 100%;
+  height: 8px;
   color: var(--theme-color-base);
   opacity: .68;
-  pointer-events: auto;
+  pointer-events: none;
   justify-content: center;
   align-items: center;
   min-width: 1px;
-  height: 8px;
   font-size: 12px;
   display: flex;
   position: absolute;
@@ -2745,7 +2744,9 @@ var __webpack_modules__ = {
   content: "";
   opacity: .32;
   background: var(--station-bg-color, var(--theme-color-base));
+  pointer-events: none;
   width: 100%;
+  min-width: 1px;
   height: 100%;
   position: absolute;
   top: 0;
@@ -2758,12 +2759,8 @@ var __webpack_modules__ = {
 }
 
 .segmentContainer-gDwnhB .item-ybDTIt.active-qDPFJm:after {
-  opacity: .68;
-  background: var(--station-bg-color, var(--theme-color-primary));
-}
-
-.segmentContainer-gDwnhB .item-ybDTIt:hover {
   opacity: 1;
+  background: var(--station-bg-color, var(--theme-color-primary));
 }
 `,
             ""
@@ -7965,13 +7962,79 @@ FrequencyDataBoard_styles_module_options.domAPI = styleDomAPI_default();
 FrequencyDataBoard_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(FrequencyDataBoard_styles_module.Z, FrequencyDataBoard_styles_module_options);
 const components_FrequencyDataBoard_styles_module = FrequencyDataBoard_styles_module.Z && FrequencyDataBoard_styles_module.Z.locals ? FrequencyDataBoard_styles_module.Z.locals : void 0;
-const FrequencyDataBoard = ({ left, updateKey, onChange })=>{
-    const { state: { axisY, axisX: { frequencyFormat, unit }, globalID, stationInfo } } = useStore_useStore();
+function useStationFinder({ frequency }) {
+    const { state: { cursor: { coord: { left } }, segments, stationInfo } } = useStore_useStore();
+    const stationData = stationInfo.data;
+    const totalSegmentPoints = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>segments?.reduce((sum, s)=>sum + s.point, 0) || 0, [
+        segments
+    ]);
+    const currentPosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!segments?.length || !totalSegmentPoints) return {
+            segmentIndex: -1,
+            pointIndex: -1
+        };
+        let totalPoints = 0;
+        const mousePositionRatio = left / 100;
+        for(let i = 0; i < segments.length; i++){
+            const segmentRatio = segments[i].point / totalSegmentPoints;
+            if (mousePositionRatio >= totalPoints && mousePositionRatio <= totalPoints + segmentRatio) {
+                const relativeRatio = (mousePositionRatio - totalPoints) / segmentRatio;
+                const pointIndex = Math.floor(relativeRatio * segments[i].point);
+                return {
+                    segmentIndex: i,
+                    pointIndex
+                };
+            }
+            totalPoints += segmentRatio;
+        }
+        return {
+            segmentIndex: -1,
+            pointIndex: -1
+        };
+    }, [
+        segments,
+        totalSegmentPoints,
+        left
+    ]);
+    const station = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!left || !stationData.length || !segments?.length) return;
+        const currentSegment = segments[currentPosition.segmentIndex];
+        if (!currentSegment) return;
+        const f = Number(frequency);
+        const TOLERANCE = 2;
+        const rangeStart = currentPosition.pointIndex - TOLERANCE;
+        const rangeEnd = currentPosition.pointIndex + TOLERANCE;
+        const totalRange = currentSegment.stop - currentSegment.start;
+        const matchedStation = stationData.find((i)=>{
+            const yian = i.bandwidth / 2 / 1000;
+            const startFrequency = i.frequency - yian;
+            const endFrequency = i.frequency + yian;
+            if (endFrequency < currentSegment.start || startFrequency > currentSegment.stop) return false;
+            let startIndex = Math.ceil((startFrequency - currentSegment.start) / totalRange * currentSegment.point) - 1;
+            let stopIndex = Math.floor((endFrequency - currentSegment.start) / totalRange * currentSegment.point) - 1;
+            startIndex = Math.max(startIndex, 0);
+            stopIndex = Math.min(stopIndex, currentSegment.point - 1);
+            const isMatchByIndex = !(rangeEnd < startIndex || rangeStart > stopIndex);
+            const isMatchByFrequency = f >= startFrequency && f <= endFrequency;
+            return isMatchByIndex || isMatchByFrequency;
+        });
+        return matchedStation;
+    }, [
+        frequency,
+        stationData,
+        segments,
+        currentPosition,
+        left
+    ]);
+    return station;
+}
+const FrequencyDataBoard_FrequencyDataBoard = ({ left, updateKey, onChange })=>{
+    const { state: { axisY, axisX: { frequencyFormat, unit }, globalID } } = useStore_useStore();
     const filteredSeries = useFilteredSeries(globalID);
     const index = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(Number.NaN);
     const calculateIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((data, n, series)=>{
         const values = data[n] || [];
-        if (0 === values.length) return null;
+        if (!values || 0 === values.length) return null;
         index.current = Math.max(0, Math.ceil(values.length * left / 100) - 1);
         const level = getVirtualLevel(axisY.unit, values[index.current])?.toFixed(1);
         if (!(0, utils.Ri)(level)) return null;
@@ -8040,22 +8103,9 @@ const FrequencyDataBoard = ({ left, updateKey, onChange })=>{
         frequency,
         onChange
     ]);
-    const sf = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        if (left && stationInfo.data.length > 0) {
-            const f = Number(frequency);
-            const item = stationInfo.data.find((i)=>{
-                const yian = i.bandwidth / 2 / 1000;
-                const startFrequency = i.frequency - yian;
-                const endFrequency = i.frequency + yian;
-                return f >= startFrequency && f <= endFrequency;
-            });
-            return item;
-        }
-        return '';
-    }, [
-        frequency,
-        stationInfo
-    ]);
+    const matchedStation = useStationFinder({
+        frequency
+    });
     const hasValue = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>value && (Array.isArray(value) ? value.length > 0 : true), [
         value
     ]);
@@ -8072,12 +8122,12 @@ const FrequencyDataBoard = ({ left, updateKey, onChange })=>{
             }),
             value,
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(StationInfo, {
-                stationInfo: sf
+                stationInfo: matchedStation
             })
         ]
     });
 };
-const components_FrequencyDataBoard = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FrequencyDataBoard);
+const FrequencyDataBoard = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FrequencyDataBoard_FrequencyDataBoard);
 const useUpdateKey = (key, id)=>{
     const [updateKey, setUpdateKey] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
@@ -8100,7 +8150,7 @@ const FrequencyDisplay = ({ frequency, unit })=>frequency ? /*#__PURE__*/ (0, __
 const SpectrumPopover = ({ id })=>{
     const { state: { cursor: { coord: { left } } } } = useStore_useStore();
     const updateKey = useUpdateKey('SpectrumPopover', id);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FrequencyDataBoard, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyDataBoard, {
         left: left,
         updateKey: updateKey
     });
@@ -13475,7 +13525,7 @@ const Board_Board = ({ id })=>{
     if (!show || !display) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: FrequencyTagLine_Board_styles_module.board,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FrequencyDataBoard, {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyDataBoard, {
             left: left,
             updateKey: updateKey,
             onChange: handleChange
@@ -14689,13 +14739,17 @@ StationAllocation_styles_module_options.domAPI = styleDomAPI_default();
 StationAllocation_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(StationAllocation_styles_module.Z, StationAllocation_styles_module_options);
 const components_StationAllocation_styles_module = StationAllocation_styles_module.Z && StationAllocation_styles_module.Z.locals ? StationAllocation_styles_module.Z.locals : void 0;
-const StationAllocation_SegmentContainer_SegmentContainer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ style, stationPositions, currentFrequency, segmentIndex, isCurrentSegment, onStationMouseEnter, onStationMouseLeave, isStationInHoverRange })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+const StationAllocation_SegmentContainer_SegmentContainer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ style, stationPositions, currentFrequency, segmentIndex, isCurrentSegment, currentPointIndex })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: components_StationAllocation_styles_module.segmentContainer,
         style: style,
-        children: stationPositions.map(({ station, position, signalColor, tooltip }, index)=>{
-            const isActive = isCurrentSegment && currentFrequency >= station.startFrequency && currentFrequency <= station.stopFrequency;
-            const isHovered = isStationInHoverRange(station);
-            const className = `${components_StationAllocation_styles_module.item}${isActive ? ` ${components_StationAllocation_styles_module.active}` : ''}${isHovered ? ` ${components_StationAllocation_styles_module.hovered}` : ''}`;
+        children: stationPositions.map(({ station, position, signalColor, tooltip, startIndex, stopIndex }, index)=>{
+            const TOLERANCE = 2;
+            const rangeStart = currentPointIndex - TOLERANCE;
+            const rangeEnd = currentPointIndex + TOLERANCE;
+            const isActiveByIndex = isCurrentSegment && !(rangeEnd < startIndex || rangeStart > stopIndex);
+            const isActiveByFrequency = isCurrentSegment && currentFrequency >= station.startFrequency && currentFrequency <= station.stopFrequency;
+            const isActive = isActiveByIndex || isActiveByFrequency;
+            const className = `${components_StationAllocation_styles_module.item}${isActive ? ` ${components_StationAllocation_styles_module.active}` : ''}`;
             const itemStyle = {
                 left: position.left,
                 width: position.width,
@@ -14706,71 +14760,62 @@ const StationAllocation_SegmentContainer_SegmentContainer = /*#__PURE__*/ (0, __
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
                 className: className,
                 style: itemStyle,
-                title: tooltip,
-                onMouseEnter: ()=>onStationMouseEnter(station),
-                onMouseLeave: onStationMouseLeave
+                title: tooltip
             }, `segment-${segmentIndex}-station-${station.signalName}-${station.frequency}-${index}`);
         })
     }));
 const StationAllocation_SegmentContainer = StationAllocation_SegmentContainer_SegmentContainer;
 const StationAllocation_StationAllocation = ({ show = true, display = true })=>{
-    const [hoveredFrequencyRange, setHoveredFrequencyRange] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
-    const { state: { segments, axisX: { frequencyFormat }, zoom: { style: zoomOffStyle }, cursor: { coord: { left } }, stationInfo, system: { width: containerWidth } } } = useStore_useStore();
+    const { state: { segments, axisX: { frequencyFormat }, zoom: { style: zoomOffStyle }, cursor: { coord: { left } }, stationInfo } } = useStore_useStore();
     const stationData = stationInfo.data;
     const shouldDisplay = stationInfo.show && display;
     const currentFrequency = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Number(frequencyFormat(left)), [
         left,
         frequencyFormat
     ]);
-    const handleStationMouseEnter = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((station)=>{
-        const yian = station.bandwidth / 2 / 1000;
-        const startFreq = station.frequency - yian;
-        const stopFreq = station.frequency + yian;
-        setHoveredFrequencyRange({
-            start: startFreq,
-            stop: stopFreq
-        });
-    }, []);
-    const handleStationMouseLeave = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
-        setHoveredFrequencyRange(null);
-    }, []);
-    const isStationInHoverRange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((station)=>{
-        if (!hoveredFrequencyRange) return false;
-        const yian = station.bandwidth / 2 / 1000;
-        const startFreq = station.frequency - yian;
-        const stopFreq = station.frequency + yian;
-        return !(stopFreq < hoveredFrequencyRange.start || startFreq > hoveredFrequencyRange.stop);
-    }, [
-        hoveredFrequencyRange
-    ]);
-    const currentSegmentIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        if (!segments?.length) return -1;
+    const currentPosition = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!segments?.length) return {
+            segmentIndex: -1,
+            pointIndex: -1
+        };
         let totalPoints = 0;
         const totalSegmentPoints = segments.reduce((sum, s)=>sum + s.point, 0);
         const mousePositionRatio = left / 100;
         for(let i = 0; i < segments.length; i++){
             const segmentRatio = segments[i].point / totalSegmentPoints;
-            if (mousePositionRatio >= totalPoints && mousePositionRatio <= totalPoints + segmentRatio) return i;
+            if (mousePositionRatio >= totalPoints && mousePositionRatio <= totalPoints + segmentRatio) {
+                const relativeRatio = (mousePositionRatio - totalPoints) / segmentRatio;
+                const pointIndex = Math.floor(relativeRatio * segments[i].point);
+                return {
+                    segmentIndex: i,
+                    pointIndex
+                };
+            }
             totalPoints += segmentRatio;
         }
-        return -1;
+        return {
+            segmentIndex: -1,
+            pointIndex: -1
+        };
     }, [
         segments,
         left
     ]);
     const segmentData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
         if (!segments?.length || !stationData.length) return [];
-        const MIN_WIDTH_THRESHOLD = 1 / containerWidth * 100;
+        const totalSegmentPoints = segments.reduce((sum, s)=>sum + s.point, 0);
         return segments.map((segment, segmentIndex)=>{
             const segmentStations = stationData.filter((station)=>{
-                const yian = station.bandwidth / 2 / 1000;
+                const bandwidthMHz = station.bandwidth / 1000;
+                const yian = bandwidthMHz / 2;
                 const startFreq = station.frequency - yian;
                 const stopFreq = station.frequency + yian;
                 return !(stopFreq < segment.start || startFreq > segment.stop);
             });
             const stationPositions = segmentStations.map((station)=>{
                 const totalRange = segment.stop - segment.start;
-                const yian = station.bandwidth / 2 / 1000;
+                const bandwidthMHz = station.bandwidth / 1000;
+                const yian = bandwidthMHz / 2;
                 const startFreq = station.frequency - yian;
                 const stopFreq = station.frequency + yian;
                 let startIndex = Math.ceil((startFreq - segment.start) / totalRange * segment.point) - 1;
@@ -14796,7 +14841,6 @@ const StationAllocation_StationAllocation = ({ show = true, display = true })=>{
                 stopIndex = Math.min(bestStopIndex, segment.point - 1);
                 const calculatedWidth = (stopIndex - startIndex + 1) / segment.point * 100;
                 const leftPos = startIndex / segment.point * 100;
-                const width = calculatedWidth < MIN_WIDTH_THRESHOLD ? '1px' : `${calculatedWidth}%`;
                 const signalType = station.signalType;
                 const signalTypeInfo = SIGNAL_TYPE_MAP[signalType];
                 const signalColor = signalTypeInfo?.color;
@@ -14815,15 +14859,17 @@ const StationAllocation_StationAllocation = ({ show = true, display = true })=>{
                     },
                     position: {
                         left: `${leftPos}%`,
-                        width
+                        width: `${calculatedWidth}%`
                     },
+                    startIndex,
+                    stopIndex,
                     signalColor,
                     signalTypeName,
                     tooltip
                 };
             });
-            const segmentWidth = segment.point / segments.reduce((sum, s)=>sum + s.point, 0) * 100;
-            const segmentLeft = segments.slice(0, segmentIndex).reduce((sum, s)=>sum + s.point / segments.reduce((total, seg)=>total + seg.point, 0) * 100, 0);
+            const segmentWidth = segment.point / totalSegmentPoints * 100;
+            const segmentLeft = segments.slice(0, segmentIndex).reduce((sum, s)=>sum + s.point / totalSegmentPoints * 100, 0);
             return {
                 segment,
                 segmentIndex,
@@ -14836,8 +14882,7 @@ const StationAllocation_StationAllocation = ({ show = true, display = true })=>{
         });
     }, [
         segments,
-        stationData,
-        containerWidth
+        stationData
     ]);
     if (!show || !shouldDisplay) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -14850,10 +14895,8 @@ const StationAllocation_StationAllocation = ({ show = true, display = true })=>{
                     stationPositions: stationPositions,
                     currentFrequency: currentFrequency,
                     segmentIndex: segmentIndex,
-                    isCurrentSegment: currentSegmentIndex === segmentIndex,
-                    onStationMouseEnter: handleStationMouseEnter,
-                    onStationMouseLeave: handleStationMouseLeave,
-                    isStationInHoverRange: isStationInHoverRange
+                    isCurrentSegment: currentPosition.segmentIndex === segmentIndex,
+                    currentPointIndex: currentPosition.pointIndex
                 }, `segment-${segmentIndex}`))
         })
     });
@@ -15537,7 +15580,7 @@ const AxisXTicks = ({ type })=>{
     });
 };
 const AxisX_Ticks = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisXTicks);
-const AxisX_AxisX = ({ type })=>{
+const AxisX = ({ type })=>{
     const { state: { axisX } } = useStore_useStore();
     const { children, unit, ticks } = axisX;
     const { width, pluginBoxWidth } = useAxisYWidth_useAxisYWidth();
@@ -15575,7 +15618,7 @@ const AxisX_AxisX = ({ type })=>{
         })
     });
 };
-const AxisX = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisX_AxisX);
+const components_AxisX = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisX);
 var Blaze_styles_module = __webpack_require__("../../../node_modules/.pnpm/@rsbuild+core@1.3.18/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[11].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[11].use[2]!../../../node_modules/.pnpm/@rsbuild+plugin-less@1.5.0_@rsbuild+core@1.6.0/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/Blaze/styles.module.less");
 var Blaze_styles_module_options = {};
 Blaze_styles_module_options.styleTagTransform = styleTagTransform_default();
@@ -16213,7 +16256,7 @@ const HeatmapPortal_Chart = (props)=>{
                     type: constants_ChartType.Heatmap
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Heatmap, {}),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                     type: type
                 })
             ]
@@ -16231,7 +16274,7 @@ const OccupancyPortal_Chart = (props)=>{
                     type: constants_ChartType.Occupancy
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Occupancy, {}),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                     type: type
                 })
             ]
@@ -16299,7 +16342,7 @@ const Spectrum_Chart_Chart = (props)=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
                 type: type
             })
         ]

package/package.json

@@ -5,6 +5,6 @@
   "types": "index.d.ts",
   "author": "Hxgh",
   "license": "MIT",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "private": false
 }