mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆙 Fixed lagg in Color seletor clothes
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
import { IPartColor } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useMemo, useRef } from 'react';
|
||||
import { FC, useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import { ColorUtils, GetClubMemberLevel, IAvatarEditorCategory } from '../../../api';
|
||||
import { useAvatarEditor } from '../../../hooks';
|
||||
|
||||
const DEBOUNCE_MS = 150;
|
||||
|
||||
const findNearestColor = (hex: string, colors: IPartColor[]): IPartColor | null =>
|
||||
{
|
||||
const r = parseInt(hex.slice(1, 3), 16);
|
||||
@@ -34,6 +36,12 @@ export const AvatarEditorAdvancedColorView: FC<{
|
||||
{
|
||||
const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
return () => { if(debounceRef.current) clearTimeout(debounceRef.current); };
|
||||
}, []);
|
||||
|
||||
const selectedColor = useMemo(() =>
|
||||
{
|
||||
@@ -52,9 +60,16 @@ export const AvatarEditorAdvancedColorView: FC<{
|
||||
|
||||
if(!colors) return;
|
||||
|
||||
const nearest = findNearestColor(e.target.value, colors);
|
||||
const value = e.target.value;
|
||||
|
||||
if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
|
||||
if(debounceRef.current) clearTimeout(debounceRef.current);
|
||||
|
||||
debounceRef.current = setTimeout(() =>
|
||||
{
|
||||
const nearest = findNearestColor(value, colors);
|
||||
|
||||
if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
|
||||
}, DEBOUNCE_MS);
|
||||
}, [ category, paletteIndex, selectEditorColor ]);
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user