From 9b6491406cb181268242fcbb57224647c60e6ede Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 24 Dec 2021 22:46:39 +0800 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=8B?= =?UTF-8?q?=E5=86=99=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/case/colorchooser/colorchooser.custom.js | 8 ++-- src/case/colorchooser/colorchooser.js | 1 + .../colorchooser/colorchooser.popup.hex.js | 1 + .../colorchooser/farbtastic/farbtastic.js | 35 +--------------- src/core/platform/web/dom.js | 42 ++++++++++++++++++- 5 files changed, 50 insertions(+), 37 deletions(-) diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index 49091a10a..c34d92500 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/src/case/colorchooser/colorchooser.custom.js @@ -19,13 +19,15 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, { BI.CustomColorChooser.superclass._init.apply(this, arguments); var self = this, o = this.options; this.editor = BI.createWidget(o.editor, { - type: "bi.simple_hex_color_picker_editor" + type: "bi.simple_hex_color_picker_editor", + value: o.value }); this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () { self.setValue(this.getValue()); }); this.farbtastic = BI.createWidget({ - type: "bi.farbtastic" + type: "bi.farbtastic", + value: o.value }); this.farbtastic.on(BI.Farbtastic.EVENT_CHANGE, function () { self.setValue(this.getValue()); @@ -66,4 +68,4 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, { } }); BI.CustomColorChooser.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.custom_color_chooser", BI.CustomColorChooser); \ No newline at end of file +BI.shortcut("bi.custom_color_chooser", BI.CustomColorChooser); diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index 698afa714..737b3a189 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/src/case/colorchooser/colorchooser.js @@ -33,6 +33,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { ref: function (_ref) { self.trigger = _ref; }, + value: o.value, width: o.el.type ? o.width : o.width - 2, height: o.el.type ? o.height : o.height - 2 }, o.el), diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index 24ede8718..b8c98cb36 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -141,6 +141,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { title: BI.i18nText("BI-Custom_Color"), el: { type: "bi.custom_color_chooser", + value: o.value, editor: o.editor, ref: function (_ref) { self.customColorChooser = _ref; diff --git a/src/case/colorchooser/farbtastic/farbtastic.js b/src/case/colorchooser/farbtastic/farbtastic.js index 58eb563ca..a5ec6736b 100644 --- a/src/case/colorchooser/farbtastic/farbtastic.js +++ b/src/case/colorchooser/farbtastic/farbtastic.js @@ -127,42 +127,11 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, { }, _HSLToRGB: function (hsl) { - var m1, m2, r, g, b; - var h = hsl[0], s = hsl[1], l = hsl[2]; - m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; - m1 = l * 2 - m2; - return [this._hueToRGB(m1, m2, h + 0.33333), - this._hueToRGB(m1, m2, h), - this._hueToRGB(m1, m2, h - 0.33333)]; - }, - - _hueToRGB: function (m1, m2, h) { - h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); - if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; - if (h * 2 < 1) return m2; - if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; - return m1; + return BI.DOM.hsl2rgb(hsl); }, _RGBToHSL: function (rgb) { - var min, max, delta, h, s, l; - var r = rgb[0], g = rgb[1], b = rgb[2]; - min = Math.min(r, Math.min(g, b)); - max = Math.max(r, Math.max(g, b)); - delta = max - min; - l = (min + max) / 2; - s = 0; - if (l > 0 && l < 1) { - s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); - } - h = 0; - if (delta > 0) { - if (max == r && max != g) h += (g - b) / delta; - if (max == g && max != b) h += (2 + (b - r) / delta); - if (max == b && max != r) h += (4 + (r - g) / delta); - h /= 6; - } - return [h, s, l]; + return BI.DOM.rgb2hsl(rgb); }, _updateDisplay: function () { diff --git a/src/core/platform/web/dom.js b/src/core/platform/web/dom.js index 63583c0c3..fbb9aac56 100644 --- a/src/core/platform/web/dom.js +++ b/src/core/platform/web/dom.js @@ -205,6 +205,45 @@ return hexColour; }, + _hue2rgb: function (m1, m2, h) { + h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); + if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; + if (h * 2 < 1) return m2; + if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; + return m1; + }, + + hsl2rgb: function (hsl) { + var m1, m2, r, g, b; + var h = hsl[0], s = hsl[1], l = hsl[2]; + m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; + m1 = l * 2 - m2; + return [this._hue2rgb(m1, m2, h + 0.33333), + this._hue2rgb(m1, m2, h), + this._hue2rgb(m1, m2, h - 0.33333)]; + }, + + rgb2hsl: function (rgb) { + var min, max, delta, h, s, l; + var r = rgb[0], g = rgb[1], b = rgb[2]; + min = Math.min(r, Math.min(g, b)); + max = Math.max(r, Math.max(g, b)); + delta = max - min; + l = (min + max) / 2; + s = 0; + if (l > 0 && l < 1) { + s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); + } + h = 0; + if (delta > 0) { + if (max == r && max != g) h += (g - b) / delta; + if (max == g && max != b) h += (2 + (b - r) / delta); + if (max == b && max != r) h += (4 + (r - g) / delta); + h /= 6; + } + return [h, s, l]; + }, + rgb2json: function (rgbColour) { if (!rgbColour) { return {}; @@ -346,7 +385,8 @@ }, isInnerLeftSpaceEnough: function (combo, popup, extraWidth) { - var viewBounds = popup.element.bounds(),windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + var viewBounds = popup.element.bounds(), + windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); return BI.DOM.getInnerLeftPosition(combo, popup, extraWidth).left + viewBounds.width <= windowBounds.width; }, From a2e5b972953ee276c392ecf61a22e330d6650f0e Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 24 Dec 2021 22:50:20 +0800 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=B8=8B?= =?UTF-8?q?=E5=86=99=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/platform/web/dom.js | 190 ----------------------------------- src/core/utils/color.js | 190 +++++++++++++++++++++++++++++++++++ 2 files changed, 190 insertions(+), 190 deletions(-) create mode 100644 src/core/utils/color.js diff --git a/src/core/platform/web/dom.js b/src/core/platform/web/dom.js index fbb9aac56..52976e103 100644 --- a/src/core/platform/web/dom.js +++ b/src/core/platform/web/dom.js @@ -149,196 +149,6 @@ } }); - BI.extend(BI.DOM, { - isColor: function (color) { - return color && (this.isRGBColor(color) || this.isHexColor(color)); - }, - - isRGBColor: function (color) { - if (!color) { - return false; - } - return color.substr(0, 3) === "rgb"; - }, - - isHexColor: function (color) { - if (!color) { - return false; - } - return color[0] === "#" && color.length === 7; - }, - - isDarkColor: function (hex) { - if (!hex || !this.isHexColor(hex)) { - return false; - } - var rgb = this.rgb2json(this.hex2rgb(hex)); - var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); - if (grayLevel < 192/** 网上给的是140**/) { - return true; - } - return false; - }, - - // 获取对比颜色 - getContrastColor: function (color) { - if (!color || !this.isColor(color)) { - return ""; - } - if (this.isDarkColor(color)) { - return "#FFFFFF"; - } - return "#3D4D66"; - }, - - rgb2hex: function (rgbColour) { - if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { - return ""; - } - var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - var red = BI.parseInt(rgbValues[0]); - var green = BI.parseInt(rgbValues[1]); - var blue = BI.parseInt(rgbValues[2]); - - var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); - - return hexColour; - }, - - _hue2rgb: function (m1, m2, h) { - h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); - if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; - if (h * 2 < 1) return m2; - if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; - return m1; - }, - - hsl2rgb: function (hsl) { - var m1, m2, r, g, b; - var h = hsl[0], s = hsl[1], l = hsl[2]; - m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; - m1 = l * 2 - m2; - return [this._hue2rgb(m1, m2, h + 0.33333), - this._hue2rgb(m1, m2, h), - this._hue2rgb(m1, m2, h - 0.33333)]; - }, - - rgb2hsl: function (rgb) { - var min, max, delta, h, s, l; - var r = rgb[0], g = rgb[1], b = rgb[2]; - min = Math.min(r, Math.min(g, b)); - max = Math.max(r, Math.max(g, b)); - delta = max - min; - l = (min + max) / 2; - s = 0; - if (l > 0 && l < 1) { - s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); - } - h = 0; - if (delta > 0) { - if (max == r && max != g) h += (g - b) / delta; - if (max == g && max != b) h += (2 + (b - r) / delta); - if (max == b && max != r) h += (4 + (r - g) / delta); - h /= 6; - } - return [h, s, l]; - }, - - rgb2json: function (rgbColour) { - if (!rgbColour) { - return {}; - } - if (!this.isRGBColor(rgbColour)) { - return {}; - } - var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - return { - r: BI.parseInt(rgbValues[0]), - g: BI.parseInt(rgbValues[1]), - b: BI.parseInt(rgbValues[2]) - }; - }, - - rgba2json: function (rgbColour) { - if (!rgbColour) { - return {}; - } - var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - return { - r: BI.parseInt(rgbValues[0]), - g: BI.parseInt(rgbValues[1]), - b: BI.parseInt(rgbValues[2]), - a: BI.parseFloat(rgbValues[3]) - }; - }, - - json2rgb: function (rgb) { - if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { - return ""; - } - return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; - }, - - json2rgba: function (rgba) { - if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { - return ""; - } - return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; - }, - - int2hex: function (strNum) { - var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; - - return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15]; - }, - - hex2rgb: function (color) { - if (!color) { - return ""; - } - if (!this.isHexColor(color)) { - return color; - } - var tempValue = "rgb(", colorArray; - - if (color.length === 7) { - colorArray = [BI.parseInt("0x" + color.substring(1, 3)), - BI.parseInt("0x" + color.substring(3, 5)), - BI.parseInt("0x" + color.substring(5, 7))]; - } else if (color.length === 4) { - colorArray = [BI.parseInt("0x" + color.substring(1, 2)), - BI.parseInt("0x" + color.substring(2, 3)), - BI.parseInt("0x" + color.substring(3, 4))]; - } - tempValue += colorArray[0] + ","; - tempValue += colorArray[1] + ","; - tempValue += colorArray[2] + ")"; - - return tempValue; - }, - - rgba2rgb: function (rgbColor, bgColor) { - if (BI.isNull(bgColor)) { - bgColor = 1; - } - if (rgbColor.substr(0, 4) != "rgba") { - return ""; - } - var rgbValues = rgbColor.match(/\d+(\.\d+)?/g); - if (rgbValues.length < 4) { - return ""; - } - var R = BI.parseFloat(rgbValues[0]); - var G = BI.parseFloat(rgbValues[1]); - var B = BI.parseFloat(rgbValues[2]); - var A = BI.parseFloat(rgbValues[3]); - - return "rgb(" + Math.floor(255 * (bgColor * (1 - A)) + R * A) + "," + - Math.floor(255 * (bgColor * (1 - A)) + G * A) + "," + - Math.floor(255 * (bgColor * (1 - A)) + B * A) + ")"; - } - }); - BI.extend(BI.DOM, { getLeftPosition: function (combo, popup, extraWidth) { diff --git a/src/core/utils/color.js b/src/core/utils/color.js new file mode 100644 index 000000000..1c14c3739 --- /dev/null +++ b/src/core/utils/color.js @@ -0,0 +1,190 @@ +BI.DOM = BI.DOM || {}; +BI.extend(BI.DOM, { + isColor: function (color) { + return color && (this.isRGBColor(color) || this.isHexColor(color)); + }, + + isRGBColor: function (color) { + if (!color) { + return false; + } + return color.substr(0, 3) === "rgb"; + }, + + isHexColor: function (color) { + if (!color) { + return false; + } + return color[0] === "#" && color.length === 7; + }, + + isDarkColor: function (hex) { + if (!hex || !this.isHexColor(hex)) { + return false; + } + var rgb = this.rgb2json(this.hex2rgb(hex)); + var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); + if (grayLevel < 192/** 网上给的是140**/) { + return true; + } + return false; + }, + + // 获取对比颜色 + getContrastColor: function (color) { + if (!color || !this.isColor(color)) { + return ""; + } + if (this.isDarkColor(color)) { + return "#FFFFFF"; + } + return "#3D4D66"; + }, + + rgb2hex: function (rgbColour) { + if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { + return ""; + } + var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + var red = BI.parseInt(rgbValues[0]); + var green = BI.parseInt(rgbValues[1]); + var blue = BI.parseInt(rgbValues[2]); + + var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); + + return hexColour; + }, + + _hue2rgb: function (m1, m2, h) { + h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); + if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; + if (h * 2 < 1) return m2; + if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; + return m1; + }, + + hsl2rgb: function (hsl) { + var m1, m2, r, g, b; + var h = hsl[0], s = hsl[1], l = hsl[2]; + m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; + m1 = l * 2 - m2; + return [this._hue2rgb(m1, m2, h + 0.33333), + this._hue2rgb(m1, m2, h), + this._hue2rgb(m1, m2, h - 0.33333)]; + }, + + rgb2hsl: function (rgb) { + var min, max, delta, h, s, l; + var r = rgb[0], g = rgb[1], b = rgb[2]; + min = Math.min(r, Math.min(g, b)); + max = Math.max(r, Math.max(g, b)); + delta = max - min; + l = (min + max) / 2; + s = 0; + if (l > 0 && l < 1) { + s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); + } + h = 0; + if (delta > 0) { + if (max == r && max != g) h += (g - b) / delta; + if (max == g && max != b) h += (2 + (b - r) / delta); + if (max == b && max != r) h += (4 + (r - g) / delta); + h /= 6; + } + return [h, s, l]; + }, + + rgb2json: function (rgbColour) { + if (!rgbColour) { + return {}; + } + if (!this.isRGBColor(rgbColour)) { + return {}; + } + var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + return { + r: BI.parseInt(rgbValues[0]), + g: BI.parseInt(rgbValues[1]), + b: BI.parseInt(rgbValues[2]) + }; + }, + + rgba2json: function (rgbColour) { + if (!rgbColour) { + return {}; + } + var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + return { + r: BI.parseInt(rgbValues[0]), + g: BI.parseInt(rgbValues[1]), + b: BI.parseInt(rgbValues[2]), + a: BI.parseFloat(rgbValues[3]) + }; + }, + + json2rgb: function (rgb) { + if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { + return ""; + } + return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + }, + + json2rgba: function (rgba) { + if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { + return ""; + } + return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; + }, + + int2hex: function (strNum) { + var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; + + return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15]; + }, + + hex2rgb: function (color) { + if (!color) { + return ""; + } + if (!this.isHexColor(color)) { + return color; + } + var tempValue = "rgb(", colorArray; + + if (color.length === 7) { + colorArray = [BI.parseInt("0x" + color.substring(1, 3)), + BI.parseInt("0x" + color.substring(3, 5)), + BI.parseInt("0x" + color.substring(5, 7))]; + } else if (color.length === 4) { + colorArray = [BI.parseInt("0x" + color.substring(1, 2)), + BI.parseInt("0x" + color.substring(2, 3)), + BI.parseInt("0x" + color.substring(3, 4))]; + } + tempValue += colorArray[0] + ","; + tempValue += colorArray[1] + ","; + tempValue += colorArray[2] + ")"; + + return tempValue; + }, + + rgba2rgb: function (rgbColor, bgColor) { + if (BI.isNull(bgColor)) { + bgColor = 1; + } + if (rgbColor.substr(0, 4) != "rgba") { + return ""; + } + var rgbValues = rgbColor.match(/\d+(\.\d+)?/g); + if (rgbValues.length < 4) { + return ""; + } + var R = BI.parseFloat(rgbValues[0]); + var G = BI.parseFloat(rgbValues[1]); + var B = BI.parseFloat(rgbValues[2]); + var A = BI.parseFloat(rgbValues[3]); + + return "rgb(" + Math.floor(255 * (bgColor * (1 - A)) + R * A) + "," + + Math.floor(255 * (bgColor * (1 - A)) + G * A) + "," + + Math.floor(255 * (bgColor * (1 - A)) + B * A) + ")"; + } +});