move to pinia

packages/dye/components/Canvas/ColorCanvas.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, Ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { colord } from 'colord'
 import {
   HexType,
@@ -8,7 +8,7 @@ import {
   outsideCanvas,
   responsiveCanvas
 } from '../../composables/canvas'
-import { useDyeStore } from '../../composables/store'
+import { useDye, useDyeStore, useColorCanvas } from '../../composables/useDye'
 import { colorName } from '../../composables/colorName'
 import { fillColorCanvas } from '../../composables/gradient'
 import { useDebounce } from '../../composables/utils'
@@ -18,14 +18,8 @@ const emit = defineEmits<{
   (e: 'change', props: OutputColor): void
 }>()
 
-const props = defineProps<{
-  colorCanvas: () => Ref<HTMLCanvasElement | null>
-  setColorCanvas: (el: any) => void
-  color: {
-    hex: string
-    name: string
-  }
-}>()
+const canvas = useColorCanvas()
+const dye = useDye()
 
 let position = ref({ x: 0, y: 0 })
 const change = useDebounce((dye) => emit('change', dye))
@@ -44,29 +38,31 @@ function colorChange(e: MouseEvent, click = false) {
   if (click) store.setHolding(true)
   if (store.offCanvas(e, click)) return
   if (store.isActiveCanvas(e.target)) return
-  const hex = canvasPixelColor(e, props.colorCanvas().value)
+  const hex = canvasPixelColor(e, canvas.colorCanvas().value)
   updateCanvas(hex)
   inside.value = true
 }
 
 //when outside canvas
 const { inside } = outsideCanvas({
-  canvas: props.colorCanvas(),
+  canvas: canvas.colorCanvas(),
   updateCanvas
 })
 
-function getHue(color: string = props.color.hex) {
+function getHue(color: string = dye.color.hex) {
   const hsv = colord(color).toHsv()
   return colord({ h: hsv.h, s: 100, v: 100 }).toHex()
 }
 
+function changeHue() {
+  const hue = getHue()
+  const color = { hue, saturation: 100, lightness: 100 }
+  fillColorCanvas({ color }, canvas.colorCanvas().value)
+}
+
 const { width, height } = responsiveCanvas({
-  canvas: props.colorCanvas(),
-  updateCanvas: () => {
-    const hue = getHue()
-    const data = { hue, saturation: 100, lightness: 100 }
-    fillColorCanvas(data, props.colorCanvas().value)
-  }
+  canvas: canvas.colorCanvas(),
+  updateCanvas: () => changeHue()
 })
 
 function getPercent(percent: number, height?: number) {
@@ -75,7 +71,7 @@ function getPercent(percent: number, height?: number) {
 }
 
 watch(width, () => {
-  var color = colord(props.color.hex)
+  var color = colord(dye.color.hex)
   const hsl = color.toHsl()
   position.value = {
     x: getPercent(hsl.s * 100, width.value),
@@ -86,9 +82,9 @@ watch(width, () => {
 
 <template>
   <div class="color-canvas-wrapper">
-    <Handle :position="position" :color="color" />
+    <Handle :position="position" :color="dye.color" />
     <canvas
-      :ref="setColorCanvas"
+      :ref="(el) => canvas.setColorCanvas(el as HTMLCanvasElement)"
       class="color-canvas"
       :width="width"
       :height="height"

packages/dye/components/Canvas/HueCanvas.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { colord } from 'colord'
-import { ref, onMounted, Ref, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { getDimentions } from '../../composables/canvas'
 import {
   HexType,
@@ -9,7 +9,7 @@ import {
   canvasPixelColor,
   responsiveCanvas
 } from '../../composables/canvas'
-import { useDyeStore } from '../../composables/store'
+import { useDye, useDyeStore, useColorCanvas } from '../../composables/useDye'
 import { colorName } from '../../composables/colorName'
 import { fillColorCanvas } from '../../composables/gradient'
 import { useDebounce } from '../../composables/utils'
@@ -27,24 +27,22 @@ const emit = defineEmits<{
 
 interface Props {
   width?: number
-  colorCanvas: () => Ref<HTMLCanvasElement | null>
-  color: {
-    hex: string
-    name: string
-  }
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   width: 25
 })
 
 const hueCanvas = ref<HTMLCanvasElement | null>(null)
 const position = ref({ x: 30, y: 70 })
 
+const dye = useDye()
+const store = useDyeStore()
+const canvas = useColorCanvas()
+
 const { inside } = outsideCanvas({
   canvas: hueCanvas,
-  updateCanvas,
-  debug: true
+  updateCanvas
 })
 
 function hueGradient(
@@ -60,7 +58,7 @@ function hueGradient(
   return gradient
 }
 
-function fillHueCanvas(color: string = props.color.hex) {
+function fillHueCanvas(color: string = dye.color.hex) {
   if (!hueCanvas.value) return
   const ctx = hueCanvas.value?.getContext('2d')
   if (ctx === null) return
@@ -71,10 +69,8 @@ function fillHueCanvas(color: string = props.color.hex) {
   ctx.fillRect(0, 0, width, height)
 }
 
-const store = useDyeStore()
-
 watch(
-  () => props.color.hex,
+  () => dye.color.hex,
   (color) => {
     const isActive = store.isActiveCanvas(hueCanvas.value)
     if (!isActive) return
@@ -92,7 +88,8 @@ function hueChange(e: MouseEvent, click = false) {
 }
 
 const change = useDebounce((dye: OutputColor) => {
-  fillColorCanvas({ hue: dye.hex }, props.colorCanvas().value)
+  const color = { hue: dye.hex }
+  fillColorCanvas({ color }, canvas.colorCanvas().value)
   emit('change', dye)
 })
 
@@ -136,9 +133,9 @@ onMounted(() => {
   fillHueCanvas()
   setCenterHandle()
 
-  const hsl = colord(props.color.hex).toHsl()
+  const hsl = colord(dye.color.hex).toHsl()
   const color = {
-    hex: props.color.hex,
+    hex: dye.color.hex,
     position: {
       x: 0,
       y: huePercent(hsl.h, canvasHeight.value)
@@ -151,7 +148,7 @@ onMounted(() => {
 
 <template>
   <div class="hue-canvas-wrapper">
-    <Handle :position="position" :color="color" />
+    <Handle :position="position" :color="dye.color" />
     <canvas
       ref="hueCanvas"
       class="hue-canvas"

packages/dye/components/DyePicker.vue

@@ -32,33 +32,30 @@ const props = withDefaults(defineProps<DyeProps>(), {
 
 // Logic
 const compact = ref(props.compact)
-const { color, colorCanvas, setColorCanvas, wrapper } = useDye(props.default)
+const store = useDye()
+
+store.setColor({ hex: props.default, name: 'default' })
 
 function change(dye: OutputColor) {
-  color.value = dye
+  store.setColor(dye)
   emit('change', {
     name: dye.name,
     color: colord(dye.hex)
   })
 }
 
 function clickOutside() {
-  color.value = {
+  store.setColor({
     hex: '#ff0000',
     name: 'ccool'
-  }
+  })
 }
 </script>
 
 <template>
   <DyeWrapper ref="wrapper" :compact="compact" v-on-click-outside="clickOutside">
-    <Pallet :color="color" :compact="compact" @click="() => (compact = false)" />
-    <ColorCanvas
-      @change="change"
-      :colorCanvas="colorCanvas"
-      :setColorCanvas="setColorCanvas"
-      :color="color"
-    />
-    <HueCanvas @change="change" :colorCanvas="colorCanvas" :color="color" />
+    <Pallet :compact="compact" @click="() => (compact = false)" />
+    <ColorCanvas @change="change" />
+    <HueCanvas @change="change" />
   </DyeWrapper>
 </template>

packages/dye/components/Pallet.vue

@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useDye } from '../composables/useDye'
 
 const emit = defineEmits(['click'])
 
 interface Props {
   fade?: number
   square?: number
   compact: boolean
-  color: {
-    name: string
-    hex: string
-  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   square: 50,
   fade: 25
 })
 
+const dye = useDye()
 const copied = ref(false)
 
 function copyToClipboard() {
   if (!navigator?.clipboard) return
-  navigator.clipboard.writeText(props.color.hex)
+  navigator.clipboard.writeText(dye.color.hex)
   copied.value = true
   setTimeout(() => (copied.value = false), 800)
 }
@@ -39,8 +37,8 @@ function handleClick() {
     </div>
 
     <div class="content">
-      <p>{{ color.hex }}</p>
-      <p class="h3 name">{{ color.name }}</p>
+      <p>{{ dye.color.hex }}</p>
+      <p class="h3 name">{{ dye.color.name }}</p>
     </div>
 
     <div class="shade" style="background: var(--base)"></div>

packages/dye/composables/canvas.ts

@@ -1,7 +1,7 @@
 import { useMouse } from '@vueuse/core'
 import { computed, watch, ref, Ref, onMounted, onUnmounted } from 'vue'
 import { rgbToHex, clamp } from './utils'
-import { useDyeStore } from './store'
+import { useDyeStore } from './useDye'
 
 export interface OutputColor {
   name: string
@@ -45,20 +45,16 @@ export function pixelColor(
 interface OCP {
   canvas: RefCanvas
   updateCanvas: posFunc
-  debug?: boolean
 }
 
-export function outsideCanvas({ canvas, updateCanvas, debug = false }: OCP) {
+export function outsideCanvas({ canvas, updateCanvas }: OCP) {
   const inside = ref(false)
   const store = useDyeStore()
 
   function condition() {
     //activeOutside
     const outside = !inside.value
     const inactive = !store.isActiveCanvas(canvas.value)
-
-    debug && console.log('outsideCanvas', { outside, holding: store.holding, inactive })
-
     return outside && store.holding && inactive
   }
 
@@ -67,7 +63,6 @@ export function outsideCanvas({ canvas, updateCanvas, debug = false }: OCP) {
   const posPixel = computed(() => ({ x: x.value, y: y.value }))
   watch(posPixel, (pos) => {
     if (!condition() && canvas.value) return
-    console.log('outsideCanvas', pos)
     updateCanvas(clampedPos(pos))
   })