use debounce to make performance super fast

UmbraJS · Feb 4, 2024 · bdf42f2 · bdf42f2
1 parent ce9333a
commit bdf42f2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
@@ -13,6 +13,7 @@ import {
 } from '../../composables/canvas'
 import { colorName } from '../../composables/colorName'
 import { fillColorCanvas } from '../../composables/gradient'
+import { useDebounce } from '../../composables/utils'
 import Handle from '../Handle.vue'
 
 const emit = defineEmits<{
@@ -29,14 +30,12 @@ const props = defineProps<{
 }>()
 
 let position = ref({ x: 0, y: 0 })
+const change = useDebounce((dye) => emit('change', dye))
 
 function updateCanvas(color?: HexType) {
   if (!color) return
   const { name } = colorName(color.hex)
-  emit('change', {
-    ...color,
-    name
-  })
+  change({ ...color, name })
   position.value = color.position
 }
 

diff --git a/packages/dye/components/Canvas/HueCanvas.vue b/packages/dye/components/Canvas/HueCanvas.vue
@@ -14,6 +14,7 @@ import {
 } from '../../composables/canvas'
 import { colorName } from '../../composables/colorName'
 import { fillColorCanvas } from '../../composables/gradient'
+import { useDebounce } from '../../composables/utils'
 import Handle from '../Handle.vue'
 
 interface Hsl {
@@ -73,9 +74,7 @@ function fillHueCanvas(color: string = props.color.hex) {
 
 watch(
   () => props.color.hex,
-  (color) => {
-    fillHueCanvas(color)
-  }
+  (color) => fillHueCanvas(color)
 )
 
 function hueChange(e: MouseEvent, click = false) {
@@ -87,17 +86,22 @@ function hueChange(e: MouseEvent, click = false) {
   mouseOn.value = true
 }
 
+const change = useDebounce((dye: OutputColor) => {
+  fillColorCanvas({ hue: dye.hex }, props.colorCanvas().value)
+  emit('change', dye)
+})
+
 function updateCanvas(color?: HexType, mounted = false) {
   if (!color || mounted) return
-  fillColorCanvas({ hue: color.hex }, props.colorCanvas().value)
+  change({
+    name: colorName(color.hex).name,
+    ...color
+  })
+
   position.value = {
     x: position.value.x,
     y: color.position.y
   }
-  emit('change', {
-    name: colorName(color.hex).name,
-    ...color
-  })
 }
 
 const { width: canvasWidth, height: canvasHeight } = responsiveCanvas({

diff --git a/packages/dye/composables/utils.ts b/packages/dye/composables/utils.ts
@@ -1,3 +1,6 @@
+import { useDebounceFn } from '@vueuse/core'
+import { OutputColor } from './canvas'
+
 export function rgbToHex(orig: any) {
   var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
     hex = rgb
@@ -11,3 +14,11 @@ export function rgbToHex(orig: any) {
 export function clamp(num: number, min: number, max: number) {
   return num <= min ? min : num >= max ? max : num
 }
+
+export function useDebounce(
+  callback: (dye: OutputColor) => void
+): ReturnType<typeof useDebounceFn> {
+  return useDebounceFn((dye: OutputColor) => callback(dye), 5, {
+    maxWait: 200
+  })
+}