some cleanup

UmbraJS · Feb 3, 2024 · 76cd510 · 76cd510
1 parent 76abb4a
commit 76cd510
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 49 deletions.
diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue
@@ -110,6 +110,6 @@ canvas.color-canvas {
   aspect-ratio: 1/1;
   width: 100%;
   height: 100%;
-  background-color: var(--base-20, rgb(30, 0, 64));
+  background-color: var(--base-20, rgb(64, 0, 0));
 }
 </style>
diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue
@@ -31,7 +31,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   default: '#ff0000',
-  compact: true,
+  compact: false,
   compactSize: 50,
   hueWidth: 25
 })

diff --git a/packages/dye/composables/canvas.ts b/packages/dye/composables/canvas.ts
@@ -2,10 +2,12 @@ import { useMousePressed, useMouse } from '@vueuse/core'
 import { computed, watch, ref, Ref, onMounted } from 'vue'
 import { rgbToHex, clamp } from './utils'
 
-export type hexType = {
-  color: string,
-  position: {x: number, y: number}
-} | undefined
+export type hexType =
+  | {
+      color: string
+      position: { x: number; y: number }
+    }
+  | undefined
 
 type RefCanvas = Ref<HTMLCanvasElement | undefined | null>
 type posFunc = (pos: hexType) => void
@@ -19,14 +21,17 @@ function getMousePos(canvas: HTMLCanvasElement, evt: MouseEvent) {
 }
 
 export function canvasPixelColor(evt: MouseEvent, canvas?: HTMLCanvasElement | null) {
-  if(!canvas) return
+  if (!canvas) return
   return pixelColor(getMousePos(canvas, evt), canvas)
 }
 
-export function pixelColor(position: {x: number, y: number}, canvas?: HTMLCanvasElement | null): hexType {
-  if(!canvas) return
-  const ctx = canvas.getContext("2d", { willReadFrequently: true })
-  if(ctx === null) return
+export function pixelColor(
+  position: { x: number; y: number },
+  canvas?: HTMLCanvasElement | null
+): hexType {
+  if (!canvas) return
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  if (ctx === null) return
   const pixel = ctx.getImageData(position.x, position.y, 1, 1)
   const data = pixel.data
   const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]})`
@@ -35,8 +40,8 @@ export function pixelColor(position: {x: number, y: number}, canvas?: HTMLCanvas
 
 export function offCanvas(e: MouseEvent, click: boolean) {
   const returnCondition = !mousedown.value && !click
-  if(!mousedown.value) activeCanvas.value = e.target
-  if(activeCanvas.value === null) activeCanvas.value = e.target
+  if (!mousedown.value) activeCanvas.value = e.target
+  if (activeCanvas.value === null) activeCanvas.value = e.target
   return returnCondition
 }
 
@@ -49,53 +54,57 @@ let activeCanvas = ref<EventTarget | null>(null)
 
 const { pressed } = useMousePressed()
 watch(pressed, (value: boolean) => {
-  if(value) return
+  if (value) return
   activeCanvas.value = null
   mousedown.value = value
 })
 
-export function outsideCanvas(props: {canvas: RefCanvas, updateCanvas: posFunc}) {
+export function outsideCanvas(props: { canvas: RefCanvas; updateCanvas: posFunc }) {
   const { canvas, updateCanvas } = props
   const mouseOn = ref(false)
 
   function condition() {
     //activeOutside
-    return !mouseOn.value 
-    && mousedown.value 
-    && !isActiveCanvas(canvas.value)
+    return !mouseOn.value && mousedown.value && !isActiveCanvas(canvas.value)
   }
 
   //Update color while dragging outside canvas
   const { x, y } = useMouse()
-  const posPixel = computed(() => ({x: x.value, y: y.value}))
+  const posPixel = computed(() => ({ x: x.value, y: y.value }))
   watch(posPixel, (pos) => {
-    if(!condition() && canvas.value) return
+    if (!condition() && canvas.value) return
     updateCanvas(clampedPos(pos))
   })
 
   //confines handle pos to inside the canvas element
-  function clampedPos(pos: {x: number, y: number}) {
+  function clampedPos(pos: { x: number; y: number }) {
     const box = canvas.value?.getBoundingClientRect()
-    if(!box) return
-    return pixelColor({
-      x: clamp(pos.x - (box.left + window.scrollX), 0, box.width - 2),
-      y: clamp(pos.y - (box.top + window.scrollY), 0, box.height - 2)
-    }, canvas.value)
+    if (!box) return
+    return pixelColor(
+      {
+        x: clamp(pos.x - (box.left + window.scrollX), 0, box.width - 2),
+        y: clamp(pos.y - (box.top + window.scrollY), 0, box.height - 2)
+      },
+      canvas.value
+    )
   }
 
   return { mouseOn, clampedPos }
 }
 
-
 function observeCanvas(el: RefCanvas, onResize: () => void) {
-  if(!el.value) return
-  if(!ResizeObserver) return
+  if (!el.value) return
+  if (!ResizeObserver) return
   const observer = new ResizeObserver(() => onResize())
   observer.observe(el.value)
 }
 
-export function responsiveCanvas(props: {canvas: RefCanvas, updateCanvas: () => void, updateDelay?: number}) {
-  const { canvas, updateCanvas, updateDelay } = props
+interface RCP {
+  canvas: RefCanvas
+  updateCanvas: () => void
+}
+
+export function responsiveCanvas({ canvas, updateCanvas }: RCP) {
   const size = 100
   const width = ref(size)
   const height = ref(size)
@@ -104,13 +113,11 @@ export function responsiveCanvas(props: {canvas: RefCanvas, updateCanvas: () =>
     const box = canvas.value?.getBoundingClientRect()
     width.value = box?.width || size
     height.value = box?.height || size
-    setTimeout(() => {
-      updateCanvas()
-    }, updateDelay)
+    setTimeout(() => updateCanvas(), 0)
   }
 
   onMounted(() => {
-    if(!canvas.value) return
+    if (!canvas.value) return
     observeCanvas(canvas, setCanvas)
     setCanvas()
   })
@@ -119,33 +126,40 @@ export function responsiveCanvas(props: {canvas: RefCanvas, updateCanvas: () =>
 }
 
 //Handler for canvas dimentions
-function getPercent(props: {height: number, width: number, heightLimit: number, widthLimit: number}) {
-  const {height, width, heightLimit, widthLimit} = props
+function getPercent(props: {
+  height: number
+  width: number
+  heightLimit: number
+  widthLimit: number
+}) {
+  const { height, width, heightLimit, widthLimit } = props
   const height100 = height / 100
   const h1 = (100 - Math.abs(heightLimit)) * height100
   const width100 = width / 100
   const w1 = (100 - Math.abs(widthLimit)) * width100
-  return {h1, w1}
+  return { h1, w1 }
 }
 
-export function getDimentions(canvas: HTMLCanvasElement, frame = {height: 100, width: 100}) {
-  const {height, width} = canvas.getBoundingClientRect()
+export function getDimentions(canvas: HTMLCanvasElement, frame = { height: 100, width: 100 }) {
+  const { height, width } = canvas.getBoundingClientRect()
   const { w1, h1 } = getPercent({
-    height, width, 
-    heightLimit: frame.height, 
+    height,
+    width,
+    heightLimit: frame.height,
     widthLimit: frame.width
   })
-  
+
   const h = frame.height >= 0 ? 0 + h1 : 0 - h1
   const w = frame.width >= 0 ? 0 + w1 : 0 - w1
 
-  return { height, width, 
+  return {
+    height,
+    width,
     dimentions: {
       left: w,
-      top: h, 
-      right: width, 
-      bottom: height 
-     }
+      top: h,
+      right: width,
+      bottom: height
+    }
   }
 }
-