From 76cd51042144c6c7b2394dd321b3011e4522f49f Mon Sep 17 00:00:00 2001 From: "Samuel M. Bednarz" Date: Sat, 3 Feb 2024 23:04:27 +0100 Subject: [PATCH] some cleanup --- .../dye/components/Canvas/ColorCanvas.vue | 2 +- packages/dye/components/DyePicker.vue | 2 +- packages/dye/composables/canvas.ts | 108 ++++++++++-------- 3 files changed, 63 insertions(+), 49 deletions(-) diff --git a/packages/dye/components/Canvas/ColorCanvas.vue b/packages/dye/components/Canvas/ColorCanvas.vue index 38ade41..121f37f 100644 --- 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)); } diff --git a/packages/dye/components/DyePicker.vue b/packages/dye/components/DyePicker.vue index 0d94b7c..d96882c 100644 --- a/packages/dye/components/DyePicker.vue +++ b/packages/dye/components/DyePicker.vue @@ -31,7 +31,7 @@ interface Props { const props = withDefaults(defineProps(), { default: '#ff0000', - compact: true, + compact: false, compactSize: 50, hueWidth: 25 }) diff --git a/packages/dye/composables/canvas.ts b/packages/dye/composables/canvas.ts index 0b41942..775a039 100644 --- 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 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(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 + } } } -