1 line
8.9 KiB
Plaintext
1 line
8.9 KiB
Plaintext
{"version":3,"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.ts"],"names":[],"mappings":"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","sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Helpers\nimport { clamp, convertToUnit } from '../../util/helpers'\nimport { fromHSVA, VColorPickerColor, fromRGBA } from './util'\n\n// Types\nimport Vue, { VNode } from 'vue'\nimport { PropValidator } from 'vue/types/options'\n\nexport default Vue.extend({\n name: 'v-color-picker-canvas',\n\n props: {\n color: {\n type: Object,\n default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),\n } as PropValidator<VColorPickerColor>,\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\n data () {\n return {\n boundingRect: {\n width: 0,\n height: 0,\n left: 0,\n top: 0,\n } as ClientRect,\n }\n },\n\n computed: {\n dot (): { x: number, y: number} {\n if (!this.color) return { x: 0, y: 0 }\n\n return {\n x: this.color.hsva.s * parseInt(this.width, 10),\n y: (1 - this.color.hsva.v) * parseInt(this.height, 10),\n }\n },\n },\n\n watch: {\n 'color.hue': 'updateCanvas',\n },\n\n mounted () {\n this.updateCanvas()\n },\n\n methods: {\n emitColor (x: number, y: number) {\n const { left, top, width, height } = this.boundingRect\n\n this.$emit('update:color', fromHSVA({\n h: this.color.hue,\n s: clamp(x - left, 0, width) / width,\n v: 1 - clamp(y - top, 0, height) / height,\n a: this.color.alpha,\n }))\n },\n updateCanvas () {\n if (!this.color) return\n\n const canvas = this.$refs.canvas as HTMLCanvasElement\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(${this.color.hue}, 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 handleClick (e: MouseEvent) {\n if (this.disabled) return\n\n this.boundingRect = this.$el.getBoundingClientRect()\n this.emitColor(e.clientX, e.clientY)\n },\n handleMouseDown (e: MouseEvent) {\n // To prevent selection while moving cursor\n e.preventDefault()\n\n if (this.disabled) return\n\n this.boundingRect = this.$el.getBoundingClientRect()\n\n window.addEventListener('mousemove', this.handleMouseMove)\n window.addEventListener('mouseup', this.handleMouseUp)\n },\n handleMouseMove (e: MouseEvent) {\n if (this.disabled) return\n\n this.emitColor(e.clientX, e.clientY)\n },\n handleMouseUp () {\n window.removeEventListener('mousemove', this.handleMouseMove)\n window.removeEventListener('mouseup', this.handleMouseUp)\n },\n genCanvas (): VNode {\n return this.$createElement('canvas', {\n ref: 'canvas',\n attrs: {\n width: this.width,\n height: this.height,\n },\n })\n },\n genDot (): VNode {\n const radius = parseInt(this.dotSize, 10) / 2\n const x = convertToUnit(this.dot.x - radius)\n const y = convertToUnit(this.dot.y - radius)\n\n return this.$createElement('div', {\n staticClass: 'v-color-picker__canvas-dot',\n class: {\n 'v-color-picker__canvas-dot--disabled': this.disabled,\n },\n style: {\n width: convertToUnit(this.dotSize),\n height: convertToUnit(this.dotSize),\n transform: `translate(${x}, ${y})`,\n },\n })\n },\n },\n\n render (h): VNode {\n return h('div', {\n staticClass: 'v-color-picker__canvas',\n style: {\n width: convertToUnit(this.width),\n height: convertToUnit(this.height),\n },\n on: {\n click: this.handleClick,\n mousedown: this.handleMouseDown,\n },\n }, [\n this.genCanvas(),\n this.genDot(),\n ])\n },\n})\n"],"sourceRoot":"","file":"VColorPickerCanvas.js"} |