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:
@@ -50,6 +50,26 @@ interface Props {
|
||||
|
||||
let { isSidebarOpen = false, class: className }: Props = $props();
|
||||
|
||||
/**
|
||||
* Spring tuning for the comparison slider thumb. Lower stiffness = slower
|
||||
* follow; higher damping = less overshoot.
|
||||
*/
|
||||
const SLIDER_SPRING_CONFIG = { stiffness: 0.2, damping: 0.7 } as const;
|
||||
|
||||
/**
|
||||
* Debounce wait before persisting the slider position to the store.
|
||||
* High frequency during drag → batched writes.
|
||||
*/
|
||||
const SLIDER_PERSIST_DEBOUNCE_MS = 100;
|
||||
|
||||
/**
|
||||
* Horizontal layout padding subtracted from container width before laying
|
||||
* out the comparison text. Different per breakpoint to match the gutters
|
||||
* around the slider track.
|
||||
*/
|
||||
const SLIDER_PADDING_MOBILE_PX = 48;
|
||||
const SLIDER_PADDING_DESKTOP_PX = 96;
|
||||
|
||||
const fontA = $derived(comparisonStore.fontA);
|
||||
const fontB = $derived(comparisonStore.fontB);
|
||||
const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
|
||||
@@ -89,10 +109,7 @@ $effect(() => {
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
const sliderSpring = new Spring(50, {
|
||||
stiffness: 0.2,
|
||||
damping: 0.7,
|
||||
});
|
||||
const sliderSpring = new Spring(50, SLIDER_SPRING_CONFIG);
|
||||
const sliderPos = $derived(sliderSpring.current);
|
||||
|
||||
function handleMove(e: PointerEvent) {
|
||||
@@ -115,7 +132,7 @@ function startDragging(e: PointerEvent) {
|
||||
|
||||
const storeSliderPosition = debounce((value: number) => {
|
||||
comparisonStore.sliderPosition = value;
|
||||
}, 100);
|
||||
}, SLIDER_PERSIST_DEBOUNCE_MS);
|
||||
|
||||
$effect(() => {
|
||||
storeSliderPosition(sliderPos);
|
||||
@@ -172,7 +189,7 @@ $effect(() => {
|
||||
const fontAStr = getPretextFontString(_weight, _size, fontA.name);
|
||||
const fontBStr = getPretextFontString(_weight, _size, fontB.name);
|
||||
|
||||
const padding = _isMobile ? 48 : 96;
|
||||
const padding = _isMobile ? SLIDER_PADDING_MOBILE_PX : SLIDER_PADDING_DESKTOP_PX;
|
||||
const availableWidth = Math.max(0, _width - padding);
|
||||
const lineHeight = _size * _height;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user