{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  height: {\n    type: [Number, String],\n    default: 150,\n  },\n  width: {\n    type: [Number, String],\n    default: 300,\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerCanvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = shallowRef(false)\n    const isOutsideUpdate = shallowRef(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\n          <div\n            class={[\n              'v-color-picker-canvas__dot',\n              {\n                'v-color-picker-canvas__dot--disabled': props.disabled,\n              },\n            ]}\n            style={ dotStyles.value }\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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"}