From d5bc1d63e8908bdef48847b3b62a6d632eb7c990 Mon Sep 17 00:00:00 2001
From: "Samuel M. Bednarz" <samuelmorkbednarz@gmail.com>
Date: Sun, 11 Feb 2024 00:55:17 +0100
Subject: [PATCH] move to pinia

---
 .../dye/components/Canvas/ColorCanvas.vue     | 40 ++++----
 packages/dye/components/Canvas/HueCanvas.vue  | 33 +++----
 packages/dye/components/DyePicker.vue         | 21 ++---
 packages/dye/components/Pallet.vue            | 12 +--
 packages/dye/composables/canvas.ts            |  9 +-
 packages/dye/composables/gradient.ts          | 46 +++++++---
 packages/dye/composables/store.ts             | 38 --------
 packages/dye/composables/useDye.ts            | 92 +++++++++++++++----
 8 files changed, 154 insertions(+), 137 deletions(-)
 delete mode 100644 packages/dye/composables/store.ts

diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
index 0929abb..c77ba1e 100644
--- a/packages/dye/components/Canvas/ColorCanvas.vue
+++ b/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"
diff --git a/packages/dye/components/Canvas/HueCanvas.vue b/packages/dye/components/Canvas/HueCanvas.vue
index 9112f2f..569fb95 100644
--- a/packages/dye/components/Canvas/HueCanvas.vue
+++ b/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"
diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue
index d08fbf3..957dcd3 100644
--- a/packages/dye/components/DyePicker.vue
+++ b/packages/dye/components/DyePicker.vue
@@ -32,10 +32,12 @@ 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)
@@ -43,22 +45,17 @@ function change(dye: OutputColor) {
 }
 
 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>
diff --git a/packages/dye/components/Pallet.vue b/packages/dye/components/Pallet.vue
index 595569d..fad6ac9 100644
--- a/packages/dye/components/Pallet.vue
+++ b/packages/dye/components/Pallet.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useDye } from '../composables/useDye'
 
 const emit = defineEmits(['click'])
 
@@ -7,10 +8,6 @@ interface Props {
   fade?: number
   square?: number
   compact: boolean
-  color: {
-    name: string
-    hex: string
-  }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,11 +15,12 @@ const props = withDefaults(defineProps<Props>(), {
   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>
diff --git a/packages/dye/composables/canvas.ts b/packages/dye/composables/canvas.ts
index 5bfe440..52c2cf0 100644
--- a/packages/dye/composables/canvas.ts
+++ b/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,10 +45,9 @@ 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()
 
@@ -56,9 +55,6 @@ export function outsideCanvas({ canvas, updateCanvas, debug = false }: OCP) {
     //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))
   })
 
diff --git a/packages/dye/composables/gradient.ts b/packages/dye/composables/gradient.ts
index 6feaf1b..87f12a1 100644
--- a/packages/dye/composables/gradient.ts
+++ b/packages/dye/composables/gradient.ts
@@ -8,16 +8,22 @@ type dimentionsType = {
   bottom: number
 }
 
-type sizesType = {
+type Sizes = {
   height: number
   width: number
   dimentions: dimentionsType
 }
 
-type colorWheelType = {
-  hue?: string
-  saturation?: number
-  lightness?: number
+type ColorWheel = {
+  color: {
+    hue?: string
+    saturation?: number
+    lightness?: number
+  }
+  options?: {
+    max?: number
+    min?: number
+  }
 }
 
 //shared canvas functions
@@ -25,14 +31,29 @@ export function fillRect(ctx: CanvasRenderingContext2D, dimentions: dimentionsTy
   ctx.fillRect(dimentions.left, dimentions.top, dimentions.right, dimentions.bottom)
 }
 
-function draw(hue: string, ctx: CanvasRenderingContext2D, sizes: sizesType) {
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+interface Draw {
+  hue: string
+  ctx: CanvasRenderingContext2D
+  sizes: Sizes
+  options?: {
+    max?: number
+    min?: number
+  }
+}
+
+function draw({ hue, ctx, sizes, options }: Draw) {
   const { width, height, dimentions } = sizes
   var color = colord(hue)
   const hsl = color.toHsl()
   for (var row = 0; row < 100; row++) {
     var grad = ctx.createLinearGradient(0, 0, width, 0)
-    grad.addColorStop(0, 'hsl(' + hsl.h + ', 0%, ' + (100 - row) + '%)')
-    grad.addColorStop(1, 'hsl(' + hsl.h + ', 100%, ' + (100 - row) + '%)')
+    const lightness = clamp(100 - row, options?.min || 0, options?.max || 100)
+    grad.addColorStop(0, `hsl(${hsl.h}, 0%, ${lightness}%)`)
+    grad.addColorStop(1, `hsl(${hsl.h}, 100%, ${lightness}%)`)
     ctx.fillStyle = grad
     fillRect(ctx, {
       left: dimentions.left,
@@ -44,17 +65,16 @@ function draw(hue: string, ctx: CanvasRenderingContext2D, sizes: sizesType) {
 }
 
 //composition
-export function fillColorCanvas(props?: colorWheelType, canvas?: HTMLCanvasElement | null) {
+export function fillColorCanvas(props: ColorWheel, canvas?: HTMLCanvasElement | null) {
   if (!canvas) return
-  const { hue = 'red', saturation = 100, lightness = 100 } = props || {}
 
   const ctx = canvas.getContext('2d')
   if (ctx === null) return
 
   const sizes = getDimentions(canvas, {
-    height: lightness,
-    width: saturation
+    height: props.color.lightness || 100,
+    width: props.color.saturation || 100
   })
 
-  draw(hue, ctx, sizes)
+  draw({ hue: props.color.hue || 'red', ctx, sizes, options: props?.options })
 }
diff --git a/packages/dye/composables/store.ts b/packages/dye/composables/store.ts
deleted file mode 100644
index 9a7ec2e..0000000
--- a/packages/dye/composables/store.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-import { useMousePressed } from '@vueuse/core'
-import { watch, ref } from 'vue'
-
-export const useDyeStore = defineStore('dye', () => {
-  const holding = ref(false)
-  const activeCanvas = ref<EventTarget | null>(null)
-
-  const { pressed } = useMousePressed()
-  watch(pressed, (value: boolean) => {
-    if (value) return
-    activeCanvas.value = null
-    holding.value = value
-  })
-
-  function offCanvas(e: MouseEvent, click: boolean) {
-    const returnCondition = !holding.value && !click
-    if (!holding.value) activeCanvas.value = e.target
-    if (activeCanvas.value === null) activeCanvas.value = e.target
-    return returnCondition
-  }
-
-  function setHolding(value: boolean) {
-    holding.value = value
-  }
-
-  function isActiveCanvas(target?: EventTarget | HTMLCanvasElement | null) {
-    return activeCanvas.value !== target
-  }
-
-  return {
-    holding,
-    setHolding,
-    activeCanvas,
-    isActiveCanvas,
-    offCanvas
-  }
-})
diff --git a/packages/dye/composables/useDye.ts b/packages/dye/composables/useDye.ts
index d7ecb74..c8719c5 100644
--- a/packages/dye/composables/useDye.ts
+++ b/packages/dye/composables/useDye.ts
@@ -1,38 +1,90 @@
+import { ref, Ref, watch } from 'vue'
+import { useMousePressed } from '@vueuse/core'
+import { defineStore } from 'pinia'
 import { umbra } from '@umbrajs/core'
-import { ref, Ref, onMounted, computed } from 'vue'
 import { colorName } from './colorName'
 import DyeWrapper from '../components/DyeWrapper.vue'
 import { OutputColor } from '../composables/canvas'
 
-export function useDye(hex: string) {
+interface UCC {
+  colorCanvas: () => Ref<HTMLCanvasElement | null>
+  setColorCanvas: (el: HTMLCanvasElement) => void
+}
+
+export const useColorCanvas = defineStore('color-canvas', () => {
+  const colorCanvas = ref<HTMLCanvasElement | null>(null)
+
+  function getColorCanvas() {
+    return colorCanvas
+  }
+
+  function setColorCanvas(el: HTMLCanvasElement) {
+    colorCanvas.value = el
+  }
+
+  const cr: UCC = {
+    colorCanvas: getColorCanvas,
+    setColorCanvas
+  }
+
+  return cr
+})
+
+export const useDye = defineStore('dye', () => {
+  const hex = '#000'
   const wrapper = ref<InstanceType<typeof DyeWrapper> | null>(null)
-  const colour = ref({ name: colorName(hex).name, hex })
-  const color = computed({
-    get: () => colour.value,
-    set(value: OutputColor) {
-      colour.value = value
-      paintComponent(value.hex)
-    }
-  })
+  const color = ref({ name: colorName(hex).name, hex })
+
+  function setColor(value: OutputColor) {
+    color.value = value
+    paintComponent(value.hex)
+  }
 
-  onMounted(() => paintComponent(colour.value.hex))
+  paintComponent(color.value.hex)
   function paintComponent(background: string) {
     if (!wrapper.value) return
     umbra({ background }).apply({ target: wrapper.value.$el })
   }
 
-  const [colorCanvas, setColorCanvas] = useColorCanvas()
   return {
     color,
-    colorCanvas,
-    setColorCanvas,
+    setColor,
     paintComponent,
     wrapper
   }
-}
+})
 
-type UCCP = [() => Ref<HTMLCanvasElement | null>, (el: HTMLCanvasElement) => void]
-export function useColorCanvas(): UCCP {
-  const colorCanvas = ref<HTMLCanvasElement | null>(null)
-  return [() => colorCanvas, (el: HTMLCanvasElement) => (colorCanvas.value = el)]
-}
+export const useDyeStore = defineStore('dye-store', () => {
+  const holding = ref(false)
+  const activeCanvas = ref<EventTarget | null>(null)
+
+  const { pressed } = useMousePressed()
+  watch(pressed, (value: boolean) => {
+    if (value) return
+    activeCanvas.value = null
+    holding.value = value
+  })
+
+  function offCanvas(e: MouseEvent, click: boolean) {
+    const returnCondition = !holding.value && !click
+    if (!holding.value) activeCanvas.value = e.target
+    if (activeCanvas.value === null) activeCanvas.value = e.target
+    return returnCondition
+  }
+
+  function setHolding(value: boolean) {
+    holding.value = value
+  }
+
+  function isActiveCanvas(target?: EventTarget | HTMLCanvasElement | null) {
+    return activeCanvas.value !== target
+  }
+
+  return {
+    holding,
+    setHolding,
+    activeCanvas,
+    isActiveCanvas,
+    offCanvas
+  }
+})