update handles at all times

packages/dye/App.vue

@@ -3,7 +3,7 @@ import DyePicker from './components/DyePicker.vue'
 </script>
 
 <template>
-  <DyePicker default="#FF7FA6" />
+  <DyePicker default="#50b7be" />
 </template>
 
 <style lang="scss">

packages/dye/components/Canvas/ColorCanvas.vue

@@ -88,14 +88,24 @@ function getPercent(percent: number, height?: number) {
   return (height / 100) * percent
 }
 
-watch(width, () => {
+function updateHandle() {
   var color = colord(dye.color.hex)
   const hsl = color.toHsl()
   position.value = {
-    x: getPercent(hsl.s * 100, width.value),
-    y: height.value - getPercent(hsl.l * 100, height.value)
+    x: getPercent(hsl.s, width.value),
+    y: height.value - getPercent(hsl.l, height.value)
   }
-})
+}
+
+watch(width, () => updateHandle())
+
+watch(
+  () => dye.handleUpdates,
+  () => {
+    changeHue()
+    updateHandle()
+  }
+)
 </script>
 
 <template>

packages/dye/components/Canvas/HueCanvas.vue

@@ -83,6 +83,7 @@ function hueChange(e: MouseEvent, click = false) {
   if (store.offCanvas(e, click)) return
   if (store.isActiveCanvas(e.target)) return
   const hex = canvasPixelColor(e, hueCanvas.value)
+  updateHandle(hex)
   updateCanvas(hex)
   inside.value = true
 }
@@ -93,19 +94,21 @@ const change = useDebounce((dye: OutputColor) => {
   emit('change', dye)
 })
 
-function updateCanvas(color?: HexType, mounted = false) {
-  if (!color || mounted) return
-  change({
-    name: colorName(color.hex).name,
-    ...color
-  })
-
+function updateHandle(color?: HexType) {
+  if (!color) return
   position.value = {
     x: position.value.x,
     y: color.position.y
   }
 }
 
+function updateCanvas(color?: HexType) {
+  change({
+    name: colorName(color?.hex).name,
+    ...color
+  })
+}
+
 const { width: canvasWidth, height: canvasHeight } = responsiveCanvas({
   canvas: hueCanvas,
   updateCanvas: () => {
@@ -123,27 +126,38 @@ function setCenterHandle(y = 0) {
   }
 }
 
-function huePercent(hue: number, height?: number) {
-  if (!height) return 0
+function huePercent(hue: number, height: number) {
   const percent = (hue / 360) * 100
-  return height * (percent / 100)
+  return (height / 100) * percent
+}
+
+function getHandlePosition() {
+  const hue = colord(dye.color.hex).toHsl().h
+  return {
+    y: huePercent(hue, canvasHeight.value),
+    x: 0
+  }
 }
 
 onMounted(() => {
   fillHueCanvas()
   setCenterHandle()
 
-  const hsl = colord(dye.color.hex).toHsl()
-  const color = {
+  updateHandle({
     hex: dye.color.hex,
-    position: {
-      x: 0,
-      y: huePercent(hsl.h, canvasHeight.value)
-    }
-  }
-
-  updateCanvas(color, true)
+    position: getHandlePosition()
+  })
 })
+
+watch(
+  () => dye.handleUpdates,
+  () => {
+    updateHandle({
+      hex: dye.color.hex,
+      position: getHandlePosition()
+    })
+  }
+)
 </script>
 
 <template>
@@ -166,15 +180,13 @@ onMounted(() => {
 .hue-canvas-wrapper {
   position: relative;
   user-select: none;
-  //overflow: hidden;
   width: 100%;
   height: 100%;
 }
 
 canvas.hue-canvas {
   width: calc(v-bind(width) * 1px);
   height: 100%;
-  //overflow: hidden;
   background-color: var(--base-20, rgb(64, 0, 0));
 }
 </style>

packages/dye/components/DyePicker.vue

@@ -36,10 +36,7 @@ const compact = ref(props.compact)
 const dye = useDye()
 
 onMounted(() => {
-  dye.setColor({
-    hex: props.default,
-    name: 'default'
-  })
+  dye.setColor(props.default)
 })
 
 function change(color: OutputColor) {
@@ -51,16 +48,13 @@ function change(color: OutputColor) {
 }
 
 function clickOutside() {
-  dye.setColor({
-    hex: '#ff0000',
-    name: 'ccool'
-  })
+  dye.setColor('#00eeff', true)
 }
 </script>
 
 <template>
   <DyeWrapper :compact="compact" v-on-click-outside="clickOutside">
-    <Pallet :compact="compact" @click="() => (compact = false)" />
+    <Pallet :compact="compact" @click="() => (compact = !compact)" />
     <ColorCanvas @change="change" :min="0" :max="100" />
     <HueCanvas @change="change" />
   </DyeWrapper>

packages/dye/components/Pallet.vue

@@ -26,7 +26,8 @@ function copyToClipboard() {
 }
 
 function handleClick() {
-  props.compact ? emit('click') : copyToClipboard()
+  emit('click')
+  //props.compact ? emit('click') : copyToClipboard()
 }
 </script>
 

packages/dye/composables/colorName/index.ts

@@ -10,6 +10,7 @@ type nearestType = (hex: string) => {
 const colors = c.reduce((o, { name, hex }) => Object.assign(o, { [name]: hex }), {})
 const nearest: nearestType = nearestColor.from(colors)
 
-export function colorName(hex: string) {
+export function colorName(hex?: string) {
+  if (!hex) return nearest('#000')
   return nearest(hex)
 }

packages/dye/composables/useDye.ts

@@ -33,10 +33,24 @@ export const useDye = defineStore('dye', () => {
   const hex = '#000'
   const wrapper = ref<HTMLDivElement | null>(null)
   const color = ref({ name: colorName(hex).name, hex })
+  const handleUpdates = ref(0)
 
-  function setColor(value: OutputColor) {
-    color.value = value
-    paintComponent(value.hex)
+  function setColor(value: OutputColor | string, updateHandle = false) {
+    const isString = typeof value === 'string'
+
+    const hex = isString ? value : value.hex
+
+    if (isString) {
+      const name = colorName(value).name
+      color.value = { name, hex }
+
+      console.log('string', { name, hex })
+    } else {
+      color.value = value
+    }
+
+    paintComponent(hex)
+    if (updateHandle) handleUpdates.value++
   }
 
   paintComponent(color.value.hex)
@@ -55,18 +69,20 @@ export const useDye = defineStore('dye', () => {
 
   const cr: {
     color: Ref<OutputColor>
-    setColor: (value: OutputColor) => void
+    setColor: (value: OutputColor | string, updateHandle?: boolean) => void
     paintComponent: (background: string) => void
     wrapper: Ref<HTMLDivElement | null>
     getWrapper: () => Ref<HTMLDivElement | null>
     setWrapper: (el: HTMLDivElement) => void
+    handleUpdates: Ref<number>
   } = {
     color,
     setColor,
     paintComponent,
     wrapper,
     getWrapper,
-    setWrapper
+    setWrapper,
+    handleUpdates
   }
 
   return cr