diff --git a/src/form/color.js b/src/form/color.js index 8b4cde4..540447b 100644 --- a/src/form/color.js +++ b/src/form/color.js @@ -12,7 +12,6 @@ import { Component, outsideClick, clearOutsideClick, - nextTick, offset, styleMap } from 'wkit' @@ -23,19 +22,19 @@ const ROOT = document.documentElement // H: 色相, S: 饱和度, B/V: 亮度 export function hsb2rgb(hsb) { - var h = hsb.h - var s = Math.round((hsb.s * 255) / 100) - var v = Math.round((hsb.b * 255) / 100) - var r = 0 - var g = 0 - var b = 0 + let h = hsb.h + let s = Math.round((hsb.s * 255) / 100) + let v = Math.round((hsb.b * 255) / 100) + let r = 0 + let g = 0 + let b = 0 if (s === 0) { r = g = b = v } else { - var t1 = v - var t2 = ((255 - s) * v) / 255 - var t3 = ((t1 - t2) * (h % 60)) / 60 + let t1 = v + let t2 = ((255 - s) * v) / 255 + let t3 = ((t1 - t2) * (h % 60)) / 60 // if (h === 360) { @@ -75,33 +74,51 @@ export function hsb2rgb(hsb) { return { r, g, b } } -export function rgb2hex({ r, g, b }) { - return [r, g, b].map(it => it.toString(16).padStart(2, '0')).join('') +export function rgb2hex({ r, g, b }, a) { + let hex = [r, g, b].map(it => it.toString(16).padStart(2, '0')).join('') + if (a !== void 0) { + hex += (~~((a / 100) * 255)).toString(16) + } + return hex } export function hex2rgb(hex) { - var r, g, b + let r, g, b, a - hex = hex.replace(/^#/, '').split('') + hex = hex.replace(/^#/, '') - if (hex.length === 3) { - r = parseInt(hex[0] + hex[0], 16) - g = parseInt(hex[1] + hex[1], 16) - b = parseInt(hex[2] + hex[2], 16) - } else { - r = parseInt(hex[0] + hex[1], 16) - g = parseInt(hex[2] + hex[3], 16) - b = parseInt(hex[4] + hex[5], 16) + switch (hex.length) { + case 3: + case 4: + r = hex[0].repeat(2) + g = hex[1].repeat(2) + b = hex[2].repeat(2) + a = (hex[3] || 'f').repeat(2) + + break + + case 6: + case 8: + r = hex.slice(0, 2) + g = hex.slice(2, 4) + b = hex.slice(4, 6) + a = hex.slice(6, 8) || 'ff' + break } - return { r, g, b } + r = parseInt(r, 16) + g = parseInt(g, 16) + b = parseInt(b, 16) + a = ~~((parseInt(a, 16) * 100) / 255) + + return { r, g, b, a } } export function rgb2hsb({ r, g, b }) { - var hsb = { h: 0, s: 0, b: 0 } - var max = Math.max(r, g, b) - var min = Math.min(r, g, b) - var delta = max - min + let hsb = { h: 0, s: 0, b: 0 } + let max = Math.max(r, g, b) + let min = Math.min(r, g, b) + let delta = max - min hsb.b = max hsb.s = max === 0 ? 0 : (delta * 255) / max @@ -139,9 +156,7 @@ class Color extends Component { type: String, default: '', observer(val) { - if (this.#show) { - this.#calc(val) - } + this.#calc(val) } }, disabled: false @@ -154,8 +169,8 @@ class Color extends Component { } .container { position: relative; - width: 32px; - height: 32px; + width: var(--wc-color-size, 32px); + height: var(--wc-color-size, 32px); -webkit-user-select: none; user-select: none; } @@ -215,7 +230,7 @@ class Color extends Component { position: absolute; z-index: 1; left: 0; - top: 38px; + top: var(--wc-color-size, 32px); width: 310px; padding: 5px; background: var(--color-plain-1); @@ -378,7 +393,17 @@ class Color extends Component { } } `, - + css` + :host([size='small']) { + .container { + width: 24px; + height: 24px; + } + .color-panel { + top: 24px; + } + } + `, css` :host([disabled]) { opacity: 0.6; @@ -402,41 +427,38 @@ class Color extends Component { #y = 0 // 场景触点的Y坐标 #ht = 0 // 颜色池的触点坐标 #at = 100 // 透明度条的触点坐标 - #sceneBg = '#ff0000' - #alphaBg = '#ff0000' + #sceneBg = '#000000' + #alphaBg = '#000000' - #cache = { - hsb: { h: 0, s: 100, b: 100 }, - rgba: { r: 255, g: 0, b: 0, a: 100 } - } + #rgba = { r: 0, g: 0, b: 0, a: 100 } + #hsb = { h: 0, s: 100, b: 100 } #calc(val) { - var isHex - var rgb + let isHex val = val.toLowerCase() - if (!val) { + if (!val || val === this.#value) { return } - isHex = /^#[0-9a-f]{3,6}$/.test(val) + isHex = /^#[0-9a-f]{3,8}$/.test(val) if (isHex) { - Object.assign(this.#cache.rgba, hex2rgb(val), { a: 100 }) + Object.assign(this.#rgba, hex2rgb(val)) } else { - var res = val.match(/rgba?\((\d+),\s*?(\d+),\s*?(\d+)[,\s]*?([\d\.]+)?\)/) + let res = val.match(/rgba?\((\d+),\s*?(\d+),\s*?(\d+)[,\s]*?([\d\.]+)?\)/) if (res) { - this.#cache.rgba = { r: +res[1], g: +res[2], b: +res[3], a: 100 } + this.#rgba = { r: +res[1], g: +res[2], b: +res[3], a: 100 } if (res[4] !== undefined) { - this.#cache.rgba.a = ~~(res[4] * 100) + this.#rgba.a = ~~(res[4] * 100) } } else { return } } - this.#cache.hsb = rgb2hsb(this.#cache.rgba) + this.#hsb = rgb2hsb(this.#rgba) } toggleColorPanel() { @@ -449,35 +471,31 @@ class Color extends Component { // 透明度变化 #changeAlpha(ev) { - let a = +ev.target.value - let { r, g, b } = this.#cache.rgba - - this.#cache.rgba.a = a + this.#rgba.a = +ev.target.value this.#updateView() } // 色彩池变化 #changeHue(h) { h = h < 0 ? 0 : h > 360 ? 360 : h - let { s, b } = this.#cache.hsb - let rgba = this.#cache.rgba + let { s, b } = this.#hsb + let rgba = this.#rgba let hsb = { h, s, b } Object.assign(rgba, hsb2rgb(hsb)) - this.#cache.hsb = hsb - this.#cache.rgba = rgba + this.#hsb = hsb + this.#rgba = rgba this.#updateView() } // #changeColor(x, y) { - let { hsb, rgba } = this.#cache + let hsb = this.#hsb + let rgba = this.#rgba hsb.s = ~~((100 * x) / 280) hsb.b = ~~((100 * (180 - y)) / 180) Object.assign(rgba, hsb2rgb(hsb)) - this.#cache.hsb = hsb - this.#cache.rgba = rgba this.#updateView() } @@ -520,7 +538,7 @@ class Color extends Component { bind(DOC, 'mouseup', _ => unbind(DOC, 'mousemove', callback), EV_OPTION) } - #close(clear) { + #close() { if (this.#show) { this.#show = false this.#calc(this.value) @@ -531,13 +549,15 @@ class Color extends Component { #submit() { this.value = this.#value this.#close() - this.$emit('change', { data: this.#value }) + this.$emit('input') + this.$emit('change') } #updateView() { - var { hsb, rgba } = this.#cache - var sceneBg, color, alphaBg - var x, y + let hsb = this.#hsb + let rgba = this.#rgba + let sceneBg, color, alphaBg + let x, y x = Math.ceil((hsb.s * 280) / 100) y = 180 - Math.ceil((hsb.b * 180) / 100) @@ -618,7 +638,7 @@ class Color extends Component {
- this.#close(true)}>清除 + 取消 确定