dynamic wait variable

UmbraJS · Feb 11, 2024 · f39df91 · f39df91
1 parent c185881
commit f39df91
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
@@ -19,10 +19,11 @@ const emit = defineEmits<{
 }>()
 
 const canvas = useColorCanvas()
+const store = useDyeStore()
 const dye = useDye()
 
 let position = ref({ x: 0, y: 0 })
-const change = useDebounce((dye) => emit('change', dye))
+const change = useDebounce((dye) => emit('change', dye), 0)
 
 function updateCanvas(color?: HexType) {
   if (!color) return
@@ -31,8 +32,6 @@ function updateCanvas(color?: HexType) {
   position.value = color.position
 }
 
-const store = useDyeStore()
-
 //Update color while dragging inside canvas
 function colorChange(e: MouseEvent, click = false) {
   if (click) store.setHolding(true)

diff --git a/packages/dye/composables/useDye.ts b/packages/dye/composables/useDye.ts
@@ -3,7 +3,6 @@ import { useMousePressed } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { umbra } from '@umbrajs/core'
 import { colorName } from './colorName'
-import DyeWrapper from '../components/DyeWrapper.vue'
 import { OutputColor } from '../composables/canvas'
 
 interface UCC {
@@ -50,7 +49,7 @@ export const useDye = defineStore('dye', () => {
     return wrapper
   }
 
-  function setWrapper(el: InstanceType<typeof DyeWrapper>) {
+  function setWrapper(el: HTMLDivElement) {
     wrapper.value = el
   }
 

diff --git a/packages/dye/composables/utils.ts b/packages/dye/composables/utils.ts
@@ -16,9 +16,10 @@ export function clamp(num: number, min: number, max: number) {
 }
 
 export function useDebounce(
-  callback: (dye: OutputColor) => void
+  callback: (dye: OutputColor) => void,
+  wait = 4
 ): ReturnType<typeof useDebounceFn> {
-  return useDebounceFn((dye: OutputColor) => callback(dye), 4, {
+  return useDebounceFn((dye: OutputColor) => callback(dye), wait, {
     maxWait: 200
   })
 }