From cdaded42962b7763c114b9e8f96c5755213e2863 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Tue, 4 Jun 2019 23:26:09 -0700 Subject: [PATCH] Remove goog.color.parse --- core/field_colour.js | 7 +-- core/utils_colour.js | 106 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 core/utils_colour.js diff --git a/core/field_colour.js b/core/field_colour.js index c30f2bb76..d7cd85a33 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -30,9 +30,9 @@ goog.require('Blockly.DropDownDiv'); goog.require('Blockly.Events'); goog.require('Blockly.Events.BlockChange'); goog.require('Blockly.Field'); +goog.require('Blockly.utils.colour'); goog.require('goog.math.Size'); -goog.require('goog.color'); /** @@ -172,10 +172,7 @@ Blockly.FieldColour.prototype.doClassValidation_ = function(newValue) { if (typeof newValue != 'string') { return null; } - if (goog.color.isValidColor(newValue)) { - return goog.color.parse(newValue).hex; - } - return null; + return Blockly.utils.colour.parse(newValue); }; /** diff --git a/core/utils_colour.js b/core/utils_colour.js new file mode 100644 index 000000000..7f4f02333 --- /dev/null +++ b/core/utils_colour.js @@ -0,0 +1,106 @@ +/** + * @license + * Visual Blocks Editor + * + * Copyright 2019 Google Inc. + * https://developers.google.com/blockly/ + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview Utility methods for colour manipulation. + * These methods are not specific to Blockly, and could be factored out into + * a JavaScript framework such as Closure. + * @author fraser@google.com (Neil Fraser) + */ +'use strict'; + +/** + * @name Blockly.utils.colour + * @namespace + */ +goog.provide('Blockly.utils.colour'); + +goog.require('Blockly.utils'); + +goog.require('goog.color'); + + +/** + * Parses a colour from a string. + * .parse('red') -> '#ff0000' + * .parse('#f00') -> '#ff0000' + * .parse('#ff0000') -> '#ff0000' + * .parse('rgb(255, 0, 0)') -> '#ff0000' + * @param {string} str Colour in some CSS format. + * @return {string|null} A string containing a hex representation of the colour, + * or null if can't be parsed. + */ +Blockly.utils.colour.parse = function(str) { + str = String(str).toLowerCase().trim(); + var hex = Blockly.utils.colour.names[str]; + if (hex) { + // e.g. 'red' + return hex; + } + hex = str[0] == '#' ? str : '#' + str; + if (/^#[0-9a-f]{6}$/.test(hex)) { + // e.g. '#00ff88' + return hex; + } + if (/^#[0-9a-f]{3}$/.test(hex)) { + // e.g. '#0f8' + return ['#', hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]].join(''); + } + var rgb = str.match(/^(?:rgb)?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/); + if (rgb) { + // e.g. 'rgb(0, 128, 255)' + var r = Number(rgb[1]); + 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 null; +}; + + + +/** + * 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 + * The keys of this map are the lowercase "readable" names of the colours, + * while the values are the "hex" values. + * + * @type {!Object} + */ +Blockly.utils.colour.names = { + 'aqua': '#00ffff', + 'black': '#000000', + 'blue': '#0000ff', + 'fuchsia': '#ff00ff', + 'gray': '#808080', + 'green': '#008000', + 'lime': '#00ff00', + 'maroon': '#800000', + 'navy': '#000080', + 'olive': '#808000', + 'purple': '#800080', + 'red': '#ff0000', + 'silver': '#c0c0c0', + 'teal': '#008080', + 'white': '#ffffff', + 'yellow': '#ffff00' +};