refactor: extract magic constants — wave 4 (UX timings + physics)
Name throttle/debounce intervals, spring presets, and layout paddings
that were inline numeric literals:
- VirtualList: VISIBLE_CHANGE_THROTTLE_MS (150), NEAR_BOTTOM_THROTTLE_MS
(200), JUMP_THROTTLE_MS (200)
- SampleList: CHECK_POSITION_THROTTLE_MS (100)
- SliderArea: SLIDER_SPRING_CONFIG ({stiffness: 0.2, damping: 0.7}),
SLIDER_PERSIST_DEBOUNCE_MS (100), SLIDER_PADDING_MOBILE_PX (48),
SLIDER_PADDING_DESKTOP_PX (96)
- FontVirtualList: TOUCH_DEBOUNCE_MS (150)
- createPerspectiveManager: PERSPECTIVE_SPRING_CONFIG ({stiffness: 0.2,
damping: 0.8})
No behavior changes — values preserved exactly.
This commit is contained in:
@@ -28,6 +28,12 @@
|
||||
|
||||
import { Spring } from 'svelte/motion';
|
||||
|
||||
/**
|
||||
* Spring tuning for the perspective animation. Lower stiffness = slower
|
||||
* easing into back/front state; higher damping = less overshoot.
|
||||
*/
|
||||
const PERSPECTIVE_SPRING_CONFIG = { stiffness: 0.2, damping: 0.8 } as const;
|
||||
|
||||
/**
|
||||
* Configuration options for perspective effects
|
||||
*/
|
||||
@@ -93,10 +99,7 @@ export class PerspectiveManager {
|
||||
* Spring animation state
|
||||
* Animates between 0 (front) and 1 (back) with configurable physics
|
||||
*/
|
||||
spring = new Spring(0, {
|
||||
stiffness: 0.2,
|
||||
damping: 0.8,
|
||||
});
|
||||
spring = new Spring(0, PERSPECTIVE_SPRING_CONFIG);
|
||||
|
||||
/**
|
||||
* Reactive state: true when in back position
|
||||
|
||||
@@ -167,17 +167,33 @@ $effect(() => {
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Throttle for visible-items change callbacks. Lower = more responsive
|
||||
* downstream UI; higher = fewer recomputes during scroll.
|
||||
*/
|
||||
const VISIBLE_CHANGE_THROTTLE_MS = 150;
|
||||
|
||||
/**
|
||||
* Throttle for near-bottom callbacks (typically used to prefetch next page).
|
||||
*/
|
||||
const NEAR_BOTTOM_THROTTLE_MS = 200;
|
||||
|
||||
/**
|
||||
* Throttle for jump callbacks (programmatic scroll-to-index).
|
||||
*/
|
||||
const JUMP_THROTTLE_MS = 200;
|
||||
|
||||
const throttledVisibleChange = throttle((visibleItems: T[]) => {
|
||||
onVisibleItemsChange?.(visibleItems);
|
||||
}, 150); // 150ms throttle
|
||||
}, VISIBLE_CHANGE_THROTTLE_MS);
|
||||
|
||||
const throttledNearBottom = throttle((lastVisibleIndex: number) => {
|
||||
onNearBottom?.(lastVisibleIndex);
|
||||
}, 200); // 200ms throttle
|
||||
}, NEAR_BOTTOM_THROTTLE_MS);
|
||||
|
||||
const throttledOnJump = throttle((targetIndex: number) => {
|
||||
onJump?.(targetIndex);
|
||||
}, 200);
|
||||
}, JUMP_THROTTLE_MS);
|
||||
|
||||
// Calculate top/bottom padding for spacer elements
|
||||
// In CSS Grid, gap creates space BETWEEN elements.
|
||||
|
||||
Reference in New Issue
Block a user