Enhance PEQ functionality: Update PeqBandForResponse type to allow numeric filter types, and introduce buildPeqSvgCurveData function for reusable SVG curve data generation. Refactor EQPage to utilize new curve data for improved frequency response visualization and animation handling.

2026-04-20 17:58:11 +08:00
parent 22fdf39670
commit 0aa856ed84
3 changed files with 130 additions and 49 deletions
@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+
+/**
+ * Reusable left-to-right SVG stroke draw animation.
+ * Pass `enabled=false` to disable and clear dash styles (e.g. while dragging).
+ */
+export function useStrokeDrawAnimation(
+  pathRef: React.RefObject<SVGPathElement | null>,
+  pathD: string,
+  options?: {
+    enabled?: boolean;
+    durationMs?: number;
+    easing?: string;
+  },
+) {
+  const enabled = options?.enabled ?? true;
+  const durationMs = options?.durationMs ?? 1350;
+  const easing = options?.easing ?? "cubic-bezier(0.33, 1, 0.68, 1)";
+
+  useEffect(() => {
+    const path = pathRef.current;
+    if (!path || !pathD) return;
+
+    if (!enabled) {
+      path.style.strokeDasharray = "";
+      path.style.strokeDashoffset = "";
+      path.style.transition = "";
+      return;
+    }
+
+    const length = path.getTotalLength();
+    if (!Number.isFinite(length) || length <= 0) return;
+
+    path.style.strokeDasharray = `${length}`;
+    path.style.strokeDashoffset = `${length}`;
+    path.style.transition = "none";
+
+    let cancelled = false;
+    const id = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        path.style.transition = `stroke-dashoffset ${durationMs}ms ${easing}`;
+        path.style.strokeDashoffset = "0";
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(id);
+    };
+  }, [pathRef, pathD, enabled, durationMs, easing]);
+}