diff --git a/core/block.js b/core/block.js index c1c429aba..a8da3905a 100644 --- a/core/block.js +++ b/core/block.js @@ -42,7 +42,6 @@ goog.require('Blockly.Warning'); goog.require('Blockly.Workspace'); goog.require('goog.math.Coordinate'); -goog.require('goog.color'); /** @@ -891,9 +890,7 @@ Blockly.Block.prototype.getColourShadow = function() { if (colourSecondary) { return colourSecondary; } - var rgb = goog.color.hexToRgb(this.getColour()); - rgb = goog.color.lighten(rgb, 0.6); - return goog.color.rgbArrayToHex(rgb); + return Blockly.utils.colour.blend('white', this.getColour(), 0.6); }; /** @@ -914,11 +911,11 @@ Blockly.Block.prototype.getColourBorder = function() { colourDark: null }; } - var rgb = goog.color.hexToRgb(this.getColour()); + var colour = this.getColour(); return { colourBorder: null, - colourLight: goog.color.rgbArrayToHex(goog.color.lighten(rgb, 0.3)), - colourDark: goog.color.rgbArrayToHex(goog.color.darken(rgb, 0.2)) + colourLight: Blockly.utils.colour.blend('white',colour, 0.3), + colourDark: Blockly.utils.colour.blend('black', colour, 0.2) }; }; @@ -950,7 +947,7 @@ Blockly.Block.prototype.setColour = function(colour) { var hue = Number(dereferenced); if (!isNaN(hue) && 0 <= hue && hue <= 360) { this.hue_ = hue; - this.colour_ = Blockly.utils.colour.hueToRgb(hue); + this.colour_ = Blockly.utils.colour.hueToHex(hue); } else { var hex = Blockly.utils.colour.parse(dereferenced); if (hex) { diff --git a/core/toolbox.js b/core/toolbox.js index 040707b8b..661535cb5 100644 --- a/core/toolbox.js +++ b/core/toolbox.js @@ -400,7 +400,7 @@ Blockly.Toolbox.prototype.setColour_ = function(colourValue, childOut, categoryN this.hasColours_ = true; } else if (typeof colour === 'number' || (typeof colour === 'string' && !isNaN(Number(colour)))) { - childOut.hexColour = Blockly.utils.colour.hueToRgb(Number(colour)); + childOut.hexColour = Blockly.utils.colour.hueToHex(Number(colour)); this.hasColours_ = true; } else { childOut.hexColour = ''; diff --git a/core/utils_colour.js b/core/utils_colour.js index 14edb440a..549cd1c61 100644 --- a/core/utils_colour.js +++ b/core/utils_colour.js @@ -34,8 +34,6 @@ goog.provide('Blockly.utils.colour'); goog.require('Blockly.utils'); -goog.require('goog.color'); - /** * Parses a colour from a string. @@ -70,24 +68,128 @@ Blockly.utils.colour.parse = function(str) { var g = Number(rgb[2]); var b = Number(rgb[3]); if (r >= 0 && r < 256 && g >= 0 && g < 256 && b >= 0 && b < 256) { - return goog.color.rgbArrayToHex([r, g, b]); + return Blockly.utils.colour.rgbToHex(r, g, b); } } return null; }; +/** + * Converts a colour from RGB to hex representation. + * @param {number} r Amount of red, int between 0 and 255. + * @param {number} g Amount of green, int between 0 and 255. + * @param {number} b Amount of blue, int between 0 and 255. + * @return {string} Hex representation of the colour. + */ +Blockly.utils.colour.rgbToHex = function(r, g, b) { + var rgb = (r << 16) | (g << 8) | b; + if (r < 0x10) { + return '#' + (0x1000000 | rgb).toString(16).substr(1); + } + return '#' + rgb.toString(16); +}; +/** + * Converts a hex representation of a colour to RGB. + * @param {string} hexColor Colour in '#ff0000' format. + * @return {!Array.} RGB representation of the colour. + */ +Blockly.utils.colour.hexToRgb = function(hexColor) { + var rgb = parseInt(hexColor.substr(1), 16); + var r = rgb >> 16; + var g = (rgb >> 8) & 255; + var b = rgb & 255; + + return [r, g, b]; +}; /** * Convert a hue (HSV model) into an RGB hex triplet. * @param {number} hue Hue on a colour wheel (0-360). * @return {string} RGB code, e.g. '#5ba65b'. */ -Blockly.utils.colour.hueToRgb = function(hue) { - return goog.color.hsvToHex(hue, Blockly.HSV_SATURATION, +Blockly.utils.colour.hueToHex = function(hue) { + return Blockly.utils.colour.hsvToHex(hue, Blockly.HSV_SATURATION, Blockly.HSV_VALUE * 255); }; +/** + * Converts an HSV triplet to hex representation. + * @param {number} h Hue value in [0, 360]. + * @param {number} s Saturation value in [0, 1]. + * @param {number} v Brightness in [0, 255]. + * @return {string} Hex representation of the colour. + */ +Blockly.utils.colour.hsvToHex = function(h, s, v) { + var red = 0; + var green = 0; + var blue = 0; + if (s == 0) { + red = v; + green = v; + blue = v; + } else { + var sextant = Math.floor(h / 60); + var remainder = (h / 60) - sextant; + var val1 = v * (1 - s); + var val2 = v * (1 - (s * remainder)); + var val3 = v * (1 - (s * (1 - remainder))); + switch (sextant) { + case 1: + red = val2; + green = v; + blue = val1; + break; + case 2: + red = val1; + green = v; + blue = val3; + break; + case 3: + red = val1; + green = val2; + blue = v; + break; + case 4: + red = val3; + green = val1; + blue = v; + break; + case 5: + red = v; + green = val1; + blue = val2; + break; + case 6: + case 0: + red = v; + green = val3; + blue = val1; + break; + } + } + return Blockly.utils.colour.rgbToHex( + Math.floor(red), Math.floor(green), Math.floor(blue)); +}; + +/** + * Blend two colours together, using the specified factor to indicate the + * weight given to the first colour. + * @param {string} colour1 First colour. + * @param {string} colour2 Second colour. + * @param {number} factor The weight to be given to colour1 over colour2. + * Values should be in the range [0, 1]. + * @return {string} Combined colour represented in hex. + */ +Blockly.utils.colour.blend = function(colour1, colour2, factor) { + var rgb1 = Blockly.utils.colour.hexToRgb(Blockly.utils.colour.parse(colour1)); + var rgb2 = Blockly.utils.colour.hexToRgb(Blockly.utils.colour.parse(colour2)); + var r = Math.round(rgb2[0] + factor * (rgb1[0] - rgb2[0])); + var g = Math.round(rgb2[1] + factor * (rgb1[1] - rgb2[1])); + var b = Math.round(rgb2[2] + factor * (rgb1[2] - rgb2[2])); + return Blockly.utils.colour.rgbToHex(r, g, b); +}; + /** * A map that contains the 16 basic colour keywords as defined by W3C: * https://www.w3.org/TR/2018/REC-css-color-3-20180619/#html4