@easyv/charts 1.10.7 → 1.10.9

package/src/hooks/useCarouselAxisX.js

@@ -1,318 +1,320 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { animate, linear } from "popmotion";
-
-const initialState = {
-  currentIndex: null,
-  flag: false, // 首次加载标识：true-首次加载不执行动画，false-可执行轮播
-};
-
-/**
- * x轴滚动逻辑
- * @param {Object} axis x轴配置项
- * @param {Object} config x轴轮播动画的配置项
- * @returns {Map} 返回更新后的x轴配置（ticks/scaler/range 变更）
- */
-export default (axis, config, isHover, controlInfo, active) => {
-  const { show, interval, duration, hover } = config;
-  const { isC, cPercent } = controlInfo;
-
-  const {
-    tickCount: count,
-    allTicks,
-    scaler,
-    start,
-    end,
-    step,
-    ticks,
-    lengthWithoutPaddingOuter,
-  } = axis;
-  const tickLength = ticks.length;
-  const tickCount = isC ? allTicks.length : count;
-
-  const scale = isC ? cPercent : 1;
-  const _start = start / scale;
-  const _end = end / scale;
-  const canCarousel = useMemo(
-    () => show && active && tickLength > tickCount,
-    [show, active, tickLength, tickCount]
-  );
-
-  const [state, setState] = useState({
-    scaler,
-    step,
-    ticks,
-  });
-  const [status, setStatus] = useState(initialState);
-  const [ready, setReady] = useState(true); // true 才允许开启下一轮动画（用于 interval 等待）
-  const [wakeToken, setWakeToken] = useState(0);
-  const hoverRef = useRef(isHover);
-  const prevHoverRef = useRef(isHover);
-  const intervalTimerRef = useRef(null);
-  const isAnimatingRef = useRef(false);
-  const latestRef = useRef({
-    allTicks,
-    scaler,
-    tickCount,
-    tickLength,
-    lengthWithoutPaddingOuter,
-    _start,
-    _end,
-    interval,
-    duration,
-    hover,
-  });
-
-  // 避免 hover 触发 render 时 effect 误重启动画：用 ref 持有最新输入
-  useEffect(() => {
-    latestRef.current = {
-      allTicks,
-      scaler,
-      tickCount,
-      tickLength,
-      lengthWithoutPaddingOuter,
-      _start,
-      _end,
-      interval,
-      duration,
-      hover,
-    };
-  }, [
-    allTicks,
-    scaler,
-    tickCount,
-    tickLength,
-    lengthWithoutPaddingOuter,
-    _start,
-    _end,
-    interval,
-    duration,
-    hover,
-  ]);
-
-  // hover 变化不打断正在进行的动画：只更新引用、并在需要时取消「下一轮」定时器
-  useEffect(() => {
-    const prev = prevHoverRef.current;
-    prevHoverRef.current = isHover;
-    hoverRef.current = isHover;
-    if (latestRef.current.hover && isHover && intervalTimerRef.current) {
-      clearTimeout(intervalTimerRef.current);
-      intervalTimerRef.current = null;
-    }
-
-    // 仅在 hover 从 true -> false 时唤醒轮播（避免在非 hover 状态下反复唤醒导致 interval 失效）
-    if (
-      latestRef.current.hover &&
-      prev === true &&
-      isHover === false &&
-      canCarousel &&
-      status.currentIndex !== null &&
-      !isAnimatingRef.current
-    ) {
-      setReady(true);
-      setWakeToken((v) => v + 1);
-    }
-  }, [isHover, canCarousel, status.currentIndex]);
-
-  // 初始化：仅在基础条件变化时设置初始索引
-  useEffect(() => {
-    if (show && tickLength > tickCount) {
-      setStatus({
-        currentIndex: 0,
-        flag: true,
-      });
-    } else {
-      setStatus(initialState);
-    }
-  }, [show, tickCount, tickLength]);
-  useEffect(() => {
-    let animation;
-    const { currentIndex, flag } = status;
-    const latest = latestRef.current;
-
-    // 执行条件：显示、非hover暂停、激活、有足够的轮播项
-    const canRun = canCarousel && !(latest.hover && hoverRef.current);
-
-    if (currentIndex !== null && canRun) {
-      if (flag) {
-        // 首次加载：仅初始化视图，不执行动画
-        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
-        const _ticks = latest.allTicks.slice(currentIndex, latest.tickCount);
-        setState({
-          step,
-          ticks: _ticks,
-          scaler: latest.scaler
-            .copy()
-            .domain(_ticks)
-            .range([latest._start, latest._end]),
-        });
-
-        // 首次加载完成后，启动第一轮动画（等待interval后执行）
-        if (latest.interval >= 0) {
-          intervalTimerRef.current = setTimeout(() => {
-            setStatus((prev) => ({ ...prev, flag: false }));
-          }, latest.interval * 1000);
-        } else {
-          setStatus((prev) => ({ ...prev, flag: false }));
-        }
-      } else {
-        // 非首次加载：执行动画 + 后续逻辑
-        if (!ready) return;
-        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
-
-        animation = animate({
-          from: 0,
-          to: -1,
-          duration: latest.duration * 1000,
-          ease: linear,
-          onPlay: () => {
-            isAnimatingRef.current = true;
-            // 动画开始：更新ticks和scaler初始范围
-            // 这里需要保证动画是「当前项滚出，下一项滚入」
-            // 因此后续窗口从 currentIndex + 1 开始，避免首项重复导致视觉上「从第一项滚到第一项」的闪烁
-            setState((axis) => {
-              const { ticks, scaler } = axis;
-              const [tick] = ticks;
-              const _ticks = [
-                tick,
-                ...getTicks(
-                  latest.allTicks,
-                  currentIndex + 1,
-                  latest.tickCount
-                ),
-              ];
-              return {
-                ...axis,
-                ticks: _ticks,
-                scaler: scaler
-                  .copy()
-                  .range([latest._start, latest._end + step])
-                  .domain(_ticks),
-              };
-            });
-          },
-          onUpdate: (v) => {
-            // 动画过程：实时更新scaler范围（实现滚动效果）
-            setState((axis) => {
-              const { scaler, step } = axis;
-              return {
-                ...axis,
-                scaler: scaler
-                  .copy()
-                  .range([
-                    latest._start + step * v,
-                    latest._end + step + step * v,
-                  ]),
-              };
-            });
-          },
-          onComplete: () => {
-            isAnimatingRef.current = false;
-            // 本轮结束后进入等待态，避免立即开启下一轮（保证 interval 生效）
-            setReady(false);
-            // 动画完成：重置ticks和scaler
-            setState((axis) => {
-              const { scaler, ticks } = axis;
-              const _ticks = ticks.slice(1, ticks.length);
-              return {
-                ...axis,
-                ticks: _ticks,
-                scaler: scaler
-                  .copy()
-                  .range([latest._start, latest._end])
-                  .domain(_ticks),
-              };
-            });
-
-            const nextIndex = (currentIndex + 1) % latest.tickLength;
-
-            // 无论是否 hover，都先把 currentIndex 同步到下一屏起点
-            // 否则在 interval 暂停期触发 hover/离开，会用旧索引重启，视觉上“回滚一格”
-            setStatus((prev) => ({ ...prev, currentIndex: nextIndex }));
-
-            // hover 触发时：让当前动画跑完后暂停（不再排下一轮）
-            if (latest.hover && hoverRef.current) return;
-
-            // 非hover：动画完成后，等待interval时长，再触发下一轮动画
-            intervalTimerRef.current = setTimeout(() => {
-              setReady(true);
-              setWakeToken((v) => v + 1);
-            }, latest.interval * 1000);
-          },
-        });
-      }
-    }
-
-    // 清理副作用：停止动画、清除定时器
-    return () => {
-      if (animation) {
-        animation.stop();
-        isAnimatingRef.current = false;
-      }
-      if (intervalTimerRef.current) {
-        clearTimeout(intervalTimerRef.current);
-        intervalTimerRef.current = null;
-      }
-    };
-  }, [canCarousel, status.currentIndex, status.flag, wakeToken, ready]);
-
-  // 重置逻辑：当无有效索引时恢复初始状态
-  useEffect(() => {
-    if (status.currentIndex === null) {
-      const _ticks = scaler.type === "linear" ? scaler.domain() : allTicks;
-      setState({
-        step,
-        scaler: scaler.copy().domain(_ticks).range([_start, _end]),
-        ticks,
-      });
-    }
-  }, [status.currentIndex, scaler, _start, _end, step, ticks, allTicks]);
-
-  // 当 x 轴可见项数量（count）发生变化时，安全地重置轮播节奏
-  useEffect(() => {
-    // 清掉当前的 interval 计时器，避免用旧配置继续排队
-    if (intervalTimerRef.current) {
-      clearTimeout(intervalTimerRef.current);
-      intervalTimerRef.current = null;
-    }
-
-    // 重置动画节奏，让配置变更后「立即」按最新的 tickCount/tickLength 重新初始化
-    // 不能简单 setStatus(initialState)，否则会覆盖上方的初始化 effect（先开轮播再改数量时会被清成 null，导致展示全部且不轮播）
-    isAnimatingRef.current = false;
-    setReady(true);
-    setStatus(() => {
-      // 与初始化 effect 保持一致：只要满足条件就从 0 开始重新初始化
-      if (show && active && tickLength > tickCount) {
-        return { currentIndex: 0, flag: true };
-      }
-      return initialState;
-    });
-    setWakeToken((v) => v + 1);
-  }, [count, show, active, tickLength, tickCount]);
-
-  return {
-    ...axis,
-    ...state,
-    controlEnd: _end,
-  };
-};
-
-/**
- * 获取指定索引范围的ticks（支持循环）
- * @param {Array} ticks 所有ticks
- * @param {number} currentIndex 当前起始索引
- * @param {number} length 需要的长度
- * @returns {Array} 目标ticks数组
- */
-const getTicks = (ticks, currentIndex, length) => {
-  const _currentIndex = +currentIndex;
-  const ticksLength = ticks.length;
-  if (ticksLength <= length) return ticks;
-
-  const _end = _currentIndex + length;
-  if (ticksLength < _end) {
-    const prev = ticks.slice(_currentIndex, ticksLength);
-    const next = ticks.slice(0, _end - ticksLength);
-    return [...prev, ...next];
-  }
-  return ticks.slice(_currentIndex, _end);
-};
+import { useEffect, useMemo, useRef, useState } from "react";
+import { animate, linear } from "popmotion";
+
+const initialState = {
+  currentIndex: null,
+  flag: false, // 首次加载标识：true-首次加载不执行动画，false-可执行轮播
+};
+
+/**
+ * x轴滚动逻辑
+ * @param {Object} axis x轴配置项
+ * @param {Object} config x轴轮播动画的配置项
+ * @returns {Map} 返回更新后的x轴配置（ticks/scaler/range 变更）
+ */
+export default (axis, config, isHover, controlInfo, active) => {
+  const { show, interval, duration, hover } = config;
+  const { isC, cPercent } = controlInfo;
+
+  const {
+    tickCount: count,
+    allTicks,
+    scaler,
+    start,
+    end,
+    step,
+    ticks,
+    lengthWithoutPaddingOuter,
+  } = axis;
+  const tickLength = ticks.length;
+  const tickCount = isC ? allTicks.length : count;
+
+  const scale = isC && cPercent > 0 ? cPercent : 1;
+  const _start = start / scale;
+  const _end = end / scale;
+  const canCarousel = useMemo(
+    () => show && active && tickCount > 0 && tickLength > tickCount,
+    [show, active, tickLength, tickCount]
+  );
+
+  const [state, setState] = useState({
+    scaler,
+    step,
+    ticks,
+  });
+  const [status, setStatus] = useState(initialState);
+  const [ready, setReady] = useState(true); // true 才允许开启下一轮动画（用于 interval 等待）
+  const [wakeToken, setWakeToken] = useState(0);
+  const hoverRef = useRef(isHover);
+  const prevHoverRef = useRef(isHover);
+  const intervalTimerRef = useRef(null);
+  const isAnimatingRef = useRef(false);
+  const latestRef = useRef({
+    allTicks,
+    scaler,
+    tickCount,
+    tickLength,
+    lengthWithoutPaddingOuter,
+    _start,
+    _end,
+    interval,
+    duration,
+    hover,
+  });
+
+  // 避免 hover 触发 render 时 effect 误重启动画：用 ref 持有最新输入
+  useEffect(() => {
+    latestRef.current = {
+      allTicks,
+      scaler,
+      tickCount,
+      tickLength,
+      lengthWithoutPaddingOuter,
+      _start,
+      _end,
+      interval,
+      duration,
+      hover,
+    };
+  }, [
+    allTicks,
+    scaler,
+    tickCount,
+    tickLength,
+    lengthWithoutPaddingOuter,
+    _start,
+    _end,
+    interval,
+    duration,
+    hover,
+  ]);
+
+  // hover 变化不打断正在进行的动画：只更新引用、并在需要时取消「下一轮」定时器
+  useEffect(() => {
+    const prev = prevHoverRef.current;
+    prevHoverRef.current = isHover;
+    hoverRef.current = isHover;
+    if (latestRef.current.hover && isHover && intervalTimerRef.current) {
+      clearTimeout(intervalTimerRef.current);
+      intervalTimerRef.current = null;
+    }
+
+    // 仅在 hover 从 true -> false 时唤醒轮播（避免在非 hover 状态下反复唤醒导致 interval 失效）
+    if (
+      latestRef.current.hover &&
+      prev === true &&
+      isHover === false &&
+      canCarousel &&
+      status.currentIndex !== null &&
+      !isAnimatingRef.current
+    ) {
+      setReady(true);
+      setWakeToken((v) => v + 1);
+    }
+  }, [isHover, canCarousel, status.currentIndex]);
+
+  // 初始化：仅在基础条件变化时设置初始索引
+  useEffect(() => {
+    if (show && tickCount > 0 && tickLength > tickCount) {
+      setStatus({
+        currentIndex: 0,
+        flag: true,
+      });
+    } else {
+      setStatus(initialState);
+    }
+  }, [show, tickCount, tickLength]);
+  useEffect(() => {
+    let animation;
+    const { currentIndex, flag } = status;
+    const latest = latestRef.current;
+
+    // 执行条件：显示、非hover暂停、激活、有足够的轮播项
+    const canRun = canCarousel && !(latest.hover && hoverRef.current);
+
+    if (currentIndex !== null && canRun && latest.tickCount > 0) {
+      if (flag) {
+        // 首次加载：仅初始化视图，不执行动画
+        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(step)) return;
+        const _ticks = latest.allTicks.slice(currentIndex, latest.tickCount);
+        setState({
+          step,
+          ticks: _ticks,
+          scaler: latest.scaler
+            .copy()
+            .domain(_ticks)
+            .range([latest._start, latest._end]),
+        });
+
+        // 首次加载完成后，启动第一轮动画（等待interval后执行）
+        if (latest.interval >= 0) {
+          intervalTimerRef.current = setTimeout(() => {
+            setStatus((prev) => ({ ...prev, flag: false }));
+          }, latest.interval * 1000);
+        } else {
+          setStatus((prev) => ({ ...prev, flag: false }));
+        }
+      } else {
+        // 非首次加载：执行动画 + 后续逻辑
+        if (!ready) return;
+        const step = latest.lengthWithoutPaddingOuter / latest.tickCount;
+        if (!Number.isFinite(step)) return;
+
+        animation = animate({
+          from: 0,
+          to: -1,
+          duration: latest.duration * 1000,
+          ease: linear,
+          onPlay: () => {
+            isAnimatingRef.current = true;
+            // 动画开始：更新ticks和scaler初始范围
+            // 这里需要保证动画是「当前项滚出，下一项滚入」
+            // 因此后续窗口从 currentIndex + 1 开始，避免首项重复导致视觉上「从第一项滚到第一项」的闪烁
+            setState((axis) => {
+              const { ticks, scaler } = axis;
+              const [tick] = ticks;
+              const _ticks = [
+                tick,
+                ...getTicks(
+                  latest.allTicks,
+                  currentIndex + 1,
+                  latest.tickCount
+                ),
+              ];
+              return {
+                ...axis,
+                ticks: _ticks,
+                scaler: scaler
+                  .copy()
+                  .range([latest._start, latest._end + step])
+                  .domain(_ticks),
+              };
+            });
+          },
+          onUpdate: (v) => {
+            // 动画过程：实时更新scaler范围（实现滚动效果）
+            setState((axis) => {
+              const { scaler, step } = axis;
+              return {
+                ...axis,
+                scaler: scaler
+                  .copy()
+                  .range([
+                    latest._start + step * v,
+                    latest._end + step + step * v,
+                  ]),
+              };
+            });
+          },
+          onComplete: () => {
+            isAnimatingRef.current = false;
+            // 本轮结束后进入等待态，避免立即开启下一轮（保证 interval 生效）
+            setReady(false);
+            // 动画完成：重置ticks和scaler
+            setState((axis) => {
+              const { scaler, ticks } = axis;
+              const _ticks = ticks.slice(1, ticks.length);
+              return {
+                ...axis,
+                ticks: _ticks,
+                scaler: scaler
+                  .copy()
+                  .range([latest._start, latest._end])
+                  .domain(_ticks),
+              };
+            });
+
+            const nextIndex = (currentIndex + 1) % latest.tickLength;
+
+            // 无论是否 hover，都先把 currentIndex 同步到下一屏起点
+            // 否则在 interval 暂停期触发 hover/离开，会用旧索引重启，视觉上“回滚一格”
+            setStatus((prev) => ({ ...prev, currentIndex: nextIndex }));
+
+            // hover 触发时：让当前动画跑完后暂停（不再排下一轮）
+            if (latest.hover && hoverRef.current) return;
+
+            // 非hover：动画完成后，等待interval时长，再触发下一轮动画
+            intervalTimerRef.current = setTimeout(() => {
+              setReady(true);
+              setWakeToken((v) => v + 1);
+            }, latest.interval * 1000);
+          },
+        });
+      }
+    }
+
+    // 清理副作用：停止动画、清除定时器
+    return () => {
+      if (animation) {
+        animation.stop();
+        isAnimatingRef.current = false;
+      }
+      if (intervalTimerRef.current) {
+        clearTimeout(intervalTimerRef.current);
+        intervalTimerRef.current = null;
+      }
+    };
+  }, [canCarousel, status.currentIndex, status.flag, wakeToken, ready]);
+
+  // 重置逻辑：当无有效索引时恢复初始状态
+  useEffect(() => {
+    if (status.currentIndex === null) {
+      const _ticks = scaler.type === "linear" ? scaler.domain() : allTicks;
+      setState({
+        step,
+        scaler: scaler.copy().domain(_ticks).range([_start, _end]),
+        ticks,
+      });
+    }
+  }, [status.currentIndex, scaler, _start, _end, step, ticks, allTicks]);
+
+  // 当 x 轴可见项数量（count）发生变化时，安全地重置轮播节奏
+  useEffect(() => {
+    // 清掉当前的 interval 计时器，避免用旧配置继续排队
+    if (intervalTimerRef.current) {
+      clearTimeout(intervalTimerRef.current);
+      intervalTimerRef.current = null;
+    }
+
+    // 重置动画节奏，让配置变更后「立即」按最新的 tickCount/tickLength 重新初始化
+    // 不能简单 setStatus(initialState)，否则会覆盖上方的初始化 effect（先开轮播再改数量时会被清成 null，导致展示全部且不轮播）
+    isAnimatingRef.current = false;
+    setReady(true);
+    setStatus(() => {
+      // 与初始化 effect 保持一致：只要满足条件就从 0 开始重新初始化
+      if (show && active && tickCount > 0 && tickLength > tickCount) {
+        return { currentIndex: 0, flag: true };
+      }
+      return initialState;
+    });
+    setWakeToken((v) => v + 1);
+  }, [count, show, active, tickLength, tickCount]);
+
+  return {
+    ...axis,
+    ...state,
+    controlEnd: _end,
+  };
+};
+
+/**
+ * 获取指定索引范围的ticks（支持循环）
+ * @param {Array} ticks 所有ticks
+ * @param {number} currentIndex 当前起始索引
+ * @param {number} length 需要的长度
+ * @returns {Array} 目标ticks数组
+ */
+const getTicks = (ticks, currentIndex, length) => {
+  const _currentIndex = +currentIndex;
+  const ticksLength = ticks.length;
+  if (ticksLength <= length) return ticks;
+
+  const _end = _currentIndex + length;
+  if (ticksLength < _end) {
+    const prev = ticks.slice(_currentIndex, ticksLength);
+    const next = ticks.slice(0, _end - ticksLength);
+    return [...prev, ...next];
+  }
+  return ticks.slice(_currentIndex, _end);
+};