UNPKG

ace-colorpicker

Version:
1,752 lines (1,357 loc) 313 kB
(function(l, i, v, e) { v = l.createElement(i); v.async = 1; v.src = '//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; e = l.getElementsByTagName(i)[0]; e.parentNode.insertBefore(v, e)})(document, 'script'); var AceColorPicker = (function () { 'use strict'; /** * @method format * * convert color to format string * * // hex * color.format({ r : 255, g : 255, b : 255, a: 1 }, 'hex') // #FFFFFFFF * * // rgb * color.format({ r : 255, g : 255, b : 255 }, 'rgb') // rgba(255, 255, 255, 0.5); * * // rgba * color.format({ r : 255, g : 255, b : 255, a : 0.5 }, 'rgb') // rgba(255, 255, 255, 0.5); * * @param {Object} obj obj has r, g, b and a attributes * @param {"hex"/"rgb"} type format string type * @returns {*} */ function format(obj, type) { var defaultColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(0, 0, 0, 0)'; if (Array.isArray(obj)) { obj = { r: obj[0], g: obj[1], b: obj[2], a: obj[3] }; } if (type == 'hex') { return hex(obj); } else if (type == 'rgb') { return rgb(obj, defaultColor); } else if (type == 'hsl') { return hsl(obj); } return obj; } function hex(obj) { if (Array.isArray(obj)) { obj = { r: obj[0], g: obj[1], b: obj[2], a: obj[3] }; } var r = obj.r.toString(16); if (obj.r < 16) r = "0" + r; var g = obj.g.toString(16); if (obj.g < 16) g = "0" + g; var b = obj.b.toString(16); if (obj.b < 16) b = "0" + b; var alphaValue = ''; if (obj.a < 1) { var alpha = Math.floor(obj.a * 255); var alphaValue = alpha.toString(16); if (alpha < 16) alphaValue = "0" + alphaValue; } return '#' + r + g + b + alphaValue; } function rgb(obj) { var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(0, 0, 0, 0)'; if (Array.isArray(obj)) { obj = { r: obj[0], g: obj[1], b: obj[2], a: obj[3] }; } if (typeof obj == 'undefined') { return undefined; } if (obj.a == 1 || typeof obj.a == 'undefined') { if (isNaN(obj.r)) { return defaultColor; } return 'rgb(' + obj.r + ',' + obj.g + ',' + obj.b + ')'; } else { return 'rgba(' + obj.r + ',' + obj.g + ',' + obj.b + ',' + obj.a + ')'; } } function hsl(obj) { if (Array.isArray(obj)) { obj = { r: obj[0], g: obj[1], b: obj[2], a: obj[3] }; } if (obj.a == 1 || typeof obj.a == 'undefined') { return 'hsl(' + obj.h + ',' + obj.s + '%,' + obj.l + '%)'; } else { return 'hsla(' + obj.h + ',' + obj.s + '%,' + obj.l + '%,' + obj.a + ')'; } } var formatter = { format: format, rgb: rgb, hsl: hsl, hex: hex }; function round(n, k) { k = typeof k == 'undefined' ? 1 : k; return Math.round(n * k) / k; } function degreeToRadian(angle) { return angle * Math.PI / 180; } /** * * convert radian to degree * * @param {*} radian * @returns {Number} 0..360 */ function radianToDegree(radian) { var angle = radian * 180 / Math.PI; if (angle < 0) { // 각도가 0보다 작으면 360 에서 반전시킨다. angle = 360 + angle; } return angle; } function getXInCircle(angle, radius) { var centerX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; return centerX + radius * Math.cos(degreeToRadian(angle)); } function getYInCircle(angle, radius) { var centerY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; return centerY + radius * Math.sin(degreeToRadian(angle)); } function getXYInCircle(angle, radius) { var centerX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; var centerY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; return { x: getXInCircle(angle, radius, centerX), y: getYInCircle(angle, radius, centerY) }; } function caculateAngle(rx, ry) { return radianToDegree(Math.atan2(ry, rx)); } var math = { round: round, radianToDegree: radianToDegree, degreeToRadian: degreeToRadian, getXInCircle: getXInCircle, getYInCircle: getYInCircle, caculateAngle: caculateAngle }; var color_names = { aliceblue: "rgb(240, 248, 255)", antiquewhite: "rgb(250, 235, 215)", aqua: "rgb(0, 255, 255)", aquamarine: "rgb(127, 255, 212)", azure: "rgb(240, 255, 255)", beige: "rgb(245, 245, 220)", bisque: "rgb(255, 228, 196)", black: "rgb(0, 0, 0)", blanchedalmond: "rgb(255, 235, 205)", blue: "rgb(0, 0, 255)", blueviolet: "rgb(138, 43, 226)", brown: "rgb(165, 42, 42)", burlywood: "rgb(222, 184, 135)", cadetblue: "rgb(95, 158, 160)", chartreuse: "rgb(127, 255, 0)", chocolate: "rgb(210, 105, 30)", coral: "rgb(255, 127, 80)", cornflowerblue: "rgb(100, 149, 237)", cornsilk: "rgb(255, 248, 220)", crimson: "rgb(237, 20, 61)", cyan: "rgb(0, 255, 255)", darkblue: "rgb(0, 0, 139)", darkcyan: "rgb(0, 139, 139)", darkgoldenrod: "rgb(184, 134, 11)", darkgray: "rgb(169, 169, 169)", darkgrey: "rgb(169, 169, 169)", darkgreen: "rgb(0, 100, 0)", darkkhaki: "rgb(189, 183, 107)", darkmagenta: "rgb(139, 0, 139)", darkolivegreen: "rgb(85, 107, 47)", darkorange: "rgb(255, 140, 0)", darkorchid: "rgb(153, 50, 204)", darkred: "rgb(139, 0, 0)", darksalmon: "rgb(233, 150, 122)", darkseagreen: "rgb(143, 188, 143)", darkslateblue: "rgb(72, 61, 139)", darkslategray: "rgb(47, 79, 79)", darkslategrey: "rgb(47, 79, 79)", darkturquoise: "rgb(0, 206, 209)", darkviolet: "rgb(148, 0, 211)", deeppink: "rgb(255, 20, 147)", deepskyblue: "rgb(0, 191, 255)", dimgray: "rgb(105, 105, 105)", dimgrey: "rgb(105, 105, 105)", dodgerblue: "rgb(30, 144, 255)", firebrick: "rgb(178, 34, 34)", floralwhite: "rgb(255, 250, 240)", forestgreen: "rgb(34, 139, 34)", fuchsia: "rgb(255, 0, 255)", gainsboro: "rgb(220, 220, 220)", ghostwhite: "rgb(248, 248, 255)", gold: "rgb(255, 215, 0)", goldenrod: "rgb(218, 165, 32)", gray: "rgb(128, 128, 128)", grey: "rgb(128, 128, 128)", green: "rgb(0, 128, 0)", greenyellow: "rgb(173, 255, 47)", honeydew: "rgb(240, 255, 240)", hotpink: "rgb(255, 105, 180)", indianred: "rgb(205, 92, 92)", indigo: "rgb(75, 0, 130)", ivory: "rgb(255, 255, 240)", khaki: "rgb(240, 230, 140)", lavender: "rgb(230, 230, 250)", lavenderblush: "rgb(255, 240, 245)", lawngreen: "rgb(124, 252, 0)", lemonchiffon: "rgb(255, 250, 205)", lightblue: "rgb(173, 216, 230)", lightcoral: "rgb(240, 128, 128)", lightcyan: "rgb(224, 255, 255)", lightgoldenrodyellow: "rgb(250, 250, 210)", lightgreen: "rgb(144, 238, 144)", lightgray: "rgb(211, 211, 211)", lightgrey: "rgb(211, 211, 211)", lightpink: "rgb(255, 182, 193)", lightsalmon: "rgb(255, 160, 122)", lightseagreen: "rgb(32, 178, 170)", lightskyblue: "rgb(135, 206, 250)", lightslategray: "rgb(119, 136, 153)", lightslategrey: "rgb(119, 136, 153)", lightsteelblue: "rgb(176, 196, 222)", lightyellow: "rgb(255, 255, 224)", lime: "rgb(0, 255, 0)", limegreen: "rgb(50, 205, 50)", linen: "rgb(250, 240, 230)", magenta: "rgb(255, 0, 255)", maroon: "rgb(128, 0, 0)", mediumaquamarine: "rgb(102, 205, 170)", mediumblue: "rgb(0, 0, 205)", mediumorchid: "rgb(186, 85, 211)", mediumpurple: "rgb(147, 112, 219)", mediumseagreen: "rgb(60, 179, 113)", mediumslateblue: "rgb(123, 104, 238)", mediumspringgreen: "rgb(0, 250, 154)", mediumturquoise: "rgb(72, 209, 204)", mediumvioletred: "rgb(199, 21, 133)", midnightblue: "rgb(25, 25, 112)", mintcream: "rgb(245, 255, 250)", mistyrose: "rgb(255, 228, 225)", moccasin: "rgb(255, 228, 181)", navajowhite: "rgb(255, 222, 173)", navy: "rgb(0, 0, 128)", oldlace: "rgb(253, 245, 230)", olive: "rgb(128, 128, 0)", olivedrab: "rgb(107, 142, 35)", orange: "rgb(255, 165, 0)", orangered: "rgb(255, 69, 0)", orchid: "rgb(218, 112, 214)", palegoldenrod: "rgb(238, 232, 170)", palegreen: "rgb(152, 251, 152)", paleturquoise: "rgb(175, 238, 238)", palevioletred: "rgb(219, 112, 147)", papayawhip: "rgb(255, 239, 213)", peachpuff: "rgb(255, 218, 185)", peru: "rgb(205, 133, 63)", pink: "rgb(255, 192, 203)", plum: "rgb(221, 160, 221)", powderblue: "rgb(176, 224, 230)", purple: "rgb(128, 0, 128)", rebeccapurple: "rgb(102, 51, 153)", red: "rgb(255, 0, 0)", rosybrown: "rgb(188, 143, 143)", royalblue: "rgb(65, 105, 225)", saddlebrown: "rgb(139, 69, 19)", salmon: "rgb(250, 128, 114)", sandybrown: "rgb(244, 164, 96)", seagreen: "rgb(46, 139, 87)", seashell: "rgb(255, 245, 238)", sienna: "rgb(160, 82, 45)", silver: "rgb(192, 192, 192)", skyblue: "rgb(135, 206, 235)", slateblue: "rgb(106, 90, 205)", slategray: "rgb(112, 128, 144)", slategrey: "rgb(112, 128, 144)", snow: "rgb(255, 250, 250)", springgreen: "rgb(0, 255, 127)", steelblue: "rgb(70, 130, 180)", tan: "rgb(210, 180, 140)", teal: "rgb(0, 128, 128)", thistle: "rgb(216, 191, 216)", tomato: "rgb(255, 99, 71)", turquoise: "rgb(64, 224, 208)", violet: "rgb(238, 130, 238)", wheat: "rgb(245, 222, 179)", white: "rgb(255, 255, 255)", whitesmoke: "rgb(245, 245, 245)", yellow: "rgb(255, 255, 0)", yellowgreen: "rgb(154, 205, 50)", transparent: "rgba(0, 0, 0, 0)" }; function isColorName(name) { return !!color_names[name]; } function getColorByName(name) { return color_names[name]; } var ColorNames = { isColorName: isColorName, getColorByName: getColorByName }; function HUEtoRGB(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; } function HSLtoHSV(h, s, l) { if (arguments.length == 1) { var _arguments$ = arguments[0], h = _arguments$.h, s = _arguments$.s, l = _arguments$.l; } var rgb = HSLtoRGB(h, s, l); return RGBtoHSV(rgb.r, rgb.g, rgb.b); } function HSLtoRGB(h, s, l) { if (arguments.length == 1) { var _arguments$2 = arguments[0], h = _arguments$2.h, s = _arguments$2.s, l = _arguments$2.l; } var r, g, b; h /= 360; s /= 100; l /= 100; if (s == 0) { r = g = b = l; // achromatic } else { var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = HUEtoRGB(p, q, h + 1 / 3); g = HUEtoRGB(p, q, h); b = HUEtoRGB(p, q, h - 1 / 3); } return { r: round(r * 255), g: round(g * 255), b: round(b * 255) }; } var fromHSL = { HUEtoRGB: HUEtoRGB, HSLtoHSV: HSLtoHSV, HSLtoRGB: HSLtoRGB }; var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; var createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var defineProperty = function (obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; var inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }; var possibleConstructorReturn = function (self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }; var slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); var toArray = function (arr) { return Array.isArray(arr) ? arr : Array.from(arr); }; var toConsumableArray = function (arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }; var color_regexp = /(#(?:[\da-f]{8})|#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi; var color_split = ','; function matches(str) { var matches = str.match(color_regexp); var result = []; if (!matches) { return result; } for (var i = 0, len = matches.length; i < len; i++) { if (matches[i].indexOf('#') > -1 || matches[i].indexOf('rgb') > -1 || matches[i].indexOf('hsl') > -1) { result.push({ color: matches[i] }); } else { var nameColor = ColorNames.getColorByName(matches[i]); if (nameColor) { result.push({ color: matches[i], nameColor: nameColor }); } } } var pos = { next: 0 }; result.forEach(function (item) { var startIndex = str.indexOf(item.color, pos.next); item.startIndex = startIndex; item.endIndex = startIndex + item.color.length; pos.next = item.endIndex; }); return result; } function convertMatches(str) { var m = matches(str); m.forEach(function (it, index) { str = str.replace(it.color, '@' + index); }); return { str: str, matches: m }; } function convertMatchesArray(str) { var splitStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ','; var ret = convertMatches(str); return ret.str.split(splitStr).map(function (it, index) { it = trim(it); if (ret.matches[index]) { it = it.replace('@' + index, ret.matches[index].color); } return it; }); } function reverseMatches(str, matches) { matches.forEach(function (it, index) { str = str.replace('@' + index, it.color); }); return str; } function trim(str) { return str.replace(/^\s+|\s+$/g, ''); } /** * @method rgb * * parse string to rgb color * * color.parse("#FF0000") === { r : 255, g : 0, b : 0 } * * color.parse("rgb(255, 0, 0)") == { r : 255, g : 0, b :0 } * color.parse(0xff0000) == { r : 255, g : 0, b : 0 } * color.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 } * * @param {String} str color string * @returns {Object} rgb object */ function parse(str) { if (typeof str == 'string') { if (ColorNames.isColorName(str)) { str = ColorNames.getColorByName(str); } if (str.indexOf("rgb(") > -1) { var arr = str.replace("rgb(", "").replace(")", "").split(","); for (var i = 0, len = arr.length; i < len; i++) { arr[i] = parseInt(trim(arr[i]), 10); } var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: 1 }; obj = Object.assign(obj, RGBtoHSL(obj)); return obj; } else if (str.indexOf("rgba(") > -1) { var arr = str.replace("rgba(", "").replace(")", "").split(","); for (var i = 0, len = arr.length; i < len; i++) { if (len - 1 == i) { arr[i] = parseFloat(trim(arr[i])); } else { arr[i] = parseInt(trim(arr[i]), 10); } } var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: arr[3] }; obj = Object.assign(obj, RGBtoHSL(obj)); return obj; } else if (str.indexOf("hsl(") > -1) { var arr = str.replace("hsl(", "").replace(")", "").split(","); for (var i = 0, len = arr.length; i < len; i++) { arr[i] = parseFloat(trim(arr[i])); } var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: 1 }; obj = Object.assign(obj, HSLtoRGB(obj)); return obj; } else if (str.indexOf("hsla(") > -1) { var arr = str.replace("hsla(", "").replace(")", "").split(","); for (var i = 0, len = arr.length; i < len; i++) { if (len - 1 == i) { arr[i] = parseFloat(trim(arr[i])); } else { arr[i] = parseInt(trim(arr[i]), 10); } } var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: arr[3] }; obj = Object.assign(obj, HSLtoRGB(obj)); return obj; } else if (str.indexOf("#") == 0) { str = str.replace("#", ""); var arr = []; var a = 1; if (str.length == 3) { for (var i = 0, len = str.length; i < len; i++) { var char = str.substr(i, 1); arr.push(parseInt(char + char, 16)); } } else if (str.length === 8) { for (var i = 0, len = str.length; i < len; i += 2) { arr.push(parseInt(str.substr(i, 2), 16)); } a = arr.pop() / 255; } else { for (var i = 0, len = str.length; i < len; i += 2) { arr.push(parseInt(str.substr(i, 2), 16)); } } var obj = { type: 'hex', r: arr[0], g: arr[1], b: arr[2], a: a }; obj = Object.assign(obj, RGBtoHSL(obj)); return obj; } } else if (typeof str == 'number') { if (0x000000 <= str && str <= 0xffffff) { var r = (str & 0xff0000) >> 16; var g = (str & 0x00ff00) >> 8; var b = (str & 0x0000ff) >> 0; var obj = { type: 'hex', r: r, g: g, b: b, a: 1 }; obj = Object.assign(obj, RGBtoHSL(obj)); return obj; } else if (0x00000000 <= str && str <= 0xffffffff) { var _r = (str & 0xff000000) >> 24; var _g = (str & 0x00ff0000) >> 16; var _b = (str & 0x0000ff00) >> 8; var _a = (str & 0x000000ff) / 255; var obj = { type: 'hex', r: _r, g: _g, b: _b, a: _a }; obj = Object.assign(obj, RGBtoHSL(obj)); return obj; } } return str; } function parseGradient(colors) { if (typeof colors == 'string') { colors = convertMatchesArray(colors); } colors = colors.map(function (it) { if (typeof it == 'string') { var ret = convertMatches(it); var arr = trim(ret.str).split(' '); if (arr[1]) { if (arr[1].includes('%')) { arr[1] = parseFloat(arr[1].replace(/%/, '')) / 100; } else { arr[1] = parseFloat(arr[1]); } } else { arr[1] = '*'; } arr[0] = reverseMatches(arr[0], ret.matches); return arr; } else if (Array.isArray(it)) { if (!it[1]) { it[1] = '*'; } else if (typeof it[1] == 'string') { if (it[1].includes('%')) { it[1] = parseFloat(it[1].replace(/%/, '')) / 100; } else { it[1] = +it[1]; } } return [].concat(toConsumableArray(it)); } }); var count = colors.filter(function (it) { return it[1] === '*'; }).length; if (count > 0) { var sum = colors.filter(function (it) { return it[1] != '*' && it[1] != 1; }).map(function (it) { return it[1]; }).reduce(function (total, cur) { return total + cur; }, 0); var dist = (1 - sum) / count; colors.forEach(function (it, index) { if (it[1] == '*' && index > 0) { if (colors.length - 1 == index) { // it[1] = 1 } else { it[1] = dist; } } }); } return colors; } var parser = { matches: matches, convertMatches: convertMatches, convertMatchesArray: convertMatchesArray, reverseMatches: reverseMatches, parse: parse, parseGradient: parseGradient, trim: trim, color_regexp: color_regexp, color_split: color_split }; function RGBtoHSV(r, g, b) { if (arguments.length == 1) { var _arguments$ = arguments[0], r = _arguments$.r, g = _arguments$.g, b = _arguments$.b; } var R1 = r / 255; var G1 = g / 255; var B1 = b / 255; var MaxC = Math.max(R1, G1, B1); var MinC = Math.min(R1, G1, B1); var DeltaC = MaxC - MinC; var H = 0; if (DeltaC == 0) { H = 0; } else if (MaxC == R1) { H = 60 * ((G1 - B1) / DeltaC % 6); } else if (MaxC == G1) { H = 60 * ((B1 - R1) / DeltaC + 2); } else if (MaxC == B1) { H = 60 * ((R1 - G1) / DeltaC + 4); } if (H < 0) { H = 360 + H; } var S = 0; if (MaxC == 0) S = 0;else S = DeltaC / MaxC; var V = MaxC; return { h: H, s: S, v: V }; } function RGBtoCMYK(r, g, b) { if (arguments.length == 1) { var _arguments$2 = arguments[0], r = _arguments$2.r, g = _arguments$2.g, b = _arguments$2.b; } var R1 = r / 255; var G1 = g / 255; var B1 = b / 255; var K = 1 - Math.max(R1, G1, B1); var C = (1 - R1 - K) / (1 - K); var M = (1 - G1 - K) / (1 - K); var Y = (1 - B1 - K) / (1 - K); return { c: C, m: M, y: Y, k: K }; } function RGBtoHSL(r, g, b) { if (arguments.length == 1) { var _arguments$3 = arguments[0], r = _arguments$3.r, g = _arguments$3.g, b = _arguments$3.b; } r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0);break; case g: h = (b - r) / d + 2;break; case b: h = (r - g) / d + 4;break; } h /= 6; } return { h: round(h * 360), s: round(s * 100), l: round(l * 100) }; } function c(r, g, b) { if (arguments.length == 1) { var _arguments$4 = arguments[0], r = _arguments$4.r, g = _arguments$4.g, b = _arguments$4.b; } return gray((r + g + b) / 3 > 90 ? 0 : 255); } function gray(gray) { return { r: gray, g: gray, b: gray }; } function RGBtoSimpleGray(r, g, b) { if (arguments.length == 1) { var _arguments$5 = arguments[0], r = _arguments$5.r, g = _arguments$5.g, b = _arguments$5.b; } return gray(Math.ceil((r + g + b) / 3)); } function RGBtoGray(r, g, b) { if (arguments.length == 1) { var _arguments$6 = arguments[0], r = _arguments$6.r, g = _arguments$6.g, b = _arguments$6.b; } return gray(RGBtoYCrCb(r, g, b).y); } function brightness(r, g, b) { return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722); } function RGBtoYCrCb(r, g, b) { if (arguments.length == 1) { var _arguments$7 = arguments[0], r = _arguments$7.r, g = _arguments$7.g, b = _arguments$7.b; } var Y = brightness(r, g, b); var Cb = 0.564 * (b - Y); var Cr = 0.713 * (r - Y); return { y: Y, cr: Cr, cb: Cb }; } function PivotRGB(n) { var point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.04045; return (n > point ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92) * 100; } function RGBtoXYZ(r, g, b) { //sR, sG and sB (Standard RGB) input range = 0 ÷ 255 //X, Y and Z output refer to a D65/2° standard illuminant. if (arguments.length == 1) { var _arguments$8 = arguments[0], r = _arguments$8.r, g = _arguments$8.g, b = _arguments$8.b; } var R = r / 255; var G = g / 255; var B = b / 255; R = PivotRGB(R); G = PivotRGB(G); B = PivotRGB(B); var x = R * 0.4124 + G * 0.3576 + B * 0.1805; var y = R * 0.2126 + G * 0.7152 + B * 0.0722; var z = R * 0.0193 + G * 0.1192 + B * 0.9505; return { x: x, y: y, z: z }; } function RGBtoLAB(r, g, b) { if (arguments.length == 1) { var _arguments$9 = arguments[0], r = _arguments$9.r, g = _arguments$9.g, b = _arguments$9.b; } return XYZtoLAB(RGBtoXYZ(r, g, b)); } var fromRGB = { RGBtoCMYK: RGBtoCMYK, RGBtoGray: RGBtoGray, RGBtoHSL: RGBtoHSL, RGBtoHSV: RGBtoHSV, RGBtoLAB: RGBtoLAB, RGBtoSimpleGray: RGBtoSimpleGray, RGBtoXYZ: RGBtoXYZ, RGBtoYCrCb: RGBtoYCrCb, c: c, brightness: brightness, gray: gray }; function CMYKtoRGB(c, m, y, k) { if (arguments.length == 1) { var _arguments$ = arguments[0], c = _arguments$.c, m = _arguments$.m, y = _arguments$.y, k = _arguments$.k; } var R = 255 * (1 - c) * (1 - k); var G = 255 * (1 - m) * (1 - k); var B = 255 * (1 - y) * (1 - k); return { r: R, g: G, b: B }; } var fromCMYK = { CMYKtoRGB: CMYKtoRGB }; function ReverseXyz(n) { return Math.pow(n, 3) > 0.008856 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787; } function ReverseRGB(n) { return n > 0.0031308 ? 1.055 * Math.pow(n, 1 / 2.4) - 0.055 : 12.92 * n; } function XYZtoRGB(x, y, z) { if (arguments.length == 1) { var _arguments$ = arguments[0], x = _arguments$.x, y = _arguments$.y, z = _arguments$.z; } //X, Y and Z input refer to a D65/2° standard illuminant. //sR, sG and sB (standard RGB) output range = 0 ÷ 255 var X = x / 100.0; var Y = y / 100.0; var Z = z / 100.0; var R = X * 3.2406 + Y * -1.5372 + Z * -0.4986; var G = X * -0.9689 + Y * 1.8758 + Z * 0.0415; var B = X * 0.0557 + Y * -0.2040 + Z * 1.0570; R = ReverseRGB(R); G = ReverseRGB(G); B = ReverseRGB(B); var r = round(R * 255); var g = round(G * 255); var b = round(B * 255); return { r: r, g: g, b: b }; } function LABtoXYZ(l, a, b) { if (arguments.length == 1) { var _arguments$2 = arguments[0], l = _arguments$2.l, a = _arguments$2.a, b = _arguments$2.b; } //Reference-X, Y and Z refer to specific illuminants and observers. //Common reference values are available below in this same page. var Y = (l + 16) / 116; var X = a / 500 + Y; var Z = Y - b / 200; Y = ReverseXyz(Y); X = ReverseXyz(X); Z = ReverseXyz(Z); var x = X * 95.047; var y = Y * 100.000; var z = Z * 108.883; return { x: x, y: y, z: z }; } function LABtoRGB(l, a, b) { if (arguments.length == 1) { var _arguments$4 = arguments[0], l = _arguments$4.l, a = _arguments$4.a, b = _arguments$4.b; } return XYZtoRGB(LABtoXYZ(l, a, b)); } var fromLAB = { XYZtoRGB: XYZtoRGB, LABtoRGB: LABtoRGB, LABtoXYZ: LABtoXYZ }; function HSVtoRGB(h, s, v) { if (arguments.length == 1) { var _arguments$ = arguments[0], h = _arguments$.h, s = _arguments$.s, v = _arguments$.v; } var H = h; var S = s; var V = v; if (H >= 360) { H = 0; } var C = S * V; var X = C * (1 - Math.abs(H / 60 % 2 - 1)); var m = V - C; var temp = []; if (0 <= H && H < 60) { temp = [C, X, 0]; } else if (60 <= H && H < 120) { temp = [X, C, 0]; } else if (120 <= H && H < 180) { temp = [0, C, X]; } else if (180 <= H && H < 240) { temp = [0, X, C]; } else if (240 <= H && H < 300) { temp = [X, 0, C]; } else if (300 <= H && H < 360) { temp = [C, 0, X]; } return { r: round((temp[0] + m) * 255), g: round((temp[1] + m) * 255), b: round((temp[2] + m) * 255) }; } function HSVtoHSL(h, s, v) { if (arguments.length == 1) { var _arguments$2 = arguments[0], h = _arguments$2.h, s = _arguments$2.s, v = _arguments$2.v; } var rgb = HSVtoRGB(h, s, v); return RGBtoHSL(rgb.r, rgb.g, rgb.b); } var fromHSV = { HSVtoHSL: HSVtoHSL, HSVtoRGB: HSVtoRGB }; function YCrCbtoRGB(y, cr, cb, bit) { if (arguments.length == 1) { var _arguments$ = arguments[0], y = _arguments$.y, cr = _arguments$.cr, cb = _arguments$.cb, bit = _arguments$.bit; bit = bit || 0; } var R = y + 1.402 * (cr - bit); var G = y - 0.344 * (cb - bit) - 0.714 * (cr - bit); var B = y + 1.772 * (cb - bit); return { r: Math.ceil(R), g: Math.ceil(G), b: Math.ceil(B) }; } var fromYCrCb = { YCrCbtoRGB: YCrCbtoRGB }; function interpolateRGB(startColor, endColor) { var t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5; var exportFormat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'hex'; var obj = { r: round(startColor.r + (endColor.r - startColor.r) * t), g: round(startColor.g + (endColor.g - startColor.g) * t), b: round(startColor.b + (endColor.b - startColor.b) * t), a: round(startColor.a + (endColor.a - startColor.a) * t, 100) }; return format(obj, obj.a < 1 ? 'rgb' : exportFormat); } function scale(scale) { var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5; if (!scale) return []; if (typeof scale === 'string') { scale = convertMatchesArray(scale); } scale = scale || []; var len = scale.length; var colors = []; for (var i = 0; i < len - 1; i++) { for (var index = 0; index < count; index++) { colors.push(blend(scale[i], scale[i + 1], index / count)); } } return colors; } function blend(startColor, endColor) { var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5; var format$$1 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'hex'; var s = parse(startColor); var e = parse(endColor); return interpolateRGB(s, e, ratio, format$$1); } function mix(startcolor, endColor) { var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5; var format$$1 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'hex'; return blend(startcolor, endColor, ratio, format$$1); } /** * * @param {Color|String} c */ function contrast(c$$1) { c$$1 = parse(c$$1); return (Math.round(c$$1.r * 299) + Math.round(c$$1.g * 587) + Math.round(c$$1.b * 114)) / 1000; } function contrastColor(c$$1) { return contrast(c$$1) >= 128 ? 'black' : 'white'; } function gradient(colors) { var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10; colors = parseGradient(colors); var newColors = []; var maxCount = count - (colors.length - 1); var allCount = maxCount; for (var i = 1, len = colors.length; i < len; i++) { var startColor = colors[i - 1][0]; var endColor = colors[i][0]; // if it is second color var rate = i == 1 ? colors[i][1] : colors[i][1] - colors[i - 1][1]; // if it is last color var colorCount = i == colors.length - 1 ? allCount : Math.floor(rate * maxCount); newColors = newColors.concat(scale([startColor, endColor], colorCount), [endColor]); allCount -= colorCount; } return newColors; } function scaleHSV(color) { var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'h'; var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 9; var exportFormat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'rgb'; var min = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0; var max = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1; var dist = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 100; var colorObj = parse(color); var hsv = RGBtoHSV(colorObj); var unit = (max - min) * dist / count; var results = []; for (var i = 1; i <= count; i++) { hsv[target] = Math.abs((dist - unit * i) / dist); results.push(format(HSVtoRGB(hsv), exportFormat)); } return results; } function scaleH(color) { var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 9; var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgb'; var min = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; var max = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 360; return scaleHSV(color, 'h', count, exportFormat, min, max, 1); } function scaleS(color) { var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 9; var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgb'; var min = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; var max = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; return scaleHSV(color, 's', count, exportFormat, min, max, 100); } function scaleV(color) { var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 9; var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgb'; var min = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0; var max = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; return scaleHSV(color, 'v', count, exportFormat, min, max, 100); } /* predefined scale colors */ scale.parula = function (count) { return scale(['#352a87', '#0f5cdd', '#00b5a6', '#ffc337', '#fdff00'], count); }; scale.jet = function (count) { return scale(['#00008f', '#0020ff', '#00ffff', '#51ff77', '#fdff00', '#ff0000', '#800000'], count); }; scale.hsv = function (count) { return scale(['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff', '#ff0000'], count); }; scale.hot = function (count) { return scale(['#0b0000', '#ff0000', '#ffff00', '#ffffff'], count); }; scale.pink = function (count) { return scale(['#1e0000', '#bd7b7b', '#e7e5b2', '#ffffff'], count); }; scale.bone = function (count) { return scale(['#000000', '#4a4a68', '#a6c6c6', '#ffffff'], count); }; scale.copper = function (count) { return scale(['#000000', '#3d2618', '#9d623e', '#ffa167', '#ffc77f'], count); }; var mixin = { interpolateRGB: interpolateRGB, blend: blend, mix: mix, scale: scale, contrast: contrast, contrastColor: contrastColor, gradient: gradient, scaleHSV: scaleHSV, scaleH: scaleH, scaleS: scaleS, scaleV: scaleV }; function array_equals(v1, v2) { if (v1.length !== v2.length) return false; for (var i = 0, len = v1.length; i < len; ++i) { if (v1[i] !== v2[i]) return false; } return true; } function euclidean(v1, v2) { var total = 0; for (var i = 0, len = v1.length; i < len; i++) { total += Math.pow(v2[i] - v1[i], 2); } return Math.sqrt(total); } function manhattan(v1, v2) { var total = 0; for (var i = 0, len = v1.length; i < len; i++) { total += Math.abs(v2[i] - v1[i]); } return total; } function max(v1, v2) { var max = 0; for (var i = 0, len = v1.length; i < len; i++) { max = Math.max(max, Math.abs(v2[i] - v1[i])); } return max; } var distances = { euclidean: euclidean, manhattan: manhattan, max: max }; var create_random_number = { linear: function linear(num, count) { var centeroids = []; var start = Math.round(Math.random() * num); var dist = Math.floor(num / count); do { centeroids.push(start); start = (start + dist) % num; } while (centeroids.length < count); return centeroids; }, shuffle: function shuffle(num, count) { var centeroids = []; while (centeroids.length < count) { var index = Math.round(Math.random() * num); if (centeroids.indexOf(index) == -1) { centeroids.push(index); } } return centeroids; } }; function randomCentroids(points, k) { var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear'; var centeroids = create_random_number[method](points.length, k); return centeroids.map(function (i) { return points[i]; }); // var centeroids = points.slice(0); // centeroids.sort(function () { // return (Math.round(Math.random()) - 0.5); // }) // return centeroids.slice(0, k); } function closestCenteroid(point, centeroids, distance) { var min = Infinity, kIndex = 0; centeroids.forEach(function (center, i) { var dist = distance(point, center); if (dist < min) { min = dist; kIndex = i; } }); return kIndex; } function getCenteroid(assigned) { if (!assigned.length) return []; // initialize centeroid list var centeroid = new Array(assigned[0].length); for (var i = 0, len = centeroid.length; i < len; i++) { centeroid[i] = 0; } for (var index = 0, len = assigned.length; index < len; index++) { var it = assigned[index]; var last = index + 1; for (var j = 0, jLen = it.length; j < jLen; j++) { centeroid[j] += (it[j] - centeroid[j]) / last; } } centeroid = centeroid.map(function (it) { return Math.floor(it); }); return centeroid; } function unique_array(arrays) { return arrays; var set = {}; var count = arrays.length; var it = null; while (count--) { it = arrays[count]; set[JSON.stringify(it)] = it; } return Object.values(set); } function splitK(k, points, centeroids, distance) { var assignment = new Array(k); for (var i = 0; i < k; i++) { assignment[i] = []; } for (var idx = 0, pointLength = points.length; idx < pointLength; idx++) { var point = points[idx]; var index = closestCenteroid(point, centeroids, distance); assignment[index].push(point); } return assignment; } function setNewCenteroid(k, points, assignment, centeroids, movement, randomFunction) { for (var i = 0; i < k; i++) { var assigned = assignment[i]; var centeroid = centeroids[i]; var newCenteroid = new Array(centeroid.length); if (assigned.length > 0) { newCenteroid = getCenteroid(assigned); } else { var idx = Math.floor(randomFunction() * points.length); newCenteroid = points[idx]; } if (array_equals(newCenteroid, centeroid)) { movement = false; } else { movement = true; } centeroids[i] = newCenteroid; } return movement; } function kmeans(points, k, distanceFunction) { var period = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 10; var initialRandom = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'linear'; points = unique_array(points); k = k || Math.max(2, Math.ceil(Math.sqrt(points.length / 2))); var distance = distanceFunction || 'euclidean'; if (typeof distance == 'string') { distance = distances[distance]; } var rng_seed = 0; var random = function random() { rng_seed = (rng_seed * 9301 + 49297) % 233280; return rng_seed / 233280; }; var centeroids = randomCentroids(points, k, initialRandom); var movement = true; var iterations = 0; while (movement) { var assignment = splitK(k, points, centeroids, distance); movement = setNewCenteroid(k, points, assignment, centeroids, false, random); iterations++; if (iterations % period == 0) { break; } } return centeroids; } function each(len, callback) { for (var i = 0; i < len; i += 4) { callback(i); } } function pack(bitmap, callback) { each(bitmap.pixels.length, function (i) { callback(bitmap.pixels, i); }); } var Canvas = { create: function create(width, height) { var canvas = document.createElement('canvas'); canvas.width = width || 0; canvas.height = height || 0; return canvas; }, drawPixels: function drawPixels(bitmap) { var canvas = this.create(bitmap.width, bitmap.height); var context = canvas.getContext('2d'); var imagedata = context.getImageData(0, 0, canvas.width, canvas.height); imagedata.data.set(bitmap.pixels); context.putImageData(imagedata, 0, 0); return canvas; }, createHistogram: function createHistogram(width, height, histogram, callback) { var opt = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : { black: true, red: false, green: false, blue: false }; var canvas = this.create(width, height); var context = canvas.getContext('2d'); context.clearRect(0, 0, width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.globalAlpha = 0.7; var omit = { black: false }; if (opt.black) { omit.black = false; } else { omit.black = true; } if (opt.red) { omit.red = false; } else { omit.red = true; } if (opt.green) { omit.green = false; } else { omit.green = true; } if (opt.blue) { omit.blue = false; } else { omit.blue = true; } Object.keys(histogram).forEach(function (color) { if (!omit[color]) { var array = histogram[color]; var ymax = Math.max.apply(Math, array); var unitWith = width / array.length; context.fillStyle = color; array.forEach(function (it, index) { var currentHeight = height * (it / ymax); var x = index * unitWith; context.fillRect(x, height - currentHeight, unitWith, currentHeight); }); } }); if (typeof callback == 'function') callback(canvas); }, getHistogram: function getHistogram(bitmap) { var black = new Array(256); var red = new Array(256); var green = new Array(256); var blue = new Array(256); for (var i = 0; i < 256; i++) { black[i] = 0; red[i] = 0; green[i] = 0; blue[i] = 0; } pack(bitmap, function (pixels, i) { // gray scale var grayIndex = Math.round(Color$1.brightness(pixels[i], pixels[i + 1], pixels[i + 2])); black[grayIndex]++; red[pixels[i]]++; green[pixels[i + 1]]++; blue[pixels[i + 2]]++; }); return { black: black, red: red, green: green, blue: blue }; }, getBitmap: function getBitmap(bitmap, area) { var canvas = this.drawPixels(bitmap); var context = canvas.getContext('2d'); var pixels = context.getImageData(area.x || 0, area.y || 0, area.width || canvas.width, area.height || canvas.height).data; return { pixels: pixels, width: area.width, height: area.height }; }, putBitmap: function putBitmap(bitmap, subBitmap, area) { var canvas = this.drawPixels(bitmap); var subCanvas = this.drawPixels(subBitmap); var context = canvas.getContext('2d'); context.drawImage(subCanvas, area.x, area.y); bitmap.pixels = context.getImageData(0, 0, bitmap.width, bitmap.height).data; return bitmap; } }; var ImageLoader = function () { function ImageLoader(url) { var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; classCallCheck(this, ImageLoader); this.isLoaded = false; this.imageUrl = url; this.opt = opt; this.initialize(); } createClass(ImageLoader, [{ key: 'initialize', value: function initialize() { this.canvas = this.createCanvas(); this.context = this.canvas.getContext('2d'); } }, { key: 'createCanvas', value: function createCanvas() { return document.createElement('canvas'); } }, { key: 'load', value: function load(callback) { this.loadImage(callback); } }, { key: 'loadImage', value: function loadImage(callback) { var _this = this; var ctx = this.context; this.newImage = new Image(); var img = this.newImage; img.onload = function () { var ratio = img.height / img.width; if (_this.opt.canvasWidth && _this.opt.canvasHeight) { _this.canvas.width = _this.opt.canvasWidth; _this.canvas.height = _this.opt.canvasHeight; } else { _this.canvas.width = _this.opt.maxWidth ? _this.opt.maxWidth : img.width; _this.canvas.height = _this.canvas.width * ratio; } ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, _this.canvas.width, _this.canvas.height); _this.isLoaded = true; callback && callback(); }; this.getImageUrl(function (url) { img.src = url; }); } }, { key: 'load', value: function load(callback) { var _this2 = this; this.newImage = new Image(); var img = this.newImage; img.onload = function () { _this2.isLoaded = true; callback && callback(); }; this.getImageUrl(function (url) { img.src = url; }); } }, { key: 'getImageUrl', value: function getImageUrl(callback) { if (typeof this.imageUrl == 'string') { return callback(this.imageUrl); } else if (this.imageUrl instanceof Blob) { var reader = new FileReader(); reader.onload = function (ev) { callback(ev.target.result); }; reader.readAsDataURL(this.imageUrl); } } }, { key: 'getRGBA', value: function getRGBA(r, g, b, a) { return [r, g, b, a]; } }, { key: 'toArray', value: function toArray$$1(filter, callback) { var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; var imagedata = this.context.getIma