/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./js/stylesettingscolorpicker.js":
/*!****************************************!*\
  !*** ./js/stylesettingscolorpicker.js ***!
  \****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _easylogic_colorpicker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @easylogic/colorpicker */ \"./node_modules/@easylogic/colorpicker/dist/colorpicker.js\");\n/* harmony import */ var _easylogic_colorpicker__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_easylogic_colorpicker__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _easylogic_colorpicker_dist_colorpicker_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @easylogic/colorpicker/dist/colorpicker.css */ \"./node_modules/@easylogic/colorpicker/dist/colorpicker.css\");\n/* harmony import */ var _scss_stylesettingscolorpicker_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./scss/stylesettingscolorpicker.scss */ \"./js/scss/stylesettingscolorpicker.scss\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! jquery */ \"jquery\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_3__);\n\n\n\n\njquery__WEBPACK_IMPORTED_MODULE_3___default()(function () {\n  var _this = this;\n  document.querySelectorAll(\".colorpicker-wrapper\").forEach(function (element) {\n    var input = element.querySelector(\"input\");\n    var initialState = input.value;\n    element.style.setProperty('--picker-color', initialState || \"#C3C3C3\");\n    var pickerWrapper = jquery__WEBPACK_IMPORTED_MODULE_3___default()(element).find(\".color-picker\");\n    jquery__WEBPACK_IMPORTED_MODULE_3___default()(element).find(\"span\").click(function () {\n      jquery__WEBPACK_IMPORTED_MODULE_3___default()(pickerWrapper).toggleClass(\"active\");\n    });\n    jquery__WEBPACK_IMPORTED_MODULE_3___default()(input).on(\"input\", function () {\n      element.style.setProperty('--picker-color', jquery__WEBPACK_IMPORTED_MODULE_3___default()(input).val());\n    });\n    _this.colorpicker = new _easylogic_colorpicker__WEBPACK_IMPORTED_MODULE_0__.MiniColorPicker({\n      color: initialState,\n      position: \"inline\",\n      container: element.querySelector(\".picker-placeholder\"),\n      onChange: function onChange(color) {\n        jquery__WEBPACK_IMPORTED_MODULE_3___default()(input).val(color);\n        element.style.setProperty('--picker-color', color);\n      }\n    });\n  });\n});\n\n//# sourceURL=webpack://ocyan.plugin.coyote/./js/stylesettingscolorpicker.js?");

/***/ }),

/***/ "./node_modules/@easylogic/colorpicker/dist/colorpicker.js":
/*!*****************************************************************!*\
  !*** ./node_modules/@easylogic/colorpicker/dist/colorpicker.js ***!
  \*****************************************************************/
/***/ (function(module, exports, __webpack_require__) {

eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;function _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\n(function (global, factory) {\n  ( false ? 0 : _typeof(exports)) === 'object' && \"object\" !== 'undefined' ? module.exports = factory() :  true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?\n\t\t(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :\n\t\t__WEBPACK_AMD_DEFINE_FACTORY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;\n})(this, function () {\n  'use strict';\n\n  /**\n   * @method format\n   *\n   * convert color to format string\n   *\n   *     // hex\n   *     color.format({ r : 255, g : 255, b : 255, a: 1 }, 'hex')  // #FFFFFFFF\n   *\n   *     // rgb\n   *     color.format({ r : 255, g : 255, b : 255 }, 'rgb') // rgba(255, 255, 255, 0.5);\n   *\n   *     // rgba\n   *     color.format({ r : 255, g : 255, b : 255, a : 0.5 }, 'rgb') // rgba(255, 255, 255, 0.5);\n   *\n   * @param {Object} obj  obj has r, g, b and a attributes\n   * @param {\"hex\"/\"rgb\"} type  format string type\n   * @returns {*}\n   */\n  function format(obj, type) {\n    var defaultColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(0, 0, 0, 0)';\n    if (Array.isArray(obj)) {\n      obj = {\n        r: obj[0],\n        g: obj[1],\n        b: obj[2],\n        a: obj[3]\n      };\n    }\n    if (type == 'hex') {\n      return hex(obj);\n    } else if (type == 'rgb') {\n      return rgb(obj, defaultColor);\n    } else if (type == 'hsl') {\n      return hsl(obj);\n    }\n    return obj;\n  }\n  function hex(obj) {\n    if (Array.isArray(obj)) {\n      obj = {\n        r: obj[0],\n        g: obj[1],\n        b: obj[2],\n        a: obj[3]\n      };\n    }\n    var r = obj.r.toString(16);\n    if (obj.r < 16) r = \"0\" + r;\n    var g = obj.g.toString(16);\n    if (obj.g < 16) g = \"0\" + g;\n    var b = obj.b.toString(16);\n    if (obj.b < 16) b = \"0\" + b;\n    var alphaValue = '';\n    if (obj.a < 1) {\n      var alpha = Math.floor(obj.a * 255);\n      var alphaValue = alpha.toString(16);\n      if (alpha < 16) alphaValue = \"0\" + alphaValue;\n    }\n    return '#' + r + g + b + alphaValue;\n  }\n  function rgb(obj) {\n    var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'rgba(0, 0, 0, 0)';\n    if (Array.isArray(obj)) {\n      obj = {\n        r: obj[0],\n        g: obj[1],\n        b: obj[2],\n        a: obj[3]\n      };\n    }\n    if (typeof obj == 'undefined') {\n      return undefined;\n    }\n    if (obj.a == 1 || typeof obj.a == 'undefined') {\n      if (isNaN(obj.r)) {\n        return defaultColor;\n      }\n      return 'rgb(' + obj.r + ',' + obj.g + ',' + obj.b + ')';\n    } else {\n      return 'rgba(' + obj.r + ',' + obj.g + ',' + obj.b + ',' + obj.a + ')';\n    }\n  }\n  function hsl(obj) {\n    if (Array.isArray(obj)) {\n      obj = {\n        r: obj[0],\n        g: obj[1],\n        b: obj[2],\n        a: obj[3]\n      };\n    }\n    if (obj.a == 1 || typeof obj.a == 'undefined') {\n      return 'hsl(' + obj.h + ',' + obj.s + '%,' + obj.l + '%)';\n    } else {\n      return 'hsla(' + obj.h + ',' + obj.s + '%,' + obj.l + '%,' + obj.a + ')';\n    }\n  }\n  var formatter = {\n    format: format,\n    rgb: rgb,\n    hsl: hsl,\n    hex: hex\n  };\n  function round(n, k) {\n    k = typeof k == 'undefined' ? 1 : k;\n    return Math.round(n * k) / k;\n  }\n  function degreeToRadian(angle) {\n    return angle * Math.PI / 180;\n  }\n\n  /**\n   * \n   * convert radian to degree \n   * \n   * @param {*} radian \n   * @returns {Number} 0..360\n   */\n  function radianToDegree(radian) {\n    var angle = radian * 180 / Math.PI;\n    if (angle < 0) {\n      // 각도가 0보다 작으면 360 에서 반전시킨다. \n      angle = 360 + angle;\n    }\n    return angle;\n  }\n  function getXInCircle(angle, radius) {\n    var centerX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;\n    return centerX + radius * Math.cos(degreeToRadian(angle));\n  }\n  function getYInCircle(angle, radius) {\n    var centerY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;\n    return centerY + radius * Math.sin(degreeToRadian(angle));\n  }\n  function getXYInCircle(angle, radius) {\n    var centerX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;\n    var centerY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;\n    return {\n      x: getXInCircle(angle, radius, centerX),\n      y: getYInCircle(angle, radius, centerY)\n    };\n  }\n  function caculateAngle(rx, ry) {\n    return radianToDegree(Math.atan2(ry, rx));\n  }\n  var math = {\n    round: round,\n    radianToDegree: radianToDegree,\n    degreeToRadian: degreeToRadian,\n    getXInCircle: getXInCircle,\n    getYInCircle: getYInCircle,\n    caculateAngle: caculateAngle\n  };\n  var color_names = {\n    aliceblue: \"rgb(240, 248, 255)\",\n    antiquewhite: \"rgb(250, 235, 215)\",\n    aqua: \"rgb(0, 255, 255)\",\n    aquamarine: \"rgb(127, 255, 212)\",\n    azure: \"rgb(240, 255, 255)\",\n    beige: \"rgb(245, 245, 220)\",\n    bisque: \"rgb(255, 228, 196)\",\n    black: \"rgb(0, 0, 0)\",\n    blanchedalmond: \"rgb(255, 235, 205)\",\n    blue: \"rgb(0, 0, 255)\",\n    blueviolet: \"rgb(138, 43, 226)\",\n    brown: \"rgb(165, 42, 42)\",\n    burlywood: \"rgb(222, 184, 135)\",\n    cadetblue: \"rgb(95, 158, 160)\",\n    chartreuse: \"rgb(127, 255, 0)\",\n    chocolate: \"rgb(210, 105, 30)\",\n    coral: \"rgb(255, 127, 80)\",\n    cornflowerblue: \"rgb(100, 149, 237)\",\n    cornsilk: \"rgb(255, 248, 220)\",\n    crimson: \"rgb(237, 20, 61)\",\n    cyan: \"rgb(0, 255, 255)\",\n    darkblue: \"rgb(0, 0, 139)\",\n    darkcyan: \"rgb(0, 139, 139)\",\n    darkgoldenrod: \"rgb(184, 134, 11)\",\n    darkgray: \"rgb(169, 169, 169)\",\n    darkgrey: \"rgb(169, 169, 169)\",\n    darkgreen: \"rgb(0, 100, 0)\",\n    darkkhaki: \"rgb(189, 183, 107)\",\n    darkmagenta: \"rgb(139, 0, 139)\",\n    darkolivegreen: \"rgb(85, 107, 47)\",\n    darkorange: \"rgb(255, 140, 0)\",\n    darkorchid: \"rgb(153, 50, 204)\",\n    darkred: \"rgb(139, 0, 0)\",\n    darksalmon: \"rgb(233, 150, 122)\",\n    darkseagreen: \"rgb(143, 188, 143)\",\n    darkslateblue: \"rgb(72, 61, 139)\",\n    darkslategray: \"rgb(47, 79, 79)\",\n    darkslategrey: \"rgb(47, 79, 79)\",\n    darkturquoise: \"rgb(0, 206, 209)\",\n    darkviolet: \"rgb(148, 0, 211)\",\n    deeppink: \"rgb(255, 20, 147)\",\n    deepskyblue: \"rgb(0, 191, 255)\",\n    dimgray: \"rgb(105, 105, 105)\",\n    dimgrey: \"rgb(105, 105, 105)\",\n    dodgerblue: \"rgb(30, 144, 255)\",\n    firebrick: \"rgb(178, 34, 34)\",\n    floralwhite: \"rgb(255, 250, 240)\",\n    forestgreen: \"rgb(34, 139, 34)\",\n    fuchsia: \"rgb(255, 0, 255)\",\n    gainsboro: \"rgb(220, 220, 220)\",\n    ghostwhite: \"rgb(248, 248, 255)\",\n    gold: \"rgb(255, 215, 0)\",\n    goldenrod: \"rgb(218, 165, 32)\",\n    gray: \"rgb(128, 128, 128)\",\n    grey: \"rgb(128, 128, 128)\",\n    green: \"rgb(0, 128, 0)\",\n    greenyellow: \"rgb(173, 255, 47)\",\n    honeydew: \"rgb(240, 255, 240)\",\n    hotpink: \"rgb(255, 105, 180)\",\n    indianred: \"rgb(205, 92, 92)\",\n    indigo: \"rgb(75, 0, 130)\",\n    ivory: \"rgb(255, 255, 240)\",\n    khaki: \"rgb(240, 230, 140)\",\n    lavender: \"rgb(230, 230, 250)\",\n    lavenderblush: \"rgb(255, 240, 245)\",\n    lawngreen: \"rgb(124, 252, 0)\",\n    lemonchiffon: \"rgb(255, 250, 205)\",\n    lightblue: \"rgb(173, 216, 230)\",\n    lightcoral: \"rgb(240, 128, 128)\",\n    lightcyan: \"rgb(224, 255, 255)\",\n    lightgoldenrodyellow: \"rgb(250, 250, 210)\",\n    lightgreen: \"rgb(144, 238, 144)\",\n    lightgray: \"rgb(211, 211, 211)\",\n    lightgrey: \"rgb(211, 211, 211)\",\n    lightpink: \"rgb(255, 182, 193)\",\n    lightsalmon: \"rgb(255, 160, 122)\",\n    lightseagreen: \"rgb(32, 178, 170)\",\n    lightskyblue: \"rgb(135, 206, 250)\",\n    lightslategray: \"rgb(119, 136, 153)\",\n    lightslategrey: \"rgb(119, 136, 153)\",\n    lightsteelblue: \"rgb(176, 196, 222)\",\n    lightyellow: \"rgb(255, 255, 224)\",\n    lime: \"rgb(0, 255, 0)\",\n    limegreen: \"rgb(50, 205, 50)\",\n    linen: \"rgb(250, 240, 230)\",\n    magenta: \"rgb(255, 0, 255)\",\n    maroon: \"rgb(128, 0, 0)\",\n    mediumaquamarine: \"rgb(102, 205, 170)\",\n    mediumblue: \"rgb(0, 0, 205)\",\n    mediumorchid: \"rgb(186, 85, 211)\",\n    mediumpurple: \"rgb(147, 112, 219)\",\n    mediumseagreen: \"rgb(60, 179, 113)\",\n    mediumslateblue: \"rgb(123, 104, 238)\",\n    mediumspringgreen: \"rgb(0, 250, 154)\",\n    mediumturquoise: \"rgb(72, 209, 204)\",\n    mediumvioletred: \"rgb(199, 21, 133)\",\n    midnightblue: \"rgb(25, 25, 112)\",\n    mintcream: \"rgb(245, 255, 250)\",\n    mistyrose: \"rgb(255, 228, 225)\",\n    moccasin: \"rgb(255, 228, 181)\",\n    navajowhite: \"rgb(255, 222, 173)\",\n    navy: \"rgb(0, 0, 128)\",\n    oldlace: \"rgb(253, 245, 230)\",\n    olive: \"rgb(128, 128, 0)\",\n    olivedrab: \"rgb(107, 142, 35)\",\n    orange: \"rgb(255, 165, 0)\",\n    orangered: \"rgb(255, 69, 0)\",\n    orchid: \"rgb(218, 112, 214)\",\n    palegoldenrod: \"rgb(238, 232, 170)\",\n    palegreen: \"rgb(152, 251, 152)\",\n    paleturquoise: \"rgb(175, 238, 238)\",\n    palevioletred: \"rgb(219, 112, 147)\",\n    papayawhip: \"rgb(255, 239, 213)\",\n    peachpuff: \"rgb(255, 218, 185)\",\n    peru: \"rgb(205, 133, 63)\",\n    pink: \"rgb(255, 192, 203)\",\n    plum: \"rgb(221, 160, 221)\",\n    powderblue: \"rgb(176, 224, 230)\",\n    purple: \"rgb(128, 0, 128)\",\n    rebeccapurple: \"rgb(102, 51, 153)\",\n    red: \"rgb(255, 0, 0)\",\n    rosybrown: \"rgb(188, 143, 143)\",\n    royalblue: \"rgb(65, 105, 225)\",\n    saddlebrown: \"rgb(139, 69, 19)\",\n    salmon: \"rgb(250, 128, 114)\",\n    sandybrown: \"rgb(244, 164, 96)\",\n    seagreen: \"rgb(46, 139, 87)\",\n    seashell: \"rgb(255, 245, 238)\",\n    sienna: \"rgb(160, 82, 45)\",\n    silver: \"rgb(192, 192, 192)\",\n    skyblue: \"rgb(135, 206, 235)\",\n    slateblue: \"rgb(106, 90, 205)\",\n    slategray: \"rgb(112, 128, 144)\",\n    slategrey: \"rgb(112, 128, 144)\",\n    snow: \"rgb(255, 250, 250)\",\n    springgreen: \"rgb(0, 255, 127)\",\n    steelblue: \"rgb(70, 130, 180)\",\n    tan: \"rgb(210, 180, 140)\",\n    teal: \"rgb(0, 128, 128)\",\n    thistle: \"rgb(216, 191, 216)\",\n    tomato: \"rgb(255, 99, 71)\",\n    turquoise: \"rgb(64, 224, 208)\",\n    violet: \"rgb(238, 130, 238)\",\n    wheat: \"rgb(245, 222, 179)\",\n    white: \"rgb(255, 255, 255)\",\n    whitesmoke: \"rgb(245, 245, 245)\",\n    yellow: \"rgb(255, 255, 0)\",\n    yellowgreen: \"rgb(154, 205, 50)\",\n    transparent: \"rgba(0, 0, 0, 0)\"\n  };\n  function isColorName(name) {\n    return !!color_names[name];\n  }\n  function getColorByName(name) {\n    return color_names[name];\n  }\n  var ColorNames = {\n    isColorName: isColorName,\n    getColorByName: getColorByName\n  };\n  function HUEtoRGB(p, q, t) {\n    if (t < 0) t += 1;\n    if (t > 1) t -= 1;\n    if (t < 1 / 6) return p + (q - p) * 6 * t;\n    if (t < 1 / 2) return q;\n    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n    return p;\n  }\n  function HSLtoHSV(h, s, l) {\n    if (arguments.length == 1) {\n      var _arguments$ = arguments[0],\n        h = _arguments$.h,\n        s = _arguments$.s,\n        l = _arguments$.l;\n    }\n    var rgb = HSLtoRGB(h, s, l);\n    return RGBtoHSV(rgb.r, rgb.g, rgb.b);\n  }\n  function HSLtoRGB(h, s, l) {\n    if (arguments.length == 1) {\n      var _arguments$2 = arguments[0],\n        h = _arguments$2.h,\n        s = _arguments$2.s,\n        l = _arguments$2.l;\n    }\n    var r, g, b;\n    h /= 360;\n    s /= 100;\n    l /= 100;\n    if (s == 0) {\n      r = g = b = l; // achromatic\n    } else {\n      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n      var p = 2 * l - q;\n      r = HUEtoRGB(p, q, h + 1 / 3);\n      g = HUEtoRGB(p, q, h);\n      b = HUEtoRGB(p, q, h - 1 / 3);\n    }\n    return {\n      r: round(r * 255),\n      g: round(g * 255),\n      b: round(b * 255)\n    };\n  }\n  var fromHSL = {\n    HUEtoRGB: HUEtoRGB,\n    HSLtoHSV: HSLtoHSV,\n    HSLtoRGB: HSLtoRGB\n  };\n  var classCallCheck = function classCallCheck(instance, Constructor) {\n    if (!(instance instanceof Constructor)) {\n      throw new TypeError(\"Cannot call a class as a function\");\n    }\n  };\n  var createClass = function () {\n    function defineProperties(target, props) {\n      for (var i = 0; i < props.length; i++) {\n        var descriptor = props[i];\n        descriptor.enumerable = descriptor.enumerable || false;\n        descriptor.configurable = true;\n        if (\"value\" in descriptor) descriptor.writable = true;\n        Object.defineProperty(target, descriptor.key, descriptor);\n      }\n    }\n    return function (Constructor, protoProps, staticProps) {\n      if (protoProps) defineProperties(Constructor.prototype, protoProps);\n      if (staticProps) defineProperties(Constructor, staticProps);\n      return Constructor;\n    };\n  }();\n  var defineProperty = function defineProperty(obj, key, value) {\n    if (key in obj) {\n      Object.defineProperty(obj, key, {\n        value: value,\n        enumerable: true,\n        configurable: true,\n        writable: true\n      });\n    } else {\n      obj[key] = value;\n    }\n    return obj;\n  };\n  var _extends = Object.assign || function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n    return target;\n  };\n  var get = function get(object, property, receiver) {\n    if (object === null) object = Function.prototype;\n    var desc = Object.getOwnPropertyDescriptor(object, property);\n    if (desc === undefined) {\n      var parent = Object.getPrototypeOf(object);\n      if (parent === null) {\n        return undefined;\n      } else {\n        return get(parent, property, receiver);\n      }\n    } else if (\"value\" in desc) {\n      return desc.value;\n    } else {\n      var getter = desc.get;\n      if (getter === undefined) {\n        return undefined;\n      }\n      return getter.call(receiver);\n    }\n  };\n  var inherits = function inherits(subClass, superClass) {\n    if (typeof superClass !== \"function\" && superClass !== null) {\n      throw new TypeError(\"Super expression must either be null or a function, not \" + _typeof(superClass));\n    }\n    subClass.prototype = Object.create(superClass && superClass.prototype, {\n      constructor: {\n        value: subClass,\n        enumerable: false,\n        writable: true,\n        configurable: true\n      }\n    });\n    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n  };\n  var possibleConstructorReturn = function possibleConstructorReturn(self, call) {\n    if (!self) {\n      throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n    }\n    return call && (_typeof(call) === \"object\" || typeof call === \"function\") ? call : self;\n  };\n  var slicedToArray = function () {\n    function sliceIterator(arr, i) {\n      var _arr = [];\n      var _n = true;\n      var _d = false;\n      var _e = undefined;\n      try {\n        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n          _arr.push(_s.value);\n          if (i && _arr.length === i) break;\n        }\n      } catch (err) {\n        _d = true;\n        _e = err;\n      } finally {\n        try {\n          if (!_n && _i[\"return\"]) _i[\"return\"]();\n        } finally {\n          if (_d) throw _e;\n        }\n      }\n      return _arr;\n    }\n    return function (arr, i) {\n      if (Array.isArray(arr)) {\n        return arr;\n      } else if (Symbol.iterator in Object(arr)) {\n        return sliceIterator(arr, i);\n      } else {\n        throw new TypeError(\"Invalid attempt to destructure non-iterable instance\");\n      }\n    };\n  }();\n  var toArray = function toArray(arr) {\n    return Array.isArray(arr) ? arr : Array.from(arr);\n  };\n  var toConsumableArray = function toConsumableArray(arr) {\n    if (Array.isArray(arr)) {\n      for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];\n      return arr2;\n    } else {\n      return Array.from(arr);\n    }\n  };\n  var color_regexp = /(#(?:[\\da-f]{3}){1,2}|#(?:[\\da-f]{8})|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;\n  var color_split = ',';\n  function matches(str) {\n    var matches = str.match(color_regexp);\n    var result = [];\n    if (!matches) {\n      return result;\n    }\n    for (var i = 0, len = matches.length; i < len; i++) {\n      if (matches[i].indexOf('#') > -1 || matches[i].indexOf('rgb') > -1 || matches[i].indexOf('hsl') > -1) {\n        result.push({\n          color: matches[i]\n        });\n      } else {\n        var nameColor = ColorNames.getColorByName(matches[i]);\n        if (nameColor) {\n          result.push({\n            color: matches[i],\n            nameColor: nameColor\n          });\n        }\n      }\n    }\n    var pos = {\n      next: 0\n    };\n    result.forEach(function (item) {\n      var startIndex = str.indexOf(item.color, pos.next);\n      item.startIndex = startIndex;\n      item.endIndex = startIndex + item.color.length;\n      pos.next = item.endIndex;\n    });\n    return result;\n  }\n  function convertMatches(str) {\n    var m = matches(str);\n    m.forEach(function (it, index) {\n      str = str.replace(it.color, '@' + index);\n    });\n    return {\n      str: str,\n      matches: m\n    };\n  }\n  function convertMatchesArray(str) {\n    var splitStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ',';\n    var ret = convertMatches(str);\n    return ret.str.split(splitStr).map(function (it, index) {\n      it = trim(it);\n      if (ret.matches[index]) {\n        it = it.replace('@' + index, ret.matches[index].color);\n      }\n      return it;\n    });\n  }\n  function reverseMatches(str, matches) {\n    matches.forEach(function (it, index) {\n      str = str.replace('@' + index, it.color);\n    });\n    return str;\n  }\n  function trim(str) {\n    return str.replace(/^\\s+|\\s+$/g, '');\n  }\n\n  /**\n   * @method rgb\n   *\n   * parse string to rgb color\n   *\n   * \t\tcolor.parse(\"#FF0000\") === { r : 255, g : 0, b : 0 }\n   *\n   * \t\tcolor.parse(\"rgb(255, 0, 0)\") == { r : 255, g : 0, b :0 }\n   * \t\tcolor.parse(0xff0000) == { r : 255, g : 0, b : 0 }\n   * \t\tcolor.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 }\n   *\n   * @param {String} str color string\n   * @returns {Object}  rgb object\n   */\n  function parse(str) {\n    if (typeof str == 'string') {\n      if (ColorNames.isColorName(str)) {\n        str = ColorNames.getColorByName(str);\n      }\n      if (str.indexOf(\"rgb(\") > -1) {\n        var arr = str.replace(\"rgb(\", \"\").replace(\")\", \"\").split(\",\");\n        for (var i = 0, len = arr.length; i < len; i++) {\n          arr[i] = parseInt(trim(arr[i]), 10);\n        }\n        var obj = {\n          type: 'rgb',\n          r: arr[0],\n          g: arr[1],\n          b: arr[2],\n          a: 1\n        };\n        obj = Object.assign(obj, RGBtoHSL(obj));\n        return obj;\n      } else if (str.indexOf(\"rgba(\") > -1) {\n        var arr = str.replace(\"rgba(\", \"\").replace(\")\", \"\").split(\",\");\n        for (var i = 0, len = arr.length; i < len; i++) {\n          if (len - 1 == i) {\n            arr[i] = parseFloat(trim(arr[i]));\n          } else {\n            arr[i] = parseInt(trim(arr[i]), 10);\n          }\n        }\n        var obj = {\n          type: 'rgb',\n          r: arr[0],\n          g: arr[1],\n          b: arr[2],\n          a: arr[3]\n        };\n        obj = Object.assign(obj, RGBtoHSL(obj));\n        return obj;\n      } else if (str.indexOf(\"hsl(\") > -1) {\n        var arr = str.replace(\"hsl(\", \"\").replace(\")\", \"\").split(\",\");\n        for (var i = 0, len = arr.length; i < len; i++) {\n          arr[i] = parseFloat(trim(arr[i]));\n        }\n        var obj = {\n          type: 'hsl',\n          h: arr[0],\n          s: arr[1],\n          l: arr[2],\n          a: 1\n        };\n        obj = Object.assign(obj, HSLtoRGB(obj));\n        return obj;\n      } else if (str.indexOf(\"hsla(\") > -1) {\n        var arr = str.replace(\"hsla(\", \"\").replace(\")\", \"\").split(\",\");\n        for (var i = 0, len = arr.length; i < len; i++) {\n          if (len - 1 == i) {\n            arr[i] = parseFloat(trim(arr[i]));\n          } else {\n            arr[i] = parseInt(trim(arr[i]), 10);\n          }\n        }\n        var obj = {\n          type: 'hsl',\n          h: arr[0],\n          s: arr[1],\n          l: arr[2],\n          a: arr[3]\n        };\n        obj = Object.assign(obj, HSLtoRGB(obj));\n        return obj;\n      } else if (str.indexOf(\"#\") == 0) {\n        str = str.replace(\"#\", \"\");\n        var arr = [];\n        var a = 1;\n        if (str.length == 3) {\n          for (var i = 0, len = str.length; i < len; i++) {\n            var _char = str.substr(i, 1);\n            arr.push(parseInt(_char + _char, 16));\n          }\n        } else if (str.length === 8) {\n          for (var i = 0, len = str.length; i < len; i += 2) {\n            arr.push(parseInt(str.substr(i, 2), 16));\n          }\n          a = arr.pop() / 255;\n        } else {\n          for (var i = 0, len = str.length; i < len; i += 2) {\n            arr.push(parseInt(str.substr(i, 2), 16));\n          }\n        }\n        var obj = {\n          type: 'hex',\n          r: arr[0],\n          g: arr[1],\n          b: arr[2],\n          a: a\n        };\n        obj = Object.assign(obj, RGBtoHSL(obj));\n        return obj;\n      }\n    } else if (typeof str == 'number') {\n      if (0x000000 <= str && str <= 0xffffff) {\n        var r = (str & 0xff0000) >> 16;\n        var g = (str & 0x00ff00) >> 8;\n        var b = (str & 0x0000ff) >> 0;\n        var obj = {\n          type: 'hex',\n          r: r,\n          g: g,\n          b: b,\n          a: 1\n        };\n        obj = Object.assign(obj, RGBtoHSL(obj));\n        return obj;\n      } else if (0x00000000 <= str && str <= 0xffffffff) {\n        var _r = (str & 0xff000000) >> 24;\n        var _g = (str & 0x00ff0000) >> 16;\n        var _b = (str & 0x0000ff00) >> 8;\n        var _a = (str & 0x000000ff) / 255;\n        var obj = {\n          type: 'hex',\n          r: _r,\n          g: _g,\n          b: _b,\n          a: _a\n        };\n        obj = Object.assign(obj, RGBtoHSL(obj));\n        return obj;\n      }\n    }\n    return str;\n  }\n  function parseGradient(colors) {\n    if (typeof colors == 'string') {\n      colors = convertMatchesArray(colors);\n    }\n    colors = colors.map(function (it) {\n      if (typeof it == 'string') {\n        var ret = convertMatches(it);\n        var arr = trim(ret.str).split(' ');\n        if (arr[1]) {\n          if (arr[1].includes('%')) {\n            arr[1] = parseFloat(arr[1].replace(/%/, '')) / 100;\n          } else {\n            arr[1] = parseFloat(arr[1]);\n          }\n        } else {\n          arr[1] = '*';\n        }\n        arr[0] = reverseMatches(arr[0], ret.matches);\n        return arr;\n      } else if (Array.isArray(it)) {\n        if (!it[1]) {\n          it[1] = '*';\n        } else if (typeof it[1] == 'string') {\n          if (it[1].includes('%')) {\n            it[1] = parseFloat(it[1].replace(/%/, '')) / 100;\n          } else {\n            it[1] = +it[1];\n          }\n        }\n        return [].concat(toConsumableArray(it));\n      }\n    });\n    var count = colors.filter(function (it) {\n      return it[1] === '*';\n    }).length;\n    if (count > 0) {\n      var sum = colors.filter(function (it) {\n        return it[1] != '*' && it[1] != 1;\n      }).map(function (it) {\n        return it[1];\n      }).reduce(function (total, cur) {\n        return total + cur;\n      }, 0);\n      var dist = (1 - sum) / count;\n      colors.forEach(function (it, index) {\n        if (it[1] == '*' && index > 0) {\n          if (colors.length - 1 == index) {\n            // it[1] = 1 \n          } else {\n            it[1] = dist;\n          }\n        }\n      });\n    }\n    return colors;\n  }\n  var parser = {\n    matches: matches,\n    convertMatches: convertMatches,\n    convertMatchesArray: convertMatchesArray,\n    reverseMatches: reverseMatches,\n    parse: parse,\n    parseGradient: parseGradient,\n    trim: trim,\n    color_regexp: color_regexp,\n    color_split: color_split\n  };\n\n  /**\n   * @method RGBtoHSV\n   *\n   * convert rgb to hsv\n   *\n   * \t\tcolor.RGBtoHSV(0, 0, 255) === { h : 240, s : 1, v : 1 } === '#FFFF00'\n   *\n   * @param {Number} R  red color value\n   * @param {Number} G  green color value\n   * @param {Number} B  blue color value\n   * @return {Object}  hsv color code\n   */\n  function RGBtoHSV(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$ = arguments[0],\n        r = _arguments$.r,\n        g = _arguments$.g,\n        b = _arguments$.b;\n    }\n    var R1 = r / 255;\n    var G1 = g / 255;\n    var B1 = b / 255;\n    var MaxC = Math.max(R1, G1, B1);\n    var MinC = Math.min(R1, G1, B1);\n    var DeltaC = MaxC - MinC;\n    var H = 0;\n    if (DeltaC == 0) {\n      H = 0;\n    } else if (MaxC == R1) {\n      H = 60 * ((G1 - B1) / DeltaC % 6);\n    } else if (MaxC == G1) {\n      H = 60 * ((B1 - R1) / DeltaC + 2);\n    } else if (MaxC == B1) {\n      H = 60 * ((R1 - G1) / DeltaC + 4);\n    }\n    if (H < 0) {\n      H = 360 + H;\n    }\n    var S = 0;\n    if (MaxC == 0) S = 0;else S = DeltaC / MaxC;\n    var V = MaxC;\n    return {\n      h: H,\n      s: S,\n      v: V\n    };\n  }\n  function RGBtoCMYK(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$2 = arguments[0],\n        r = _arguments$2.r,\n        g = _arguments$2.g,\n        b = _arguments$2.b;\n    }\n    var R1 = r / 255;\n    var G1 = g / 255;\n    var B1 = b / 255;\n    var K = 1 - Math.max(R1, G1, B1);\n    var C = (1 - R1 - K) / (1 - K);\n    var M = (1 - G1 - K) / (1 - K);\n    var Y = (1 - B1 - K) / (1 - K);\n    return {\n      c: C,\n      m: M,\n      y: Y,\n      k: K\n    };\n  }\n  function RGBtoHSL(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$3 = arguments[0],\n        r = _arguments$3.r,\n        g = _arguments$3.g,\n        b = _arguments$3.b;\n    }\n    r /= 255, g /= 255, b /= 255;\n    var max = Math.max(r, g, b),\n      min = Math.min(r, g, b);\n    var h,\n      s,\n      l = (max + min) / 2;\n    if (max == min) {\n      h = s = 0; // achromatic\n    } else {\n      var d = max - min;\n      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n      switch (max) {\n        case r:\n          h = (g - b) / d + (g < b ? 6 : 0);\n          break;\n        case g:\n          h = (b - r) / d + 2;\n          break;\n        case b:\n          h = (r - g) / d + 4;\n          break;\n      }\n      h /= 6;\n    }\n    return {\n      h: round(h * 360),\n      s: round(s * 100),\n      l: round(l * 100)\n    };\n  }\n  function c(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$4 = arguments[0],\n        r = _arguments$4.r,\n        g = _arguments$4.g,\n        b = _arguments$4.b;\n    }\n    return gray((r + g + b) / 3 > 90 ? 0 : 255);\n  }\n  function gray(gray) {\n    return {\n      r: gray,\n      g: gray,\n      b: gray\n    };\n  }\n  function RGBtoSimpleGray(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$5 = arguments[0],\n        r = _arguments$5.r,\n        g = _arguments$5.g,\n        b = _arguments$5.b;\n    }\n    return gray(Math.ceil((r + g + b) / 3));\n  }\n  function RGBtoGray(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$6 = arguments[0],\n        r = _arguments$6.r,\n        g = _arguments$6.g,\n        b = _arguments$6.b;\n    }\n    return gray(RGBtoYCrCb(r, g, b).y);\n  }\n  function brightness(r, g, b) {\n    return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722);\n  }\n  function RGBtoYCrCb(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$7 = arguments[0],\n        r = _arguments$7.r,\n        g = _arguments$7.g,\n        b = _arguments$7.b;\n    }\n    var Y = brightness(r, g, b);\n    var Cb = 0.564 * (b - Y);\n    var Cr = 0.713 * (r - Y);\n    return {\n      y: Y,\n      cr: Cr,\n      cb: Cb\n    };\n  }\n  function PivotRGB(n) {\n    var point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.04045;\n    return (n > point ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92) * 100;\n  }\n  function RGBtoXYZ(r, g, b) {\n    //sR, sG and sB (Standard RGB) input range = 0 ÷ 255\n    //X, Y and Z output refer to a D65/2° standard illuminant.\n    if (arguments.length == 1) {\n      var _arguments$8 = arguments[0],\n        r = _arguments$8.r,\n        g = _arguments$8.g,\n        b = _arguments$8.b;\n    }\n    var R = r / 255;\n    var G = g / 255;\n    var B = b / 255;\n    R = PivotRGB(R);\n    G = PivotRGB(G);\n    B = PivotRGB(B);\n    var x = R * 0.4124 + G * 0.3576 + B * 0.1805;\n    var y = R * 0.2126 + G * 0.7152 + B * 0.0722;\n    var z = R * 0.0193 + G * 0.1192 + B * 0.9505;\n    return {\n      x: x,\n      y: y,\n      z: z\n    };\n  }\n  function RGBtoLAB(r, g, b) {\n    if (arguments.length == 1) {\n      var _arguments$9 = arguments[0],\n        r = _arguments$9.r,\n        g = _arguments$9.g,\n        b = _arguments$9.b;\n    }\n    return XYZtoLAB(RGBtoXYZ(r, g, b));\n  }\n  var fromRGB = {\n    RGBtoCMYK: RGBtoCMYK,\n    RGBtoGray: RGBtoGray,\n    RGBtoHSL: RGBtoHSL,\n    RGBtoHSV: RGBtoHSV,\n    RGBtoLAB: RGBtoLAB,\n    RGBtoSimpleGray: RGBtoSimpleGray,\n    RGBtoXYZ: RGBtoXYZ,\n    RGBtoYCrCb: RGBtoYCrCb,\n    c: c,\n    brightness: brightness,\n    gray: gray\n  };\n  function CMYKtoRGB(c, m, y, k) {\n    if (arguments.length == 1) {\n      var _arguments$ = arguments[0],\n        c = _arguments$.c,\n        m = _arguments$.m,\n        y = _arguments$.y,\n        k = _arguments$.k;\n    }\n    var R = 255 * (1 - c) * (1 - k);\n    var G = 255 * (1 - m) * (1 - k);\n    var B = 255 * (1 - y) * (1 - k);\n    return {\n      r: R,\n      g: G,\n      b: B\n    };\n  }\n  var fromCMYK = {\n    CMYKtoRGB: CMYKtoRGB\n  };\n  function ReverseXyz(n) {\n    return Math.pow(n, 3) > 0.008856 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787;\n  }\n  function ReverseRGB(n) {\n    return n > 0.0031308 ? 1.055 * Math.pow(n, 1 / 2.4) - 0.055 : 12.92 * n;\n  }\n  function XYZtoRGB(x, y, z) {\n    if (arguments.length == 1) {\n      var _arguments$ = arguments[0],\n        x = _arguments$.x,\n        y = _arguments$.y,\n        z = _arguments$.z;\n    }\n    //X, Y and Z input refer to a D65/2° standard illuminant.\n    //sR, sG and sB (standard RGB) output range = 0 ÷ 255\n\n    var X = x / 100.0;\n    var Y = y / 100.0;\n    var Z = z / 100.0;\n    var R = X * 3.2406 + Y * -1.5372 + Z * -0.4986;\n    var G = X * -0.9689 + Y * 1.8758 + Z * 0.0415;\n    var B = X * 0.0557 + Y * -0.2040 + Z * 1.0570;\n    R = ReverseRGB(R);\n    G = ReverseRGB(G);\n    B = ReverseRGB(B);\n    var r = round(R * 255);\n    var g = round(G * 255);\n    var b = round(B * 255);\n    return {\n      r: r,\n      g: g,\n      b: b\n    };\n  }\n  function LABtoXYZ(l, a, b) {\n    if (arguments.length == 1) {\n      var _arguments$2 = arguments[0],\n        l = _arguments$2.l,\n        a = _arguments$2.a,\n        b = _arguments$2.b;\n    }\n    //Reference-X, Y and Z refer to specific illuminants and observers.\n    //Common reference values are available below in this same page.\n\n    var Y = (l + 16) / 116;\n    var X = a / 500 + Y;\n    var Z = Y - b / 200;\n    Y = ReverseXyz(Y);\n    X = ReverseXyz(X);\n    Z = ReverseXyz(Z);\n    var x = X * 95.047;\n    var y = Y * 100.000;\n    var z = Z * 108.883;\n    return {\n      x: x,\n      y: y,\n      z: z\n    };\n  }\n  function LABtoRGB(l, a, b) {\n    if (arguments.length == 1) {\n      var _arguments$4 = arguments[0],\n        l = _arguments$4.l,\n        a = _arguments$4.a,\n        b = _arguments$4.b;\n    }\n    return XYZtoRGB(LABtoXYZ(l, a, b));\n  }\n  var fromLAB = {\n    XYZtoRGB: XYZtoRGB,\n    LABtoRGB: LABtoRGB,\n    LABtoXYZ: LABtoXYZ\n  };\n\n  /**\n   * @method HSVtoRGB\n   *\n   * convert hsv to rgb\n   *\n   * \t\tcolor.HSVtoRGB(0,0,1) === #FFFFF === { r : 255, g : 0, b : 0 }\n   *\n   * @param {Number} H  hue color number  (min : 0, max : 360)\n   * @param {Number} S  Saturation number  (min : 0, max : 1)\n   * @param {Number} V  Value number \t\t(min : 0, max : 1 )\n   * @returns {Object}\n   */\n  function HSVtoRGB(h, s, v) {\n    if (arguments.length == 1) {\n      var _arguments$ = arguments[0],\n        h = _arguments$.h,\n        s = _arguments$.s,\n        v = _arguments$.v;\n    }\n    var H = h;\n    var S = s;\n    var V = v;\n    if (H >= 360) {\n      H = 0;\n    }\n    var C = S * V;\n    var X = C * (1 - Math.abs(H / 60 % 2 - 1));\n    var m = V - C;\n    var temp = [];\n    if (0 <= H && H < 60) {\n      temp = [C, X, 0];\n    } else if (60 <= H && H < 120) {\n      temp = [X, C, 0];\n    } else if (120 <= H && H < 180) {\n      temp = [0, C, X];\n    } else if (180 <= H && H < 240) {\n      temp = [0, X, C];\n    } else if (240 <= H && H < 300) {\n      temp = [X, 0, C];\n    } else if (300 <= H && H < 360) {\n      temp = [C, 0, X];\n    }\n    return {\n      r: round((temp[0] + m) * 255),\n      g: round((temp[1] + m) * 255),\n      b: round((temp[2] + m) * 255)\n    };\n  }\n  function HSVtoHSL(h, s, v) {\n    if (arguments.length == 1) {\n      var _arguments$2 = arguments[0],\n        h = _arguments$2.h,\n        s = _arguments$2.s,\n        v = _arguments$2.v;\n    }\n    var rgb = HSVtoRGB(h, s, v);\n    return RGBtoHSL(rgb.r, rgb.g, rgb.b);\n  }\n  var fromHSV = {\n    HSVtoHSL: HSVtoHSL,\n    HSVtoRGB: HSVtoRGB\n  };\n  function YCrCbtoRGB(y, cr, cb, bit) {\n    if (arguments.length == 1) {\n      var _arguments$ = arguments[0],\n        y = _arguments$.y,\n        cr = _arguments$.cr,\n        cb = _arguments$.cb,\n        bit = _arguments$.bit;\n      bit = bit || 0;\n    }\n    var R = y + 1.402 * (cr - bit);\n    var G = y - 0.344 * (cb - bit) - 0.714 * (cr - bit);\n    var B = y + 1.772 * (cb - bit);\n    return {\n      r: Math.ceil(R),\n      g: Math.ceil(G),\n      b: Math.ceil(B)\n    };\n  }\n  var fromYCrCb = {\n    YCrCbtoRGB: YCrCbtoRGB\n  };\n\n  /**\n   * @deprecated \n   * \n   * instead of this,  use blend function \n   *  \n   * @param {*} startColor \n   * @param {*} endColor \n   * @param {*} t \n   */\n  function interpolateRGB(startColor, endColor) {\n    var t = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;\n    var exportFormat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'hex';\n    var obj = {\n      r: round(startColor.r + (endColor.r - startColor.r) * t),\n      g: round(startColor.g + (endColor.g - startColor.g) * t),\n      b: round(startColor.b + (endColor.b - startColor.b) * t),\n      a: round(startColor.a + (endColor.a - startColor.a) * t, 100)\n    };\n    return format(obj, obj.a < 1 ? 'rgb' : exportFormat);\n  }\n  function scale$1(scale) {\n    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;\n    if (!scale) return [];\n    if (typeof scale === 'string') {\n      scale = convertMatchesArray(scale);\n    }\n    scale = scale || [];\n    var len = scale.length;\n    var colors = [];\n    for (var i = 0; i < len - 1; i++) {\n      for (var index = 0; index < count; index++) {\n        colors.push(blend(scale[i], scale[i + 1], index / count));\n      }\n    }\n    return colors;\n  }\n  function blend(startColor, endColor) {\n    var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;\n    var format$$1 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'hex';\n    var s = parse(startColor);\n    var e = parse(endColor);\n    return interpolateRGB(s, e, ratio, format$$1);\n  }\n  function mix(startcolor, endColor) {\n    var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;\n    var format$$1 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'hex';\n    return blend(startcolor, endColor, ratio, format$$1);\n  }\n\n  /**\n   * \n   * @param {Color|String} c \n   */\n  function contrast(c$$1) {\n    c$$1 = parse(c$$1);\n    return (Math.round(c$$1.r * 299) + Math.round(c$$1.g * 587) + Math.round(c$$1.b * 114)) / 1000;\n  }\n  function contrastColor(c$$1) {\n    return contrast(c$$1) >= 128 ? 'black' : 'white';\n  }\n  function gradient(colors) {\n    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;\n    colors = parseGradient(colors);\n    var newColors = [];\n    var maxCount = count - (colors.length - 1);\n    var allCount = maxCount;\n    for (var i = 1, len = colors.length; i < len; i++) {\n      var startColor = colors[i - 1][0];\n      var endColor = colors[i][0];\n\n      // if it is second color\n      var rate = i == 1 ? colors[i][1] : colors[i][1] - colors[i - 1][1];\n\n      // if it is last color \n      var colorCount = i == colors.length - 1 ? allCount : Math.floor(rate * maxCount);\n      newColors = newColors.concat(scale$1([startColor, endColor], colorCount), [endColor]);\n      allCount -= colorCount;\n    }\n    return newColors;\n  }\n  function scaleHSV(color) {\n    var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'h';\n    var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 9;\n    var exportFormat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'rgb';\n    var min = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;\n    var max = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;\n    var dist = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 100;\n    var colorObj = parse(color);\n    var hsv = RGBtoHSV(colorObj);\n    var unit = (max - min) * dist / count;\n    var results = [];\n    for (var i = 1; i <= count; i++) {\n      hsv[target] = Math.abs((dist - unit * i) / dist);\n      results.push(format(HSVtoRGB(hsv), exportFormat));\n    }\n    return results;\n  }\n  function scaleH(color) {\n    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 9;\n    var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgb';\n    var min = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;\n    var max = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 360;\n    return scaleHSV(color, 'h', count, exportFormat, min, max, 1);\n  }\n  function scaleS(color) {\n    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 9;\n    var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgb';\n    var min = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;\n    var max = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;\n    return scaleHSV(color, 's', count, exportFormat, min, max, 100);\n  }\n  function scaleV(color) {\n    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 9;\n    var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgb';\n    var min = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;\n    var max = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;\n    return scaleHSV(color, 'v', count, exportFormat, min, max, 100);\n  }\n\n  /* predefined scale colors */\n  scale$1.parula = function (count) {\n    return scale$1(['#352a87', '#0f5cdd', '#00b5a6', '#ffc337', '#fdff00'], count);\n  };\n  scale$1.jet = function (count) {\n    return scale$1(['#00008f', '#0020ff', '#00ffff', '#51ff77', '#fdff00', '#ff0000', '#800000'], count);\n  };\n  scale$1.hsv = function (count) {\n    return scale$1(['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff', '#ff0000'], count);\n  };\n  scale$1.hot = function (count) {\n    return scale$1(['#0b0000', '#ff0000', '#ffff00', '#ffffff'], count);\n  };\n  scale$1.pink = function (count) {\n    return scale$1(['#1e0000', '#bd7b7b', '#e7e5b2', '#ffffff'], count);\n  };\n  scale$1.bone = function (count) {\n    return scale$1(['#000000', '#4a4a68', '#a6c6c6', '#ffffff'], count);\n  };\n  scale$1.copper = function (count) {\n    return scale$1(['#000000', '#3d2618', '#9d623e', '#ffa167', '#ffc77f'], count);\n  };\n  var mixin = {\n    interpolateRGB: interpolateRGB,\n    blend: blend,\n    mix: mix,\n    scale: scale$1,\n    contrast: contrast,\n    contrastColor: contrastColor,\n    gradient: gradient,\n    scaleHSV: scaleHSV,\n    scaleH: scaleH,\n    scaleS: scaleS,\n    scaleV: scaleV\n  };\n  function array_equals(v1, v2) {\n    if (v1.length !== v2.length) return false;\n    for (var i = 0, len = v1.length; i < len; ++i) {\n      if (v1[i] !== v2[i]) return false;\n    }\n    return true;\n  }\n  function euclidean(v1, v2) {\n    var total = 0;\n    for (var i = 0, len = v1.length; i < len; i++) {\n      total += Math.pow(v2[i] - v1[i], 2);\n    }\n    return Math.sqrt(total);\n  }\n  function manhattan(v1, v2) {\n    var total = 0;\n    for (var i = 0, len = v1.length; i < len; i++) {\n      total += Math.abs(v2[i] - v1[i]);\n    }\n    return total;\n  }\n  function max(v1, v2) {\n    var max = 0;\n    for (var i = 0, len = v1.length; i < len; i++) {\n      max = Math.max(max, Math.abs(v2[i] - v1[i]));\n    }\n    return max;\n  }\n  var distances = {\n    euclidean: euclidean,\n    manhattan: manhattan,\n    max: max\n  };\n  var create_random_number = {\n    linear: function linear(num, count) {\n      var centeroids = [];\n      var start = Math.round(Math.random() * num);\n      var dist = Math.floor(num / count);\n      do {\n        centeroids.push(start);\n        start = (start + dist) % num;\n      } while (centeroids.length < count);\n      return centeroids;\n    },\n    shuffle: function shuffle(num, count) {\n      var centeroids = [];\n      while (centeroids.length < count) {\n        var index = Math.round(Math.random() * num);\n        if (centeroids.indexOf(index) == -1) {\n          centeroids.push(index);\n        }\n      }\n      return centeroids;\n    }\n  };\n  function randomCentroids(points, k) {\n    var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear';\n    var centeroids = create_random_number[method](points.length, k);\n    return centeroids.map(function (i) {\n      return points[i];\n    });\n\n    // var centeroids = points.slice(0);\n\n    // centeroids.sort(function () {\n    //     return (Math.round(Math.random()) - 0.5);\n    // })\n\n    // return centeroids.slice(0, k); \n  }\n  function closestCenteroid(point, centeroids, distance) {\n    var min = Infinity,\n      kIndex = 0;\n    centeroids.forEach(function (center, i) {\n      var dist = distance(point, center);\n      if (dist < min) {\n        min = dist;\n        kIndex = i;\n      }\n    });\n    return kIndex;\n  }\n  function getCenteroid(assigned) {\n    if (!assigned.length) return [];\n\n    // initialize centeroid list \n    var centeroid = new Array(assigned[0].length);\n    for (var i = 0, len = centeroid.length; i < len; i++) {\n      centeroid[i] = 0;\n    }\n    for (var index = 0, len = assigned.length; index < len; index++) {\n      var it = assigned[index];\n      var last = index + 1;\n      for (var j = 0, jLen = it.length; j < jLen; j++) {\n        centeroid[j] += (it[j] - centeroid[j]) / last;\n      }\n    }\n    centeroid = centeroid.map(function (it) {\n      return Math.floor(it);\n    });\n    return centeroid;\n  }\n  function unique_array(arrays) {\n    return arrays;\n    var set = {};\n    var count = arrays.length;\n    var it = null;\n    while (count--) {\n      it = arrays[count];\n      set[JSON.stringify(it)] = it;\n    }\n    return Object.values(set);\n  }\n  function splitK(k, points, centeroids, distance) {\n    var assignment = new Array(k);\n    for (var i = 0; i < k; i++) {\n      assignment[i] = [];\n    }\n    for (var idx = 0, pointLength = points.length; idx < pointLength; idx++) {\n      var point = points[idx];\n      var index = closestCenteroid(point, centeroids, distance);\n      assignment[index].push(point);\n    }\n    return assignment;\n  }\n  function setNewCenteroid(k, points, assignment, centeroids, movement, randomFunction) {\n    for (var i = 0; i < k; i++) {\n      var assigned = assignment[i];\n      var centeroid = centeroids[i];\n      var newCenteroid = new Array(centeroid.length);\n      if (assigned.length > 0) {\n        newCenteroid = getCenteroid(assigned);\n      } else {\n        var idx = Math.floor(randomFunction() * points.length);\n        newCenteroid = points[idx];\n      }\n      if (array_equals(newCenteroid, centeroid)) {\n        movement = false;\n      } else {\n        movement = true;\n      }\n      centeroids[i] = newCenteroid;\n    }\n    return movement;\n  }\n  function kmeans(points, k, distanceFunction) {\n    var period = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 10;\n    var initialRandom = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'linear';\n    points = unique_array(points);\n    k = k || Math.max(2, Math.ceil(Math.sqrt(points.length / 2)));\n    var distance = distanceFunction || 'euclidean';\n    if (typeof distance == 'string') {\n      distance = distances[distance];\n    }\n    var rng_seed = 0;\n    var random = function random() {\n      rng_seed = (rng_seed * 9301 + 49297) % 233280;\n      return rng_seed / 233280;\n    };\n    var centeroids = randomCentroids(points, k, initialRandom);\n    var movement = true;\n    var iterations = 0;\n    while (movement) {\n      var assignment = splitK(k, points, centeroids, distance);\n      movement = setNewCenteroid(k, points, assignment, centeroids, false, random);\n      iterations++;\n      if (iterations % period == 0) {\n        break;\n      }\n    }\n    return centeroids;\n  }\n  function each(len, callback) {\n    for (var i = 0; i < len; i += 4) {\n      callback(i);\n    }\n  }\n  function pack(bitmap, callback) {\n    each(bitmap.pixels.length, function (i) {\n      callback(bitmap.pixels, i);\n    });\n  }\n  var Canvas = {\n    create: function create(width, height) {\n      var canvas = document.createElement('canvas');\n      canvas.width = width || 0;\n      canvas.height = height || 0;\n      return canvas;\n    },\n    drawPixels: function drawPixels(bitmap) {\n      var canvas = this.create(bitmap.width, bitmap.height);\n      var context = canvas.getContext('2d');\n      var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);\n      imagedata.data.set(bitmap.pixels);\n      context.putImageData(imagedata, 0, 0);\n      return canvas;\n    },\n    createHistogram: function createHistogram(width, height, histogram, callback) {\n      var opt = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {\n        black: true,\n        red: false,\n        green: false,\n        blue: false\n      };\n      var canvas = this.create(width, height);\n      var context = canvas.getContext('2d');\n      context.clearRect(0, 0, width, height);\n      context.fillStyle = \"white\";\n      context.fillRect(0, 0, width, height);\n      context.globalAlpha = 0.7;\n      var omit = {\n        black: false\n      };\n      if (opt.black) {\n        omit.black = false;\n      } else {\n        omit.black = true;\n      }\n      if (opt.red) {\n        omit.red = false;\n      } else {\n        omit.red = true;\n      }\n      if (opt.green) {\n        omit.green = false;\n      } else {\n        omit.green = true;\n      }\n      if (opt.blue) {\n        omit.blue = false;\n      } else {\n        omit.blue = true;\n      }\n      Object.keys(histogram).forEach(function (color) {\n        if (!omit[color]) {\n          var array = histogram[color];\n          var ymax = Math.max.apply(Math, array);\n          var unitWith = width / array.length;\n          context.fillStyle = color;\n          array.forEach(function (it, index) {\n            var currentHeight = height * (it / ymax);\n            var x = index * unitWith;\n            context.fillRect(x, height - currentHeight, unitWith, currentHeight);\n          });\n        }\n      });\n      if (typeof callback == 'function') callback(canvas);\n    },\n    getHistogram: function getHistogram(bitmap) {\n      var black = new Array(256);\n      var red = new Array(256);\n      var green = new Array(256);\n      var blue = new Array(256);\n      for (var i = 0; i < 256; i++) {\n        black[i] = 0;\n        red[i] = 0;\n        green[i] = 0;\n        blue[i] = 0;\n      }\n      pack(bitmap, function (pixels, i) {\n        // gray scale \n        var grayIndex = Math.round(Color$1.brightness(pixels[i], pixels[i + 1], pixels[i + 2]));\n        black[grayIndex]++;\n        red[pixels[i]]++;\n        green[pixels[i + 1]]++;\n        blue[pixels[i + 2]]++;\n      });\n      return {\n        black: black,\n        red: red,\n        green: green,\n        blue: blue\n      };\n    },\n    getBitmap: function getBitmap(bitmap, area) {\n      var canvas = this.drawPixels(bitmap);\n      var context = canvas.getContext('2d');\n      var pixels = context.getImageData(area.x || 0, area.y || 0, area.width || canvas.width, area.height || canvas.height).data;\n      return {\n        pixels: pixels,\n        width: area.width,\n        height: area.height\n      };\n    },\n    putBitmap: function putBitmap(bitmap, subBitmap, area) {\n      var canvas = this.drawPixels(bitmap);\n      var subCanvas = this.drawPixels(subBitmap);\n      var context = canvas.getContext('2d');\n      context.drawImage(subCanvas, area.x, area.y);\n      bitmap.pixels = context.getImageData(0, 0, bitmap.width, bitmap.height).data;\n      return bitmap;\n    }\n  };\n  var ImageLoader = function () {\n    function ImageLoader(url) {\n      var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      classCallCheck(this, ImageLoader);\n      this.isLoaded = false;\n      this.imageUrl = url;\n      this.opt = opt;\n      this.initialize();\n    }\n    createClass(ImageLoader, [{\n      key: 'initialize',\n      value: function initialize() {\n        this.canvas = this.createCanvas();\n        this.context = this.canvas.getContext('2d');\n      }\n    }, {\n      key: 'createCanvas',\n      value: function createCanvas() {\n        return document.createElement('canvas');\n      }\n    }, {\n      key: 'load',\n      value: function load(callback) {\n        this.loadImage(callback);\n      }\n    }, {\n      key: 'loadImage',\n      value: function loadImage(callback) {\n        var _this = this;\n        var ctx = this.context;\n        this.newImage = new Image();\n        var img = this.newImage;\n        img.onload = function () {\n          var ratio = img.height / img.width;\n          if (_this.opt.canvasWidth && _this.opt.canvasHeight) {\n            _this.canvas.width = _this.opt.canvasWidth;\n            _this.canvas.height = _this.opt.canvasHeight;\n          } else {\n            _this.canvas.width = _this.opt.maxWidth ? _this.opt.maxWidth : img.width;\n            _this.canvas.height = _this.canvas.width * ratio;\n          }\n          ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, _this.canvas.width, _this.canvas.height);\n          _this.isLoaded = true;\n          callback && callback();\n        };\n        this.getImageUrl(function (url) {\n          img.src = url;\n        });\n      }\n    }, {\n      key: 'load',\n      value: function load(callback) {\n        var _this2 = this;\n        this.newImage = new Image();\n        var img = this.newImage;\n        img.onload = function () {\n          _this2.isLoaded = true;\n          callback && callback();\n        };\n        this.getImageUrl(function (url) {\n          img.src = url;\n        });\n      }\n    }, {\n      key: 'getImageUrl',\n      value: function getImageUrl(callback) {\n        if (typeof this.imageUrl == 'string') {\n          return callback(this.imageUrl);\n        } else if (this.imageUrl instanceof Blob) {\n          var reader = new FileReader();\n          reader.onload = function (ev) {\n            callback(ev.target.result);\n          };\n          reader.readAsDataURL(this.imageUrl);\n        }\n      }\n    }, {\n      key: 'getRGBA',\n      value: function getRGBA(r, g, b, a) {\n        return [r, g, b, a];\n      }\n    }, {\n      key: 'toArray',\n      value: function toArray$$1(filter, callback) {\n        var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n        var imagedata = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);\n        var width = imagedata.width;\n        var height = imagedata.height;\n        var pixels = new Uint8ClampedArray(imagedata.data);\n        var bitmap = {\n          pixels: pixels,\n          width: width,\n          height: height\n        };\n        if (!filter) {\n          filter = function () {\n            return function (bitmap, done) {\n              done(bitmap);\n            };\n          }();\n        }\n        filter(bitmap, function (newBitmap) {\n          var tmpCanvas = Canvas.drawPixels(newBitmap);\n          if (opt.returnTo == 'canvas') {\n            callback(tmpCanvas);\n          } else {\n            callback(tmpCanvas.toDataURL(opt.outputFormat || 'image/png'));\n          }\n        }, opt);\n      }\n    }, {\n      key: 'toHistogram',\n      value: function toHistogram(opt) {\n        var imagedata = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);\n        var width = imagedata.width;\n        var height = imagedata.height;\n        var pixels = new Uint8ClampedArray(imagedata.data);\n        var bitmap = {\n          pixels: pixels,\n          width: width,\n          height: height\n        };\n        return Canvas.getHistogram(bitmap);\n      }\n    }, {\n      key: 'toRGB',\n      value: function toRGB() {\n        var imagedata = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);\n        var rgba = imagedata.data;\n        var results = [];\n        for (var i = 0, len = rgba.length; i < len; i += 4) {\n          results[results.length] = [rgba[i + 0], rgba[i + 1], rgba[i + 2], rgba[i + 3]];\n        }\n        return results;\n      }\n    }]);\n    return ImageLoader;\n  }();\n\n  // import GL from '../GL' \n  function palette(colors) {\n    var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 6;\n    var exportFormat = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'hex';\n    if (colors.length > k) {\n      colors = kmeans(colors, k);\n    }\n    return colors.map(function (c) {\n      return format(c, exportFormat);\n    });\n  }\n  function ImageToRGB(url) {\n    var callbackOrOption = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    var callback = arguments[2];\n    if (!callback) {\n      var img = new ImageLoader(url);\n      img.loadImage(function () {\n        if (typeof callbackOrOption == 'function') {\n          callbackOrOption(img.toRGB());\n        }\n      });\n    } else if (callback) {\n      var img = new ImageLoader(url, callbackOrOption);\n      img.loadImage(function () {\n        if (typeof callback == 'function') {\n          callback(img.toRGB());\n        }\n      });\n    }\n  }\n  function ImageToCanvas(url, filter, callback) {\n    var opt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {\n      frameTimer: 'full'\n    };\n    ImageToURL(url, filter, callback, Object.assign({\n      returnTo: 'canvas'\n    }, opt));\n  }\n  function ImageToURL(url, filter, callback) {\n    var opt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {\n      frameTimer: 'full'\n    };\n    var img = new ImageLoader(url);\n    img.loadImage(function () {\n      img.toArray(filter, function (datauri) {\n        if (typeof callback == 'function') {\n          callback(datauri);\n        }\n      }, opt);\n    });\n  }\n\n  // export function GLToCanvas (url, filter, callback, opt = {}) {\n  //     var img = new ImageLoader(url);\n  //     img.load(() => {\n  //         GL.filter(img.newImage, filter, function done (datauri) {\n  //             if (typeof callback == 'function') {\n  //                 callback(datauri)\n  //             }\n  //         }, opt)\n  //     })\n  // }\n\n  function histogram(url, callback) {\n    var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n    var img = new ImageLoader(url);\n    img.loadImage(function () {\n      if (typeof callback == 'function') {\n        callback(img.toHistogram(opt));\n      }\n    });\n  }\n  function histogramToPoints(points) {\n    var tension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.2;\n    var controlPoints = [];\n    for (var i = 0; i < points.length; i++) {\n      var p = points[i];\n      if (i == 0) {\n        controlPoints[i] = [];\n        continue;\n      }\n      if (i == points.length - 1) {\n        controlPoints[i] = [];\n        continue;\n      }\n      var prevPoint = points[i - 1];\n      var nextPoint = points[i + 1];\n\n      // 기울기 \n      var M = (nextPoint[1] - prevPoint[1]) / (nextPoint[0] - prevPoint[0]);\n      var newControlPoint = [prevPoint[0] + (nextPoint[0] - prevPoint[0]) * tension, prevPoint[1] + (nextPoint[1] - prevPoint[1]) * tension];\n      var controlPoint = [[].concat(toConsumableArray(prevPoint)), /* start */\n      [].concat(newControlPoint) /* end */];\n      var P = Math.sqrt(Math.pow(p[0] - prevPoint[0], 2) + Math.pow(p[1] - prevPoint[1], 2));\n      var N = Math.sqrt(Math.pow(nextPoint[0] - p[0], 2) + Math.pow(nextPoint[1] - p[1], 2));\n      var rate = P / N;\n      var dx = controlPoint[0][0] + (controlPoint[1][0] - controlPoint[0][0]) * rate;\n      var dy = controlPoint[0][1] + (controlPoint[1][1] - controlPoint[0][1]) * rate;\n      controlPoint[0][0] += p[0] - dx;\n      controlPoint[0][1] += p[1] - dy;\n      controlPoint[1][0] += p[0] - dx;\n      controlPoint[1][1] += p[1] - dy;\n      controlPoints[i] = controlPoint;\n    }\n    return controlPoints;\n  }\n  function ImageToHistogram(url, callback) {\n    var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {\n      width: 200,\n      height: 100\n    };\n    var img = new ImageLoader(url);\n    img.loadImage(function () {\n      Canvas.createHistogram(opt.width || 200, opt.height || 100, img.toHistogram(opt), function (canvas) {\n        if (typeof callback == 'function') callback(canvas.toDataURL('image/png'));\n      }, opt);\n    });\n  }\n  var image = {\n    palette: palette,\n    ImageToCanvas: ImageToCanvas,\n    ImageToHistogram: ImageToHistogram,\n    ImageToRGB: ImageToRGB,\n    ImageToURL: ImageToURL,\n    // GLToCanvas,\n    histogram: histogram,\n    histogramToPoints: histogramToPoints\n  };\n  var Color$1 = _extends({}, formatter, math, mixin, parser, fromYCrCb, fromRGB, fromCMYK, fromHSV, fromHSL, fromLAB, image);\n  function isUndefined(value) {\n    return typeof value == 'undefined' || value === null;\n  }\n  function isNotUndefined(value) {\n    return isUndefined(value) === false;\n  }\n  function isString(value) {\n    return typeof value == 'string';\n  }\n  function isFunction(value) {\n    return typeof value == 'function';\n  }\n  function isNumber(value) {\n    return typeof value == 'number';\n  }\n  var hue_color = [{\n    rgb: '#ff0000',\n    start: .0\n  }, {\n    rgb: '#ffff00',\n    start: .17\n  }, {\n    rgb: '#00ff00',\n    start: .33\n  }, {\n    rgb: '#00ffff',\n    start: .50\n  }, {\n    rgb: '#0000ff',\n    start: .67\n  }, {\n    rgb: '#ff00ff',\n    start: .83\n  }, {\n    rgb: '#ff0000',\n    start: 1\n  }];\n  function checkHueColor(p) {\n    var startColor, endColor;\n    for (var i = 0; i < hue_color.length; i++) {\n      if (hue_color[i].start >= p) {\n        startColor = hue_color[i - 1];\n        endColor = hue_color[i];\n        break;\n      }\n    }\n    if (startColor && endColor) {\n      return Color$1.mix(startColor.rgb, endColor.rgb, (p - startColor.start) / (endColor.start - startColor.start));\n    }\n    return hue_color[0].rgb;\n  }\n  function getHueScale(p) {\n    var minScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.1;\n    var maxScale = arguments[2];\n    var start = isUndefined(maxScale) ? p - minScale : minScale;\n    var end = isUndefined(maxScale) ? p + scale : maxScale;\n    var list = [];\n\n    // console.log(start, checkHueColor(start));\n\n    for (var i = 0; i < hue_color.length; i++) {\n      var currentHue = hue_color[i];\n      if (start <= currentHue.start && currentHue.start < end) {\n        list.push({\n          rgb: currentHue.rgb,\n          start: currentHue.start\n        });\n        // list.push({ rgb: checkHueColor(start), start })\n      } else if (hue_color[i + 1] && currentHue.start < start && start < hue_color[i + 1].start) {\n        list.push({\n          rgb: checkHueColor(start),\n          start: start\n        });\n      } else if (hue_color[i - 1] && hue_color[i - 1].start < end && end < currentHue.start) {\n        list.push({\n          rgb: checkHueColor(end),\n          start: end\n        });\n      } else if (currentHue.start < start || currentHue.start > end) {\n        // noop \n      } else {\n        list.push({\n          rgb: currentHue.rgb,\n          start: currentHue.start\n        });\n      }\n    }\n    return list;\n  }\n  function initHueColors() {\n    for (var i = 0, len = hue_color.length; i < len; i++) {\n      var hue = hue_color[i];\n      var obj = Color$1.parse(hue.rgb);\n      hue.r = obj.r;\n      hue.g = obj.g;\n      hue.b = obj.b;\n    }\n  }\n  initHueColors();\n  var HueColor = {\n    colors: hue_color,\n    checkHueColor: checkHueColor,\n    getHueScale: getHueScale\n  };\n  var CONSTANT = {\n    identity: function identity() {\n      return [1, 0, 0, 0, 1, 0, 0, 0, 1];\n    },\n    stretching: function stretching(k) {\n      return [k, 0, 0, 0, 1, 0, 0, 0, 1];\n    },\n    squeezing: function squeezing(k) {\n      return [k, 0, 0, 0, 1 / k, 0, 0, 0, 1];\n    },\n    scale: function scale() {\n      var sx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n      var sy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n      sx = sx || sx === 0 ? sx : 1;\n      sy = sy || sy === 0 ? sy : 1;\n      return [sx, 0, 0, 0, sy, 0, 0, 0, 1];\n    },\n    scaleX: function scaleX(sx) {\n      return this.scale(sx);\n    },\n    scaleY: function scaleY(sy) {\n      return this.scale(1, sy);\n    },\n    translate: function translate(tx, ty) {\n      return [1, 0, tx, 0, 1, ty, 0, 0, 1];\n    },\n    rotate: function rotate(angle) {\n      var r = this.radian(angle);\n      return [Math.cos(r), -Math.sin(r), 0, Math.sin(r), Math.cos(r), 0, 0, 0, 1];\n    },\n    rotate90: function rotate90() {\n      return [0, -1, 0, 1, 0, 0, 0, 0, 1];\n    },\n    rotate180: function rotate180() {\n      return [-1, 0, 0, 0, -1, 0, 0, 0, 1];\n    },\n    rotate270: function rotate270() {\n      return [0, 1, 0, -1, 0, 0, 0, 0, 1];\n    },\n    radian: function radian(degree) {\n      return degree * Math.PI / 180;\n    },\n    skew: function skew(degreeX, degreeY) {\n      var radianX = this.radian(degreeX);\n      var radianY = this.radian(degreeY);\n      return [1, Math.tan(radianX), 0, Math.tan(radianY), 1, 0, 0, 0, 1];\n    },\n    skewX: function skewX(degreeX) {\n      var radianX = this.radian(degreeX);\n      return [1, Math.tan(radianX), 0, 0, 1, 0, 0, 0, 1];\n    },\n    skewY: function skewY(degreeY) {\n      var radianY = this.radian(degreeY);\n      return [1, 0, 0, Math.tan(radianY), 1, 0, 0, 0, 1];\n    },\n    shear1: function shear1(angle) {\n      return [1, -Math.tan(this.radian(angle) / 2), 0, 0, 1, 0, 0, 0, 1];\n    },\n    shear2: function shear2(angle) {\n      return [1, 0, 0, Math.sin(this.radian(angle)), 1, 0, 0, 0, 1];\n    }\n  };\n  var Matrix = {\n    CONSTANT: CONSTANT,\n    radian: function radian(angle) {\n      return CONSTANT.radian(angle);\n    },\n    multiply: function multiply(A, C) {\n      // console.log(JSON.stringify(A), JSON.stringify(C))\n      return [A[0] * C[0] + A[1] * C[1] + A[2] * C[2], A[3] * C[0] + A[4] * C[1] + A[5] * C[2], A[6] * C[0] + A[7] * C[1] + A[8] * C[2]];\n    },\n    identity: function identity(B) {\n      return this.multiply(CONSTANT.identity(), B);\n    },\n    translate: function translate(x, y, B) {\n      return this.multiply(CONSTANT.translate(x, y), B);\n    },\n    rotate: function rotate(angle, B) {\n      return this.multiply(CONSTANT.rotate(angle), B);\n    },\n    shear1: function shear1(angle, B) {\n      return this.multiply(CONSTANT.shear1(angle), B);\n    },\n    shear2: function shear2(angle, B) {\n      return this.multiply(CONSTANT.shear2(angle), B);\n    },\n    rotateShear: function rotateShear(angle, B) {\n      var arr = B;\n      arr = this.shear1(angle, arr);\n      arr = this.shear2(angle, arr);\n      arr = this.shear1(angle, arr);\n      return arr;\n    }\n  };\n  function crop() {\n    var startX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n    var startY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n    var width = arguments[2];\n    var height = arguments[3];\n    var newBitmap = createBitmap(width * height * 4, width, height);\n    return function (bitmap, done) {\n      for (var y = startY, realY = 0; y < height; y++, realY++) {\n        for (var x = startX, realX = 0; x < width; x++, realX++) {\n          newBitmap.pixels[realY * width * realX] = bitmap.pixels[y * width * x];\n        }\n      }\n      done(newBitmap);\n    };\n  }\n\n  // Image manupulate \n  function resize(dstWidth, dstHeight) {\n    return function (bitmap, done) {\n      var c = Canvas.drawPixels(bitmap);\n      var context = c.getContext('2d');\n      c.width = dstWidth;\n      c.height = dstHeight;\n      done({\n        pixels: new Uint8ClampedArray(context.getImageData(0, 0, dstWidth, dstHeight).data),\n        width: dstWidth,\n        height: dstHeight\n      });\n    };\n  }\n  function flipV() {\n    return function (bitmap, done) {\n      var width = bitmap.width;\n      var height = bitmap.height;\n      var isCenter = height % 2 == 1 ? 1 : 0;\n      var halfHeight = isCenter ? Math.floor(height / 2) : height / 2;\n      for (var y = 0; y < halfHeight; y++) {\n        for (var x = 0; x < width; x++) {\n          var startIndex = y * width + x << 2;\n          var endIndex = (height - 1 - y) * width + x << 2;\n          swapColor(bitmap.pixels, startIndex, endIndex);\n        }\n      }\n      done(bitmap);\n    };\n  }\n  function flipH() {\n    return function (bitmap, done) {\n      var width = bitmap.width;\n      var height = bitmap.height;\n      var isCenter = width % 2 == 1 ? 1 : 0;\n      var halfWidth = isCenter ? Math.floor(width / 2) : width / 2;\n      for (var y = 0; y < height; y++) {\n        for (var x = 0; x < halfWidth; x++) {\n          var startIndex = y * width + x << 2;\n          var endIndex = y * width + (width - 1 - x) << 2;\n          swapColor(bitmap.pixels, startIndex, endIndex);\n        }\n      }\n      done(bitmap);\n    };\n  }\n  function rotateDegree(angle) {\n    var cx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';\n    var cy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'center';\n\n    // const r = F.radian(angle)\n\n    return function (bitmap, done) {\n      var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n      var newBitmap = createBitmap(bitmap.pixels.length, bitmap.width, bitmap.height);\n      var width = bitmap.width;\n      var height = bitmap.height;\n      if (cx == 'center') {\n        cx = Math.floor(width / 2);\n      }\n      if (cy == 'center') {\n        cy = Math.floor(height / 2);\n      }\n      var translateMatrix = Matrix.CONSTANT.translate(-cx, -cy);\n      var translateMatrix2 = Matrix.CONSTANT.translate(cx, cy);\n      var shear1Matrix = Matrix.CONSTANT.shear1(angle);\n      var shear2Matrix = Matrix.CONSTANT.shear2(angle);\n      packXY(function (pixels, i, x, y) {\n        // console.log(x, y, i)\n        var arr = Matrix.multiply(translateMatrix, [x, y, 1]);\n        arr = Matrix.multiply(shear1Matrix, arr).map(Math.round);\n        arr = Matrix.multiply(shear2Matrix, arr).map(Math.round);\n        arr = Matrix.multiply(shear1Matrix, arr).map(Math.round);\n        arr = Matrix.multiply(translateMatrix2, arr);\n        var _arr = arr,\n          _arr2 = slicedToArray(_arr, 2),\n          x1 = _arr2[0],\n          y1 = _arr2[1];\n        if (x1 < 0) return;\n        if (y1 < 0) return;\n        if (x1 > width - 1) return;\n        if (y1 > height - 1) return;\n        var endIndex = y1 * width + x1 << 2; //  bit 2 shift is  * 4  \n\n        fillPixelColor(pixels, endIndex, bitmap.pixels, i);\n      })(newBitmap, function () {\n        done(newBitmap);\n      }, opt);\n    };\n  }\n  function rotate() {\n    var degree = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n    degree = parseParamNumber(degree);\n    degree = degree % 360;\n    return function (bitmap, done) {\n      var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n      if (degree == 0) return bitmap;\n      if (degree == 90 || degree == 270) {\n        var newBitmap = createBitmap(bitmap.pixels.length, bitmap.height, bitmap.width);\n      } else if (degree == 180) {\n        var newBitmap = createBitmap(bitmap.pixels.length, bitmap.width, bitmap.height);\n      } else {\n        return rotateDegree(degree)(bitmap, done, opt);\n      }\n      packXY(function (pixels, i, x, y) {\n        if (degree == 90) {\n          var endIndex = x * newBitmap.width + (newBitmap.width - 1 - y) << 2; //  << 2 is equals to (multiply)* 4 \n        } else if (degree == 270) {\n          var endIndex = (newBitmap.height - 1 - x) * newBitmap.width + y << 2;\n        } else if (degree == 180) {\n          var endIndex = (newBitmap.height - 1 - y) * newBitmap.width + (newBitmap.width - 1 - x) << 2;\n        }\n        fillPixelColor(newBitmap.pixels, endIndex, bitmap.pixels, i);\n      })(bitmap, function () {\n        done(newBitmap);\n      }, opt);\n    };\n  }\n  function histogram$1() {\n    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'gray';\n    var points = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n    var $realPoints = [];\n    for (var i = 0; i < points.length - 1; i++) {\n      var sp = points[i];\n      var ep = points[i + 1];\n      var distX = ep[0] - sp[0];\n      var distY = ep[1] - sp[1];\n      var rate = distY / distX;\n      for (var realIndex = 0, start = sp[0]; realIndex < distX; realIndex++, start++) {\n        $realPoints[start] = sp[1] + realIndex * rate;\n      }\n    }\n    $realPoints[255] = 255;\n    if (type === 'red') {\n      return pixel(function () {\n        $r = $realPoints[$r];\n      }, {}, {\n        $realPoints: $realPoints\n      });\n    } else if (type === 'green') {\n      return pixel(function () {\n        $g = $realPoints[$g];\n      }, {}, {\n        $realPoints: $realPoints\n      });\n    } else if (type === 'blue') {\n      return pixel(function () {\n        $b = $realPoints[$b];\n      }, {}, {\n        $realPoints: $realPoints\n      });\n    } else {\n      return pixel(function () {\n        var l = Color.RGBtoYCrCb($r, $g, $b);\n        var c = Color.YCrCbtoRGB(clamp($realPoints[clamp(l.y)]), l.cr, l.cb, 0);\n        $r = c.r;\n        $g = c.g;\n        $b = c.b;\n      }, {}, {\n        $realPoints: $realPoints\n      });\n    }\n  }\n  var image$1 = {\n    crop: crop,\n    resize: resize,\n    flipH: flipH,\n    flipV: flipV,\n    rotate: rotate,\n    rotateDegree: rotateDegree,\n    histogram: histogram$1,\n    'rotate-degree': rotateDegree\n  };\n  function bitonal(darkColor, lightColor) {\n    var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;\n    var $darkColor = Color$1.parse(darkColor);\n    var $lightColor = Color$1.parse(lightColor);\n    var $threshold = threshold;\n    return pixel('        \\n        const thresholdColor = ( $r + $g + $b ) <= $threshold ? $darkColor : $lightColor\\n\\n        $r = thresholdColor.r;\\n        $g = thresholdColor.g;\\n        $b = thresholdColor.b; \\n    ', {\n      $threshold: $threshold\n    }, {\n      $darkColor: $darkColor,\n      $lightColor: $lightColor\n    });\n  }\n\n  /*\n   * @param {Number} amount  -100..100  ,  value < 0  is darken, value > 0 is brighten \n   */\n  function brightness$1() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    amount = parseParamNumber(amount);\n    var $C = Math.floor(255 * (amount / 100));\n    return pixel('\\n        $r += $C;\\n        $g += $C;\\n        $b += $C;\\n    ', {\n      $C: $C\n    });\n  }\n  function brownie() {\n    var $matrix = [0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, 0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;        \\n    ', {\n      $matrix: $matrix\n    });\n  }\n\n  /**\n   * \n   * @param {Number} amount from 0 to 100 \n   */\n  function clip() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n    amount = parseParamNumber(amount);\n    var $C = Math.abs(amount) * 2.55;\n    return pixel('\\n\\n        $r = ($r > 255 - $C) ? 255 : 0;\\n        $g = ($g > 255 - $C) ? 255 : 0;\\n        $b = ($b > 255 - $C) ? 255 : 0;\\n\\n    ', {\n      $C: $C\n    });\n  }\n\n  /**\n   * \n   * @param {*} amount   min = -128, max = 128 \n   */\n  function contrast$1() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n    amount = parseParamNumber(amount);\n    var $C = Math.max((128 + amount) / 128, 0);\n    return pixel('\\n        $r *= $C;\\n        $g *= $C;\\n        $b *= $C;\\n    ', {\n      $C: $C\n    });\n  }\n  function gamma() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    var $C = parseParamNumber(amount);\n    return pixel('\\n        $r = Math.pow($r / 255, $C) * 255;\\n        $g = Math.pow($g / 255, $C) * 255;\\n        $b = Math.pow($b / 255, $C) * 255;\\n    ', {\n      $C: $C\n    });\n  }\n\n  /**\n   * F.gradient('red', 'blue', 'yellow', 'white', 10)\n   * F.gradient('red, blue, yellow, white, 10')\n   */\n  function gradient$1() {\n    // 전체 매개변수 기준으로 파싱 \n    // 색이 아닌 것 기준으로 scale 변수로 인식 \n\n    var params = [].concat(Array.prototype.slice.call(arguments));\n    if (params.length === 1 && typeof params[0] === 'string') {\n      params = Color$1.convertMatchesArray(params[0]);\n    }\n    params = params.map(function (arg) {\n      var res = Color$1.matches(arg);\n      if (!res.length) {\n        return {\n          type: 'scale',\n          value: arg\n        };\n      }\n      return {\n        type: 'param',\n        value: arg\n      };\n    });\n    var $scale = params.filter(function (it) {\n      return it.type == 'scale';\n    })[0];\n    $scale = $scale ? +$scale.value : 256;\n    params = params.filter(function (it) {\n      return it.type == 'param';\n    }).map(function (it) {\n      return it.value;\n    }).join(',');\n    var $colors = Color$1.gradient(params, $scale).map(function (c) {\n      var _Color$parse = Color$1.parse(c),\n        r = _Color$parse.r,\n        g = _Color$parse.g,\n        b = _Color$parse.b,\n        a = _Color$parse.a;\n      return {\n        r: r,\n        g: g,\n        b: b,\n        a: a\n      };\n    });\n    return pixel('\\n        const colorIndex = clamp(Math.ceil($r * 0.2126 + $g * 0.7152 + $b * 0.0722));\\n        const newColorIndex = clamp(Math.floor(colorIndex * ($scale / 256)));\\n        const color = $colors[newColorIndex];\\n\\n        $r = color.r; \\n        $g = color.g; \\n        $b = color.b; \\n        $a = clamp(Math.floor(color.a * 256));\\n    ', {}, {\n      $colors: $colors,\n      $scale: $scale\n    });\n  }\n  function grayscale(amount) {\n    amount = parseParamNumber(amount);\n    var C = amount / 100;\n    if (C > 1) C = 1;\n    var $matrix = [0.2126 + 0.7874 * (1 - C), 0.7152 - 0.7152 * (1 - C), 0.0722 - 0.0722 * (1 - C), 0, 0.2126 - 0.2126 * (1 - C), 0.7152 + 0.2848 * (1 - C), 0.0722 - 0.0722 * (1 - C), 0, 0.2126 - 0.2126 * (1 - C), 0.7152 - 0.7152 * (1 - C), 0.0722 + 0.9278 * (1 - C), 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;\\n    ', {\n      $matrix: $matrix\n    });\n  }\n\n  /*\n   * @param {Number} amount   0..360  \n   */\n  function hue() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;\n    var $C = parseParamNumber(amount);\n    return pixel('\\n        var hsv = Color.RGBtoHSV($r, $g, $b);\\n\\n        // 0 ~ 360 \\n        var h = hsv.h;\\n        h += Math.abs($C);\\n        h = h % 360;\\n        hsv.h = h;\\n\\n        var rgb = Color.HSVtoRGB(hsv);\\n\\n        $r = rgb.r;\\n        $g = rgb.g;\\n        $b = rgb.b;\\n    ', {\n      $C: $C\n    });\n  }\n  function invert() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    var $C = amount / 100;\n    return pixel('\\n        $r = (255 - $r) * $C;\\n        $g = (255 - $g) * $C;\\n        $b = (255 - $b) * $C;\\n    ', {\n      $C: $C\n    });\n  }\n  function kodachrome() {\n    var $matrix = [1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;\\n    ', {\n      $matrix: $matrix\n    });\n  }\n  function matrix() {\n    var $a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n    var $b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n    var $c = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;\n    var $d = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;\n    var $e = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;\n    var $f = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;\n    var $g = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;\n    var $h = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 0;\n    var $i = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0;\n    var $j = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 0;\n    var $k = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : 0;\n    var $l = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : 0;\n    var $m = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : 0;\n    var $n = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : 0;\n    var $o = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : 0;\n    var $p = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : 0;\n    var $matrix = [$a, $b, $c, $d, $e, $f, $g, $h, $i, $j, $k, $l, $m, $n, $o, $p];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;\\n    ', {\n      $matrix: $matrix\n    });\n  }\n\n  /**\n   * \n   * @param {Number} amount 1..100\n   */\n  function noise() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    var $C = parseParamNumber(amount);\n    return pixel('\\n        const C = Math.abs($C) * 5;\\n        const min = -C;\\n        const max = C;\\n        const noiseValue = Math.round(min + (Math.random() * (max - min)));\\n\\n        $r += noiseValue;\\n        $g += noiseValue;\\n        $b += noiseValue;\\n    ', {\n      $C: $C\n    });\n  }\n  function opacity() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    var $C = amount / 100;\n    return pixel('\\n        $a *= $C; \\n    ', {\n      $C: $C\n    });\n  }\n  function polaroid() {\n    var $matrix = [1.438, -0.062, -0.062, 0, -0.122, 1.378, -0.122, 0, -0.016, -0.016, 1.483, 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;\\n    ', {\n      $matrix: $matrix\n    });\n  }\n\n  /*\n   * @param {Number} amount  -100..100 \n   */\n  function saturation() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    var C = amount / 100;\n    var L = 1 - Math.abs(C);\n    var $matrix = [L, 0, 0, 0, 0, L, 0, 0, 0, 0, L, 0, 0, 0, 0, L];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;        \\n    ', {\n      $matrix: $matrix\n    });\n  }\n\n  /*\n   * @param {Number} amount  0..1 \n   */\n  function sepia() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    var C = parseParamNumber(amount);\n    if (C > 1) C = 1;\n    var $matrix = [0.393 + 0.607 * (1 - C), 0.769 - 0.769 * (1 - C), 0.189 - 0.189 * (1 - C), 0, 0.349 - 0.349 * (1 - C), 0.686 + 0.314 * (1 - C), 0.168 - 0.168 * (1 - C), 0, 0.272 - 0.272 * (1 - C), 0.534 - 0.534 * (1 - C), 0.131 + 0.869 * (1 - C), 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;        \\n    ', {\n      $matrix: $matrix\n    });\n  }\n  function shade() {\n    var redValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    var greenValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n    var blueValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n    var $redValue = parseParamNumber(redValue);\n    var $greenValue = parseParamNumber(greenValue);\n    var $blueValue = parseParamNumber(blueValue);\n    return pixel('\\n        $r *= $redValue;\\n        $g *= $greenValue;\\n        $b *= $blueValue;\\n    ', {\n      $redValue: $redValue,\n      $greenValue: $greenValue,\n      $blueValue: $blueValue\n    });\n  }\n  function shift() {\n    var $matrix = [1.438, -0.062, -0.062, 0, -0.122, 1.378, -0.122, 0, -0.016, -0.016, 1.483, 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;        \\n    ', {\n      $matrix: $matrix\n    });\n  }\n\n  /**\n   * change the relative darkness of (a part of an image) by overexposure to light.\n   * @param {*} r \n   * @param {*} g \n   * @param {*} b \n   */\n  function solarize(redValue, greenValue, blueValue) {\n    var $redValue = parseParamNumber(redValue);\n    var $greenValue = parseParamNumber(greenValue);\n    var $blueValue = parseParamNumber(blueValue);\n    return pixel('\\n        $r = ($r < $redValue) ? 255 - $r: $r;\\n        $g = ($g < $greenValue) ? 255 - $g: $g;\\n        $b = ($b < $blueValue) ? 255 - $b: $b;\\n    ', {\n      $redValue: $redValue,\n      $greenValue: $greenValue,\n      $blueValue: $blueValue\n    });\n  }\n  function technicolor() {\n    var $matrix = [1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 0, 0, 0, 1];\n    return pixel('\\n        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a;\\n        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a;\\n        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a;\\n        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a;\\n    ', {\n      $matrix: $matrix\n    });\n  }\n  function thresholdColor() {\n    var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;\n    var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;\n    var hasColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;\n    var $scale = parseParamNumber(scale);\n    amount = parseParamNumber(amount);\n    var $C = amount / 100;\n    var $hasColor = hasColor;\n    return pixel('\\n        // refer to Color.brightness \\n        const v = ($C * Math.ceil($r * 0.2126 + $g * 0.7152 + $b * 0.0722) ) >= $scale ? 255 : 0;\\n\\n        if ($hasColor) {\\n\\n            if (v == 0) {\\n                $r = 0; \\n                $g = 0; \\n                $b = 0;\\n            }\\n            \\n        } else {\\n            const value = Math.round(v);\\n            $r = value; \\n            $g = value;\\n            $b = value; \\n        }\\n        \\n    ', {\n      $C: $C,\n      $scale: $scale,\n      $hasColor: $hasColor\n    });\n  }\n\n  /*\n   * @param {Number} amount  0..100 \n   */\n  function threshold() {\n    var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;\n    var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;\n    return thresholdColor(scale, amount, false);\n  }\n  function tint() {\n    var redTint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    var greenTint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n    var blueTint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n    var $redTint = parseParamNumber(redTint);\n    var $greenTint = parseParamNumber(greenTint);\n    var $blueTint = parseParamNumber(blueTint);\n    return pixel(\"\\n\\n        $r += (255 - $r) * $redTint;\\n        $g += (255 - $g) * $greenTint;\\n        $b += (255 - $b) * $blueTint;\\n\\n    \", {\n      $redTint: $redTint,\n      $greenTint: $greenTint,\n      $blueTint: $blueTint\n    });\n  }\n  var pixel$1 = {\n    bitonal: bitonal,\n    brightness: brightness$1,\n    brownie: brownie,\n    clip: clip,\n    contrast: contrast$1,\n    gamma: gamma,\n    gradient: gradient$1,\n    grayscale: grayscale,\n    hue: hue,\n    invert: invert,\n    kodachrome: kodachrome,\n    matrix: matrix,\n    noise: noise,\n    opacity: opacity,\n    polaroid: polaroid,\n    saturation: saturation,\n    sepia: sepia,\n    shade: shade,\n    shift: shift,\n    solarize: solarize,\n    technicolor: technicolor,\n    threshold: threshold,\n    'threshold-color': thresholdColor,\n    tint: tint\n  };\n  function blur() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n    amount = parseParamNumber(amount);\n    return convolution(createBlurMatrix(amount));\n  }\n\n  /*\n   * carve, mold, or stamp a design on (a surface) so that it stands out in relief.\n   * \n   * @param {Number} amount   0.0 .. 4.0 \n   */\n  function emboss() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;\n    amount = parseParamNumber(amount);\n    return convolution([amount * -2.0, -amount, 0.0, -amount, 1.0, amount, 0.0, amount, amount * 2.0]);\n  }\n  function gaussianBlur() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    var C = amount / 100;\n    return convolution(weight([1, 2, 1, 2, 4, 2, 1, 2, 1], 1 / 16 * C));\n  }\n  function gaussianBlur5x() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    var C = amount / 100;\n    return convolution(weight([1, 4, 6, 4, 1, 4, 16, 24, 16, 4, 6, 24, 36, 24, 6, 4, 16, 24, 16, 4, 1, 4, 6, 4, 1], 1 / 256 * C));\n  }\n  function grayscale2() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([0.3, 0.3, 0.3, 0, 0, 0.59, 0.59, 0.59, 0, 0, 0.11, 0.11, 0.11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], amount / 100));\n  }\n  function identity() {\n    return convolution([0, 0, 0, 0, 1, 0, 0, 0, 0]);\n  }\n  function kirschHorizontal() {\n    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    count = parseParamNumber(count);\n    return convolution([5, 5, 5, -3, 0, -3, -3, -3, -3]);\n  }\n  function kirschVertical() {\n    var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;\n    count = parseParamNumber(count);\n    return convolution([5, -3, -3, 5, 0, -3, 5, -3, -3]);\n  }\n  function laplacian() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([-1, -1, -1, -1, 8, -1, -1, -1, -1], amount / 100));\n  }\n  function laplacian5x() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 24, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1], amount / 100));\n  }\n  function motionBlur() {\n    return convolution(weight([1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], 1 / 9));\n  }\n  function motionBlur2() {\n    return convolution(weight([1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1], 1 / 9));\n  }\n  function motionBlur3() {\n    return convolution(weight([1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1], 1 / 9));\n  }\n  function negative() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([-1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1], amount / 100));\n  }\n  function sepia2() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([0.393, 0.349, 0.272, 0, 0, 0.769, 0.686, 0.534, 0, 0, 0.189, 0.168, 0.131, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], amount / 100));\n  }\n  function sharpen() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([0, -1, 0, -1, 5, -1, 0, -1, 0], amount / 100));\n  }\n  function sobelHorizontal() {\n    return convolution([-1, -2, -1, 0, 0, 0, 1, 2, 1]);\n  }\n  function sobelVertical() {\n    return convolution([-1, 0, 1, -2, 0, 2, -1, 0, 1]);\n  }\n\n  /*\n  \n  StackBlur - a fast almost Gaussian Blur For Canvas\n  \n  Version: \t0.5\n  Author:\t\tMario Klingemann\n  Contact: \tmario@quasimondo.com\n  Website:\thttp://www.quasimondo.com/StackBlurForCanvas\n  Twitter:\t@quasimondo\n  \n  In case you find this class useful - especially in commercial projects -\n  I am not totally unhappy for a small donation to my PayPal account\n  mario@quasimondo.de\n  \n  Or support me on flattr: \n  https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript\n  \n  Copyright (c) 2010 Mario Klingemann\n  \n  Permission is hereby granted, free of charge, to any person\n  obtaining a copy of this software and associated documentation\n  files (the \"Software\"), to deal in the Software without\n  restriction, including without limitation the rights to use,\n  copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the\n  Software is furnished to do so, subject to the following\n  conditions:\n  \n  The above copyright notice and this permission notice shall be\n  included in all copies or substantial portions of the Software.\n  \n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n  OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n  WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n  OTHER DEALINGS IN THE SOFTWARE.\n  */\n\n  var mul_table = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];\n  var shg_table = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];\n  function BlurStack() {\n    this.r = 0;\n    this.g = 0;\n    this.b = 0;\n    this.a = 0;\n    this.next = null;\n  }\n  function stackBlurImage(bitmap, radius, blurAlphaChannel) {\n    if (blurAlphaChannel) return stackBlurCanvasRGBA(bitmap, 0, 0, radius);else return stackBlurCanvasRGB(bitmap, 0, 0, radius);\n  }\n  function stackBlurCanvasRGBA(bitmap, top_x, top_y, radius) {\n    if (isNaN(radius) || radius < 1) return bitmap;\n    radius |= 0;\n    var pixels = bitmap.pixels,\n      width = bitmap.width,\n      height = bitmap.height;\n    var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;\n    var div = radius + radius + 1;\n    var widthMinus1 = width - 1;\n    var heightMinus1 = height - 1;\n    var radiusPlus1 = radius + 1;\n    var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;\n    var stackStart = new BlurStack();\n    var stack = stackStart;\n    for (i = 1; i < div; i++) {\n      stack = stack.next = new BlurStack();\n      if (i == radiusPlus1) var stackEnd = stack;\n    }\n    stack.next = stackStart;\n    var stackIn = null;\n    var stackOut = null;\n    yw = yi = 0;\n    var mul_sum = mul_table[radius];\n    var shg_sum = shg_table[radius];\n    for (y = 0; y < height; y++) {\n      r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;\n      r_out_sum = radiusPlus1 * (pr = pixels[yi]);\n      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);\n      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);\n      a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);\n      r_sum += sumFactor * pr;\n      g_sum += sumFactor * pg;\n      b_sum += sumFactor * pb;\n      a_sum += sumFactor * pa;\n      stack = stackStart;\n      for (i = 0; i < radiusPlus1; i++) {\n        stack.r = pr;\n        stack.g = pg;\n        stack.b = pb;\n        stack.a = pa;\n        stack = stack.next;\n      }\n      for (i = 1; i < radiusPlus1; i++) {\n        p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);\n        r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);\n        g_sum += (stack.g = pg = pixels[p + 1]) * rbs;\n        b_sum += (stack.b = pb = pixels[p + 2]) * rbs;\n        a_sum += (stack.a = pa = pixels[p + 3]) * rbs;\n        r_in_sum += pr;\n        g_in_sum += pg;\n        b_in_sum += pb;\n        a_in_sum += pa;\n        stack = stack.next;\n      }\n      stackIn = stackStart;\n      stackOut = stackEnd;\n      for (x = 0; x < width; x++) {\n        pixels[yi + 3] = pa = a_sum * mul_sum >> shg_sum;\n        if (pa != 0) {\n          pa = 255 / pa;\n          pixels[yi] = (r_sum * mul_sum >> shg_sum) * pa;\n          pixels[yi + 1] = (g_sum * mul_sum >> shg_sum) * pa;\n          pixels[yi + 2] = (b_sum * mul_sum >> shg_sum) * pa;\n        } else {\n          pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;\n        }\n        r_sum -= r_out_sum;\n        g_sum -= g_out_sum;\n        b_sum -= b_out_sum;\n        a_sum -= a_out_sum;\n        r_out_sum -= stackIn.r;\n        g_out_sum -= stackIn.g;\n        b_out_sum -= stackIn.b;\n        a_out_sum -= stackIn.a;\n        p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;\n        r_in_sum += stackIn.r = pixels[p];\n        g_in_sum += stackIn.g = pixels[p + 1];\n        b_in_sum += stackIn.b = pixels[p + 2];\n        a_in_sum += stackIn.a = pixels[p + 3];\n        r_sum += r_in_sum;\n        g_sum += g_in_sum;\n        b_sum += b_in_sum;\n        a_sum += a_in_sum;\n        stackIn = stackIn.next;\n        r_out_sum += pr = stackOut.r;\n        g_out_sum += pg = stackOut.g;\n        b_out_sum += pb = stackOut.b;\n        a_out_sum += pa = stackOut.a;\n        r_in_sum -= pr;\n        g_in_sum -= pg;\n        b_in_sum -= pb;\n        a_in_sum -= pa;\n        stackOut = stackOut.next;\n        yi += 4;\n      }\n      yw += width;\n    }\n    for (x = 0; x < width; x++) {\n      g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;\n      yi = x << 2;\n      r_out_sum = radiusPlus1 * (pr = pixels[yi]);\n      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);\n      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);\n      a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);\n      r_sum += sumFactor * pr;\n      g_sum += sumFactor * pg;\n      b_sum += sumFactor * pb;\n      a_sum += sumFactor * pa;\n      stack = stackStart;\n      for (i = 0; i < radiusPlus1; i++) {\n        stack.r = pr;\n        stack.g = pg;\n        stack.b = pb;\n        stack.a = pa;\n        stack = stack.next;\n      }\n      yp = width;\n      for (i = 1; i <= radius; i++) {\n        yi = yp + x << 2;\n        r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);\n        g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;\n        b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;\n        a_sum += (stack.a = pa = pixels[yi + 3]) * rbs;\n        r_in_sum += pr;\n        g_in_sum += pg;\n        b_in_sum += pb;\n        a_in_sum += pa;\n        stack = stack.next;\n        if (i < heightMinus1) {\n          yp += width;\n        }\n      }\n      yi = x;\n      stackIn = stackStart;\n      stackOut = stackEnd;\n      for (y = 0; y < height; y++) {\n        p = yi << 2;\n        pixels[p + 3] = pa = a_sum * mul_sum >> shg_sum;\n        if (pa > 0) {\n          pa = 255 / pa;\n          pixels[p] = (r_sum * mul_sum >> shg_sum) * pa;\n          pixels[p + 1] = (g_sum * mul_sum >> shg_sum) * pa;\n          pixels[p + 2] = (b_sum * mul_sum >> shg_sum) * pa;\n        } else {\n          pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;\n        }\n        r_sum -= r_out_sum;\n        g_sum -= g_out_sum;\n        b_sum -= b_out_sum;\n        a_sum -= a_out_sum;\n        r_out_sum -= stackIn.r;\n        g_out_sum -= stackIn.g;\n        b_out_sum -= stackIn.b;\n        a_out_sum -= stackIn.a;\n        p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;\n        r_sum += r_in_sum += stackIn.r = pixels[p];\n        g_sum += g_in_sum += stackIn.g = pixels[p + 1];\n        b_sum += b_in_sum += stackIn.b = pixels[p + 2];\n        a_sum += a_in_sum += stackIn.a = pixels[p + 3];\n        stackIn = stackIn.next;\n        r_out_sum += pr = stackOut.r;\n        g_out_sum += pg = stackOut.g;\n        b_out_sum += pb = stackOut.b;\n        a_out_sum += pa = stackOut.a;\n        r_in_sum -= pr;\n        g_in_sum -= pg;\n        b_in_sum -= pb;\n        a_in_sum -= pa;\n        stackOut = stackOut.next;\n        yi += width;\n      }\n    }\n    return bitmap;\n  }\n  function stackBlurCanvasRGBA(bitmap, top_x, top_y, radius) {\n    if (isNaN(radius) || radius < 1) return bitmap;\n    radius |= 0;\n    var pixels = bitmap.pixels,\n      width = bitmap.width,\n      height = bitmap.height;\n    var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, r_out_sum, g_out_sum, b_out_sum, r_in_sum, g_in_sum, b_in_sum, pr, pg, pb, rbs;\n    var div = radius + radius + 1;\n    var widthMinus1 = width - 1;\n    var heightMinus1 = height - 1;\n    var radiusPlus1 = radius + 1;\n    var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;\n    var stackStart = new BlurStack();\n    var stack = stackStart;\n    for (i = 1; i < div; i++) {\n      stack = stack.next = new BlurStack();\n      if (i == radiusPlus1) var stackEnd = stack;\n    }\n    stack.next = stackStart;\n    var stackIn = null;\n    var stackOut = null;\n    yw = yi = 0;\n    var mul_sum = mul_table[radius];\n    var shg_sum = shg_table[radius];\n    for (y = 0; y < height; y++) {\n      r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;\n      r_out_sum = radiusPlus1 * (pr = pixels[yi]);\n      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);\n      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);\n      r_sum += sumFactor * pr;\n      g_sum += sumFactor * pg;\n      b_sum += sumFactor * pb;\n      stack = stackStart;\n      for (i = 0; i < radiusPlus1; i++) {\n        stack.r = pr;\n        stack.g = pg;\n        stack.b = pb;\n        stack = stack.next;\n      }\n      for (i = 1; i < radiusPlus1; i++) {\n        p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);\n        r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);\n        g_sum += (stack.g = pg = pixels[p + 1]) * rbs;\n        b_sum += (stack.b = pb = pixels[p + 2]) * rbs;\n        r_in_sum += pr;\n        g_in_sum += pg;\n        b_in_sum += pb;\n        stack = stack.next;\n      }\n      stackIn = stackStart;\n      stackOut = stackEnd;\n      for (x = 0; x < width; x++) {\n        pixels[yi] = r_sum * mul_sum >> shg_sum;\n        pixels[yi + 1] = g_sum * mul_sum >> shg_sum;\n        pixels[yi + 2] = b_sum * mul_sum >> shg_sum;\n        r_sum -= r_out_sum;\n        g_sum -= g_out_sum;\n        b_sum -= b_out_sum;\n        r_out_sum -= stackIn.r;\n        g_out_sum -= stackIn.g;\n        b_out_sum -= stackIn.b;\n        p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;\n        r_in_sum += stackIn.r = pixels[p];\n        g_in_sum += stackIn.g = pixels[p + 1];\n        b_in_sum += stackIn.b = pixels[p + 2];\n        r_sum += r_in_sum;\n        g_sum += g_in_sum;\n        b_sum += b_in_sum;\n        stackIn = stackIn.next;\n        r_out_sum += pr = stackOut.r;\n        g_out_sum += pg = stackOut.g;\n        b_out_sum += pb = stackOut.b;\n        r_in_sum -= pr;\n        g_in_sum -= pg;\n        b_in_sum -= pb;\n        stackOut = stackOut.next;\n        yi += 4;\n      }\n      yw += width;\n    }\n    for (x = 0; x < width; x++) {\n      g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;\n      yi = x << 2;\n      r_out_sum = radiusPlus1 * (pr = pixels[yi]);\n      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);\n      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);\n      r_sum += sumFactor * pr;\n      g_sum += sumFactor * pg;\n      b_sum += sumFactor * pb;\n      stack = stackStart;\n      for (i = 0; i < radiusPlus1; i++) {\n        stack.r = pr;\n        stack.g = pg;\n        stack.b = pb;\n        stack = stack.next;\n      }\n      yp = width;\n      for (i = 1; i <= radius; i++) {\n        yi = yp + x << 2;\n        r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);\n        g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;\n        b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;\n        r_in_sum += pr;\n        g_in_sum += pg;\n        b_in_sum += pb;\n        stack = stack.next;\n        if (i < heightMinus1) {\n          yp += width;\n        }\n      }\n      yi = x;\n      stackIn = stackStart;\n      stackOut = stackEnd;\n      for (y = 0; y < height; y++) {\n        p = yi << 2;\n        pixels[p] = r_sum * mul_sum >> shg_sum;\n        pixels[p + 1] = g_sum * mul_sum >> shg_sum;\n        pixels[p + 2] = b_sum * mul_sum >> shg_sum;\n        r_sum -= r_out_sum;\n        g_sum -= g_out_sum;\n        b_sum -= b_out_sum;\n        r_out_sum -= stackIn.r;\n        g_out_sum -= stackIn.g;\n        b_out_sum -= stackIn.b;\n        p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;\n        r_sum += r_in_sum += stackIn.r = pixels[p];\n        g_sum += g_in_sum += stackIn.g = pixels[p + 1];\n        b_sum += b_in_sum += stackIn.b = pixels[p + 2];\n        stackIn = stackIn.next;\n        r_out_sum += pr = stackOut.r;\n        g_out_sum += pg = stackOut.g;\n        b_out_sum += pb = stackOut.b;\n        r_in_sum -= pr;\n        g_in_sum -= pg;\n        b_in_sum -= pb;\n        stackOut = stackOut.next;\n        yi += width;\n      }\n    }\n    return bitmap;\n  }\n  function stackBlur() {\n    var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;\n    var hasAlphaChannel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n    radius = parseParamNumber(radius);\n    return function (bitmap, done) {\n      var newBitmap = stackBlurImage(bitmap, radius, hasAlphaChannel);\n      done(newBitmap);\n    };\n  }\n  function transparency() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n    amount = parseParamNumber(amount);\n    return convolution(weight([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0.3, 0, 0, 0, 0, 0, 1], amount / 100));\n  }\n  function unsharpMasking() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 256;\n    amount = parseParamNumber(amount);\n    return convolution(weight([1, 4, 6, 4, 1, 4, 16, 24, 16, 4, 6, 24, -476, 24, 6, 4, 16, 24, 16, 4, 1, 4, 6, 4, 1], -1 / amount));\n  }\n  var matrix$1 = {\n    blur: blur,\n    emboss: emboss,\n    gaussianBlur: gaussianBlur,\n    'gaussian-blur': gaussianBlur,\n    gaussianBlur5x: gaussianBlur5x,\n    'gaussian-blur-5x': gaussianBlur5x,\n    grayscale2: grayscale2,\n    normal: identity,\n    kirschHorizontal: kirschHorizontal,\n    'kirsch-horizontal': kirschHorizontal,\n    kirschVertical: kirschVertical,\n    'kirsch-vertical': kirschVertical,\n    laplacian: laplacian,\n    laplacian5x: laplacian5x,\n    'laplacian-5x': laplacian5x,\n    motionBlur: motionBlur,\n    'motion-blur': motionBlur,\n    motionBlur2: motionBlur2,\n    'motion-blur-2': motionBlur2,\n    motionBlur3: motionBlur3,\n    'motion-blur-3': motionBlur3,\n    negative: negative,\n    sepia2: sepia2,\n    sharpen: sharpen,\n    sobelHorizontal: sobelHorizontal,\n    'sobel-horizontal': sobelHorizontal,\n    sobelVertical: sobelVertical,\n    'sobel-vertical': sobelVertical,\n    stackBlur: stackBlur,\n    'stack-blur': stackBlur,\n    transparency: transparency,\n    unsharpMasking: unsharpMasking,\n    'unsharp-masking': unsharpMasking\n  };\n  function kirsch() {\n    return filter('kirsch-horizontal kirsch-vertical');\n  }\n  function sobel() {\n    return filter('sobel-horizontal sobel-vertical');\n  }\n  function vintage() {\n    return filter('brightness(15) saturation(-20) gamma(1.8)');\n  }\n  var multi$1 = {\n    kirsch: kirsch,\n    sobel: sobel,\n    vintage: vintage\n  };\n  var ImageFilter$1 = _extends({}, image$1, pixel$1, matrix$1, multi$1);\n  var _functions;\n  var makeId = 0;\n  var functions = (_functions = {\n    partial: partial,\n    multi: multi,\n    merge: merge,\n    weight: weight,\n    repeat: repeat$1,\n    colorMatrix: colorMatrix,\n    each: each$1,\n    eachXY: eachXY,\n    createRandomCount: createRandomCount,\n    createRandRange: createRandRange,\n    createBitmap: createBitmap,\n    createBlurMatrix: createBlurMatrix,\n    pack: pack$1,\n    packXY: packXY,\n    pixel: pixel,\n    getBitmap: getBitmap,\n    putBitmap: putBitmap,\n    radian: radian,\n    convolution: convolution,\n    parseParamNumber: parseParamNumber,\n    filter: filter,\n    clamp: clamp$1,\n    fillColor: fillColor,\n    fillPixelColor: fillPixelColor\n  }, defineProperty(_functions, 'multi', multi), defineProperty(_functions, 'merge', merge), defineProperty(_functions, 'matches', matches$1), defineProperty(_functions, 'parseFilter', parseFilter), defineProperty(_functions, 'partial', partial), _functions);\n  var LocalFilter = functions;\n  function weight(arr) {\n    var num = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n    return arr.map(function (i) {\n      return i * num;\n    });\n  }\n  function repeat$1(value, num) {\n    var arr = new Array(num);\n    for (var i = 0; i < num; i++) {\n      arr[i] = value;\n    }\n    return arr;\n  }\n  function colorMatrix(pixels, i, matrix) {\n    var r = pixels[i],\n      g = pixels[i + 1],\n      b = pixels[i + 2],\n      a = pixels[i + 3];\n    fillColor(pixels, i, matrix[0] * r + matrix[1] * g + matrix[2] * b + matrix[3] * a, matrix[4] * r + matrix[5] * g + matrix[6] * b + matrix[7] * a, matrix[8] * r + matrix[9] * g + matrix[10] * b + matrix[11] * a, matrix[12] * r + matrix[13] * g + matrix[14] * b + matrix[15] * a);\n  }\n  function makeFilter(filter) {\n    if (typeof filter == 'function') {\n      return filter;\n    }\n    if (typeof filter == 'string') {\n      filter = [filter];\n    }\n    filter = filter.slice(0);\n    var filterName = filter.shift();\n    if (typeof filterName == 'function') {\n      return filterName;\n    }\n    var params = filter;\n    var filterFunction = ImageFilter$1[filterName] || LocalFilter[filterName];\n    if (!filterFunction) {\n      throw new Error(filterName + ' is not filter. please check filter name.');\n    }\n    return filterFunction.apply(filterFunction, params);\n  }\n  function forLoop(max) {\n    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n    var callback = arguments[3];\n    var done = arguments[4];\n    var functionDumpCount = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 10000;\n    var frameTimer = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'full';\n    var loopCount = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 50;\n    var runIndex = index;\n    var timer = function timer(callback) {\n      setTimeout(callback, 0);\n    };\n    if (frameTimer == 'requestAnimationFrame') {\n      timer = requestAnimationFrame;\n      functionDumpCount = 1000;\n    }\n    if (frameTimer == 'full') {\n      /* only for loop  */\n      timer = null;\n      functionDumpCount = max;\n    }\n    function makeFunction() {\n      var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;\n      var arr = [].concat(toConsumableArray(Array(count)));\n      var functionStrings = arr.map(function (countIndex) {\n        return 'cri = ri + i * s; if (cri >= mx) return {currentRunIndex: cri, i: null}; c(cri); i++;';\n      }).join('\\n');\n      var smallLoopFunction = new Function('ri', 'i', 's', 'mx', 'c', '\\n            let cri = ri;\\n            \\n            ' + functionStrings + '\\n            \\n            return {currentRunIndex: cri, i: i} \\n        ');\n      return smallLoopFunction;\n    }\n    function runCallback() {\n      var smallLoopFunction = makeFunction(loopCount); // loop is call  20 callbacks at once \n\n      var currentRunIndex = runIndex;\n      var ret = {};\n      var i = 0;\n      while (i < functionDumpCount) {\n        ret = smallLoopFunction(runIndex, i, step, max, callback);\n        if (ret.i == null) {\n          currentRunIndex = ret.currentRunIndex;\n          break;\n        }\n        i = ret.i;\n        currentRunIndex = ret.currentRunIndex;\n      }\n      nextCallback(currentRunIndex);\n    }\n    function nextCallback(currentRunIndex) {\n      if (currentRunIndex) {\n        runIndex = currentRunIndex;\n      } else {\n        runIndex += step;\n      }\n      if (runIndex >= max) {\n        done();\n        return;\n      }\n      if (timer) timer(runCallback);else runCallback();\n    }\n    runCallback();\n  }\n  function each$1(len, callback, done) {\n    var opt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n    forLoop(len, 0, 4, function (i) {\n      callback(i, i >> 2 /* xyIndex */);\n    }, function () {\n      done();\n    }, opt.functionDumpCount, opt.frameTimer, opt.loopCount);\n  }\n  function eachXY(len, width, callback, done) {\n    var opt = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};\n    forLoop(len, 0, 4, function (i) {\n      var xyIndex = i >> 2;\n      callback(i, xyIndex % width, Math.floor(xyIndex / width));\n    }, function () {\n      done();\n    }, opt.functionDumpCount, opt.frameTimer, opt.loopCount);\n  }\n  function createRandRange(min, max, count) {\n    var result = [];\n    for (var i = 1; i <= count; i++) {\n      var num = Math.random() * (max - min) + min;\n      var sign = Math.floor(Math.random() * 10) % 2 == 0 ? -1 : 1;\n      result.push(sign * num);\n    }\n    result.sort();\n    var centerIndex = Math.floor(count >> 1);\n    var a = result[centerIndex];\n    result[centerIndex] = result[0];\n    result[0] = a;\n    return result;\n  }\n  function createRandomCount() {\n    return [3 * 3, 4 * 4, 5 * 5, 6 * 6, 7 * 7, 8 * 8, 9 * 9, 10 * 10].sort(function (a, b) {\n      return 0.5 - Math.random();\n    })[0];\n  }\n  function createBitmap(length, width, height) {\n    return {\n      pixels: new Uint8ClampedArray(length),\n      width: width,\n      height: height\n    };\n  }\n  function putPixel(dstBitmap, srcBitmap, startX, startY) {\n    var len = srcBitmap.pixels.length / 4;\n    var dstX = 0,\n      dstY = 0,\n      x = 0,\n      y = 0,\n      srcIndex = 0,\n      dstIndex = 0;\n    for (var i = 0; i < len; i++) {\n      x = i % srcBitmap.width, y = Math.floor(i / srcBitmap.width);\n      dstX = startX + x;\n      dstY = startY + y;\n      if (dstX > dstBitmap.width) continue;\n      if (dstY > dstBitmap.height) continue;\n      srcIndex = y * srcBitmap.width + x << 2;\n      dstIndex = dstY * dstBitmap.width + dstX << 2;\n      dstBitmap.pixels[dstIndex] = srcBitmap.pixels[srcIndex];\n      dstBitmap.pixels[dstIndex + 1] = srcBitmap.pixels[srcIndex + 1];\n      dstBitmap.pixels[dstIndex + 2] = srcBitmap.pixels[srcIndex + 2];\n      dstBitmap.pixels[dstIndex + 3] = srcBitmap.pixels[srcIndex + 3];\n    }\n  }\n  function getPixel(srcBitmap, dstBitmap, startX, startY) {\n    var len = dstBitmap.pixels.length >> 2;\n    var srcX = 0,\n      srcY = 0,\n      x = 0,\n      y = 0,\n      srcIndex = 0,\n      dstIndex = 0;\n    for (var i = 0; i < len; i++) {\n      var x = i % dstBitmap.width,\n        y = Math.floor(i / dstBitmap.width);\n      srcX = startX + x;\n      srcY = startY + y;\n      if (srcX > srcBitmap.width) continue;\n      if (srcY > srcBitmap.height) continue;\n      srcIndex = srcY * srcBitmap.width + srcX << 2;\n      dstIndex = y * dstBitmap.width + x << 2;\n      dstBitmap.pixels[dstIndex] = srcBitmap.pixels[srcIndex];\n      dstBitmap.pixels[dstIndex + 1] = srcBitmap.pixels[srcIndex + 1];\n      dstBitmap.pixels[dstIndex + 2] = srcBitmap.pixels[srcIndex + 2];\n      dstBitmap.pixels[dstIndex + 3] = srcBitmap.pixels[srcIndex + 3];\n    }\n  }\n  function cloneBitmap(bitmap) {\n    var padding = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n    var width = bitmap.width + padding;\n    var height = bitmap.height + padding;\n    var newBitmap = {\n      pixels: new Uint8ClampedArray(width * height * 4),\n      width: width,\n      height: height\n    };\n    return newBitmap;\n  }\n  function getBitmap(bitmap, area) {\n    return Canvas.getBitmap(bitmap, area);\n  }\n  function putBitmap(bitmap, subBitmap, area) {\n    return Canvas.putBitmap(bitmap, subBitmap, area);\n  }\n  function parseParamNumber(param) {\n    if (typeof param === 'string') {\n      param = param.replace(/deg/, '');\n      param = param.replace(/px/, '');\n    }\n    return +param;\n  }\n  var filter_regexp = /(([\\w_\\-]+)(\\(([^\\)]*)\\))?)+/gi;\n  function pack$1(callback) {\n    return function (bitmap, done) {\n      each$1(bitmap.pixels.length, function (i, xyIndex) {\n        callback(bitmap.pixels, i, xyIndex, bitmap.pixels[i], bitmap.pixels[i + 1], bitmap.pixels[i + 2], bitmap.pixels[i + 3]);\n      }, function () {\n        done(bitmap);\n      });\n    };\n  }\n  function makePrebuildUserFilterList(arr) {\n    var codeString = arr.map(function (it) {\n      return ' \\n            ' + it.userFunction.$preContext + '\\n\\n            ' + it.userFunction.$preCallbackString + '\\n\\n            $r = clamp($r); $g = clamp($g); $b = clamp($b); $a = clamp($a);\\n        ';\n    }).join('\\n\\n');\n    var rootContextObject = {\n      clamp: clamp$1,\n      Color: Color$1\n    };\n    arr.forEach(function (it) {\n      Object.assign(rootContextObject, it.userFunction.rootContextObject);\n    });\n    var rootContextDefine = 'const ' + Object.keys(rootContextObject).map(function (key) {\n      return ' ' + key + ' = $rc.' + key + ' ';\n    }).join(',');\n    var FunctionCode = ' \\n    let $r = $p[$pi], $g = $p[$pi+1], $b = $p[$pi+2], $a = $p[$pi+3];\\n    \\n    ' + rootContextDefine + '\\n\\n    ' + codeString + '\\n    \\n    $p[$pi] = $r; $p[$pi+1] = $g; $p[$pi+2] = $b; $p[$pi+3] = $a;\\n    ';\n    var userFunction = new Function('$p', '$pi', '$rc', FunctionCode);\n    return function ($pixels, $pixelIndex) {\n      userFunction($pixels, $pixelIndex, rootContextObject);\n    };\n  }\n  function makeUserFilterFunctionList(arr) {\n    var rootContextObject = {};\n    var list = arr.map(function (it) {\n      var newKeys = [];\n      Object.keys(it.context).forEach(function (key, i) {\n        newKeys[key] = 'n$' + makeId++ + key + '$';\n      });\n      Object.keys(it.rootContext).forEach(function (key, i) {\n        newKeys[key] = 'r$' + makeId++ + key + '$';\n        rootContextObject[newKeys[key]] = it.rootContext[key];\n      });\n      var preContext = Object.keys(it.context).filter(function (key) {\n        if (typeof it.context[key] === 'number' || typeof it.context[key] === 'string') {\n          return false;\n        } else if (Array.isArray(it.context[key])) {\n          if (typeof it.context[key][0] == 'number' || typeof it.context[key][0] == 'string') {\n            return false;\n          }\n        }\n        return true;\n      }).map(function (key, i) {\n        return [newKeys[key], JSON.stringify(it.context[key])].join(' = ');\n      });\n      var preCallbackString = it.callback;\n      if (typeof it.callback === 'function') {\n        preCallbackString = it.callback.toString().split(\"{\");\n        preCallbackString.shift();\n        preCallbackString = preCallbackString.join(\"{\");\n        preCallbackString = preCallbackString.split(\"}\");\n        preCallbackString.pop();\n        preCallbackString = preCallbackString.join(\"}\");\n      }\n      Object.keys(newKeys).forEach(function (key) {\n        var newKey = newKeys[key];\n        if (typeof it.context[key] === 'number' || typeof it.context[key] === 'string') {\n          preCallbackString = preCallbackString.replace(new RegExp(\"\\\\\" + key, \"g\"), it.context[key]);\n        } else if (Array.isArray(it.context[key])) {\n          if (typeof it.context[key][0] == 'number' || typeof it.context[key][0] == 'string') {\n            it.context[key].forEach(function (item, index) {\n              preCallbackString = preCallbackString.replace(new RegExp(\"\\\\\" + key + '\\\\[' + index + '\\\\]', \"g\"), item);\n            });\n          } else {\n            preCallbackString = preCallbackString.replace(new RegExp(\"\\\\\" + key, \"g\"), newKey);\n          }\n        } else {\n          preCallbackString = preCallbackString.replace(new RegExp(\"\\\\\" + key, \"g\"), newKey);\n        }\n      });\n      return {\n        preCallbackString: preCallbackString,\n        preContext: preContext\n      };\n    });\n    var preContext = list.map(function (it, i) {\n      return it.preContext.length ? 'const ' + it.preContext + ';' : \"\";\n    }).join('\\n\\n');\n    var preCallbackString = list.map(function (it) {\n      return it.preCallbackString;\n    }).join('\\n\\n');\n    var FunctionCode = ' \\n    let $r = $pixels[$pixelIndex], $g = $pixels[$pixelIndex+1], $b = $pixels[$pixelIndex+2], $a = $pixels[$pixelIndex+3];\\n\\n    ' + preContext + '\\n\\n    ' + preCallbackString + '\\n    \\n    $pixels[$pixelIndex] = $r\\n    $pixels[$pixelIndex+1] = $g \\n    $pixels[$pixelIndex+2] = $b   \\n    $pixels[$pixelIndex+3] = $a   \\n    ';\n    var userFunction = new Function('$pixels', '$pixelIndex', '$clamp', '$Color', FunctionCode);\n    userFunction.$preCallbackString = preCallbackString;\n    userFunction.$preContext = preContext;\n    userFunction.rootContextObject = rootContextObject;\n    return userFunction;\n  }\n  function makeUserFilterFunction(callback) {\n    var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    var rootContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n    return makeUserFilterFunctionList([{\n      callback: callback,\n      context: context,\n      rootContext: rootContext\n    }]);\n  }\n  function pixel(callback) {\n    var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n    var rootContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n    var userFunction = makeUserFilterFunction(callback, context, rootContext);\n    var returnCallback = function returnCallback(bitmap, done) {};\n    returnCallback.userFunction = userFunction;\n    return returnCallback;\n  }\n  var ColorListIndex = [0, 1, 2, 3];\n  function swapColor(pixels, startIndex, endIndex) {\n    ColorListIndex.forEach(function (i) {\n      var temp = pixels[startIndex + i];\n      pixels[startIndex + i] = pixels[endIndex + i];\n      pixels[endIndex + i] = temp;\n    });\n  }\n  function packXY(callback) {\n    return function (bitmap, done) {\n      var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n      eachXY(bitmap.pixels.length, bitmap.width, function (i, x, y) {\n        callback(bitmap.pixels, i, x, y);\n      }, function () {\n        done(bitmap);\n      }, opt);\n    };\n  }\n  function radian(degree) {\n    return Matrix.CONSTANT.radian(degree);\n  }\n  function createBlurMatrix() {\n    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;\n    var count = Math.pow(amount, 2);\n    var value = 1 / count;\n    return repeat$1(value, count);\n  }\n  function fillColor(pixels, i, r, g, b, a) {\n    if (arguments.length == 3) {\n      var _arguments$ = arguments[2],\n        r = _arguments$.r,\n        g = _arguments$.g,\n        b = _arguments$.b,\n        a = _arguments$.a;\n    }\n    if (typeof r == 'number') {\n      pixels[i] = r;\n    }\n    if (typeof g == 'number') {\n      pixels[i + 1] = g;\n    }\n    if (typeof b == 'number') {\n      pixels[i + 2] = b;\n    }\n    if (typeof a == 'number') {\n      pixels[i + 3] = a;\n    }\n  }\n  function fillPixelColor(targetPixels, targetIndex, sourcePixels, sourceIndex) {\n    fillColor(targetPixels, targetIndex, sourcePixels[sourceIndex], sourcePixels[sourceIndex + 1], sourcePixels[sourceIndex + 2], sourcePixels[sourceIndex + 3]);\n  }\n  function createWeightTable(weights) {\n    var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 255;\n    var weightTable = [];\n    weightTable = weights.map(function (w, i) {\n      return [];\n    });\n    weights.forEach(function (w, i) {\n      if (w != 0) {\n        var data = weightTable[i];\n        for (var i = min; i <= max; i++) {\n          data[i] = w * i;\n        }\n      }\n    });\n    return weightTable;\n  }\n  function createSubPixelWeightFunction(weights, weightTable, width, height, opaque) {\n    var side = Math.round(Math.sqrt(weights.length));\n    var halfSide = Math.floor(side / 2);\n    var alphaFac = opaque ? 1 : 0;\n    var FunctionCode = 'let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ';\n    var R = [];\n    var G = [];\n    var B = [];\n    var A = [];\n    weights.forEach(function (wt, index) {\n      var cy = Math.floor(index / side);\n      var cx = index % side;\n      var distY = cy - halfSide;\n      var distX = cx - halfSide;\n      if (wt == 0) {\n        return;\n      }\n      R.push('$t[' + index + '][$sp[(($sy + (' + distY + ')) * ' + width + ' + ($sx + (' + distX + '))) * 4]]');\n      G.push('$t[' + index + '][$sp[(($sy + (' + distY + ')) * ' + width + ' + ($sx + (' + distX + '))) * 4 + 1]]');\n      B.push('$t[' + index + '][$sp[(($sy + (' + distY + ')) * ' + width + ' + ($sx + (' + distX + '))) * 4 + 2]]');\n      A.push('$t[' + index + '][$sp[(($sy + (' + distY + ')) * ' + width + ' + ($sx + (' + distX + '))) * 4 + 3]]');\n    });\n    FunctionCode += 'r = ' + R.join(' + ') + '; g = ' + G.join(' + ') + '; b = ' + B.join(' + ') + '; a = ' + A.join(' + ') + ';';\n    FunctionCode += '$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + (' + alphaFac + ')*(255-a); ';\n\n    // console.log(FunctionCode)\n\n    var subPixelFunction = new Function('$dp', '$sp', '$di', '$sx', '$sy', '$t', FunctionCode);\n    return function ($dp, $sp, $di, $sx, $sy) {\n      subPixelFunction($dp, $sp, $di, $sx, $sy, weightTable);\n    };\n  }\n  function convolution(weights) {\n    var opaque = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n    var weightTable = createWeightTable(weights);\n    return function (bitmap, done) {\n      var side = Math.round(Math.sqrt(weights.length));\n      var padding = side * 2;\n\n      // 원본 크기를 늘림 \n      var sourceBitmap = cloneBitmap(bitmap, padding);\n\n      // 원본 데이타 복사 \n      putPixel(sourceBitmap, bitmap, side, side);\n\n      // 최종 아웃풋 \n      var newBitmap = createBitmap(sourceBitmap.pixels.length, sourceBitmap.width, sourceBitmap.height);\n\n      // 마지막 원본 아웃풋 \n      var returnBitmap = createBitmap(bitmap.pixels.length, bitmap.width, bitmap.height);\n      var subPixelWeightFunction = createSubPixelWeightFunction(weights, weightTable, sourceBitmap.width, sourceBitmap.height, opaque);\n      var len = bitmap.pixels.length / 4;\n      for (var i = 0; i < len; i++) {\n        var xyIndex = i,\n          x = xyIndex % bitmap.width + side,\n          y = Math.floor(xyIndex / bitmap.width) + side;\n        subPixelWeightFunction(newBitmap.pixels, sourceBitmap.pixels, (y * sourceBitmap.width + x) * 4, x, y);\n      }\n      getPixel(newBitmap, returnBitmap, side, side);\n      done(returnBitmap);\n    };\n  }\n  function matches$1(str) {\n    var ret = Color$1.convertMatches(str);\n    var matches = ret.str.match(filter_regexp);\n    var result = [];\n    if (!matches) {\n      return result;\n    }\n    result = matches.map(function (it) {\n      return {\n        filter: it,\n        origin: Color$1.reverseMatches(it, ret.matches)\n      };\n    });\n    var pos = {\n      next: 0\n    };\n    result = result.map(function (item) {\n      var startIndex = str.indexOf(item.origin, pos.next);\n      item.startIndex = startIndex;\n      item.endIndex = startIndex + item.origin.length;\n      item.arr = parseFilter(item.origin);\n      pos.next = item.endIndex;\n      return item;\n    }).filter(function (it) {\n      if (!it.arr.length) return false;\n      return true;\n    });\n    return result;\n  }\n\n  /**\n   * Filter Parser \n   * \n   * F.parseFilter('blur(30)') == ['blue', '30']\n   * F.parseFilter('gradient(white, black, 3)') == ['gradient', 'white', 'black', '3']\n   * \n   * @param {String} filterString \n   */\n  function parseFilter(filterString) {\n    var ret = Color$1.convertMatches(filterString);\n    var matches = ret.str.match(filter_regexp);\n    if (!matches[0]) {\n      return [];\n    }\n    var arr = matches[0].split('(');\n    var filterName = arr.shift();\n    var filterParams = [];\n    if (arr.length) {\n      filterParams = arr.shift().split(')')[0].split(',').map(function (f) {\n        return Color$1.reverseMatches(f, ret.matches);\n      });\n    }\n    var result = [filterName].concat(toConsumableArray(filterParams)).map(Color$1.trim);\n    return result;\n  }\n  function clamp$1(num) {\n    return Math.min(255, num);\n  }\n  function filter(str) {\n    return merge(matches$1(str).map(function (it) {\n      return it.arr;\n    }));\n  }\n  function makeGroupedFilter() {\n    var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n    var groupedFilter = [];\n    var group = [];\n    for (var i = 0, len = filters.length; i < len; i++) {\n      var f = filters[i];\n      if (f.userFunction) {\n        group.push(f);\n      } else {\n        if (group.length) {\n          groupedFilter.push([].concat(toConsumableArray(group)));\n        }\n        groupedFilter.push(f);\n        group = [];\n      }\n    }\n    if (group.length) {\n      groupedFilter.push([].concat(toConsumableArray(group)));\n    }\n    groupedFilter.forEach(function (filter, index) {\n      if (Array.isArray(filter)) {\n        groupedFilter[index] = function () {\n          var userFunction = makePrebuildUserFilterList(filter);\n          // console.log(userFunction)\n          return function (bitmap, done) {\n            for (var i = 0, len = bitmap.pixels.length; i < len; i += 4) {\n              userFunction(bitmap.pixels, i);\n            }\n            done(bitmap);\n            // forLoop(bitmap.pixels.length, 0, 4, function (i) {\n            //     userFunction(bitmap.pixels, i)\n            // }, function () {\n            //     done(bitmap)\n            // })\n          };\n        }();\n      }\n    });\n    return groupedFilter;\n  }\n\n  /** \n   * \n   * multiply filters\n   * \n   * ImageFilter.multi('blur', 'grayscale', 'sharpen', ['blur', 3], function (bitmap) {  return bitmap });\n   * \n   */\n  function multi() {\n    for (var _len = arguments.length, filters = Array(_len), _key = 0; _key < _len; _key++) {\n      filters[_key] = arguments[_key];\n    }\n    filters = filters.map(function (filter) {\n      return makeFilter(filter);\n    }).filter(function (f) {\n      return f;\n    });\n    filters = makeGroupedFilter(filters);\n    var max = filters.length;\n    return function (bitmap, done) {\n      var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n      var currentBitmap = bitmap;\n      var index = 0;\n      function runFilter() {\n        filters[index].call(null, currentBitmap, function (nextBitmap) {\n          currentBitmap = nextBitmap;\n          nextFilter();\n        }, opt);\n      }\n      function nextFilter() {\n        index++;\n        if (index >= max) {\n          done(currentBitmap);\n          return;\n        }\n        runFilter();\n      }\n      runFilter();\n    };\n  }\n  function merge(filters) {\n    return multi.apply(undefined, toConsumableArray(filters));\n  }\n\n  /**\n   * apply filter into special area\n   * \n   * F.partial({x,y,width,height}, filter, filter, filter )\n   * F.partial({x,y,width,height}, 'filter' )\n   * \n   * @param {{x, y, width, height}} area \n   * @param {*} filters   \n   */\n  function partial(area) {\n    var allFilter = null;\n    for (var _len2 = arguments.length, filters = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n      filters[_key2 - 1] = arguments[_key2];\n    }\n    if (filters.length == 1 && typeof filters[0] === 'string') {\n      allFilter = filter(filters[0]);\n    } else {\n      allFilter = merge(filters);\n    }\n    return function (bitmap, done) {\n      var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n      allFilter(getBitmap(bitmap, area), function (newBitmap) {\n        done(putBitmap(bitmap, newBitmap, area));\n      }, opt);\n    };\n  }\n\n  // TODO: worker run \n  var ImageFilter = _extends({}, ImageFilter$1, functions);\n  var Util = {\n    Color: Color$1,\n    HueColor: HueColor,\n    ColorNames: ColorNames,\n    ImageFilter: ImageFilter,\n    Canvas: Canvas,\n    ImageLoader: ImageLoader\n  };\n  var color = Color$1.color;\n  var counter = 0;\n  var cached = [];\n  var Dom = function () {\n    function Dom(tag, className, attr) {\n      classCallCheck(this, Dom);\n      if (typeof tag != 'string') {\n        this.el = tag;\n      } else {\n        var el = document.createElement(tag);\n        this.uniqId = counter++;\n        if (className) {\n          el.className = className;\n        }\n        attr = attr || {};\n        for (var k in attr) {\n          el.setAttribute(k, attr[k]);\n        }\n        this.el = el;\n      }\n    }\n    createClass(Dom, [{\n      key: 'attr',\n      value: function attr(key, value) {\n        if (arguments.length == 1) {\n          return this.el.getAttribute(key);\n        }\n        this.el.setAttribute(key, value);\n        return this;\n      }\n    }, {\n      key: 'closest',\n      value: function closest(cls) {\n        var temp = this;\n        var checkCls = false;\n        while (!(checkCls = temp.hasClass(cls))) {\n          if (temp.el.parentNode) {\n            temp = new Dom(temp.el.parentNode);\n          } else {\n            return null;\n          }\n        }\n        if (checkCls) {\n          return temp;\n        }\n        return null;\n      }\n    }, {\n      key: 'checked',\n      value: function checked() {\n        return this.el.checked;\n      }\n    }, {\n      key: 'removeClass',\n      value: function removeClass(cls) {\n        this.el.className = (' ' + this.el.className + ' ').replace(' ' + cls + ' ', ' ').trim();\n        return this;\n      }\n    }, {\n      key: 'hasClass',\n      value: function hasClass(cls) {\n        if (!this.el.className) {\n          return false;\n        } else {\n          var newClass = ' ' + this.el.className + ' ';\n          return newClass.indexOf(' ' + cls + ' ') > -1;\n        }\n      }\n    }, {\n      key: 'addClass',\n      value: function addClass(cls) {\n        if (!this.hasClass(cls)) {\n          this.el.className = this.el.className + ' ' + cls;\n        }\n        return this;\n      }\n    }, {\n      key: 'toggleClass',\n      value: function toggleClass(cls) {\n        if (this.hasClass(cls)) {\n          this.removeClass(cls);\n        } else {\n          this.addClass(cls);\n        }\n      }\n    }, {\n      key: 'html',\n      value: function html(_html) {\n        try {\n          if (typeof _html == 'string') {\n            this.el.innerHTML = _html;\n          } else {\n            this.empty().append(_html);\n          }\n        } catch (e) {\n          console.log(_html);\n        }\n        return this;\n      }\n    }, {\n      key: 'find',\n      value: function find(selector) {\n        return this.el.querySelector(selector);\n      }\n    }, {\n      key: '$',\n      value: function $(selector) {\n        return new Dom(this.find(selector));\n      }\n    }, {\n      key: 'findAll',\n      value: function findAll(selector) {\n        return this.el.querySelectorAll(selector);\n      }\n    }, {\n      key: '$$',\n      value: function $$(selector) {\n        return [].concat(toConsumableArray(this.findAll(selector))).map(function (el) {\n          return new Dom(el);\n        });\n      }\n    }, {\n      key: 'empty',\n      value: function empty() {\n        return this.html('');\n      }\n    }, {\n      key: 'append',\n      value: function append(el) {\n        if (typeof el == 'string') {\n          this.el.appendChild(document.createTextNode(el));\n        } else {\n          this.el.appendChild(el.el || el);\n        }\n        return this;\n      }\n    }, {\n      key: 'appendTo',\n      value: function appendTo(target) {\n        var t = target.el ? target.el : target;\n        t.appendChild(this.el);\n        return this;\n      }\n    }, {\n      key: 'remove',\n      value: function remove() {\n        if (this.el.parentNode) {\n          this.el.parentNode.removeChild(this.el);\n        }\n        return this;\n      }\n    }, {\n      key: 'text',\n      value: function text() {\n        return this.el.textContent;\n      }\n    }, {\n      key: 'css',\n      value: function css(key, value) {\n        var _this = this;\n        if (arguments.length == 2) {\n          this.el.style[key] = value;\n        } else if (arguments.length == 1) {\n          if (typeof key == 'string') {\n            return getComputedStyle(this.el)[key];\n          } else {\n            var keys = key || {};\n            Object.keys(keys).forEach(function (k) {\n              _this.el.style[k] = keys[k];\n            });\n          }\n        }\n        return this;\n      }\n    }, {\n      key: 'cssFloat',\n      value: function cssFloat(key) {\n        return parseFloat(this.css(key));\n      }\n    }, {\n      key: 'cssInt',\n      value: function cssInt(key) {\n        return parseInt(this.css(key));\n      }\n    }, {\n      key: 'px',\n      value: function px(key, value) {\n        return this.css(key, value + 'px');\n      }\n    }, {\n      key: 'offset',\n      value: function offset() {\n        var rect = this.el.getBoundingClientRect();\n        return {\n          top: rect.top + Dom.getScrollTop(),\n          left: rect.left + Dom.getScrollLeft()\n        };\n      }\n    }, {\n      key: 'rect',\n      value: function rect() {\n        return this.el.getBoundingClientRect();\n      }\n    }, {\n      key: 'position',\n      value: function position() {\n        if (this.el.style.top) {\n          return {\n            top: parseFloat(this.css('top')),\n            left: parseFloat(this.css('left'))\n          };\n        } else {\n          return this.el.getBoundingClientRect();\n        }\n      }\n    }, {\n      key: 'size',\n      value: function size() {\n        return [this.width(), this.height()];\n      }\n    }, {\n      key: 'width',\n      value: function width() {\n        return this.el.offsetWidth || this.el.getBoundingClientRect().width;\n      }\n    }, {\n      key: 'contentWidth',\n      value: function contentWidth() {\n        return this.width() - this.cssFloat('padding-left') - this.cssFloat('padding-right');\n      }\n    }, {\n      key: 'height',\n      value: function height() {\n        return this.el.offsetHeight || this.el.getBoundingClientRect().height;\n      }\n    }, {\n      key: 'contentHeight',\n      value: function contentHeight() {\n        return this.height() - this.cssFloat('padding-top') - this.cssFloat('padding-bottom');\n      }\n    }, {\n      key: 'dataKey',\n      value: function dataKey(key) {\n        return this.uniqId + '.' + key;\n      }\n    }, {\n      key: 'data',\n      value: function data(key, value) {\n        if (arguments.length == 2) {\n          cached[this.dataKey(key)] = value;\n        } else if (arguments.length == 1) {\n          return cached[this.dataKey(key)];\n        } else {\n          var keys = Object.keys(cached);\n          var uniqId = this.uniqId + \".\";\n          return keys.filter(function (key) {\n            if (key.indexOf(uniqId) == 0) {\n              return true;\n            }\n            return false;\n          }).map(function (value) {\n            return cached[value];\n          });\n        }\n        return this;\n      }\n    }, {\n      key: 'val',\n      value: function val(value) {\n        if (arguments.length == 0) {\n          return this.el.value;\n        } else if (arguments.length == 1) {\n          this.el.value = value;\n        }\n        return this;\n      }\n    }, {\n      key: 'int',\n      value: function _int() {\n        return parseInt(this.val(), 10);\n      }\n    }, {\n      key: 'float',\n      value: function _float() {\n        return parseFloat(this.val());\n      }\n    }, {\n      key: 'show',\n      value: function show() {\n        return this.css('display', 'block');\n      }\n    }, {\n      key: 'hide',\n      value: function hide() {\n        return this.css('display', 'none');\n      }\n    }, {\n      key: 'toggle',\n      value: function toggle() {\n        if (this.css('display') == 'none') {\n          return this.show();\n        } else {\n          return this.hide();\n        }\n      }\n    }, {\n      key: 'scrollTop',\n      value: function scrollTop() {\n        if (this.el === document.body) {\n          return Dom.getScrollTop();\n        }\n        return this.el.scrollTop;\n      }\n    }, {\n      key: 'scrollLeft',\n      value: function scrollLeft() {\n        if (this.el === document.body) {\n          return Dom.getScrollLeft();\n        }\n        return this.el.scrollLeft;\n      }\n    }, {\n      key: 'on',\n      value: function on(eventName, callback, opt1, opt2) {\n        this.el.addEventListener(eventName, callback, opt1, opt2);\n        return this;\n      }\n    }, {\n      key: 'off',\n      value: function off(eventName, callback) {\n        this.el.removeEventListener(eventName, callback);\n        return this;\n      }\n    }, {\n      key: 'getElement',\n      value: function getElement() {\n        return this.el;\n      }\n    }, {\n      key: 'createChild',\n      value: function createChild(tag) {\n        var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';\n        var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n        var css = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n        var $element = new Dom(tag, className, attrs);\n        $element.css(css);\n        this.append($element);\n        return $element;\n      }\n    }, {\n      key: 'firstChild',\n      value: function firstChild() {\n        return new Dom(this.el.firstElementChild);\n      }\n    }, {\n      key: 'replace',\n      value: function replace(oldElement, newElement) {\n        this.el.replaceChild(newElement, oldElement);\n        return this;\n      }\n    }], [{\n      key: 'getScrollTop',\n      value: function getScrollTop() {\n        return Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);\n      }\n    }, {\n      key: 'getScrollLeft',\n      value: function getScrollLeft() {\n        return Math.max(window.pageXOffset, document.documentElement.scrollLeft, document.body.scrollLeft);\n      }\n    }]);\n    return Dom;\n  }();\n  var BaseModule = function () {\n    function BaseModule($store) {\n      classCallCheck(this, BaseModule);\n      this.$store = $store;\n      this.initialize();\n    }\n    createClass(BaseModule, [{\n      key: 'initialize',\n      value: function initialize() {\n        var _this = this;\n        this.filterProps().forEach(function (key) {\n          _this.$store.action(key, _this);\n        });\n      }\n    }, {\n      key: 'filterProps',\n      value: function filterProps() {\n        var pattern = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '/';\n        return Object.getOwnPropertyNames(this.__proto__).filter(function (key) {\n          return key.startsWith(pattern);\n        });\n      }\n    }]);\n    return BaseModule;\n  }();\n  var ColorSetsList = function (_BaseModule) {\n    inherits(ColorSetsList, _BaseModule);\n    function ColorSetsList() {\n      classCallCheck(this, ColorSetsList);\n      return possibleConstructorReturn(this, (ColorSetsList.__proto__ || Object.getPrototypeOf(ColorSetsList)).apply(this, arguments));\n    }\n    createClass(ColorSetsList, [{\n      key: 'initialize',\n      value: function initialize() {\n        get(ColorSetsList.prototype.__proto__ || Object.getPrototypeOf(ColorSetsList.prototype), 'initialize', this).call(this);\n\n        // set property\n        this.$store.colorSetsList = [{\n          name: \"Material\",\n          colors: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],\n          edit: true\n        }, {\n          name: \"Custom\",\n          \"edit\": true,\n          \"colors\": []\n        }, {\n          name: \"Color Scale\",\n          \"scale\": ['red', 'yellow', 'black'],\n          count: 5\n        }];\n        this.$store.currentColorSets = {};\n      }\n    }, {\n      key: '/list',\n      value: function list($store) {\n        return Array.isArray($store.userList) && $store.userList.length ? $store.userList : $store.colorSetsList;\n      }\n    }, {\n      key: '/setUserPalette',\n      value: function setUserPalette($store, list) {\n        $store.userList = list;\n        $store.dispatch('/resetUserPalette');\n        $store.dispatch('/setCurrentColorSets');\n      }\n    }, {\n      key: '/resetUserPalette',\n      value: function resetUserPalette($store) {\n        if ($store.userList && $store.userList.length) {\n          $store.userList = $store.userList.map(function (element, index) {\n            if (typeof element.colors == 'function') {\n              var makeCallback = element.colors;\n              element.colors = makeCallback($store);\n              element._colors = makeCallback;\n            }\n            return Object.assign({\n              name: 'color-' + index,\n              colors: []\n            }, element);\n          });\n          $store.emit('changeUserList');\n        }\n      }\n    }, {\n      key: '/setCurrentColorSets',\n      value: function setCurrentColorSets($store, nameOrIndex) {\n        var _list = $store.dispatch('/list');\n        if (typeof nameOrIndex == 'undefined') {\n          $store.currentColorSets = _list[0];\n        } else if (typeof nameOrIndex == 'number') {\n          $store.currentColorSets = _list[nameOrIndex];\n        } else {\n          $store.currentColorSets = _list.filter(function (obj) {\n            return obj.name == nameOrIndex;\n          })[0];\n        }\n        $store.emit('changeCurrentColorSets');\n      }\n    }, {\n      key: '/getCurrentColorSets',\n      value: function getCurrentColorSets($store) {\n        return $store.currentColorSets;\n      }\n    }, {\n      key: '/addCurrentColor',\n      value: function addCurrentColor($store, color) {\n        if (Array.isArray($store.currentColorSets.colors)) {\n          $store.currentColorSets.colors.push(color);\n          $store.emit('changeCurrentColorSets');\n          $store.emit(\"addCurrentColor\", color);\n        }\n      }\n    }, {\n      key: '/setCurrentColorAll',\n      value: function setCurrentColorAll($store) {\n        var colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n        $store.currentColorSets.colors = colors;\n        $store.emit('changeCurrentColorSets');\n      }\n    }, {\n      key: '/removeCurrentColor',\n      value: function removeCurrentColor($store, index) {\n        if ($store.currentColorSets.colors[index]) {\n          $store.currentColorSets.colors.splice(index, 1);\n          $store.emit('changeCurrentColorSets');\n        }\n      }\n    }, {\n      key: '/removeCurrentColorToTheRight',\n      value: function removeCurrentColorToTheRight($store, index) {\n        if ($store.currentColorSets.colors[index]) {\n          $store.currentColorSets.colors.splice(index, Number.MAX_VALUE);\n          $store.emit('changeCurrentColorSets');\n        }\n      }\n    }, {\n      key: '/clearPalette',\n      value: function clearPalette($store) {\n        if ($store.currentColorSets.colors) {\n          $store.currentColorSets.colors = [];\n          $store.emit('changeCurrentColorSets');\n        }\n      }\n    }, {\n      key: '/getCurrentColors',\n      value: function getCurrentColors($store) {\n        return $store.dispatch('/getColors', $store.currentColorSets);\n      }\n    }, {\n      key: '/getColors',\n      value: function getColors($store, element) {\n        if (element.scale) {\n          return Color$1.scale(element.scale, element.count);\n        }\n        return element.colors || [];\n      }\n    }, {\n      key: '/getColorSetsList',\n      value: function getColorSetsList($store) {\n        return $store.dispatch('/list').map(function (element) {\n          return {\n            name: element.name,\n            edit: element.edit,\n            colors: $store.dispatch('/getColors', element)\n          };\n        });\n      }\n    }]);\n    return ColorSetsList;\n  }(BaseModule);\n  var Event = {\n    addEvent: function addEvent(dom, eventName, callback, options) {\n      if (dom) {\n        dom.addEventListener(eventName, callback, options);\n      }\n    },\n    removeEvent: function removeEvent(dom, eventName, callback) {\n      if (dom) {\n        dom.removeEventListener(eventName, callback);\n      }\n    },\n    pos: function pos(e) {\n      if (e.touches && e.touches[0]) {\n        return e.touches[0];\n      }\n      return e;\n    },\n    posXY: function posXY(e) {\n      var pos = this.pos(e);\n      return {\n        x: pos.pageX,\n        y: pos.pageY\n      };\n    }\n  };\n  var DELEGATE_SPLIT = '.';\n  var State = function () {\n    function State(masterObj) {\n      var settingObj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      classCallCheck(this, State);\n      this.masterObj = masterObj;\n      this.settingObj = settingObj;\n    }\n    createClass(State, [{\n      key: 'set',\n      value: function set$$1(key, value) {\n        var defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;\n        this.settingObj[key] = value || defaultValue;\n      }\n    }, {\n      key: 'init',\n      value: function init(key) {\n        if (!this.has(key) || !this.settingObj[key]) {\n          var arr = key.split(DELEGATE_SPLIT);\n          var obj = this.masterObj.refs[arr[0]] || this.masterObj[arr[0]] || this.masterObj;\n          var method = arr.pop();\n          if (obj[method]) {\n            for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n              args[_key - 1] = arguments[_key];\n            }\n            var value = obj[method].apply(obj, args);\n            this.set(key, value);\n          }\n        }\n      }\n    }, {\n      key: 'get',\n      value: function get$$1(key) {\n        var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';\n        this.init(key, defaultValue);\n        return this.settingObj[key] || defaultValue;\n      }\n    }, {\n      key: 'has',\n      value: function has(key) {\n        return !!this.settingObj[key];\n      }\n    }]);\n    return State;\n  }();\n  var CHECK_EVENT_PATTERN = /^(click|mouse(down|up|move|enter|leave)|touch(start|move|end)|key(down|up|press)|contextmenu|change|input)/ig;\n  var CHECK_LOAD_PATTERN = /^load (.*)/ig;\n  var EVENT_SAPARATOR = ' ';\n  var META_KEYS = ['Control', 'Shift', 'Alt', 'Meta'];\n  var EventMachin = function () {\n    function EventMachin() {\n      classCallCheck(this, EventMachin);\n      this.state = new State(this);\n      this.refs = {};\n      this.childComponents = this.components();\n    }\n\n    /**\n     * 자식으로 사용할 컴포넌트를 생성해준다. \n     * 생성 시점에 $store 객체가 자동으로 공유된다. \n     * 모든 데이타는 $store 기준으로 작성한다. \n     */\n\n    createClass(EventMachin, [{\n      key: 'newChildComponents',\n      value: function newChildComponents() {\n        var _this = this;\n        var childKeys = Object.keys(this.childComponents);\n        childKeys.forEach(function (key) {\n          var Component = _this.childComponents[key];\n          _this[key] = new Component(_this);\n        });\n      }\n\n      /**\n       * 부모가 정의한 template 과  그 안에서 동작하는 자식 컴포넌트들을 다 합쳐서 \n       * 최종 element 를 만들어준다. \n       * \n       * 그리고 자동으로 load 되어질게 있으면 로드 해준다. \n       */\n    }, {\n      key: 'render',\n      value: function render() {\n        // 1. 나의 template 을 만들어내고  \n        this.$el = this.parseTemplate(this.template());\n        this.refs.$el = this.$el;\n\n        // 개별 객체 셋팅하고 \n        this.parseTarget();\n\n        // 데이타 로드 하고 \n        this.load();\n        this.afterRender();\n      }\n    }, {\n      key: 'afterRender',\n      value: function afterRender() {}\n\n      /**\n       * 자식 컴포넌트로 사용될 객체 정의 \n       */\n    }, {\n      key: 'components',\n      value: function components() {\n        return {};\n      }\n\n      /**\n       * Class 기반으로 $el 을 생성하기 위해서 \n       * 선언형으로 html 템플릿을 정의한다. \n       * \n       * @param {*} html \n       */\n    }, {\n      key: 'parseTemplate',\n      value: function parseTemplate(html) {\n        var _this2 = this;\n        var $el = new Dom(\"div\").html(html).firstChild();\n\n        // ref element 정리 \n        var refs = $el.findAll('[ref]');\n        [].concat(toConsumableArray(refs)).forEach(function (node) {\n          var name = node.getAttribute('ref');\n          _this2.refs[name] = new Dom(node);\n        });\n        return $el;\n      }\n\n      /**\n       * target 으로 지정된 자식 컴포넌트를 대체해준다.\n       */\n    }, {\n      key: 'parseTarget',\n      value: function parseTarget() {\n        var _this3 = this;\n        var $el = this.$el;\n        var targets = $el.findAll('[target]');\n        [].concat(toConsumableArray(targets)).forEach(function (node) {\n          var targetComponentName = node.getAttribute('target');\n          var refName = node.getAttribute('ref') || targetComponentName;\n          var Component = _this3.childComponents[targetComponentName];\n          var instance = new Component(_this3);\n          _this3[refName] = instance;\n          _this3.refs[refName] = instance.$el;\n          if (instance) {\n            instance.render();\n            var $parent = new Dom(node.parentNode);\n            $parent.replace(node, instance.$el.el);\n          }\n        });\n      }\n\n      // load function이 정의된 객체는 load 를 실행해준다. \n    }, {\n      key: 'load',\n      value: function load() {\n        var _this4 = this;\n        this.filterProps(CHECK_LOAD_PATTERN).forEach(function (callbackName) {\n          var elName = callbackName.split('load ')[1];\n          if (_this4.refs[elName]) {\n            _this4.refs[elName].html(_this4.parseTemplate(_this4[callbackName].call(_this4)));\n          }\n        });\n      }\n\n      // 기본 템플릿 지정 \n    }, {\n      key: 'template',\n      value: function template() {\n        return '<div></div>';\n      }\n    }, {\n      key: 'initialize',\n      value: function initialize() {}\n\n      /**\n       * 이벤트를 초기화한다. \n       */\n    }, {\n      key: 'initializeEvent',\n      value: function initializeEvent() {\n        var _this5 = this;\n        this.initializeEventMachin();\n\n        // 자식 이벤트도 같이 초기화 한다. \n        // 그래서 이 메소드는 부모에서 한번만 불려도 된다. \n        Object.keys(this.childComponents).forEach(function (key) {\n          if (_this5[key]) _this5[key].initializeEvent();\n        });\n      }\n\n      /**\n       * 자원을 해제한다. \n       * 이것도 역시 자식 컴포넌트까지 제어하기 때문에 가장 최상위 부모에서 한번만 호출되도 된다. \n       */\n    }, {\n      key: 'destroy',\n      value: function destroy() {\n        var _this6 = this;\n        this.destroyEventMachin();\n        // this.refs = {} \n\n        Object.keys(this.childComponents).forEach(function (key) {\n          if (_this6[key]) _this6[key].destroy();\n        });\n      }\n    }, {\n      key: 'destroyEventMachin',\n      value: function destroyEventMachin() {\n        this.removeEventAll();\n      }\n    }, {\n      key: 'initializeEventMachin',\n      value: function initializeEventMachin() {\n        this.filterProps(CHECK_EVENT_PATTERN).forEach(this.parseEvent.bind(this));\n      }\n\n      /**\n       * property 수집하기 \n       * 상위 클래스의 모든 property 를 수집해서 리턴한다. \n       */\n    }, {\n      key: 'collectProps',\n      value: function collectProps() {\n        if (!this.collapsedProps) {\n          var p = this.__proto__;\n          var results = [];\n          do {\n            results.push.apply(results, toConsumableArray(Object.getOwnPropertyNames(p)));\n            p = p.__proto__;\n          } while (p);\n          this.collapsedProps = results;\n        }\n        return this.collapsedProps;\n      }\n    }, {\n      key: 'filterProps',\n      value: function filterProps(pattern) {\n        return this.collectProps().filter(function (key) {\n          return key.match(pattern);\n        });\n      }\n    }, {\n      key: 'parseEvent',\n      value: function parseEvent(key) {\n        var arr = key.split(EVENT_SAPARATOR);\n        this.bindingEvent(arr, this[key].bind(this));\n      }\n    }, {\n      key: 'getDefaultDomElement',\n      value: function getDefaultDomElement(dom) {\n        var el = void 0;\n        if (dom) {\n          el = this.refs[dom] || this[dom] || window[dom];\n        } else {\n          el = this.el || this.$el || this.$root;\n        }\n        if (el instanceof Dom) {\n          return el.getElement();\n        }\n        return el;\n      }\n    }, {\n      key: 'getDefaultEventObject',\n      value: function getDefaultEventObject(eventName) {\n        var _this7 = this;\n        var arr = eventName.split('.');\n        var realEventName = arr.shift();\n        var isControl = arr.includes('Control');\n        var isShift = arr.includes('Shift');\n        var isAlt = arr.includes('Alt');\n        var isMeta = arr.includes('Meta');\n        arr = arr.filter(function (code) {\n          return META_KEYS.includes(code) === false;\n        });\n        var checkMethodList = arr.filter(function (code) {\n          return !!_this7[code];\n        });\n        arr = arr.filter(function (code) {\n          return checkMethodList.includes(code) === false;\n        }).map(function (code) {\n          return code.toLowerCase();\n        });\n        return {\n          eventName: realEventName,\n          isControl: isControl,\n          isShift: isShift,\n          isAlt: isAlt,\n          isMeta: isMeta,\n          codes: arr,\n          checkMethodList: checkMethodList\n        };\n      }\n    }, {\n      key: 'bindingEvent',\n      value: function bindingEvent(_ref, callback) {\n        var _ref2 = toArray(_ref),\n          eventName = _ref2[0],\n          dom = _ref2[1],\n          delegate = _ref2.slice(2);\n        dom = this.getDefaultDomElement(dom);\n        var eventObject = this.getDefaultEventObject(eventName);\n        eventObject.dom = dom;\n        eventObject.delegate = delegate.join(EVENT_SAPARATOR);\n        this.addEvent(eventObject, callback);\n      }\n    }, {\n      key: 'matchPath',\n      value: function matchPath(el, selector) {\n        if (el) {\n          if (el.matches(selector)) {\n            return el;\n          }\n          return this.matchPath(el.parentElement, selector);\n        }\n        return null;\n      }\n    }, {\n      key: 'getBindings',\n      value: function getBindings() {\n        if (!this._bindings) {\n          this.initBindings();\n        }\n        return this._bindings;\n      }\n    }, {\n      key: 'addBinding',\n      value: function addBinding(obj) {\n        this.getBindings().push(obj);\n      }\n    }, {\n      key: 'initBindings',\n      value: function initBindings() {\n        this._bindings = [];\n      }\n    }, {\n      key: 'checkEventType',\n      value: function checkEventType(e, eventObject) {\n        var _this8 = this;\n        var onlyControl = eventObject.isControl ? e.ctrlKey : true;\n        var onlyShift = eventObject.isShift ? e.shiftKey : true;\n        var onlyAlt = eventObject.isAlt ? e.altKey : true;\n        var onlyMeta = eventObject.isMeta ? e.metaKey : true;\n        var hasKeyCode = true;\n        if (eventObject.codes.length) {\n          hasKeyCode = eventObject.codes.includes(e.code.toLowerCase()) || eventObject.codes.includes(e.key.toLowerCase());\n        }\n        var isAllCheck = true;\n        if (eventObject.checkMethodList.length) {\n          // 체크 메소드들은 모든 메소드를 다 적용해야한다. \n          isAllCheck = eventObject.checkMethodList.every(function (method) {\n            return _this8[method].call(_this8, e);\n          });\n        }\n        return onlyControl && onlyAlt && onlyShift && onlyMeta && hasKeyCode && isAllCheck;\n      }\n    }, {\n      key: 'makeCallback',\n      value: function makeCallback(eventObject, callback) {\n        var _this9 = this;\n        if (eventObject.delegate) {\n          return function (e) {\n            e.xy = Event.posXY(e);\n            if (_this9.checkEventType(e, eventObject)) {\n              var delegateTarget = _this9.matchPath(e.target || e.srcElement, eventObject.delegate);\n              if (delegateTarget) {\n                // delegate target 이 있는 경우만 callback 실행 \n                e.delegateTarget = delegateTarget;\n                e.$delegateTarget = new Dom(delegateTarget);\n                return callback(e);\n              }\n            }\n          };\n        } else {\n          return function (e) {\n            e.xy = Event.posXY(e);\n            if (_this9.checkEventType(e, eventObject)) {\n              return callback(e);\n            }\n          };\n        }\n      }\n    }, {\n      key: 'addEvent',\n      value: function addEvent(eventObject, callback) {\n        eventObject.callback = this.makeCallback(eventObject, callback);\n        this.addBinding(eventObject);\n        var options = true;\n        if (eventObject.eventName === 'touchstart') {\n          options = {\n            passive: true\n          };\n        }\n        Event.addEvent(eventObject.dom, eventObject.eventName, eventObject.callback, options);\n      }\n    }, {\n      key: 'removeEventAll',\n      value: function removeEventAll() {\n        var _this10 = this;\n        this.getBindings().forEach(function (obj) {\n          _this10.removeEvent(obj);\n        });\n        this.initBindings();\n      }\n    }, {\n      key: 'removeEvent',\n      value: function removeEvent(_ref3) {\n        var eventName = _ref3.eventName,\n          dom = _ref3.dom,\n          callback = _ref3.callback;\n        Event.removeEvent(dom, eventName, callback);\n      }\n    }]);\n    return EventMachin;\n  }();\n  var CHECK_STORE_EVENT_PATTERN = /^@/;\n  var UIElement = function (_EventMachin) {\n    inherits(UIElement, _EventMachin);\n    function UIElement(opt) {\n      classCallCheck(this, UIElement);\n      var _this = possibleConstructorReturn(this, (UIElement.__proto__ || Object.getPrototypeOf(UIElement)).call(this, opt));\n      _this.opt = opt || {};\n      if (opt && opt.$store) {\n        _this.$store = opt.$store;\n      }\n      _this.initialize();\n      _this.initializeStoreEvent();\n      return _this;\n    }\n\n    /**\n     * initialize store event \n     * \n     * you can define '@xxx' method(event) in UIElement \n     * \n     * \n     */\n\n    createClass(UIElement, [{\n      key: 'initializeStoreEvent',\n      value: function initializeStoreEvent() {\n        var _this2 = this;\n        this.storeEvents = {};\n        this.filterProps(CHECK_STORE_EVENT_PATTERN).forEach(function (key) {\n          var arr = key.split('@');\n          arr.shift();\n          var event = arr.join('@');\n          _this2.storeEvents[event] = _this2[key].bind(_this2);\n          _this2.$store.on(event, _this2.storeEvents[event]);\n        });\n      }\n    }, {\n      key: 'destoryStoreEvent',\n      value: function destoryStoreEvent() {\n        var _this3 = this;\n        Object.keys(this.storeEvents).forEach(function (event) {\n          _this3.$store.off(event, _this3.storeEvents[event]);\n        });\n      }\n    }]);\n    return UIElement;\n  }(EventMachin);\n  function isUndefined$1(v) {\n    return typeof v == 'undefined' || v == null;\n  }\n  var ColorManager = function (_BaseModule) {\n    inherits(ColorManager, _BaseModule);\n    function ColorManager() {\n      classCallCheck(this, ColorManager);\n      return possibleConstructorReturn(this, (ColorManager.__proto__ || Object.getPrototypeOf(ColorManager)).apply(this, arguments));\n    }\n    createClass(ColorManager, [{\n      key: 'initialize',\n      value: function initialize() {\n        get(ColorManager.prototype.__proto__ || Object.getPrototypeOf(ColorManager.prototype), 'initialize', this).call(this);\n        this.$store.rgb = {};\n        this.$store.hsl = {};\n        this.$store.hsv = {};\n        this.$store.alpha = 1;\n        this.$store.format = 'hex';\n\n        // this.$store.dispatch('/changeColor');\n      }\n    }, {\n      key: '/changeFormat',\n      value: function changeFormat($store, format) {\n        $store.format = format;\n        $store.emit('changeFormat');\n      }\n    }, {\n      key: '/initColor',\n      value: function initColor($store, colorObj, source) {\n        $store.dispatch('/changeColor', colorObj, source, true);\n        $store.emit('initColor');\n      }\n    }, {\n      key: '/changeColor',\n      value: function changeColor($store, colorObj, source, isNotEmit) {\n        colorObj = colorObj || '#FF0000';\n        if (typeof colorObj == 'string') {\n          colorObj = Color$1.parse(colorObj);\n        }\n        colorObj.source = colorObj.source || source;\n        $store.alpha = isUndefined$1(colorObj.a) ? $store.alpha : colorObj.a;\n        $store.format = colorObj.type != 'hsv' ? colorObj.type || $store.format : $store.format;\n        if (colorObj.type == 'hsl') {\n          $store.hsl = Object.assign($store.hsl, colorObj);\n          $store.rgb = Color$1.HSLtoRGB($store.hsl);\n          $store.hsv = Color$1.HSLtoHSV(colorObj);\n        } else if (colorObj.type == 'hex') {\n          $store.rgb = Object.assign($store.rgb, colorObj);\n          $store.hsl = Color$1.RGBtoHSL($store.rgb);\n          $store.hsv = Color$1.RGBtoHSV(colorObj);\n        } else if (colorObj.type == 'rgb') {\n          $store.rgb = Object.assign($store.rgb, colorObj);\n          $store.hsl = Color$1.RGBtoHSL($store.rgb);\n          $store.hsv = Color$1.RGBtoHSV(colorObj);\n        } else if (colorObj.type == 'hsv') {\n          $store.hsv = Object.assign($store.hsv, colorObj);\n          $store.rgb = Color$1.HSVtoRGB($store.hsv);\n          $store.hsl = Color$1.HSVtoHSL($store.hsv);\n        }\n        if (!isNotEmit) {\n          $store.emit('changeColor', colorObj.source);\n        }\n      }\n    }, {\n      key: '/getHueColor',\n      value: function getHueColor($store) {\n        return HueColor.checkHueColor($store.hsv.h / 360);\n      }\n    }, {\n      key: '/toString',\n      value: function toString($store, type) {\n        type = type || $store.format;\n        var colorObj = $store[type] || $store.rgb;\n        return Color$1.format(_extends({}, colorObj, {\n          a: $store.alpha\n        }), type);\n      }\n    }, {\n      key: '/toColor',\n      value: function toColor($store, type) {\n        type = type || $store.format;\n        if (type == 'rgb') {\n          return $store.dispatch('/toRGB');\n        } else if (type == 'hsl') {\n          return $store.dispatch('/toHSL');\n        } else if (type == 'hex') {\n          return $store.dispatch('/toHEX');\n        }\n        return $store.dispatch('/toString', type);\n      }\n    }, {\n      key: '/toRGB',\n      value: function toRGB($store) {\n        return $store.dispatch('/toString', 'rgb');\n      }\n    }, {\n      key: '/toHSL',\n      value: function toHSL($store) {\n        return $store.dispatch('/toString', 'hsl');\n      }\n    }, {\n      key: '/toHEX',\n      value: function toHEX($store) {\n        return $store.dispatch('/toString', 'hex').toUpperCase();\n      }\n    }]);\n    return ColorManager;\n  }(BaseModule);\n  var BaseStore = function () {\n    function BaseStore(opt) {\n      classCallCheck(this, BaseStore);\n      this.callbacks = [];\n      this.actions = [];\n      this.modules = opt.modules || [];\n      this.initialize();\n    }\n    createClass(BaseStore, [{\n      key: 'initialize',\n      value: function initialize() {\n        this.initializeModule();\n      }\n    }, {\n      key: 'initializeModule',\n      value: function initializeModule() {\n        var _this = this;\n        this.modules.forEach(function (Module) {\n          var instance = new Module(_this);\n        });\n      }\n    }, {\n      key: 'action',\n      value: function action(_action, context) {\n        this.actions[_action] = {\n          context: context,\n          callback: context[_action]\n        };\n      }\n    }, {\n      key: 'dispatch',\n      value: function dispatch(action) {\n        var args = [].concat(Array.prototype.slice.call(arguments));\n        var action = args.shift();\n        var m = this.actions[action];\n        if (m) {\n          return m.callback.apply(m.context, [this].concat(toConsumableArray(args)));\n        }\n      }\n    }, {\n      key: 'module',\n      value: function module(ModuleObject) {\n        // this.action()\n      }\n    }, {\n      key: 'on',\n      value: function on(event, callback) {\n        this.callbacks.push({\n          event: event,\n          callback: callback\n        });\n      }\n    }, {\n      key: 'off',\n      value: function off(event, callback) {\n        if (arguments.length == 0) {\n          this.callbacks = [];\n        } else if (arguments.length == 1) {\n          this.callbacks = this.callbacks.filter(function (f) {\n            return f.event != event;\n          });\n        } else if (arguments.length == 2) {\n          this.callbacks = this.callbacks.filter(function (f) {\n            return f.event != event && f.callback != callback;\n          });\n        }\n      }\n    }, {\n      key: 'emit',\n      value: function emit() {\n        var args = [].concat(Array.prototype.slice.call(arguments));\n        var event = args.shift();\n        this.callbacks.filter(function (f) {\n          return f.event == event;\n        }).forEach(function (f) {\n          if (f && typeof f.callback == 'function') {\n            f.callback.apply(f, toConsumableArray(args));\n          }\n        });\n      }\n    }]);\n    return BaseStore;\n  }();\n  var BaseColorPicker = function (_UIElement) {\n    inherits(BaseColorPicker, _UIElement);\n    function BaseColorPicker(opt) {\n      classCallCheck(this, BaseColorPicker);\n      var _this = possibleConstructorReturn(this, (BaseColorPicker.__proto__ || Object.getPrototypeOf(BaseColorPicker)).call(this, opt));\n      _this.isColorPickerShow = false;\n      _this.isShortCut = false;\n      _this.hideDelay = +(typeof _this.opt.hideDeplay == 'undefined' ? 2000 : _this.opt.hideDelay);\n      _this.timerCloseColorPicker;\n      _this.autoHide = _this.opt.autoHide || true;\n      _this.outputFormat = _this.opt.outputFormat;\n      _this.$checkColorPickerClass = _this.checkColorPickerClass.bind(_this);\n      return _this;\n    }\n    createClass(BaseColorPicker, [{\n      key: 'initialize',\n      value: function initialize() {\n        var _this2 = this;\n        this.$body = null;\n        this.$root = null;\n        this.$store = new BaseStore({\n          modules: [ColorManager, ColorSetsList]\n        });\n        this.callbackChange = function () {\n          _this2.callbackColorValue();\n        };\n        this.callbackLastUpdate = function () {\n          _this2.callbackLastUpdateColorValue();\n        };\n        this.callbackAddCurrentColor = function (color) {\n          _this2.callbackAddCurrentColorValue(color);\n        };\n        this.colorpickerShowCallback = function () {};\n        this.colorpickerHideCallback = function () {};\n        this.colorpickerLastUpdateCallback = function () {};\n        this.colorpickerAddCurrentColorCallback = function () {};\n        this.$body = new Dom(this.getContainer());\n        this.$root = new Dom('div', 'easylogic-colorpicker', {\n          tabIndex: -1\n        });\n\n        //  append colorpicker to container (ex : body)\n        if (this.opt.position == 'inline') {\n          this.$body.append(this.$root);\n        }\n        if (this.opt.type) {\n          // to change css style\n          this.$root.addClass(this.opt.type);\n        }\n        if (this.opt.hideInformation) {\n          this.$root.addClass('hide-information');\n        }\n        if (this.opt.hideColorsets) {\n          this.$root.addClass('hide-colorsets');\n        }\n        this.$arrow = new Dom('div', 'arrow');\n        this.$root.append(this.$arrow);\n        if (this.opt.colorSets) {\n          this.$store.dispatch('/setUserPalette', this.opt.colorSet);\n        } else if (isFunction(this.opt.onRetrievePreset)) {\n          this.$store.dispatch('/setUserPalette', this.opt.onRetrievePreset());\n        } else {\n          this.$store.dispatch('/setUserPalette', []);\n        }\n        this.render();\n        this.$root.append(this.$el);\n        this.initColorWithoutChangeEvent(this.opt.color);\n\n        // 이벤트 연결 \n        this.initializeEvent();\n      }\n    }, {\n      key: 'initColorWithoutChangeEvent',\n      value: function initColorWithoutChangeEvent(color) {\n        this.$store.dispatch('/initColor', color);\n      }\n\n      /** \n       * public method \n       * \n       */\n\n      /**\n       * \n       * show colorpicker with position  \n       * \n       * @param {{left, top, hideDelay, isShortCut}} opt \n       * @param {String|Object} color  \n       * @param {Function} showCallback  it is called when colorpicker is shown\n       * @param {Function} hideCallback  it is called once when colorpicker is hidden\n       * @param {Function} addCurrentColorCallback  \n       */\n    }, {\n      key: 'show',\n      value: function show(opt, color, showCallback, hideCallback, lastUpdateCallback, addCurrentColorCallback) {\n        // 매번 이벤트를 지우고 다시 생성할 필요가 없어서 초기화 코드는 지움. \n        // this.destroy();\n        // this.initializeEvent();\n        // define colorpicker callback\n        this.colorpickerShowCallback = showCallback;\n        this.colorpickerHideCallback = hideCallback;\n        this.colorpickerLastUpdateCallback = lastUpdateCallback;\n        this.colorpickerAddCurrentColorCallback = addCurrentColorCallback;\n        this.$root.css(this.getInitalizePosition()).show();\n        this.isColorPickerShow = true;\n        this.isShortCut = opt.isShortCut || false;\n        this.outputFormat = opt.outputFormat;\n\n        // define hide delay\n        this.hideDelay = +(typeof opt.hideDelay == 'undefined' ? 2000 : opt.hideDelay);\n        if (this.hideDelay > 0) {\n          this.setHideDelay(this.hideDelay);\n        }\n        this.$root.appendTo(this.$body);\n        this.definePosition(opt);\n        this.initColorWithoutChangeEvent(color);\n      }\n\n      /**\n       * \n       * initialize color for colorpicker\n       * \n       * @param {String|Object} newColor \n       * @param {String} format  hex, rgb, hsl\n       */\n    }, {\n      key: 'initColor',\n      value: function initColor(newColor, format) {\n        this.$store.dispatch('/changeColor', newColor, format);\n      }\n\n      /**\n       * hide colorpicker \n       * \n       */\n    }, {\n      key: 'hide',\n      value: function hide() {\n        if (this.isColorPickerShow) {\n          // this.destroy();\n          this.$root.hide();\n          this.$root.remove(); // not empty \n          this.isColorPickerShow = false;\n          this.callbackHideColorValue();\n        }\n      }\n\n      /**\n       * set to colors in current sets that you see \n       * @param {Array} colors \n       */\n    }, {\n      key: 'setColorsInPalette',\n      value: function setColorsInPalette() {\n        var colors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n        this.$store.dispatch('/setCurrentColorAll', colors);\n      }\n\n      /**\n       * refresh all color palette \n       * \n       * @param {*} list \n       */\n    }, {\n      key: 'setUserPalette',\n      value: function setUserPalette() {\n        var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n        this.$store.dispatch('/setUserPalette', list);\n      }\n\n      /**\n       * private method \n       */\n    }, {\n      key: 'getOption',\n      value: function getOption(key) {\n        return this.opt[key];\n      }\n    }, {\n      key: 'setOption',\n      value: function setOption(key, value) {\n        this.opt[key] = value;\n      }\n    }, {\n      key: 'isType',\n      value: function isType(key) {\n        return this.getOption('type') == key;\n      }\n    }, {\n      key: 'isPaletteType',\n      value: function isPaletteType() {\n        return this.isType('palette');\n      }\n    }, {\n      key: 'isSketchType',\n      value: function isSketchType() {\n        return this.isType('sketch');\n      }\n    }, {\n      key: 'getContainer',\n      value: function getContainer() {\n        return this.opt.container || document.body;\n      }\n    }, {\n      key: 'getColor',\n      value: function getColor(type) {\n        return this.$store.dispatch('/toColor', type);\n      }\n    }, {\n      key: 'definePositionForArrow',\n      value: function definePositionForArrow(opt, elementScreenLeft, elementScreenTop) {\n        // console.log(arguments)\n      }\n    }, {\n      key: 'definePosition',\n      value: function definePosition(opt) {\n        var width = this.$root.width();\n        var height = this.$root.height();\n\n        // set left position for color picker\n        var elementScreenLeft = opt.left - this.$body.scrollLeft();\n        if (width + elementScreenLeft > window.innerWidth) {\n          elementScreenLeft -= width + elementScreenLeft - window.innerWidth;\n        }\n        if (elementScreenLeft < 0) {\n          elementScreenLeft = 0;\n        }\n\n        // set top position for color picker\n        var elementScreenTop = opt.top - this.$body.scrollTop();\n        if (height + elementScreenTop > window.innerHeight) {\n          elementScreenTop -= height + elementScreenTop - window.innerHeight;\n        }\n        if (elementScreenTop < 0) {\n          elementScreenTop = 0;\n        }\n\n        // set position\n        this.$root.css({\n          left: elementScreenLeft + 'px',\n          top: elementScreenTop + 'px'\n        });\n\n        // this.definePositionForArrow(opt, elementScreenLeft, elementScreenTop);\n      }\n    }, {\n      key: 'getInitalizePosition',\n      value: function getInitalizePosition() {\n        if (this.opt.position == 'inline') {\n          return {\n            position: 'relative',\n            left: 'auto',\n            top: 'auto',\n            display: 'inline-block'\n          };\n        } else {\n          return {\n            position: 'fixed',\n            // color picker has fixed position\n            left: '-10000px',\n            top: '-10000px'\n          };\n        }\n      }\n    }, {\n      key: 'isAbsolute',\n      value: function isAbsolute() {\n        return this.opt.position !== 'inline';\n      }\n\n      // Event Bindings \n    }, {\n      key: 'mouseup.isAbsolute document',\n      value: function mouseupIsAbsoluteDocument(e) {\n        this.__isMouseDown = false;\n        // when color picker clicked in outside\n        if (this.checkInHtml(e.target)) {\n          //this.setHideDelay(hideDelay);\n        } else if (this.checkColorPickerClass(e.target) == false) {\n          this.hide();\n        } else {\n          if (!this.__isMouseIn) {\n            clearTimeout(this.timerCloseColorPicker);\n            this.timerCloseColorPicker = setTimeout(this.hide.bind(this), this.delayTime || this.hideDelay);\n          }\n        }\n      }\n    }, {\n      key: 'keyup.isAbsolute.escape $root',\n      value: function keyupIsAbsoluteEscape$root(e) {\n        this.hide();\n      }\n    }, {\n      key: 'mouseover.isAbsolute $root',\n      value: function mouseoverIsAbsolute$root(e) {\n        clearTimeout(this.timerCloseColorPicker);\n        // this.__isMouseDown = true; \n      }\n    }, {\n      key: 'mousemove.isAbsolute $root',\n      value: function mousemoveIsAbsolute$root(e) {\n        clearTimeout(this.timerCloseColorPicker);\n      }\n    }, {\n      key: 'mouseenter.isAbsolute $root',\n      value: function mouseenterIsAbsolute$root(e) {\n        clearTimeout(this.timerCloseColorPicker);\n        this.__isMouseIn = true;\n      }\n    }, {\n      key: 'mouseleave.isAbsolute $root',\n      value: function mouseleaveIsAbsolute$root(e) {\n        this.__isMouseIn = false;\n        if (!this.__isMouseDown) {\n          clearTimeout(this.timerCloseColorPicker);\n          this.timerCloseColorPicker = setTimeout(this.hide.bind(this), this.delayTime || this.hideDelay);\n        }\n      }\n    }, {\n      key: 'mousedown.isAbsolute $root',\n      value: function mousedownIsAbsolute$root(e) {\n        this.__isMouseDown = true;\n      }\n    }, {\n      key: 'setHideDelay',\n      value: function setHideDelay(delayTime) {\n        this.delayTime = delayTime || 0;\n      }\n    }, {\n      key: 'runHideDelay',\n      value: function runHideDelay() {\n        if (this.isColorPickerShow) {\n          this.setHideDelay();\n          // const hideCallback = this.setHideDelay(delayTime);\n\n          // this.timerCloseColorPicker = setTimeout(hideCallback, delayTime);\n        }\n      }\n    }, {\n      key: 'callbackColorValue',\n      value: function callbackColorValue(color) {\n        color = color || this.getCurrentColor();\n        if (typeof this.opt.onChange == 'function') {\n          this.opt.onChange.call(this, color);\n        }\n        if (typeof this.colorpickerShowCallback == 'function') {\n          this.colorpickerShowCallback(color);\n        }\n      }\n    }, {\n      key: 'callbackLastUpdateColorValue',\n      value: function callbackLastUpdateColorValue(color) {\n        color = color || this.getCurrentColor();\n        if (typeof this.opt.onLastUpdate == 'function') {\n          this.opt.onLastUpdate.call(this, color);\n        }\n        if (typeof this.colorpickerLastUpdateCallback == 'function') {\n          this.colorpickerLastUpdateCallback(color);\n        }\n      }\n    }, {\n      key: 'callbackAddCurrentColorValue',\n      value: function callbackAddCurrentColorValue(color) {\n        if (typeof this.opt.onLastUpdate == 'function') {\n          this.opt.onAddPreset.call(this, color);\n        }\n        if (typeof this.colorpickerAddCurrentColorCallback == 'function') {\n          this.colorpickerAddCurrentColorCallback(color);\n        }\n      }\n    }, {\n      key: 'callbackHideColorValue',\n      value: function callbackHideColorValue(color) {\n        color = color || this.getCurrentColor();\n        if (typeof this.opt.onHide == 'function') {\n          this.opt.onHide.call(this, color);\n        }\n        if (typeof this.colorpickerHideCallback == 'function') {\n          this.colorpickerHideCallback(color);\n        }\n      }\n    }, {\n      key: 'getCurrentColor',\n      value: function getCurrentColor() {\n        return this.$store.dispatch('/toColor', this.outputFormat);\n      }\n    }, {\n      key: 'checkColorPickerClass',\n      value: function checkColorPickerClass(el) {\n        var hasColorView = new Dom(el).closest('codemirror-colorview');\n        var hasColorPicker = new Dom(el).closest('easylogic-colorpicker');\n        var hasCodeMirror = new Dom(el).closest('CodeMirror');\n        var IsInHtml = el.nodeName == 'HTML';\n        return !!(hasColorPicker || hasColorView || hasCodeMirror);\n      }\n    }, {\n      key: 'checkInHtml',\n      value: function checkInHtml(el) {\n        var IsInHtml = el.nodeName == 'HTML';\n        return IsInHtml;\n      }\n    }, {\n      key: 'initializeStoreEvent',\n      value: function initializeStoreEvent() {\n        get(BaseColorPicker.prototype.__proto__ || Object.getPrototypeOf(BaseColorPicker.prototype), 'initializeStoreEvent', this).call(this);\n        this.$store.on('changeColor', this.callbackChange);\n        this.$store.on('lastUpdateColor', this.callbackLastUpdate);\n        this.$store.on('changeFormat', this.callbackChange);\n        this.$store.on('addCurrentColor', this.callbackAddCurrentColor);\n      }\n    }, {\n      key: 'destroy',\n      value: function destroy() {\n        get(BaseColorPicker.prototype.__proto__ || Object.getPrototypeOf(BaseColorPicker.prototype), 'destroy', this).call(this);\n        this.$store.off('changeColor', this.callbackChange);\n        this.$store.off('lastUpdateColor', this.callbackLastUpdate);\n        this.$store.off('changeFormat', this.callbackChange);\n        this.$store.off('addCurrentColor', this.callbackAddCurrentColor);\n        this.callbackChange = undefined;\n        this.callbackLastUpdate = undefined;\n        this.callbackAddCurrentColor = undefined;\n\n        // remove color picker callback\n        this.colorpickerShowCallback = undefined;\n        this.colorpickerHideCallback = undefined;\n      }\n    }]);\n    return BaseColorPicker;\n  }(UIElement);\n  var BaseBox = function (_UIElement) {\n    inherits(BaseBox, _UIElement);\n    function BaseBox(opt) {\n      classCallCheck(this, BaseBox);\n      var _this = possibleConstructorReturn(this, (BaseBox.__proto__ || Object.getPrototypeOf(BaseBox)).call(this, opt));\n      _this.source = 'base-box';\n      return _this;\n    }\n    createClass(BaseBox, [{\n      key: 'refresh',\n      value: function refresh() {}\n    }, {\n      key: 'refreshColorUI',\n      value: function refreshColorUI(e) {}\n\n      /** push change event  */\n    }, {\n      key: 'changeColor',\n      value: function changeColor(opt) {\n        this.$store.dispatch('/changeColor', Object.assign({\n          source: this.source\n        }, opt || {}));\n      }\n\n      // Event Bindings \n    }, {\n      key: 'mouseup document',\n      value: function mouseupDocument(e) {\n        this.onDragEnd(e);\n      }\n    }, {\n      key: 'mousemove document',\n      value: function mousemoveDocument(e) {\n        this.onDragMove(e);\n      }\n    }, {\n      key: 'mousedown $bar',\n      value: function mousedown$bar(e) {\n        e.preventDefault();\n        this.isDown = true;\n      }\n    }, {\n      key: 'mousedown $container',\n      value: function mousedown$container(e) {\n        this.isDown = true;\n        this.onDragStart(e);\n      }\n    }, {\n      key: 'touchend document',\n      value: function touchendDocument(e) {\n        this.onDragEnd(e);\n      }\n    }, {\n      key: 'touchmove document',\n      value: function touchmoveDocument(e) {\n        this.onDragMove(e);\n      }\n    }, {\n      key: 'touchstart $bar',\n      value: function touchstart$bar(e) {\n        e.preventDefault();\n        this.isDown = true;\n      }\n    }, {\n      key: 'touchstart $container',\n      value: function touchstart$container(e) {\n        this.onDragStart(e);\n      }\n    }, {\n      key: 'onDragStart',\n      value: function onDragStart(e) {\n        this.isDown = true;\n        this.refreshColorUI(e);\n      }\n    }, {\n      key: 'onDragMove',\n      value: function onDragMove(e) {\n        if (this.isDown) {\n          this.refreshColorUI(e);\n        }\n      }\n\n      /* called when mouse is ended move  */\n    }, {\n      key: 'onDragEnd',\n      value: function onDragEnd(e) {\n        if (this.isDown) {\n          this.$store.emit('lastUpdateColor');\n          this.isDown = false;\n        }\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (this.source != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return BaseBox;\n  }(UIElement);\n  var BaseSlider = function (_BaseBox) {\n    inherits(BaseSlider, _BaseBox);\n    function BaseSlider(opt) {\n      classCallCheck(this, BaseSlider);\n      var _this = possibleConstructorReturn(this, (BaseSlider.__proto__ || Object.getPrototypeOf(BaseSlider)).call(this, opt));\n      _this.minValue = 0; // min domain value \n      _this.maxValue = 1; // max domain value \n      _this.source = 'base-slider';\n      return _this;\n    }\n\n    /* slider container's min and max position */\n\n    createClass(BaseSlider, [{\n      key: 'getMinMaxPosition',\n      value: function getMinMaxPosition() {\n        var min = this.getMinPosition();\n        var width = this.getMaxDist();\n        var max = min + width;\n        return {\n          min: min,\n          max: max,\n          width: width\n        };\n      }\n\n      /** get current position on page  */\n    }, {\n      key: 'getCurrent',\n      value: function getCurrent(value) {\n        return min + this.getMaxDist() * value;\n      }\n\n      /** get min position on slider container  */\n    }, {\n      key: 'getMinPosition',\n      value: function getMinPosition() {\n        return this.refs.$container.offset().left;\n      }\n    }, {\n      key: 'getMaxDist',\n      value: function getMaxDist() {\n        return this.state.get('$container.width');\n      }\n\n      /** get dist for position value */\n    }, {\n      key: 'getDist',\n      value: function getDist(current) {\n        var _getMinMaxPosition = this.getMinMaxPosition(),\n          min = _getMinMaxPosition.min,\n          max = _getMinMaxPosition.max;\n        var dist;\n        if (current < min) {\n          dist = 0;\n        } else if (current > max) {\n          dist = 100;\n        } else {\n          dist = (current - min) / (max - min) * 100;\n        }\n        return dist;\n      }\n\n      /** get caculated dist for domain value   */\n    }, {\n      key: 'getCaculatedDist',\n      value: function getCaculatedDist(e) {\n        var current = e ? this.getMousePosition(e) : this.getCurrent(this.getDefaultValue() / this.maxValue);\n        var dist = this.getDist(current);\n        return dist;\n      }\n\n      /** get default value used in slider container */\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return 0;\n      }\n\n      /** set mosue position */\n    }, {\n      key: 'setMousePosition',\n      value: function setMousePosition(x) {\n        this.refs.$bar.css({\n          left: x + 'px'\n        });\n      }\n\n      /** set mouse position in page */\n    }, {\n      key: 'getMousePosition',\n      value: function getMousePosition(e) {\n        return Event.pos(e).pageX;\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n      }\n\n      /** set drag bar position  */\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI(v) {\n        v = v || this.getDefaultValue();\n        if (this.lastV === v) return true;\n        this.lastV = v;\n        if (v <= this.minValue) {\n          this.refs.$bar.addClass('first').removeClass('last');\n        } else if (v >= this.maxValue) {\n          this.refs.$bar.addClass('last').removeClass('first');\n        } else {\n          this.refs.$bar.removeClass('last').removeClass('first');\n        }\n        this.setMousePosition(this.getMaxDist() * ((v || 0) / this.maxValue));\n      }\n    }]);\n    return BaseSlider;\n  }(BaseBox);\n  var Value = function (_BaseSlider) {\n    inherits(Value, _BaseSlider);\n    function Value(opt) {\n      classCallCheck(this, Value);\n      var _this = possibleConstructorReturn(this, (Value.__proto__ || Object.getPrototypeOf(Value)).call(this, opt));\n      _this.minValue = 0;\n      _this.maxValue = 1;\n      _this.source = 'value-control';\n      return _this;\n    }\n    createClass(Value, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\"value\">\\n                <div ref=\"$container\" class=\"value-container\">\\n                    <div ref=\"$bar\" class=\"drag-bar\"></div>\\n                </div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'setBackgroundColor',\n      value: function setBackgroundColor() {\n        this.refs.$container.css(\"background-color\", this.$store.dispatch('/toRGB'));\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        get(Value.prototype.__proto__ || Object.getPrototypeOf(Value.prototype), 'refresh', this).call(this);\n        this.setBackgroundColor();\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.hsv.v;\n      }\n    }, {\n      key: 'refreshColorUI',\n      value: function refreshColorUI(e) {\n        var dist = this.getCaculatedDist(e);\n        this.setColorUI(dist / 100 * this.maxValue);\n        this.changeColor({\n          type: 'hsv',\n          v: dist / 100 * this.maxValue\n        });\n      }\n    }]);\n    return Value;\n  }(BaseSlider);\n  var Opacity = function (_BaseSlider) {\n    inherits(Opacity, _BaseSlider);\n    function Opacity(opt) {\n      classCallCheck(this, Opacity);\n      var _this = possibleConstructorReturn(this, (Opacity.__proto__ || Object.getPrototypeOf(Opacity)).call(this, opt));\n      _this.minValue = 0;\n      _this.maxValue = 1;\n      _this.source = 'opacity-control';\n      return _this;\n    }\n    createClass(Opacity, [{\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"opacity\">\\n            <div ref=\"$container\" class=\"opacity-container\">\\n                <div ref=\"$colorbar\" class=\"color-bar\"></div>\\n                <div ref=\"$bar\" class=\"drag-bar2\"></div>\\n            </div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        get(Opacity.prototype.__proto__ || Object.getPrototypeOf(Opacity.prototype), 'refresh', this).call(this);\n        this.setOpacityColorBar();\n      }\n    }, {\n      key: 'setOpacityColorBar',\n      value: function setOpacityColorBar() {\n        var rgb = Object.assign({}, this.$store.rgb);\n        rgb.a = 0;\n        var start = Color$1.format(rgb, 'rgb');\n        rgb.a = 1;\n        var end = Color$1.format(rgb, 'rgb');\n        this.setOpacityColorBarBackground(start, end);\n      }\n    }, {\n      key: 'setOpacityColorBarBackground',\n      value: function setOpacityColorBarBackground(start, end) {\n        this.refs.$colorbar.css('background', 'linear-gradient(to right, ' + start + ', ' + end + ')');\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.alpha;\n      }\n    }, {\n      key: 'refreshColorUI',\n      value: function refreshColorUI(e) {\n        var dist = this.getCaculatedDist(e);\n        this.setColorUI(dist / 100 * this.maxValue);\n        this.changeColor({\n          a: Math.floor(dist) / 100 * this.maxValue\n        });\n      }\n    }]);\n    return Opacity;\n  }(BaseSlider);\n  var source = 'macos-control';\n  var ColorControl = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Value: Value,\n          Opacity: Opacity\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"control\">\\n            <div target=\"Value\" ></div>\\n            <div target=\"Opacity\" ></div>\\n            <div ref=\"$controlPattern\" class=\"empty\"></div>\\n            <div ref=\"$controlColor\" class=\"color\"></div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'setBackgroundColor',\n      value: function setBackgroundColor() {\n        this.refs.$controlColor.css(\"background-color\", this.$store.dispatch('/toRGB'));\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n        this.setBackgroundColor();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Value.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var ColorWheel = function (_UIElement) {\n    inherits(ColorWheel, _UIElement);\n    function ColorWheel(opt) {\n      classCallCheck(this, ColorWheel);\n      var _this = possibleConstructorReturn(this, (ColorWheel.__proto__ || Object.getPrototypeOf(ColorWheel)).call(this, opt));\n      _this.width = 214;\n      _this.height = 214;\n      _this.thinkness = 0;\n      _this.half_thinkness = 0;\n      _this.source = 'colorwheel';\n      return _this;\n    }\n    createClass(ColorWheel, [{\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"wheel\">\\n            <canvas class=\"wheel-canvas\" ref=\"$colorwheel\" ></canvas>\\n            <div class=\"wheel-canvas\" ref=\"$valuewheel\" ></div>\\n            <div class=\"drag-pointer\" ref=\"$drag_pointer\"></div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh(isEvent) {\n        this.setColorUI(isEvent);\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI(isEvent) {\n        this.renderCanvas();\n        this.renderValue();\n        this.setHueColor(null, isEvent);\n      }\n    }, {\n      key: 'renderValue',\n      value: function renderValue() {\n        var value = 1 - this.$store.hsv.v;\n        this.refs.$valuewheel.css({\n          'background-color': 'rgba(0, 0, 0, ' + value + ')'\n        });\n      }\n    }, {\n      key: 'renderWheel',\n      value: function renderWheel(width, height) {\n        if (this.width && !width) width = this.width;\n        if (this.height && !height) height = this.height;\n        var $canvas = new Dom('canvas');\n        var context = $canvas.el.getContext('2d');\n        $canvas.el.width = width;\n        $canvas.el.height = height;\n        $canvas.css({\n          width: width + 'px',\n          height: height + 'px'\n        });\n        var img = context.getImageData(0, 0, width, height);\n        var pixels = img.data;\n        var half_width = Math.floor(width / 2);\n        var half_height = Math.floor(height / 2);\n        var radius = width > height ? half_height : half_width;\n        var cx = half_width;\n        var cy = half_height;\n        for (var y = 0; y < height; y++) {\n          for (var x = 0; x < width; x++) {\n            var rx = x - cx + 1,\n              ry = y - cy + 1,\n              d = rx * rx + ry * ry,\n              hue = caculateAngle(rx, ry);\n            var rgb = Color$1.HSVtoRGB(hue,\n            // 0~360 hue \n            Math.min(Math.sqrt(d) / radius, 1),\n            // 0..1 Saturation \n            1 //  0..1 Value\n            );\n            var index = (y * width + x) * 4;\n            pixels[index] = rgb.r;\n            pixels[index + 1] = rgb.g;\n            pixels[index + 2] = rgb.b;\n            pixels[index + 3] = 255;\n          }\n        }\n        context.putImageData(img, 0, 0);\n        if (this.thinkness > 0) {\n          context.globalCompositeOperation = \"destination-out\"; // destination-out 은 그리는 영역이 지워진다. \n          context.fillStyle = 'black';\n          context.beginPath();\n          context.arc(cx, cy, radius - this.thinkness, 0, Math.PI * 2);\n          context.closePath();\n          context.fill();\n        }\n        return $canvas;\n      }\n    }, {\n      key: 'renderCanvas',\n      value: function renderCanvas() {\n        // only once rendering \n        if (this.$store.createdWheelCanvas) return;\n        var $canvas = this.refs.$colorwheel;\n        // console.log($canvas);\n        var context = $canvas.el.getContext('2d');\n        var _$canvas$size = $canvas.size(),\n          _$canvas$size2 = slicedToArray(_$canvas$size, 2),\n          width = _$canvas$size2[0],\n          height = _$canvas$size2[1];\n        if (this.width && !width) width = this.width;\n        if (this.height && !height) height = this.height;\n        $canvas.el.width = width;\n        $canvas.el.height = height;\n        $canvas.css({\n          width: width + 'px',\n          height: height + 'px'\n        });\n        var $wheelCanvas = this.renderWheel(width, height);\n        context.drawImage($wheelCanvas.el, 0, 0);\n        this.$store.createdWheelCanvas = true;\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.hsv.h;\n      }\n    }, {\n      key: 'getDefaultSaturation',\n      value: function getDefaultSaturation() {\n        return this.$store.hsv.s;\n      }\n    }, {\n      key: 'getCurrentXY',\n      value: function getCurrentXY(e, angle, radius, centerX, centerY) {\n        return e ? Event.posXY(e) : getXYInCircle(angle, radius, centerX, centerY);\n      }\n    }, {\n      key: 'getRectangle',\n      value: function getRectangle() {\n        var width = this.state.get('$el.width');\n        var height = this.state.get('$el.height');\n        var radius = this.state.get('$colorwheel.width') / 2;\n        var minX = this.refs.$el.offset().left;\n        var centerX = minX + width / 2;\n        var minY = this.refs.$el.offset().top;\n        var centerY = minY + height / 2;\n        return {\n          minX: minX,\n          minY: minY,\n          width: width,\n          height: height,\n          radius: radius,\n          centerX: centerX,\n          centerY: centerY\n        };\n      }\n    }, {\n      key: 'setHueColor',\n      value: function setHueColor(e, isEvent) {\n        if (!this.state.get('$el.width')) return;\n        var _getRectangle = this.getRectangle(),\n          minX = _getRectangle.minX,\n          minY = _getRectangle.minY,\n          radius = _getRectangle.radius,\n          centerX = _getRectangle.centerX,\n          centerY = _getRectangle.centerY;\n        var _getCurrentXY = this.getCurrentXY(e, this.getDefaultValue(), this.getDefaultSaturation() * radius, centerX, centerY),\n          x = _getCurrentXY.x,\n          y = _getCurrentXY.y;\n        var rx = x - centerX,\n          ry = y - centerY,\n          d = rx * rx + ry * ry,\n          hue = caculateAngle(rx, ry);\n        if (d > radius * radius) {\n          var _getCurrentXY2 = this.getCurrentXY(null, hue, radius, centerX, centerY),\n            x = _getCurrentXY2.x,\n            y = _getCurrentXY2.y;\n        }\n\n        // saturation 을 \n        var saturation = Math.min(Math.sqrt(d) / radius, 1);\n\n        // set drag pointer position \n        this.refs.$drag_pointer.css({\n          left: x - minX + 'px',\n          top: y - minY + 'px'\n        });\n        if (!isEvent) {\n          this.changeColor({\n            type: 'hsv',\n            h: hue,\n            s: saturation\n          });\n        }\n      }\n    }, {\n      key: 'changeColor',\n      value: function changeColor(opt) {\n        this.$store.dispatch('/changeColor', Object.assign({\n          source: this.source\n        }, opt || {}));\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (this.source != sourceType) {\n          this.refresh(true);\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh(true);\n      }\n\n      // Event Bindings \n    }, {\n      key: 'mouseup document',\n      value: function mouseupDocument(e) {\n        if (this.isDown) {\n          this.isDown = false;\n          this.$store.emit('lastUpdateColor');\n        }\n      }\n    }, {\n      key: 'mousemove document',\n      value: function mousemoveDocument(e) {\n        if (this.isDown) {\n          this.setHueColor(e);\n        }\n      }\n    }, {\n      key: 'mousedown $drag_pointer',\n      value: function mousedown$drag_pointer(e) {\n        e.preventDefault();\n        this.isDown = true;\n      }\n    }, {\n      key: 'mousedown $el',\n      value: function mousedown$el(e) {\n        this.isDown = true;\n        this.setHueColor(e);\n      }\n    }, {\n      key: 'touchend document',\n      value: function touchendDocument(e) {\n        if (this.isDown) {\n          this.isDown = false;\n          this.$store.emit('lastUpdateColor');\n        }\n      }\n    }, {\n      key: 'touchmove document',\n      value: function touchmoveDocument(e) {\n        if (this.isDown) {\n          this.setHueColor(e);\n        }\n      }\n    }, {\n      key: 'touchstart $drag_pointer',\n      value: function touchstart$drag_pointer(e) {\n        e.preventDefault();\n        this.isDown = true;\n      }\n    }, {\n      key: 'touchstart $el',\n      value: function touchstart$el(e) {\n        e.preventDefault();\n        this.isDown = true;\n        this.setHueColor(e);\n      }\n    }]);\n    return ColorWheel;\n  }(UIElement);\n  var source$2 = 'chromedevtool-information';\n  var ColorInformation = function (_UIElement) {\n    inherits(ColorInformation, _UIElement);\n    function ColorInformation() {\n      classCallCheck(this, ColorInformation);\n      return possibleConstructorReturn(this, (ColorInformation.__proto__ || Object.getPrototypeOf(ColorInformation)).apply(this, arguments));\n    }\n    createClass(ColorInformation, [{\n      key: 'template',\n      value: function template() {\n        return /*html*/'\\n        <div class=\"information hex\">\\n            <div ref=\"$informationChange\" class=\"information-change\">\\n                <button ref=\"$formatChangeButton\" type=\"button\" class=\"format-change-button arrow-button\"></button>\\n            </div>\\n            <div class=\"information-item hex\">\\n                <div class=\"input-field hex\">\\n                    <input ref=\"$hexCode\" class=\"input\" type=\"text\" />\\n                    <div class=\"title\">HEX</div>\\n                </div>\\n            </div>\\n            <div class=\"information-item rgb\">\\n                <div class=\"input-field rgb-r\">\\n                    <input ref=\"$rgb_r\" class=\"input\" type=\"number\" step=\"1\" min=\"0\" max=\"255\" />\\n                    <div class=\"title\">R</div>\\n                </div>\\n                <div class=\"input-field rgb-g\">\\n                    <input ref=\"$rgb_g\" class=\"input\" type=\"number\" step=\"1\" min=\"0\" max=\"255\" />\\n                    <div class=\"title\">G</div>\\n                </div>\\n                <div class=\"input-field rgb-b\">\\n                    <input ref=\"$rgb_b\" class=\"input\" type=\"number\" step=\"1\" min=\"0\" max=\"255\" />\\n                    <div class=\"title\">B</div>\\n                </div>          \\n                <div class=\"input-field rgb-a\">\\n                    <input ref=\"$rgb_a\" class=\"input\" type=\"number\" step=\"0.01\" min=\"0\" max=\"1\" />\\n                    <div class=\"title\">A</div>\\n                </div>                                                            \\n            </div>\\n            <div class=\"information-item hsl\">\\n                <div class=\"input-field hsl-h\">\\n                    <input ref=\"$hsl_h\" class=\"input\" type=\"number\" step=\"1\" min=\"0\" max=\"360\" />\\n                    <div class=\"title\">H</div>\\n                </div>\\n                <div class=\"input-field hsl-s\">\\n                    <input ref=\"$hsl_s\" class=\"input\" type=\"number\" step=\"1\" min=\"0\" max=\"100\" />\\n                    <div class=\"postfix\">%</div>\\n                    <div class=\"title\">S</div>\\n                </div>\\n                <div class=\"input-field hsl-l\">\\n                    <input ref=\"$hsl_l\" class=\"input\" type=\"number\" step=\"1\" min=\"0\" max=\"100\" />\\n                    <div class=\"postfix\">%</div>                        \\n                    <div class=\"title\">L</div>\\n                </div>\\n                <div class=\"input-field hsl-a\">\\n                    <input ref=\"$hsl_a\" class=\"input\" type=\"number\" step=\"0.01\" min=\"0\" max=\"1\" />\\n                    <div class=\"title\">A</div>\\n                </div>\\n            </div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'setCurrentFormat',\n      value: function setCurrentFormat(format) {\n        this.format = format;\n        this.initFormat();\n      }\n    }, {\n      key: 'initFormat',\n      value: function initFormat() {\n        var _this2 = this;\n        var current_format = this.format || 'hex';\n        ['hex', 'rgb', 'hsl'].filter(function (it) {\n          return it !== current_format;\n        }).forEach(function (formatString) {\n          _this2.$el.removeClass(formatString);\n        });\n        this.$el.addClass(current_format);\n      }\n    }, {\n      key: 'nextFormat',\n      value: function nextFormat() {\n        var current_format = this.format || 'hex';\n        var next_format = 'hex';\n        if (current_format == 'hex') {\n          next_format = 'rgb';\n        } else if (current_format == 'rgb') {\n          next_format = 'hsl';\n        } else if (current_format == 'hsl') {\n          next_format = 'hex';\n        }\n        this.format = next_format;\n        this.initFormat();\n        this.$store.dispatch('/changeFormat', this.format);\n        this.$store.emit('lastUpdateColor');\n      }\n    }, {\n      key: 'goToFormat',\n      value: function goToFormat(to_format) {\n        this.format = to_format;\n        if (to_format === 'rgb' || to_format === 'hsl') {\n          this.initFormat();\n        }\n        this.$store.dispatch('/changeFormat', this.format);\n      }\n    }, {\n      key: 'getFormat',\n      value: function getFormat() {\n        return this.format || 'hex';\n      }\n    }, {\n      key: 'checkNumberKey',\n      value: function checkNumberKey(e) {\n        var code = e.which,\n          isExcept = false;\n        if (code == 37 || code == 39 || code == 8 || code == 46 || code == 9) isExcept = true;\n        if (!isExcept && (code < 48 || code > 57)) return false;\n        return true;\n      }\n    }, {\n      key: 'checkNotNumberKey',\n      value: function checkNotNumberKey(e) {\n        return !this.checkNumberKey(e);\n      }\n    }, {\n      key: 'changeRgbColor',\n      value: function changeRgbColor() {\n        this.$store.dispatch('/changeColor', {\n          type: 'rgb',\n          r: this.refs.$rgb_r[\"int\"](),\n          g: this.refs.$rgb_g[\"int\"](),\n          b: this.refs.$rgb_b[\"int\"](),\n          a: this.refs.$rgb_a[\"float\"](),\n          source: source$2\n        });\n        this.$store.emit('lastUpdateColor');\n      }\n    }, {\n      key: 'changeHslColor',\n      value: function changeHslColor() {\n        this.$store.dispatch('/changeColor', {\n          type: 'hsl',\n          h: this.refs.$hsl_h[\"int\"](),\n          s: this.refs.$hsl_s[\"int\"](),\n          l: this.refs.$hsl_l[\"int\"](),\n          a: this.refs.$hsl_a[\"float\"](),\n          source: source$2\n        });\n        this.$store.emit('lastUpdateColor');\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$2 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }, {\n      key: 'input $rgb_r',\n      value: function input$rgb_r(e) {\n        this.changeRgbColor();\n      }\n    }, {\n      key: 'input $rgb_g',\n      value: function input$rgb_g(e) {\n        this.changeRgbColor();\n      }\n    }, {\n      key: 'input $rgb_b',\n      value: function input$rgb_b(e) {\n        this.changeRgbColor();\n      }\n    }, {\n      key: 'input $rgb_a',\n      value: function input$rgb_a(e) {\n        this.changeRgbColor();\n      }\n    }, {\n      key: 'input $hsl_h',\n      value: function input$hsl_h(e) {\n        this.changeHslColor();\n      }\n    }, {\n      key: 'input $hsl_s',\n      value: function input$hsl_s(e) {\n        this.changeHslColor();\n      }\n    }, {\n      key: 'input $hsl_l',\n      value: function input$hsl_l(e) {\n        this.changeHslColor();\n      }\n    }, {\n      key: 'input $hsl_a',\n      value: function input$hsl_a(e) {\n        this.changeHslColor();\n      }\n    }, {\n      key: 'keyup $hexCode',\n      value: function keyup$hexCode(e) {\n        var code = this.refs.$hexCode.val();\n        if (code.charAt(0) == '#' && (code.length == 7 || code.length === 9)) {\n          this.$store.dispatch('/changeColor', code, source$2);\n          this.$store.emit('lastUpdateColor');\n        }\n      }\n    }, {\n      key: 'click $formatChangeButton',\n      value: function click$formatChangeButton(e) {\n        this.nextFormat();\n      }\n    }, {\n      key: 'click $el .information-item.hex .input-field .title',\n      value: function click$elInformationItemHexInputFieldTitle(e) {\n        this.goToFormat('hex');\n      }\n    }, {\n      key: 'click $el .information-item.rgb .input-field .title',\n      value: function click$elInformationItemRgbInputFieldTitle(e) {\n        this.goToFormat('hsl');\n      }\n    }, {\n      key: 'click $el .information-item.hsl .input-field .title',\n      value: function click$elInformationItemHslInputFieldTitle(e) {\n        this.goToFormat('rgb');\n      }\n    }, {\n      key: 'setRGBInput',\n      value: function setRGBInput() {\n        this.refs.$rgb_r.val(this.$store.rgb.r);\n        this.refs.$rgb_g.val(this.$store.rgb.g);\n        this.refs.$rgb_b.val(this.$store.rgb.b);\n        this.refs.$rgb_a.val(this.$store.alpha);\n      }\n    }, {\n      key: 'setHSLInput',\n      value: function setHSLInput() {\n        this.refs.$hsl_h.val(this.$store.hsl.h);\n        this.refs.$hsl_s.val(this.$store.hsl.s);\n        this.refs.$hsl_l.val(this.$store.hsl.l);\n        this.refs.$hsl_a.val(this.$store.alpha);\n      }\n    }, {\n      key: 'setHexInput',\n      value: function setHexInput() {\n        this.refs.$hexCode.val(this.$store.dispatch('/toHEX'));\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setCurrentFormat(this.$store.format);\n        this.setRGBInput();\n        this.setHSLInput();\n        this.setHexInput();\n      }\n    }]);\n    return ColorInformation;\n  }(UIElement);\n  var DATA_COLORSETS_INDEX = 'data-colorsets-index';\n  var ColorSetsChooser = function (_UIElement) {\n    inherits(ColorSetsChooser, _UIElement);\n    function ColorSetsChooser() {\n      classCallCheck(this, ColorSetsChooser);\n      return possibleConstructorReturn(this, (ColorSetsChooser.__proto__ || Object.getPrototypeOf(ColorSetsChooser)).apply(this, arguments));\n    }\n    createClass(ColorSetsChooser, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\"color-chooser\">\\n                <div class=\"color-chooser-container\">\\n                    <div class=\"colorsets-item colorsets-item-header\">\\n                        <h1 class=\"title\">Color Palettes</h1>\\n                        <span ref=\"$toggleButton\" class=\"items\">&times;</span>\\n                    </div>\\n                    <div ref=\"$colorsetsList\" class=\"colorsets-list\"></div>\\n                </div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.load();\n      }\n    }, {\n      key: '@changeCurrentColorSets',\n      value: function changeCurrentColorSets() {\n        this.refresh();\n      }\n    }, {\n      key: '@toggleColorChooser',\n      value: function toggleColorChooser() {\n        this.toggle();\n      }\n\n      // loadable \n    }, {\n      key: 'load $colorsetsList',\n      value: function load$colorsetsList() {\n        // colorsets \n        var colorSets = this.$store.dispatch('/getColorSetsList');\n        return '\\n            <div>\\n                ' + colorSets.map(function (element, index) {\n          return '\\n                        <div class=\"colorsets-item\" data-colorsets-index=\"' + index + '\" >\\n                            <h1 class=\"title\">' + element.name + '</h1>\\n                            <div class=\"items\">\\n                                <div>\\n                                    ' + element.colors.filter(function (color, i) {\n            return i < 5;\n          }).map(function (color) {\n            color = color || 'rgba(255, 255, 255, 1)';\n            return '<div class=\"color-item\" title=\"' + color + '\">\\n                                                <div class=\"color-view\" style=\"background-color: ' + color + '\"></div>\\n                                            </div>';\n          }).join('') + '\\n                                </div>\\n                            </div>\\n                        </div>';\n        }).join('') + '\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'show',\n      value: function show() {\n        this.$el.addClass('open');\n      }\n    }, {\n      key: 'hide',\n      value: function hide() {\n        this.$el.removeClass('open');\n      }\n    }, {\n      key: 'toggle',\n      value: function toggle() {\n        this.$el.toggleClass('open');\n      }\n    }, {\n      key: 'click $toggleButton',\n      value: function click$toggleButton(e) {\n        this.toggle();\n      }\n    }, {\n      key: 'click $colorsetsList .colorsets-item',\n      value: function click$colorsetsListColorsetsItem(e) {\n        var $item = e.$delegateTarget;\n        if ($item) {\n          var index = parseInt($item.attr(DATA_COLORSETS_INDEX));\n          this.$store.dispatch('/setCurrentColorSets', index);\n          this.hide();\n        }\n      }\n    }, {\n      key: 'destroy',\n      value: function destroy() {\n        get(ColorSetsChooser.prototype.__proto__ || Object.getPrototypeOf(ColorSetsChooser.prototype), 'destroy', this).call(this);\n        this.hide();\n      }\n    }]);\n    return ColorSetsChooser;\n  }(UIElement);\n  var CurrentColorSets = function (_UIElement) {\n    inherits(CurrentColorSets, _UIElement);\n    function CurrentColorSets() {\n      classCallCheck(this, CurrentColorSets);\n      return possibleConstructorReturn(this, (CurrentColorSets.__proto__ || Object.getPrototypeOf(CurrentColorSets)).apply(this, arguments));\n    }\n    createClass(CurrentColorSets, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\"colorsets\">\\n                <div class=\"menu\" title=\"Open Color Palettes\">\\n                    <button ref=\"$colorSetsChooseButton\" type=\"button\" class=\"color-sets-choose-btn arrow-button\"></button>\\n                </div>\\n                <div ref=\"$colorSetsColorList\" class=\"color-list\"></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'load $colorSetsColorList',\n      value: function load$colorSetsColorList() {\n        var currentColorSets = this.$store.dispatch('/getCurrentColorSets');\n        var colors = this.$store.dispatch('/getCurrentColors');\n        return '\\n            <div>\\n                <h6>' + currentColorSets.name + '</h6>\\n                <div class=\"current-color-sets\">\\n                ' + colors.map(function (color, i) {\n          return '<div class=\"color-item\" title=\"' + color + '\" data-index=\"' + i + '\" data-color=\"' + color + '\">\\n                        <div class=\"empty\"></div>\\n                        <div class=\"color-view\" style=\"background-color: ' + color + '\"></div>\\n                    </div>';\n        }).join('') + '   \\n                ' + (currentColorSets.edit ? '<div class=\"add-color-item\">+</div>' : '') + '         \\n                </div>\\n            </div>\\n            \\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.load();\n      }\n    }, {\n      key: 'addColor',\n      value: function addColor(color) {\n        this.$store.dispatch('/addCurrentColor', color);\n      }\n    }, {\n      key: '@changeCurrentColorSets',\n      value: function changeCurrentColorSets() {\n        this.refresh();\n      }\n    }, {\n      key: 'click $colorSetsChooseButton',\n      value: function click$colorSetsChooseButton(e) {\n        this.$store.emit('toggleColorChooser');\n      }\n    }, {\n      key: 'contextmenu $colorSetsColorList',\n      value: function contextmenu$colorSetsColorList(e) {\n        e.preventDefault();\n        var currentColorSets = this.$store.dispatch('/getCurrentColorSets');\n        if (!currentColorSets.edit) {\n          return;\n        }\n        var $target = new Dom(e.target);\n        var $item = $target.closest('color-item');\n        if ($item) {\n          var index = parseInt($item.attr('data-index'));\n          this.$store.emit('showContextMenu', e, index);\n        } else {\n          this.$store.emit('showContextMenu', e);\n        }\n      }\n    }, {\n      key: 'click $colorSetsColorList .add-color-item',\n      value: function click$colorSetsColorListAddColorItem(e) {\n        this.addColor(this.$store.dispatch('/toColor'));\n      }\n    }, {\n      key: 'click $colorSetsColorList .color-item',\n      value: function click$colorSetsColorListColorItem(e) {\n        this.$store.dispatch('/changeColor', e.$delegateTarget.attr('data-color'));\n        this.$store.emit('lastUpdateColor');\n      }\n    }]);\n    return CurrentColorSets;\n  }(UIElement);\n  var CurrentColorSetsContextMenu = function (_UIElement) {\n    inherits(CurrentColorSetsContextMenu, _UIElement);\n    function CurrentColorSetsContextMenu() {\n      classCallCheck(this, CurrentColorSetsContextMenu);\n      return possibleConstructorReturn(this, (CurrentColorSetsContextMenu.__proto__ || Object.getPrototypeOf(CurrentColorSetsContextMenu)).apply(this, arguments));\n    }\n    createClass(CurrentColorSetsContextMenu, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <ul class=\"colorsets-contextmenu\">\\n                <li class=\"menu-item small-hide\" data-type=\"remove-color\">Remove color</li>\\n                <li class=\"menu-item small-hide\" data-type=\"remove-all-to-the-right\">Remove all to the right</li>\\n                <li class=\"menu-item\" data-type=\"clear-palette\">Clear palette</li>\\n            </ul>\\n        ';\n      }\n    }, {\n      key: 'show',\n      value: function show(e, index) {\n        var $event = Event.pos(e);\n        this.$el.css({\n          top: $event.clientY - 10 + 'px',\n          left: $event.clientX + 'px'\n        });\n        this.$el.addClass('show');\n        this.selectedColorIndex = index;\n        if (typeof this.selectedColorIndex == 'undefined') {\n          this.$el.addClass('small');\n        } else {\n          this.$el.removeClass('small');\n        }\n      }\n    }, {\n      key: 'hide',\n      value: function hide() {\n        this.$el.removeClass('show');\n      }\n    }, {\n      key: 'runCommand',\n      value: function runCommand(command) {\n        switch (command) {\n          case 'remove-color':\n            this.$store.dispatch('/removeCurrentColor', this.selectedColorIndex);\n            break;\n          case 'remove-all-to-the-right':\n            this.$store.dispatch('/removeCurrentColorToTheRight', this.selectedColorIndex);\n            break;\n          case 'clear-palette':\n            this.$store.dispatch('/clearPalette');\n            break;\n        }\n      }\n    }, {\n      key: '@showContextMenu',\n      value: function showContextMenu(e, index) {\n        this.show(e, index);\n      }\n    }, {\n      key: 'click $el .menu-item',\n      value: function click$elMenuItem(e) {\n        e.preventDefault();\n        this.runCommand(e.$delegateTarget.attr('data-type'));\n        this.hide();\n      }\n    }]);\n    return CurrentColorSetsContextMenu;\n  }(UIElement);\n  var MacOSColorPicker = function (_BaseColorPicker) {\n    inherits(MacOSColorPicker, _BaseColorPicker);\n    function MacOSColorPicker() {\n      classCallCheck(this, MacOSColorPicker);\n      return possibleConstructorReturn(this, (MacOSColorPicker.__proto__ || Object.getPrototypeOf(MacOSColorPicker)).apply(this, arguments));\n    }\n    createClass(MacOSColorPicker, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\\'colorpicker-body\\'>\\n                <div target=\"colorwheel\"></div>\\n                <div target=\"control\"></div>\\n                <div target=\"information\"></div>\\n                <div target=\"currentColorSets\"></div>\\n                <div target=\"colorSetsChooser\"></div>\\n                <div target=\"contextMenu\"></div>                \\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          colorwheel: ColorWheel,\n          control: ColorControl,\n          information: ColorInformation,\n          currentColorSets: CurrentColorSets,\n          colorSetsChooser: ColorSetsChooser,\n          contextMenu: CurrentColorSetsContextMenu\n        };\n      }\n    }]);\n    return MacOSColorPicker;\n  }(BaseColorPicker);\n  var Hue = function (_BaseSlider) {\n    inherits(Hue, _BaseSlider);\n    function Hue(opt) {\n      classCallCheck(this, Hue);\n      var _this = possibleConstructorReturn(this, (Hue.__proto__ || Object.getPrototypeOf(Hue)).call(this, opt));\n      _this.minValue = 0;\n      _this.maxValue = 360;\n      _this.source = 'hue-control';\n      return _this;\n    }\n    createClass(Hue, [{\n      key: 'template',\n      value: function template() {\n        return /*html*/'\\n            <div class=\"hue\"> \\n                <div ref=\"$container\" class=\"hue-container\">\\n                    <div ref=\"$bar\" class=\"drag-bar\"></div>\\n                </div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.hsv.h;\n      }\n    }, {\n      key: 'refreshColorUI',\n      value: function refreshColorUI(e) {\n        var dist = this.getCaculatedDist(e);\n        var isDifferent = this.setColorUI(dist / 100 * this.maxValue);\n        if (isDifferent !== true) {\n          this.changeColor({\n            h: dist / 100 * this.maxValue,\n            type: 'hsv'\n          });\n        }\n      }\n    }]);\n    return Hue;\n  }(BaseSlider);\n  var HueScale = function (_BaseSlider) {\n    inherits(HueScale, _BaseSlider);\n    function HueScale() {\n      classCallCheck(this, HueScale);\n      return possibleConstructorReturn(this, (HueScale.__proto__ || Object.getPrototypeOf(HueScale)).apply(this, arguments));\n    }\n    createClass(HueScale, [{\n      key: \"initialize\",\n      value: function initialize() {\n        get(HueScale.prototype.__proto__ || Object.getPrototypeOf(HueScale.prototype), \"initialize\", this).call(this);\n        this.minValue = 0;\n        this.maxValue = 360;\n        this.hueScaleDist = 0.05;\n      }\n    }, {\n      key: \"template\",\n      value: function template() {\n        return /*html*/\"\\n            <div class=\\\"hue-scale\\\">\\n                <div ref=\\\"$container\\\" class=\\\"hue-scale-container\\\">\\n                    <div ref=\\\"$bar\\\" class=\\\"drag-bar\\\"></div>\\n                </div>\\n            </div>\\n        \";\n      }\n    }, {\n      key: \"getDefaultValue\",\n      value: function getDefaultValue() {\n        return this.$store.hsv.h;\n      }\n\n      /** get calculated dist for domain value   */\n    }, {\n      key: \"getCalculatedDist\",\n      value: function getCalculatedDist(e) {\n        var current = e ? this.getMousePosition(e) : this.getCurrent(this.getDefaultValue() / this.maxValue);\n        var dist = this.getDist(current);\n        return dist;\n      }\n    }, {\n      key: \"refreshColorUI\",\n      value: function refreshColorUI(e) {\n        var dist = this.getCalculatedDist(e);\n        var isDifferent = this.setColorUI(dist / 100);\n\n        // hue 가 변경되지 않은 상태면 changeColor 를 하지 않는다. \n        if (isDifferent !== true) {\n          this.changeColor({\n            h: (this.minValue + this.fullDist * (dist / 100)) * 360,\n            type: 'hsv'\n          });\n        }\n      }\n    }, {\n      key: \"setColorUI\",\n      value: function setColorUI(v) {\n        var p = void 0;\n        if (v) {\n          p = this.minValue + v * this.fullDist;\n          if (this.lastP === p) return true;\n          this.lastP = p;\n        } else {\n          p = this.getDefaultValue() / 360;\n          if (this.lastP === p) return true;\n          this.lastP = p;\n          var maxP = p + 0.05;\n          var minP = p - 0.05;\n          if (maxP > 1) {\n            maxP = 1;\n            minP = 1 - this.hueScaleDist * 2;\n          } else if (minP < 0) {\n            var _dist = Math.abs(minP);\n            minP = 0;\n            maxP = maxP + _dist;\n          }\n          var list = HueColor.getHueScale(p, minP, maxP);\n\n          // console.log(list, p, minP, maxP);\n\n          this.list = list;\n          var minValue = list[0].start;\n          var maxValue = list[list.length - 1].start;\n          this.minValue = minValue;\n          this.maxValue = maxValue;\n          var fullDist = this.maxValue - this.minValue;\n          this.fullDist = fullDist;\n          var colorsteps = list.map(function (it) {\n            return {\n              color: it.rgb,\n              percent: (it.start - minValue) / fullDist * 100,\n              unit: '%'\n            };\n          });\n\n          // console.log(colorsteps);\n\n          this.refs.$container.css('background-image', \"linear-gradient(to right, \" + colorsteps.map(function (it) {\n            return it.color + \" \" + it.percent + it.unit;\n          }).join(',') + \")\");\n        }\n        if (p <= this.minValue) {\n          p = this.minValue;\n          this.refs.$bar.addClass('first').removeClass('last');\n        } else if (p >= this.maxValue) {\n          p = this.maxValue;\n          this.refs.$bar.addClass('last').removeClass('first');\n        } else {\n          this.refs.$bar.removeClass('last').removeClass('first');\n        }\n        this.setMousePosition(this.getMaxDist() * ((p - this.minValue) / this.fullDist));\n      }\n    }]);\n    return HueScale;\n  }(BaseSlider);\n  var source$3 = 'chromedevtool-control';\n  var ColorControl$2 = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Hue: Hue,\n          Opacity: Opacity,\n          HueScale: HueScale\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"control\">\\n            <div target=\"Hue\" ></div>\\n            <div target=\"HueScale\" ></div>\\n            <div target=\"Opacity\" ></div>\\n            <div ref=\"$controlPattern\" class=\"empty\"></div>\\n            <div ref=\"$controlColor\" class=\"color\"></div>\\n            <div ref=\"$controlPattern2\" class=\"empty2\"></div>\\n            <div ref=\"$controlColor2\" class=\"color2\"></div>            \\n        </div>\\n        ';\n      }\n    }, {\n      key: 'setBackgroundColor',\n      value: function setBackgroundColor() {\n        this.refs.$controlColor.css(\"background-color\", this.$store.dispatch('/toRGB'));\n      }\n    }, {\n      key: 'setLastUpdateColor',\n      value: function setLastUpdateColor() {\n        this.refs.$controlColor2.css(\"background-color\", this.$store.dispatch('/toRGB'));\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n        this.setBackgroundColor();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Hue.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$3 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@lastUpdateColor',\n      value: function lastUpdateColor(sourceType) {\n        if (source$3 != sourceType) {\n          this.setLastUpdateColor();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var source$4 = 'chromedevtool-palette';\n  var ColorPalette = function (_UIElement) {\n    inherits(ColorPalette, _UIElement);\n    function ColorPalette() {\n      classCallCheck(this, ColorPalette);\n      return possibleConstructorReturn(this, (ColorPalette.__proto__ || Object.getPrototypeOf(ColorPalette)).apply(this, arguments));\n    }\n    createClass(ColorPalette, [{\n      key: 'template',\n      value: function template() {\n        return /*html*/'\\n        <div class=\"color\">\\n            <div ref=\"$saturation\" class=\"saturation\">\\n                <div ref=\"$value\" class=\"value\">\\n                    <div ref=\"$drag_pointer\" class=\"drag-pointer\" data-axis-value=\"all\">\\n                        <div ref=\"$left_saturation\" class=\"left-saturation\" data-axis-value=\"saturation\"></div>\\n                        <div ref=\"$right_saturation\" class=\"right-saturation\" data-axis-value=\"saturation\"></div>\\n                        <div ref=\"$top_value\" class=\"top-value\" data-axis-value=\"value\"></div>\\n                        <div ref=\"$bottom_value\" class=\"bottom-value\" data-axis-value=\"value\"></div>\\n                    </div>\\n                </div>\\n            </div>        \\n        </div>        \\n        ';\n      }\n    }, {\n      key: 'setBackgroundColor',\n      value: function setBackgroundColor(color) {\n        this.$el.css(\"background-color\", color);\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.cacheSize();\n        this.setColorUI();\n      }\n    }, {\n      key: 'calculateSV',\n      value: function calculateSV() {\n        var pos = this.drag_pointer_pos || {\n          x: 0,\n          y: 0\n        };\n        var width = this.state.get('$el.width');\n        var height = this.state.get('$el.height');\n        var s = pos.x / width;\n        var v = (height - pos.y) / height;\n        this.$store.dispatch('/changeColor', {\n          type: 'hsv',\n          s: s,\n          v: v,\n          source: source$4\n        });\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        var x = this.w * this.$store.hsv.s,\n          y = this.h * (1 - this.$store.hsv.v);\n        this.refs.$drag_pointer.css({\n          left: x + \"px\",\n          top: y + \"px\"\n        });\n        this.drag_pointer_pos = {\n          x: x,\n          y: y\n        };\n        this.setBackgroundColor(this.$store.dispatch('/getHueColor'));\n      }\n    }, {\n      key: 'setSubColor',\n      value: function setSubColor(e) {\n        var localX = e.pageX;\n        var localY = e.pageY;\n        var distX = localX - this.x;\n        var distY = localY - this.y;\n        var w = this.$el.contentWidth();\n        var h = this.$el.contentHeight();\n        var x = this.refs.$drag_pointer.cssFloat(\"left\");\n        var y = this.refs.$drag_pointer.cssFloat(\"top\");\n        if (this.axis === 'saturation') {\n          x += distX;\n        } else if (this.axis === 'value') {\n          y += distY;\n        }\n        if (x < 0) x = 0;else if (x > w) x = w;\n        if (y < 0) y = 0;else if (y > h) y = h;\n        this.refs.$drag_pointer.px(\"left\", x);\n        this.refs.$drag_pointer.px(\"top\", y);\n        this.drag_pointer_pos = {\n          x: x,\n          y: y\n        };\n        this.x = localX;\n        this.y = localY;\n        this.calculateSV();\n      }\n    }, {\n      key: 'setMainColor',\n      value: function setMainColor(e) {\n        // e.preventDefault();\n        var pos = this.$el.offset(); // position for screen\n        var w = this.w;\n        var h = this.h;\n        var x = Event.pos(e).pageX - pos.left;\n        var y = Event.pos(e).pageY - pos.top;\n        if (x < 0) x = 0;else if (x > w) x = w;\n        if (y < 0) y = 0;else if (y > h) y = h;\n        this.refs.$drag_pointer.css({\n          left: x + 'px',\n          top: y + 'px'\n        });\n        this.drag_pointer_pos = {\n          x: x,\n          y: y\n        };\n        this.calculateSV();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$4 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }, {\n      key: 'mouseup document',\n      value: function mouseupDocument(e) {\n        if (this.isDown) {\n          this.isDown = false;\n          this.$store.emit('lastUpdateColor');\n        }\n      }\n    }, {\n      key: 'mousemove document',\n      value: function mousemoveDocument(e) {\n        if (this.isDown) {\n          this.cacheSize();\n          if (this.axis === 'saturation' || this.axis === 'value') {\n            this.setSubColor(e);\n          } else {\n            this.setMainColor(e);\n          }\n        }\n      }\n    }, {\n      key: 'mousedown',\n      value: function mousedown(e) {\n        this.isDown = true;\n        this.cacheSize();\n        this.axis = new Dom(e.target).attr('data-axis-value');\n        this.x = e.pageX;\n        this.y = e.pageY;\n        if (this.axis === 'saturation' || this.axis === 'value') {\n          this.setSubColor(e);\n        } else {\n          this.setMainColor(e);\n        }\n      }\n    }, {\n      key: 'touchend document',\n      value: function touchendDocument(e) {\n        if (this.isDown) {\n          this.isDown = false;\n          this.$store.emit('lastUpdateColor');\n        }\n      }\n    }, {\n      key: 'touchmove document',\n      value: function touchmoveDocument(e) {\n        if (this.isDown) {\n          this.setMainColor(e);\n        }\n      }\n    }, {\n      key: 'touchstart',\n      value: function touchstart(e) {\n        e.preventDefault();\n        this.isDown = true;\n        this.cacheSize();\n        this.setMainColor(e);\n      }\n    }, {\n      key: 'cacheSize',\n      value: function cacheSize() {\n        this.w = this.state.get('$el.contentWidth');\n        this.h = this.state.get('$el.contentHeight');\n      }\n    }]);\n    return ColorPalette;\n  }(UIElement);\n  var ChromeDevToolColorPicker = function (_BaseColorPicker) {\n    inherits(ChromeDevToolColorPicker, _BaseColorPicker);\n    function ChromeDevToolColorPicker() {\n      classCallCheck(this, ChromeDevToolColorPicker);\n      return possibleConstructorReturn(this, (ChromeDevToolColorPicker.__proto__ || Object.getPrototypeOf(ChromeDevToolColorPicker)).apply(this, arguments));\n    }\n    createClass(ChromeDevToolColorPicker, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\\'colorpicker-body\\'>\\n                <div target=\"palette\"></div> \\n                <div target=\"control\"></div>\\n                <div target=\"information\"></div>\\n                <div target=\"currentColorSets\"></div>\\n                <div target=\"colorSetsChooser\"></div>\\n                <div target=\"contextMenu\"></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          palette: ColorPalette,\n          control: ColorControl$2,\n          information: ColorInformation,\n          currentColorSets: CurrentColorSets,\n          colorSetsChooser: ColorSetsChooser,\n          contextMenu: CurrentColorSetsContextMenu\n        };\n      }\n    }]);\n    return ChromeDevToolColorPicker;\n  }(BaseColorPicker);\n  var source$5 = 'mini-control';\n  var ColorControl$4 = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Hue: Hue,\n          Opacity: Opacity\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"control\">\\n            <div target=\"Hue\" ></div>\\n            <div target=\"Opacity\" ></div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Hue.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$5 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var MiniColorPicker = function (_BaseColorPicker) {\n    inherits(MiniColorPicker, _BaseColorPicker);\n    function MiniColorPicker() {\n      classCallCheck(this, MiniColorPicker);\n      return possibleConstructorReturn(this, (MiniColorPicker.__proto__ || Object.getPrototypeOf(MiniColorPicker)).apply(this, arguments));\n    }\n    createClass(MiniColorPicker, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\\'colorpicker-body\\'>\\n                <div target=\"palette\"></div>\\n                <div target=\"control\"></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          palette: ColorPalette,\n          control: ColorControl$4\n        };\n      }\n    }]);\n    return MiniColorPicker;\n  }(BaseColorPicker);\n  var VerticalSlider = function (_BaseSlider) {\n    inherits(VerticalSlider, _BaseSlider);\n    function VerticalSlider(opt) {\n      classCallCheck(this, VerticalSlider);\n      var _this = possibleConstructorReturn(this, (VerticalSlider.__proto__ || Object.getPrototypeOf(VerticalSlider)).call(this, opt));\n      _this.source = 'vertical-slider';\n      return _this;\n    }\n\n    /** get max height for vertical slider */\n\n    createClass(VerticalSlider, [{\n      key: 'getMaxDist',\n      value: function getMaxDist() {\n        return this.state.get('$container.height');\n      }\n\n      /** set mouse pointer for vertical slider */\n    }, {\n      key: 'setMousePosition',\n      value: function setMousePosition(y) {\n        this.refs.$bar.css({\n          top: y + 'px'\n        });\n      }\n\n      /** get mouse position by pageY for vertical slider */\n    }, {\n      key: 'getMousePosition',\n      value: function getMousePosition(e) {\n        return Event.pos(e).pageY;\n      }\n\n      /** get min position for vertial slider */\n    }, {\n      key: 'getMinPosition',\n      value: function getMinPosition() {\n        return this.refs.$container.offset().top;\n      }\n\n      /** get caculated dist for domain value   */\n    }, {\n      key: 'getCaculatedDist',\n      value: function getCaculatedDist(e) {\n        var current = e ? this.getMousePosition(e) : this.getCurrent(this.getDefaultValue() / this.maxValue);\n        var dist = 100 - this.getDist(current);\n        return dist;\n      }\n\n      /** set drag bar position  */\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI(v) {\n        v = v || this.getDefaultValue();\n        if (v <= this.minValue) {\n          this.refs.$bar.addClass('first').removeClass('last');\n        } else if (v >= this.maxValue) {\n          this.refs.$bar.addClass('last').removeClass('first');\n        } else {\n          this.refs.$bar.removeClass('last').removeClass('first');\n        }\n        var per = 1 - (v || 0) / this.maxValue;\n        this.setMousePosition(this.getMaxDist() * per);\n      }\n    }]);\n    return VerticalSlider;\n  }(BaseSlider);\n  var VerticalHue = function (_VerticalSlider) {\n    inherits(VerticalHue, _VerticalSlider);\n    function VerticalHue(opt) {\n      classCallCheck(this, VerticalHue);\n      var _this = possibleConstructorReturn(this, (VerticalHue.__proto__ || Object.getPrototypeOf(VerticalHue)).call(this, opt));\n      _this.minValue = 0;\n      _this.maxValue = 360;\n      _this.source = 'vertical-hue-control';\n      return _this;\n    }\n    createClass(VerticalHue, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\"hue\">\\n                <div ref=\"$container\" class=\"hue-container\">\\n                    <div ref=\"$bar\" class=\"drag-bar\"></div>\\n                </div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.hsv.h;\n      }\n    }, {\n      key: 'refreshColorUI',\n      value: function refreshColorUI(e) {\n        var dist = this.getCaculatedDist(e);\n        this.setColorUI(dist / 100 * this.maxValue);\n        this.changeColor({\n          h: dist / 100 * this.maxValue,\n          type: 'hsv'\n        });\n      }\n    }]);\n    return VerticalHue;\n  }(VerticalSlider);\n  var Opacity$2 = function (_VerticalSlider) {\n    inherits(Opacity, _VerticalSlider);\n    function Opacity(opt) {\n      classCallCheck(this, Opacity);\n      var _this = possibleConstructorReturn(this, (Opacity.__proto__ || Object.getPrototypeOf(Opacity)).call(this, opt));\n      _this.source = 'vertical-opacity-control';\n      return _this;\n    }\n    createClass(Opacity, [{\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"opacity\">\\n            <div ref=\"$container\" class=\"opacity-container\">\\n                <div ref=\"$colorbar\" class=\"color-bar\"></div>\\n                <div ref=\"$bar\" class=\"drag-bar2\"></div>\\n            </div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        get(Opacity.prototype.__proto__ || Object.getPrototypeOf(Opacity.prototype), 'refresh', this).call(this);\n        this.setOpacityColorBar();\n      }\n    }, {\n      key: 'setOpacityColorBar',\n      value: function setOpacityColorBar() {\n        var rgb = Object.assign({}, this.$store.rgb);\n        rgb.a = 0;\n        var start = Color$1.format(rgb, 'rgb');\n        rgb.a = 1;\n        var end = Color$1.format(rgb, 'rgb');\n        this.refs.$colorbar.css('background', 'linear-gradient(to top, ' + start + ', ' + end + ')');\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.alpha;\n      }\n    }, {\n      key: 'refreshColorUI',\n      value: function refreshColorUI(e) {\n        var dist = this.getCaculatedDist(e);\n        this.setColorUI(dist / 100 * this.maxValue);\n        this.changeColor({\n          a: Math.floor(dist) / 100 * this.maxValue\n        });\n      }\n    }]);\n    return Opacity;\n  }(VerticalSlider);\n  var source$6 = 'mini-control';\n  var ColorControl$6 = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Hue: VerticalHue,\n          Opacity: Opacity$2\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return '<div class=\"control\"><div target=\"Hue\" ></div><div target=\"Opacity\" ></div></div>';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Hue.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$6 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var MiniColorPicker$2 = function (_BaseColorPicker) {\n    inherits(MiniColorPicker, _BaseColorPicker);\n    function MiniColorPicker() {\n      classCallCheck(this, MiniColorPicker);\n      return possibleConstructorReturn(this, (MiniColorPicker.__proto__ || Object.getPrototypeOf(MiniColorPicker)).apply(this, arguments));\n    }\n    createClass(MiniColorPicker, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\\'colorpicker-body\\'>\\n                <div target=\"palette\"></div><div target=\"control\"></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          palette: ColorPalette,\n          control: ColorControl$6\n        };\n      }\n    }]);\n    return MiniColorPicker;\n  }(BaseColorPicker);\n  var source$7 = 'macos-control';\n  var ColorControl$8 = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Value: Value,\n          Opacity: Opacity\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"control\">\\n            <div target=\"Value\" ></div>\\n            <div target=\"Opacity\" ></div>\\n            <div ref=\"$controlPattern\" class=\"empty\"></div>\\n            <div ref=\"$controlColor\" class=\"color\"></div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'setBackgroundColor',\n      value: function setBackgroundColor() {\n        this.refs.$controlColor.css(\"background-color\", this.$store.dispatch('/toRGB'));\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n        this.setBackgroundColor();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Value.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$7 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var ColorRing = function (_ColorWheel) {\n    inherits(ColorRing, _ColorWheel);\n    function ColorRing(opt) {\n      classCallCheck(this, ColorRing);\n      var _this = possibleConstructorReturn(this, (ColorRing.__proto__ || Object.getPrototypeOf(ColorRing)).call(this, opt));\n      _this.width = 214;\n      _this.height = 214;\n      _this.thinkness = 16;\n      _this.half_thinkness = _this.thinkness / 2;\n      _this.source = 'colorring';\n      return _this;\n    }\n    createClass(ColorRing, [{\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"wheel\" data-type=\"ring\">\\n            <canvas class=\"wheel-canvas\" ref=\"$colorwheel\" ></canvas>\\n            <div class=\"drag-pointer\" ref=\"$drag_pointer\"></div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI(isEvent) {\n        this.renderCanvas();\n        this.setHueColor(null, isEvent);\n      }\n    }, {\n      key: 'getDefaultValue',\n      value: function getDefaultValue() {\n        return this.$store.hsv.h;\n      }\n    }, {\n      key: 'setHueColor',\n      value: function setHueColor(e, isEvent) {\n        if (!this.state.get('$el.width')) return;\n        var _getRectangle = this.getRectangle(),\n          minX = _getRectangle.minX,\n          minY = _getRectangle.minY,\n          radius = _getRectangle.radius,\n          centerX = _getRectangle.centerX,\n          centerY = _getRectangle.centerY;\n        var _getCurrentXY = this.getCurrentXY(e, this.getDefaultValue(), radius, centerX, centerY),\n          x = _getCurrentXY.x,\n          y = _getCurrentXY.y;\n        var rx = x - centerX,\n          ry = y - centerY,\n          hue = caculateAngle(rx, ry);\n        {\n          var _getCurrentXY2 = this.getCurrentXY(null, hue, radius - this.half_thinkness, centerX, centerY),\n            x = _getCurrentXY2.x,\n            y = _getCurrentXY2.y;\n        }\n\n        // set drag pointer position \n        this.refs.$drag_pointer.css({\n          left: x - minX + 'px',\n          top: y - minY + 'px'\n        });\n        if (!isEvent) {\n          this.changeColor({\n            type: 'hsv',\n            h: hue\n          });\n        }\n      }\n    }]);\n    return ColorRing;\n  }(ColorWheel);\n\n  // import ColorWheel from '../ui/ColorWheel'\n  var RingColorPicker = function (_BaseColorPicker) {\n    inherits(RingColorPicker, _BaseColorPicker);\n    function RingColorPicker() {\n      classCallCheck(this, RingColorPicker);\n      return possibleConstructorReturn(this, (RingColorPicker.__proto__ || Object.getPrototypeOf(RingColorPicker)).apply(this, arguments));\n    }\n    createClass(RingColorPicker, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\\'colorpicker-body\\'>\\n                <div target=\"colorring\"></div>\\n                <div target=\"palette\"></div> \\n                <div target=\"control\"></div>\\n                <div target=\"information\"></div>\\n                <div target=\"currentColorSets\"></div>\\n                <div target=\"colorSetsChooser\"></div>\\n                <div target=\"contextMenu\"></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          colorring: ColorRing,\n          palette: ColorPalette,\n          control: ColorControl$8,\n          information: ColorInformation,\n          currentColorSets: CurrentColorSets,\n          colorSetsChooser: ColorSetsChooser,\n          contextMenu: CurrentColorSetsContextMenu\n        };\n      }\n    }]);\n    return RingColorPicker;\n  }(BaseColorPicker);\n  var ColorControl$10 = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Hue: VerticalHue,\n          Opacity: Opacity$2\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return '\\n        <div class=\"control\">\\n            <div target=\"Hue\" ></div>\\n            <div target=\"Opacity\" ></div>\\n        </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Hue.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor() {\n        this.refresh();\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var XDColorPicker = function (_BaseColorPicker) {\n    inherits(XDColorPicker, _BaseColorPicker);\n    function XDColorPicker() {\n      classCallCheck(this, XDColorPicker);\n      return possibleConstructorReturn(this, (XDColorPicker.__proto__ || Object.getPrototypeOf(XDColorPicker)).apply(this, arguments));\n    }\n    createClass(XDColorPicker, [{\n      key: 'template',\n      value: function template() {\n        return '\\n            <div class=\\'colorpicker-body\\'>\\n                <div target=\"palette\"></div> \\n                <div target=\"control\"></div>\\n                <div target=\"information\"></div>\\n                <div target=\"currentColorSets\"></div>\\n                <div target=\"colorSetsChooser\"></div>\\n                <div target=\"contextMenu\"></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          palette: ColorPalette,\n          control: ColorControl$10,\n          information: ColorInformation,\n          currentColorSets: CurrentColorSets,\n          colorSetsChooser: ColorSetsChooser,\n          contextMenu: CurrentColorSetsContextMenu\n        };\n      }\n    }]);\n    return XDColorPicker;\n  }(BaseColorPicker);\n  var source$8 = 'mini-control';\n  var ColorControl$12 = function (_UIElement) {\n    inherits(ColorControl, _UIElement);\n    function ColorControl() {\n      classCallCheck(this, ColorControl);\n      return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments));\n    }\n    createClass(ColorControl, [{\n      key: 'components',\n      value: function components() {\n        return {\n          Hue: VerticalHue,\n          Opacity: Opacity$2\n        };\n      }\n    }, {\n      key: 'template',\n      value: function template() {\n        return /*html*/'\\n            <div class=\"control\">\\n                <div target=\"Opacity\" ></div>            \\n                <div target=\"Hue\" ></div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setColorUI();\n      }\n    }, {\n      key: 'setColorUI',\n      value: function setColorUI() {\n        this.Hue.setColorUI();\n        this.Opacity.setColorUI();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor(sourceType) {\n        if (source$8 != sourceType) {\n          this.refresh();\n        }\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return ColorControl;\n  }(UIElement);\n  var VSCodePicker = function (_BaseColorPicker) {\n    inherits(VSCodePicker, _BaseColorPicker);\n    function VSCodePicker() {\n      classCallCheck(this, VSCodePicker);\n      return possibleConstructorReturn(this, (VSCodePicker.__proto__ || Object.getPrototypeOf(VSCodePicker)).apply(this, arguments));\n    }\n    createClass(VSCodePicker, [{\n      key: 'template',\n      value: function template() {\n        return /*html*/'\\n            <div class=\\'colorpicker-body\\'>\\n                <div class=\\'color-view\\'>\\n                    <div class=\\'color-view-container\\'  ref=\"$colorview\"></div>\\n                </div>\\n                <div class=\\'color-tool\\'>\\n                    <div target=\"palette\"></div>\\n                    <div target=\"control\"></div>\\n                </div>\\n            </div>\\n        ';\n      }\n    }, {\n      key: 'components',\n      value: function components() {\n        return {\n          palette: ColorPalette,\n          control: ColorControl$12\n        };\n      }\n    }, {\n      key: 'initColorWithoutChangeEvent',\n      value: function initColorWithoutChangeEvent(color) {\n        this.$store.dispatch('/initColor', color);\n        this.refresh();\n      }\n    }, {\n      key: 'setBackgroundColor',\n      value: function setBackgroundColor() {\n        var color = this.$store.dispatch('/toColor');\n        var rgb = this.$store.rgb;\n        var bValue = Color$1.brightness(rgb.r, rgb.g, rgb.b);\n        this.refs.$colorview.css({\n          \"background-color\": color,\n          'color': bValue > 127 ? 'black' : 'white'\n        });\n        this.refs.$colorview.html(color);\n      }\n    }, {\n      key: 'click $colorview',\n      value: function click$colorview(e) {\n        this.nextFormat();\n      }\n    }, {\n      key: 'nextFormat',\n      value: function nextFormat() {\n        var current_format = this.$store.format || 'hex';\n        var next_format = 'hex';\n        if (current_format == 'hex') {\n          next_format = 'rgb';\n        } else if (current_format == 'rgb') {\n          next_format = 'hsl';\n        } else if (current_format == 'hsl') {\n          next_format = 'hex';\n        }\n        this.$store.dispatch('/changeFormat', next_format);\n        this.$store.emit('lastUpdateColor');\n        this.refresh();\n      }\n    }, {\n      key: 'refresh',\n      value: function refresh() {\n        this.setBackgroundColor();\n      }\n    }, {\n      key: '@changeColor',\n      value: function changeColor() {\n        this.refresh();\n      }\n    }, {\n      key: '@initColor',\n      value: function initColor() {\n        this.refresh();\n      }\n    }]);\n    return VSCodePicker;\n  }(BaseColorPicker);\n  var ColorPickerUI = {\n    create: function create(opts) {\n      switch (opts.type) {\n        case 'macos':\n          return new MacOSColorPicker(opts);\n        case 'xd':\n          return new XDColorPicker(opts);\n        case 'ring':\n          return new RingColorPicker(opts);\n        case 'mini':\n          return new MiniColorPicker(opts);\n        case 'vscode':\n          return new VSCodePicker(opts);\n        case 'mini-vertical':\n          return new MiniColorPicker$2(opts);\n        case 'sketch':\n        case 'palette':\n        default:\n          return new ChromeDevToolColorPicker(opts);\n      }\n    },\n    ColorPicker: ChromeDevToolColorPicker,\n    ChromeDevToolColorPicker: ChromeDevToolColorPicker,\n    MacOSColorPicker: MacOSColorPicker,\n    RingColorPicker: RingColorPicker,\n    MiniColorPicker: MiniColorPicker,\n    VSCodePicker: VSCodePicker,\n    MiniVerticalColorPicker: MiniColorPicker$2\n  };\n  var EmbedColorPicker = function (_UIElement) {\n    inherits(EmbedColorPicker, _UIElement);\n    function EmbedColorPicker() {\n      classCallCheck(this, EmbedColorPicker);\n      return possibleConstructorReturn(this, (EmbedColorPicker.__proto__ || Object.getPrototypeOf(EmbedColorPicker)).apply(this, arguments));\n    }\n    createClass(EmbedColorPicker, [{\n      key: \"afterRender\",\n      value: function afterRender() {\n        var _this2 = this;\n        var parent = this.opt;\n        var options = parent.opt.colorpickerOptions || {\n          type: \"sketch\"\n        };\n        this.colorPicker = ColorPickerUI.create(_extends({\n          position: \"inline\",\n          container: this.refs.$el.el,\n          onChange: function onChange(c) {\n            _this2.changeColor(c);\n          },\n          onLastUpdate: function onLastUpdate(c) {\n            _this2.changeColor(c, true);\n          }\n        }, options));\n      }\n    }, {\n      key: \"template\",\n      value: function template() {\n        return \"<div ref=\\\"$color\\\"></div>\";\n      }\n    }, {\n      key: \"changeColor\",\n      value: function changeColor(color) {\n        var isLastUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n        this.$store.emit('changeEmbedColorPicker', color, isLastUpdate);\n      }\n    }, {\n      key: \"setValue\",\n      value: function setValue(color) {\n        this.colorPicker.initColorWithoutChangeEvent(color);\n      }\n    }]);\n    return EmbedColorPicker;\n  }(UIElement);\n  function _traverse(obj) {\n    var results = [];\n    obj.layers.length && obj.layers.forEach(function (it) {\n      results.push.apply(results, toConsumableArray(_traverse(it)));\n    });\n    results.push(obj);\n    return results;\n  }\n  var Item = function () {\n    function Item() {\n      var _this = this;\n      var json = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n      classCallCheck(this, Item);\n      if (json instanceof Item) {\n        json = json.toJSON();\n      }\n      this.json = this.convert(_extends({}, this.getDefaultObject(), json));\n      this.ref = new Proxy(this, {\n        get: function get$$1(target, key) {\n          var originMethod = target[key];\n          if (isFunction(originMethod)) {\n            // method tracking\n            return function () {\n              for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n                args[_key] = arguments[_key];\n              }\n              return originMethod.apply(target, args);\n            };\n          } else {\n            // getter or json property\n            return originMethod || target.json[key];\n          }\n        },\n        set: function set$$1(target, key, value) {\n          // Dom 객체가 오면 자동으로 입력 해줌\n          if (value && value.realVal && isFunction(value.realVal)) {\n            value = value.realVal();\n          }\n          if (_this.checkField(key, value)) {\n            target.json[key] = value;\n          } else {\n            throw new Error(value + \" is invalid as \" + key + \" property value.\");\n          }\n          return true;\n        }\n      });\n      return this.ref;\n    }\n\n    /***********************************\n     *\n     * override\n     *\n     **********************************/\n\n    createClass(Item, [{\n      key: \"getDefaultTitle\",\n      value: function getDefaultTitle() {\n        return \"Item\";\n      }\n\n      /**\n       * check attribute object\n       */\n    }, {\n      key: \"isAttribute\",\n      value: function isAttribute() {\n        return false;\n      }\n\n      /***********************************\n       *\n       * getter\n       *\n       **********************************/\n    }, {\n      key: \"is\",\n      value: function is() {\n        if (!this.json) return false;\n        for (var _len2 = arguments.length, itemType = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n          itemType[_key2] = arguments[_key2];\n        }\n        return itemType.indexOf(this.json.itemType) > -1;\n      }\n\n      /***********************************\n       *\n       * action\n       *\n       **********************************/\n\n      /**\n       * when json is loaded, json object is be a new instance\n       *\n       * @param {*} json\n       */\n    }, {\n      key: \"convert\",\n      value: function convert(json) {\n        return json;\n      }\n\n      /**\n       * defence to set invalid key-value\n       *\n       * @param {*} key\n       * @param {*} value\n       */\n    }, {\n      key: \"checkField\",\n      value: function checkField(key, value) {\n        return true;\n      }\n    }, {\n      key: \"toCloneObject\",\n      value: function toCloneObject() {\n        var json = {\n          itemType: this.json.itemType,\n          type: this.json.type,\n          selected: this.json.selected\n        };\n        return json;\n      }\n\n      /**\n       * clone Item\n       */\n    }, {\n      key: \"clone\",\n      value: function clone$$1() {\n        var ItemClass = this.constructor;\n\n        // 클론을 할 때 꼭 부모 참조를 넘겨줘야 한다. \n        // 그렇지 않으면 screenX, Y 에 대한 값을 계산할 수가 없다. \n        var item = new ItemClass(this.toCloneObject());\n        item.parent = this.json.parent;\n        return item;\n      }\n\n      /**\n       * set json content\n       *\n       * @param {object} obj\n       */\n    }, {\n      key: \"reset\",\n      value: function reset(obj) {\n        if (obj instanceof Item) {\n          obj = obj.toJSON();\n        }\n        this.json = this.convert(_extends({}, this.json, obj));\n      }\n\n      /**\n       * define defaut object for item\n       *\n       * @param {object} obj\n       */\n    }, {\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        return _extends({\n          // id: uuidShort(),\n          selected: false,\n          // 선택 여부 체크 \n          type: '',\n          itemType: ''\n        }, obj);\n      }\n    }, {\n      key: \"add\",\n      value: function add(layer) {\n        this.json.layers.push(layer);\n        layer.parent = this.ref;\n        return layer;\n      }\n\n      /**\n       * toggle item's attribute\n       *\n       * @param {*} field\n       * @param {*} toggleValue\n       */\n    }, {\n      key: \"toggle\",\n      value: function toggle(field, toggleValue) {\n        if (isUndefined(toggleValue)) {\n          this.json[field] = !this.json[field];\n        } else {\n          this.json[field] = !!toggleValue;\n        }\n      }\n\n      /**\n       * convert to json\n       */\n    }, {\n      key: \"toJSON\",\n      value: function toJSON() {\n        return this.json;\n      }\n    }, {\n      key: \"resize\",\n      value: function resize() {}\n    }, {\n      key: \"copy\",\n      value: function copy() {\n        this.json.parent.copyItem(this.ref);\n      }\n    }, {\n      key: \"copyItem\",\n      value: function copyItem(childItem) {\n        // clone 을 어떻게 해야하나? \n\n        var child = childItem.clone();\n        child.width.add(10);\n        child.width.add(10);\n        var layers = this.json.layers;\n        var childIndex = -1;\n        for (var i = 0, len = layers.length; i < len; i++) {\n          if (layers[i] === childItem) {\n            childIndex = i;\n            break;\n          }\n        }\n        if (childIndex > -1) {\n          this.json.layers.splice(childIndex, 0, child);\n        }\n      }\n    }, {\n      key: \"remove\",\n      value: function remove() {\n        this.json.parent.removeItem(this.ref);\n      }\n    }, {\n      key: \"removeItem\",\n      value: function removeItem(childItem) {\n        var layers = this.json.layers;\n        var childIndex = -1;\n        for (var i = 0, len = layers.length; i < len; i++) {\n          if (layers[i] === childItem) {\n            childIndex = i;\n            break;\n          }\n        }\n        if (childIndex > -1) {\n          this.json.layers.splice(childIndex, 1);\n        }\n      }\n    }, {\n      key: \"title\",\n      get: function get$$1() {\n        return this.json.name || this.getDefaultTitle();\n      }\n\n      /**\n       * get id\n       */\n    }, {\n      key: \"id\",\n      get: function get$$1() {\n        return this.json.id;\n      }\n    }, {\n      key: \"layers\",\n      get: function get$$1() {\n        return this.json.layers;\n      }\n    }, {\n      key: \"parent\",\n      get: function get$$1() {\n        return this.json.parent;\n      }\n    }, {\n      key: \"html\",\n      get: function get$$1() {\n        var _json = this.json,\n          elementType = _json.elementType,\n          id = _json.id,\n          layers = _json.layers,\n          itemType = _json.itemType;\n        var tagName = elementType || 'div';\n        return \"\\n    <\" + tagName + \" class='element-item \" + itemType + \"' data-id=\\\"\" + id + \"\\\">\\n      \" + layers.map(function (it) {\n          return it.html;\n        }).join('') + \"\\n    </\" + tagName + \">\\n    \";\n      }\n    }, {\n      key: \"allLayers\",\n      get: function get$$1() {\n        return [].concat(toConsumableArray(_traverse(this.ref)));\n      }\n    }]);\n    return Item;\n  }();\n  var ImageResource = function (_Item) {\n    inherits(ImageResource, _Item);\n    function ImageResource() {\n      classCallCheck(this, ImageResource);\n      return possibleConstructorReturn(this, (ImageResource.__proto__ || Object.getPrototypeOf(ImageResource)).apply(this, arguments));\n    }\n    createClass(ImageResource, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        return get(ImageResource.prototype.__proto__ || Object.getPrototypeOf(ImageResource.prototype), \"getDefaultObject\", this).call(this, _extends({\n          itemType: \"image-resource\",\n          type: \"image\"\n        }, obj));\n      }\n    }, {\n      key: \"isGradient\",\n      value: function isGradient() {\n        return false;\n      }\n    }, {\n      key: \"isLinear\",\n      value: function isLinear() {\n        return false;\n      }\n    }, {\n      key: \"isRadial\",\n      value: function isRadial() {\n        return false;\n      }\n    }, {\n      key: \"isConic\",\n      value: function isConic() {\n        return false;\n      }\n    }, {\n      key: \"isStatic\",\n      value: function isStatic() {\n        return false;\n      }\n    }, {\n      key: \"isImage\",\n      value: function isImage() {\n        return false;\n      }\n    }, {\n      key: \"hasAngle\",\n      value: function hasAngle() {\n        return false;\n      }\n    }, {\n      key: \"isUrl\",\n      value: function isUrl() {\n        return false;\n      }\n    }, {\n      key: \"isFile\",\n      value: function isFile() {\n        return false;\n      }\n    }, {\n      key: \"isAttribute\",\n      value: function isAttribute() {\n        return true;\n      }\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        return \"none\";\n      }\n    }]);\n    return ImageResource;\n  }(Item);\n  var _stringToPercent = {\n    center: 50,\n    top: 0,\n    left: 0,\n    right: 100,\n    bottom: 100\n  };\n  var Position = function Position() {\n    classCallCheck(this, Position);\n  };\n  Position.CENTER = \"center\";\n  Position.TOP = \"top\";\n  Position.RIGHT = \"right\";\n  Position.LEFT = \"left\";\n  Position.BOTTOM = \"bottom\";\n  var REG_CSS_UNIT = /([\\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)/gi;\n  var Length = function () {\n    function Length() {\n      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : \"\";\n      var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : \"\";\n      classCallCheck(this, Length);\n      this.value = value;\n      this.unit = unit;\n    }\n    createClass(Length, [{\n      key: Symbol.toPrimitive,\n      value: function value(hint) {\n        if (hint == \"number\") {\n          return this.value;\n        }\n        return this.toString();\n      }\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        switch (this.unit) {\n          case 'string':\n          case 'number':\n            return this.value + '';\n          case 'var':\n            return \"var(--\" + this.value + \")\";\n          case 'calc':\n            return \"calc(\" + this.value + \")\";\n          default:\n            return this.value + this.unit;\n        }\n      }\n    }, {\n      key: \"isUnitType\",\n      value: function isUnitType(unit) {\n        return this.unit === unit;\n      }\n    }, {\n      key: \"isCalc\",\n      value: function isCalc() {\n        return this.isUnitType('calc');\n      }\n    }, {\n      key: \"isFr\",\n      value: function isFr() {\n        return this.isUnitType('fr');\n      }\n    }, {\n      key: \"isPercent\",\n      value: function isPercent() {\n        return this.isUnitType('%');\n      }\n    }, {\n      key: \"isPx\",\n      value: function isPx() {\n        return this.isUnitType('px');\n      }\n    }, {\n      key: \"isEm\",\n      value: function isEm() {\n        return this.isUnitType('em');\n      }\n    }, {\n      key: \"isDeg\",\n      value: function isDeg() {\n        return this.isUnitType('deg');\n      }\n    }, {\n      key: \"isSecond\",\n      value: function isSecond() {\n        return this.isUnitType('s');\n      }\n    }, {\n      key: \"isMs\",\n      value: function isMs() {\n        return this.isUnitType('ms');\n      }\n    }, {\n      key: \"isNumber\",\n      value: function isNumber$$1() {\n        return this.isUnitType('number');\n      }\n    }, {\n      key: \"isString\",\n      value: function isString$$1() {\n        return this.isUnitType('');\n      }\n    }, {\n      key: \"isVar\",\n      value: function isVar() {\n        return this.isUnitType('--');\n      }\n    }, {\n      key: \"set\",\n      value: function set$$1(value) {\n        this.value = value;\n        return this;\n      }\n    }, {\n      key: \"add\",\n      value: function add(obj) {\n        this.value += +obj;\n        return this;\n      }\n    }, {\n      key: \"sub\",\n      value: function sub(obj) {\n        return this.add(-1 * obj);\n      }\n    }, {\n      key: \"mul\",\n      value: function mul(obj) {\n        this.value *= +obj;\n        return this;\n      }\n    }, {\n      key: \"div\",\n      value: function div(obj) {\n        this.value /= +obj;\n        return this;\n      }\n    }, {\n      key: \"mod\",\n      value: function mod(obj) {\n        this.value %= +obj;\n        return this;\n      }\n    }, {\n      key: \"clone\",\n      value: function clone$$1() {\n        return new Length(this.value, this.unit);\n      }\n    }, {\n      key: \"getUnitName\",\n      value: function getUnitName() {\n        return this.unit === \"%\" ? \"percent\" : this.unit;\n      }\n    }, {\n      key: \"toJSON\",\n      value: function toJSON() {\n        return {\n          value: this.value,\n          unit: this.unit\n        };\n      }\n    }, {\n      key: \"rate\",\n      value: function rate(value) {\n        return value / this.value;\n      }\n    }, {\n      key: \"stringToPercent\",\n      value: function stringToPercent() {\n        if (isNotUndefined(_stringToPercent[this.value])) {\n          return Length.percent(_stringToPercent[this.value]);\n        }\n        return Length.percent(0);\n      }\n    }, {\n      key: \"stringToEm\",\n      value: function stringToEm(maxValue) {\n        return this.stringToPercent().toEm(maxValue);\n      }\n    }, {\n      key: \"stringToPx\",\n      value: function stringToPx(maxValue) {\n        return this.stringToPercent().toPx(maxValue);\n      }\n    }, {\n      key: \"toPercent\",\n      value: function toPercent(maxValue) {\n        var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;\n        if (this.isPercent()) {\n          return this;\n        } else if (this.isPx()) {\n          return Length.percent(this.value * 100 / maxValue);\n        } else if (this.isEm()) {\n          return Length.percent(this.value * fontSize * 100 / maxValue);\n        } else if (this.isString()) {\n          return this.stringToPercent(maxValue);\n        } else if (this.isDeg()) {\n          return Length.percent(this.value / 360 * 100);\n        }\n      }\n    }, {\n      key: \"toEm\",\n      value: function toEm(maxValue) {\n        var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;\n        if (this.isPercent()) {\n          return Length.em(this.value / 100 * maxValue / fontSize);\n        } else if (this.isPx()) {\n          return Length.em(this.value / fontSize);\n        } else if (this.isEm()) {\n          return this;\n        } else if (this.isString()) {\n          return this.stringToEm(maxValue);\n        }\n      }\n    }, {\n      key: \"toPx\",\n      value: function toPx(maxValue) {\n        if (this.isPercent()) {\n          return Length.px(this.value / 100 * maxValue);\n        } else if (this.isPx()) {\n          return this;\n        } else if (this.isEm()) {\n          return Length.px(this.value / 100 * maxValue / 16);\n        } else if (this.isString()) {\n          return this.stringToPx(maxValue);\n        }\n      }\n    }, {\n      key: \"toSecond\",\n      value: function toSecond() {\n        if (this.isSecond()) {\n          return this;\n        } else if (this.isMs()) {\n          return Length.second(this.value / 1000);\n        }\n      }\n    }, {\n      key: \"toMs\",\n      value: function toMs() {\n        if (this.isSecond()) {\n          return Length.ms(this.value * 1000);\n        } else if (this.isMs()) {\n          return this;\n        }\n      }\n    }, {\n      key: \"to\",\n      value: function to(unit, maxValue) {\n        var fontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16;\n        if (unit === \"px\") {\n          return this.toPx(maxValue, fontSize);\n        } else if (unit === \"%\" || unit === \"percent\") {\n          return this.toPercent(maxValue, fontSize);\n        } else if (unit === \"em\") {\n          return this.toEm(maxValue, fontSize);\n        }\n      }\n    }, {\n      key: \"toUnit\",\n      value: function toUnit(unit) {\n        return new Length(this.value, unit);\n      }\n    }, {\n      key: \"calculate\",\n      value: function calculate(type, dist) {\n        var func = this[type];\n        if (func) {\n          return func.call(this, dist);\n        }\n        return this;\n      }\n    }, {\n      key: \"includes\",\n      value: function includes() {\n        for (var _len = arguments.length, arr = Array(_len), _key = 0; _key < _len; _key++) {\n          arr[_key] = arguments[_key];\n        }\n        return arr.includes(this.value);\n      }\n    }, {\n      key: \"round\",\n      value: function round$$1(k) {\n        return new Length(round(this.value, k), this.unit);\n      }\n    }, {\n      key: \"equals\",\n      value: function equals(t) {\n        return this.value === t.value && this.unit === t.unit;\n      }\n    }], [{\n      key: \"min\",\n      value: function min() {\n        for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n          args[_key2] = arguments[_key2];\n        }\n        var min = args.shift();\n        for (var i = 0, len = args.length; i < len; i++) {\n          if (min.value > args[i].value) {\n            min = args[i];\n          }\n        }\n        return min;\n      }\n    }, {\n      key: \"max\",\n      value: function max() {\n        for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n          args[_key3] = arguments[_key3];\n        }\n        var max = args.shift();\n        for (var i = 0, len = args.length; i < len; i++) {\n          if (max.value < args[i].value) {\n            max = args[i];\n          }\n        }\n        return max;\n      }\n    }, {\n      key: \"string\",\n      value: function string(value) {\n        return new Length(value + \"\", \"\");\n      }\n    }, {\n      key: \"number\",\n      value: function number(value) {\n        return new Length(+value, 'number');\n      }\n    }, {\n      key: \"px\",\n      value: function px(value) {\n        return new Length(+value, \"px\");\n      }\n    }, {\n      key: \"em\",\n      value: function em(value) {\n        return new Length(+value, \"em\");\n      }\n    }, {\n      key: \"percent\",\n      value: function percent(value) {\n        return new Length(+value, \"%\");\n      }\n    }, {\n      key: \"deg\",\n      value: function deg(value) {\n        return new Length(+value, \"deg\");\n      }\n    }, {\n      key: \"fr\",\n      value: function fr(value) {\n        return new Length(+value, \"fr\");\n      }\n    }, {\n      key: \"second\",\n      value: function second(value) {\n        return new Length(+value, 's');\n      }\n    }, {\n      key: \"ms\",\n      value: function ms(value) {\n        return new Length(+value, 'ms');\n      }\n    }, {\n      key: \"var\",\n      value: function _var(value) {\n        return new Length(value + '', '--');\n      }\n\n      /**\n       * return calc()  css fuction string\n       *\n       * Length.calc(`${Length.percent(100)} - ${Length.px(10)}`)\n       *\n       * @param {*} str\n       */\n    }, {\n      key: \"calc\",\n      value: function calc(str) {\n        return new Length(str, \"calc\");\n      }\n    }, {\n      key: \"parse\",\n      value: function parse(obj) {\n        if (isString(obj)) {\n          if (obj.indexOf(\"calc(\") > -1) {\n            return new Length(obj.split(\"calc(\")[1].split(\")\")[0], \"calc\");\n          } else {\n            // remove blank space \n            var arr = obj.replace(REG_CSS_UNIT, \"$1 $2\").split(\" \").filter(Boolean);\n            var isNumberString = +arr[0] == arr[0];\n            if (isNumberString) {\n              return new Length(+arr[0], arr[1]);\n            } else {\n              return new Length(arr[0]);\n            }\n          }\n        }\n        if (obj instanceof Length) {\n          return obj;\n        } else if (obj.unit) {\n          if (obj.unit == \"%\" || obj.unit == \"percent\") {\n            var value = 0;\n            if (isNotUndefined(obj.percent)) {\n              value = obj.percent;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.percent(value);\n          } else if (obj.unit == \"px\") {\n            var value = 0;\n            if (isNotUndefined(obj.px)) {\n              value = obj.px;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.px(value);\n          } else if (obj.unit == \"em\") {\n            var value = 0;\n            if (isNotUndefined(obj.em)) {\n              value = obj.em;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.em(value);\n          } else if (obj.unit == \"deg\") {\n            var value = 0;\n            if (isNotUndefined(obj.deg)) {\n              value = obj.deg;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.deg(value);\n          } else if (obj.unit == \"s\") {\n            var value = 0;\n            if (isNotUndefined(obj.second)) {\n              value = obj.second;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.second(value);\n          } else if (obj.unit == \"ms\") {\n            var value = 0;\n            if (isNotUndefined(obj.ms)) {\n              value = obj.ms;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.ms(value);\n          } else if (obj.unit == \"number\") {\n            var value = 0;\n            if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.number(value);\n          } else if (obj.unit == \"--\") {\n            var value = 0;\n            if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length[\"var\"](value);\n          } else if (obj.unit === \"\" || obj.unit === \"string\") {\n            var value = \"\";\n            if (isNotUndefined(obj.str)) {\n              value = obj.str;\n            } else if (isNotUndefined(obj.value)) {\n              value = obj.value;\n            }\n            return Length.string(value);\n          }\n        }\n        return Length.string(obj);\n      }\n    }]);\n    return Length;\n  }();\n  Length.auto = Length.string(\"auto\");\n  var ColorStep = function (_Item) {\n    inherits(ColorStep, _Item);\n    function ColorStep() {\n      classCallCheck(this, ColorStep);\n      return possibleConstructorReturn(this, (ColorStep.__proto__ || Object.getPrototypeOf(ColorStep)).apply(this, arguments));\n    }\n    createClass(ColorStep, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        return get(ColorStep.prototype.__proto__ || Object.getPrototypeOf(ColorStep.prototype), \"getDefaultObject\", this).call(this, {\n          cut: false,\n          percent: 0,\n          unit: \"%\",\n          px: 0,\n          em: 0,\n          color: \"rgba(0, 0, 0, 0)\",\n          prevColorStep: null\n        });\n      }\n    }, {\n      key: \"toCloneObject\",\n      value: function toCloneObject() {\n        return _extends({}, get(ColorStep.prototype.__proto__ || Object.getPrototypeOf(ColorStep.prototype), \"toCloneObject\", this).call(this), {\n          cut: this.json.cut,\n          percent: this.json.percent,\n          unit: this.json.unit,\n          px: this.json.px,\n          em: this.json.em,\n          color: this.json.color\n        });\n      }\n    }, {\n      key: \"on\",\n      value: function on() {\n        this.json.cut = true;\n      }\n    }, {\n      key: \"off\",\n      value: function off() {\n        this.json.cut = false;\n      }\n    }, {\n      key: \"toggle\",\n      value: function toggle() {\n        this.json.cut = !this.json.cut;\n      }\n    }, {\n      key: \"getUnit\",\n      value: function getUnit() {\n        return this.json.unit == \"%\" ? \"percent\" : this.json.unit;\n      }\n    }, {\n      key: \"add\",\n      value: function add(num) {\n        var unit = this.getUnit();\n        this.json[unit] += +num;\n        return this;\n      }\n    }, {\n      key: \"sub\",\n      value: function sub(num) {\n        var unit = this.getUnit();\n        this.json[unit] -= +num;\n        return this;\n      }\n    }, {\n      key: \"mul\",\n      value: function mul(num) {\n        var unit = this.getUnit();\n        this.json[unit] *= +num;\n        return this;\n      }\n    }, {\n      key: \"div\",\n      value: function div(num) {\n        var unit = this.getUnit();\n        this.json[unit] /= +num;\n        return this;\n      }\n    }, {\n      key: \"mod\",\n      value: function mod(num) {\n        var unit = this.getUnit();\n        this.json[unit] %= +num;\n        return this;\n      }\n    }, {\n      key: \"toLength\",\n      /**\n       * convert Length instance\n       * @return {Length}\n       */\n      value: function toLength(maxValue) {\n        // TODO: apply maxValue\n        return Length.parse(this.json).round(1000);\n      }\n    }, {\n      key: \"getPrevLength\",\n      value: function getPrevLength() {\n        if (!this.json.prevColorStep) return '';\n        return this.json.prevColorStep.toLength();\n      }\n\n      /**\n       * get color string\n       *\n       * return {string}\n       */\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        var prev = this.json.cut ? this.getPrevLength() : '';\n        return this.json.color + \" \" + prev + \" \" + this.toLength();\n      }\n    }, {\n      key: \"reset\",\n      value: function reset(json) {\n        get(ColorStep.prototype.__proto__ || Object.getPrototypeOf(ColorStep.prototype), \"reset\", this).call(this, json);\n        if (this.parent()) {\n          this.parent().sortColorStep();\n        }\n      }\n    }, {\n      key: \"isPx\",\n      get: function get$$1() {\n        return this.json.unit == \"px\";\n      }\n    }, {\n      key: \"isPercent\",\n      get: function get$$1() {\n        return this.json.unit == \"%\" || this.json.unit === \"percent\";\n      }\n    }, {\n      key: \"isEm\",\n      get: function get$$1() {\n        return this.json.unit == \"em\";\n      }\n    }], [{\n      key: \"parse\",\n      value: function parse$$1(colorStepString) {\n        var colorsteps = [];\n        var results = convertMatches(colorStepString);\n        var arr = results.str.split(' ').filter(function (it) {\n          return it.trim();\n        });\n        var colorIndex = +arr[0].replace(\"@\", \"\");\n        var color = results.matches[colorIndex].color;\n        if (arr.length === 1) {\n          colorsteps.push(new ColorStep({\n            color: color,\n            unit: \"%\",\n            percent: 0\n          }));\n        } else if (arr.length === 2) {\n          var len = Length.parse(arr[1]);\n          var data = {\n            unit: len.unit\n          };\n          if (len.isPercent()) {\n            data.percent = len.value;\n          } else if (len.isPx()) {\n            data.px = len.value;\n          } else if (len.isEm()) {\n            data.em = len.value;\n          }\n          colorsteps.push(new ColorStep(_extends({\n            color: color\n          }, data)));\n        } else if (arr.length === 3) {\n          [1, 2].forEach(function (index) {\n            var len = Length.parse(arr[index]);\n            var data = {\n              unit: len.unit\n            };\n            if (len.isPercent()) {\n              data.percent = len.value;\n            } else if (len.isPx()) {\n              data.px = len.value;\n            } else if (len.isEm()) {\n              data.em = len.value;\n            }\n            colorsteps.push(new ColorStep(_extends({\n              color: color\n            }, data)));\n          });\n        }\n        return colorsteps;\n      }\n    }]);\n    return ColorStep;\n  }(Item);\n  var DEFINED_ANGLES = {\n    \"to top\": 0,\n    \"to top right\": 45,\n    \"to right\": 90,\n    \"to bottom right\": 135,\n    \"to bottom\": 180,\n    \"to bottom left\": 225,\n    \"to left\": 270,\n    \"to top left\": 315\n  };\n  var Gradient = function (_ImageResource) {\n    inherits(Gradient, _ImageResource);\n    function Gradient() {\n      classCallCheck(this, Gradient);\n      return possibleConstructorReturn(this, (Gradient.__proto__ || Object.getPrototypeOf(Gradient)).apply(this, arguments));\n    }\n    createClass(Gradient, [{\n      key: \"isGradient\",\n      value: function isGradient() {\n        return true;\n      }\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        return \"none\";\n      }\n\n      /**\n       * colorsteps = [\n       *    new ColorStep({color: 'red', percent: 0}),\n       *    new ColorStep({color: 'red', percent: 0})\n       * ]\n       *\n       * @param {*} obj\n       */\n    }, {\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        return get(Gradient.prototype.__proto__ || Object.getPrototypeOf(Gradient.prototype), \"getDefaultObject\", this).call(this, _extends({\n          type: \"gradient\",\n          colorsteps: []\n        }, obj));\n      }\n    }, {\n      key: \"toCloneObject\",\n      value: function toCloneObject() {\n        return _extends({}, get(Gradient.prototype.__proto__ || Object.getPrototypeOf(Gradient.prototype), \"toCloneObject\", this).call(this), {\n          colorsteps: this.json.colorsteps.map(function (color) {\n            return color.clone();\n          })\n        });\n      }\n    }, {\n      key: \"convert\",\n      value: function convert(json) {\n        json.colorsteps = json.colorsteps.map(function (c) {\n          return new ColorStep(c);\n        });\n        return json;\n      }\n    }, {\n      key: \"calculateAngle\",\n      value: function calculateAngle() {\n        var angle = this.json.angle;\n        return isUndefined(DEFINED_ANGLES[angle]) ? angle : DEFINED_ANGLES[angle] || 0;\n      }\n\n      /**\n       * add ColorStep\n       *\n       * @param {ColorStep} colorstep\n       * @param {boolean} isSort\n       */\n    }, {\n      key: \"addColorStep\",\n      value: function addColorStep(colorstep) {\n        var isSort = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n        this.json.colorsteps.push(colorstep);\n        if (isSort) this.sortColorStep();\n        return colorstep;\n      }\n    }, {\n      key: \"insertColorStep\",\n      value: function insertColorStep(percent) {\n        var startColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : \"rgba(216,216,216,0)\";\n        var endColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : \"rgba(216,216,216,1)\";\n        var colorsteps = this.colorsteps;\n        if (!colorsteps.length) {\n          this.addColorStepList([new ColorStep({\n            color: startColor,\n            percent: percent,\n            index: 0\n          }), new ColorStep({\n            color: endColor,\n            percent: 100,\n            index: 100\n          })]);\n          return;\n        }\n        if (percent < colorsteps[0].percent) {\n          colorsteps[0].index = 1;\n          this.addColorStep(new ColorStep({\n            index: 0,\n            color: colorsteps[0].color,\n            percent: percent\n          }));\n          return;\n        }\n        var lastIndex = colorsteps.length - 1;\n        if (colorsteps[lastIndex].percent < percent) {\n          var color = colorsteps[lastIndex].color;\n          var index = colorsteps[lastIndex].index + 1;\n          this.addColorStep(new ColorStep({\n            index: index,\n            color: color,\n            percent: percent\n          }));\n          return;\n        }\n        for (var i = 0, len = colorsteps.length - 1; i < len; i++) {\n          var step = colorsteps[i];\n          var nextStep = colorsteps[i + 1];\n          if (step.percent <= percent && percent <= nextStep.percent) {\n            var color = Color.mix(step.color, nextStep.color, (percent - step.percent) / (nextStep.percent - step.percent), \"rgb\");\n            this.addColorStep(new ColorStep({\n              index: step.index + 1,\n              color: color,\n              percent: percent\n            }));\n            return;\n          }\n        }\n      }\n    }, {\n      key: \"sortColorStep\",\n      value: function sortColorStep() {\n        var children = this.colorsteps;\n        children.sort(function (a, b) {\n          if (a.percent > b.percent) return 1;\n          if (a.percent < b.percent) return -1;\n          if (a.percent == b.percent) {\n            if (a.index === b.index) return 0;\n            return a.index > b.index ? 1 : -1;\n          }\n        });\n        children.forEach(function (it, index) {\n          it.index = index * 100;\n        });\n      }\n\n      /**\n       * add ColorStep List\n       * @param {Array<ColorStep>} colorstepList\n       */\n    }, {\n      key: \"addColorStepList\",\n      value: function addColorStepList() {\n        var _this2 = this;\n        var colorstepList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n        colorstepList.forEach(function (c) {\n          _this2.addColorStep(c, false);\n        });\n        this.sortColorStep();\n      }\n\n      /**\n       * get color step by id\n       *\n       * @param {string} id\n       */\n    }, {\n      key: \"getColorStep\",\n      value: function getColorStep(id) {\n        return this.json.colorsteps.filter(function (c) {\n          return c.id == id;\n        })[0];\n      }\n    }, {\n      key: \"clear\",\n      value: function clear() {\n        if (arguments.length) {\n          this.json.colorsteps.splice(+(arguments.length <= 0 ? undefined : arguments[0]), 1);\n        } else {\n          this.json.colorsteps = [];\n        }\n      }\n\n      /**\n       * get colorstep list\n       *\n       * @return {Array<ColorStep>}\n       */\n    }, {\n      key: \"getColorString\",\n      /**\n       * get color string\n       *\n       * @return {string}\n       */\n      value: function getColorString() {\n        var colorsteps = this.colorsteps;\n        if (!colorsteps.length) return '';\n        var newColors = colorsteps.map(function (c, index) {\n          c.prevColorStep = c.cut && index > 0 ? colorsteps[index - 1] : null;\n          return c;\n        });\n        return newColors.map(function (f) {\n          return \"\" + f;\n        }).join(\",\");\n      }\n    }, {\n      key: \"colorsteps\",\n      get: function get$$1() {\n        return this.json.colorsteps;\n      }\n    }], [{\n      key: \"random\",\n      value: function random() {\n        var angle = Math.floor(Math.random() * 1000) % 360;\n        return \"linear-gradient(\" + angle + \"deg, \" + Color.random() + \" 0%, \" + Color.random() + \" 100%)\";\n      }\n    }]);\n    return Gradient;\n  }(ImageResource);\n  var radialTypeList = ['circle', 'circle closest-side', 'circle closest-corner', 'circle farthest-side', 'circle farthest-corner', 'ellipse', 'ellipse closest-side', 'ellipse closest-corner', 'ellipse farthest-side', 'ellipse farthest-corner'];\n  var GradientEditor = function (_UIElement) {\n    inherits(GradientEditor, _UIElement);\n    function GradientEditor() {\n      classCallCheck(this, GradientEditor);\n      return possibleConstructorReturn(this, (GradientEditor.__proto__ || Object.getPrototypeOf(GradientEditor)).apply(this, arguments));\n    }\n    createClass(GradientEditor, [{\n      key: \"initialize\",\n      value: function initialize() {\n        get(GradientEditor.prototype.__proto__ || Object.getPrototypeOf(GradientEditor.prototype), \"initialize\", this).call(this);\n        var colorsteps = [{\n          offset: Length.percent(0),\n          cut: false,\n          color: 'yellow'\n        }, {\n          offset: Length.percent(100),\n          cut: false,\n          color: 'red'\n        }];\n        this.type = 'linear-gradient';\n        this.index = 0;\n        this.colorsteps = colorsteps;\n        this.radialPosition = [Length.percent(50), Length.percent(50)];\n        this.radialType = 'ellipse';\n      }\n    }, {\n      key: '@changeRadialPosition',\n      value: function changeRadialPosition(posX, posY) {\n        this['@changeKeyValue']('radialPosition', [posX, posY]);\n        this.reloadInputValue();\n      }\n    }, {\n      key: '@setGradientEditor',\n      value: function setGradientEditor(str) {\n        var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n        var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear-gradient';\n        var angle = arguments[3];\n        var radialPosition = arguments[4];\n        var radialType = arguments[5];\n        var results = convertMatches(str);\n        var colorsteps = results.str.split(',').map(function (it) {\n          return it.trim();\n        }).map(function (it) {\n          var _it$split$filter = it.split(' ').filter(function (str) {\n              return str.length;\n            }),\n            _it$split$filter2 = slicedToArray(_it$split$filter, 3),\n            color = _it$split$filter2[0],\n            offset1 = _it$split$filter2[1],\n            offset2 = _it$split$filter2[2];\n          color = reverseMatches(color, results.matches);\n          var cut = false;\n          if (offset2) {\n            cut = true;\n          }\n          var offset = cut ? Length.parse(offset2) : Length.parse(offset1);\n          if (offset.isDeg()) {\n            offset = Length.percent(offset.value / 360 * 100);\n          }\n          return {\n            color: color,\n            offset: offset,\n            cut: cut\n          };\n        });\n        if (colorsteps.length == 1) {\n          colorsteps.push({\n            color: colorsteps[0].color,\n            offset: Length.percent(100),\n            cut: false\n          });\n        }\n        this.cachedStepListRect = null;\n        this.colorsteps = colorsteps;\n        this.index = index;\n        this.type = type;\n        this.angle = Length.parse(angle || '90deg');\n        this.radialPosition = radialPosition || [Length.percent(50), Length.percent(50)];\n        this.radialType = radialType;\n        this.refresh();\n        this.selectStep(index);\n        this.reloadInputValue();\n      }\n    }, {\n      key: \"template\",\n      value: function template() {\n        var _this2 = this;\n        return /*html*/\"\\n        <div class='gradient-editor' data-selected-editor='\" + this.type + \"'>\\n            <div class='gradient-steps' data-editor='gradient'>\\n                <div class=\\\"hue-container\\\" ref=\\\"$back\\\"></div>            \\n                <div class=\\\"hue\\\" ref=\\\"$steps\\\">\\n                    <div class='step-list' ref=\\\"$stepList\\\" ></div>\\n                </div>\\n            </div>\\n            <div class='tools' data-editor='tools'>\\n              <label>Offset <input type='checkbox' ref='$cut' checked />  connected</label> <div class=\\\"right-menu\\\" ><button type=\\\"button\\\" ref=\\\"$remove\\\" style=\\\"float:right;\\\" title=\\\"Remove color stop\\\">&times; Remove</button></div>\\n              <div class='unit'>\\n                <div><input type='range' data-key='length' min='0' max=\\\"100\\\" step='0.1' ref='$offset' /></div>\\n                <div><input type='number' data-key='length' min='0' max=\\\"100\\\" step='0.1' ref='$offsetNumber' /></div>              \\n                <div><select ref='$offsetSelect'>\\n                  <option value='%'>%</option>\\n                  <option value='px'>px</option>\\n                  <option value='em'>em</option>\\n                </select></div>\\n              </div>\\n            </div>\\n            <div class='sub-editor' ref='$subEditor'> \\n              <div data-editor='angle'>\\n                <label>Angle</label>\\n                <div class='unit'>                \\n                  <div><input type='range' data-key='angle' min='-720' max=\\\"720\\\" step='0.1' ref='$angle' /> </div>\\n                  <div><input type='number' data-key='angle' min='-720' max=\\\"720\\\" step='0.1' ref='$angleNumber' /></div> \\n                  <span>deg</span>\\n                </div>\\n              </div>\\n              <div data-editor='centerX'>\\n                <label>Center X</label>\\n                <div class='unit'>\\n                  <div><input type='range' data-key='centerX' min='-100' max=\\\"100\\\" step='0.1' ref='$centerX' /></div>\\n                  <div><input type='number' data-key='centerX' min='-100' max=\\\"100\\\" step='0.1' ref='$centerXNumber' /></div>\\n                  <div><select ref='$centerXSelect'>\\n                      <option value='%'>%</option>\\n                      <option value='px'>px</option>\\n                      <option value='em'>em</option>\\n                    </select></div>\\n                </div>\\n              </div>                \\n              <div data-editor='centerY'>           \\n                <label>Center Y</label>                 \\n                <div class='unit'>\\n                  <div><input type='range' data-key='centerY' min='-100' max=\\\"100\\\" step='0.1' ref='$centerY' /></div>\\n                  <div><input type='number' data-key='centerX' min='-100' max=\\\"100\\\" step='0.1' ref='$centerYNumber' /></div>\\n                  <div><select ref='$centerYSelect'>\\n                      <option value='%'>%</option>\\n                      <option value='px'>px</option>\\n                      <option value='em'>em</option>\\n                    </select></div>\\n                </div>\\n              </div>                \\n              <div data-editor='radialType'>       \\n                <label>Radial Type</label>              \\n                <div><select ref='$radialType'>\\n                  \" + radialTypeList.map(function (k) {\n          var selected = _this2.radialType === k ? 'selected' : '';\n          return \"<option value=\\\"\" + k + \"\\\" \" + selected + \">\" + k + \"</option>\";\n        }).join('') + \"\\n                </select></div>\\n              </div>\\n            </div>            \\n        </div>\\n      \";\n      }\n    }, {\n      key: 'input $offset',\n      value: function input$offset(e) {\n        this.refs.$offsetNumber.val(this.refs.$offset.val());\n        this['@changeColorStepOffset']('offset', new Length(this.refs.$offset.val(), this.refs.$offsetSelect.val()));\n      }\n    }, {\n      key: 'mouseup $offset',\n      value: function mouseup$offset(e) {\n        this['@changeColorStepOffset']('offset', new Length(this.refs.$offset.val(), this.refs.$offsetSelect.val()), true);\n      }\n    }, {\n      key: 'input $offsetNumber',\n      value: function input$offsetNumber(e) {\n        this.refs.$offset.val(this.refs.$offsetNumber.val());\n        this['@changeColorStepOffset']('offset', new Length(this.refs.$offset.val(), this.refs.$offsetSelect.val()), true);\n      }\n    }, {\n      key: 'input $angle',\n      value: function input$angle(e) {\n        this.refs.$angleNumber.val(this.refs.$angle.val());\n        this['@changeKeyValue']('angle', Length.deg(this.refs.$angle.val()));\n      }\n    }, {\n      key: 'mouseup $angle',\n      value: function mouseup$angle(e) {\n        this['@changeKeyValue']('angle', Length.deg(this.refs.$angle.val()), true);\n      }\n    }, {\n      key: 'input $angleNumber',\n      value: function input$angleNumber(e) {\n        this.refs.$angle.val(this.refs.$angleNumber.val());\n        this['@changeKeyValue']('angle', Length.deg(this.refs.$angle.val()), true);\n      }\n    }, {\n      key: 'input $centerX',\n      value: function input$centerX(e) {\n        this.refs.$centerXNumber.val(this.refs.$centerX.val());\n        this['@changeKeyValue']('radialPositionX');\n      }\n    }, {\n      key: 'mouseup $centerX',\n      value: function mouseup$centerX(e) {\n        this['@changeKeyValue']('radialPositionX', null, true);\n      }\n    }, {\n      key: 'input $centerXNumber',\n      value: function input$centerXNumber(e) {\n        this.refs.$centerX.val(this.refs.$centerXNumber.val());\n        this['@changeKeyValue']('radialPositionX');\n      }\n    }, {\n      key: 'input $centerY',\n      value: function input$centerY(e) {\n        this.refs.$centerYNumber.val(this.refs.$centerY.val());\n        this['@changeKeyValue']('radialPositionY');\n      }\n    }, {\n      key: 'mouseup $centerY',\n      value: function mouseup$centerY(e) {\n        this['@changeKeyValue']('radialPositionY', null, true);\n      }\n    }, {\n      key: 'input $centerYNumber',\n      value: function input$centerYNumber(e) {\n        this.refs.$centerY.val(this.refs.$centerYNumber.val());\n        this['@changeKeyValue']('radialPositionX');\n      }\n    }, {\n      key: 'change $centerXSelect',\n      value: function change$centerXSelect(e) {\n        this['@changeKeyValue']('radialPositionX', null, true);\n      }\n    }, {\n      key: 'change $centerYSelect',\n      value: function change$centerYSelect(e) {\n        this['@changeKeyValue']('radialPositionY', null, true);\n      }\n    }, {\n      key: 'change $radialType',\n      value: function change$radialType(e) {\n        this['@changeKeyValue']('radialType', this.refs.$radialType.val(), true);\n      }\n    }, {\n      key: '@changeKeyValue',\n      value: function changeKeyValue(key, value) {\n        var isLastUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n        if (key === 'angle') {\n          value = value.value;\n        }\n        if (key === 'radialPositionX' || key === 'radialPositionY') {\n          this['radialPosition'] = [this.radialPositionX, this.radialPositionY];\n        } else {\n          this[key] = value;\n        }\n        this.updateData(isLastUpdate);\n      }\n    }, {\n      key: '@changeColorStepOffset',\n      value: function changeColorStepOffset(key, value) {\n        var isLastUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n        if (this.currentStep) {\n          this.currentStep.offset = value.clone();\n          this.$currentStep.css({\n            left: this.currentStep.offset\n          });\n          this.setColorUI();\n          this.updateData(isLastUpdate);\n        }\n      }\n    }, {\n      key: 'click $back',\n      value: function click$back(e) {\n        if (this.startXY) return;\n        var rect = this.refs.$stepList.rect();\n        var minX = rect.x;\n        var maxX = rect.right;\n        var x = e.xy.x;\n        if (x < minX) x = minX;else if (x > maxX) x = maxX;\n        var percent = (x - minX) / rect.width * 100;\n        var list = this.colorsteps.map(function (it, index) {\n          return {\n            index: index,\n            color: it.color,\n            offset: it.offset\n          };\n        });\n        var prev = list.filter(function (it) {\n          return it.offset.value <= percent;\n        }).pop();\n        var next = list.filter(function (it) {\n          return it.offset.value > percent;\n        }).shift();\n        var targetIndex = 0;\n        if (prev && next) {\n          // if color and offset are same, dont change index\n          if (prev.offset.value === percent) {\n            return;\n          }\n          this.colorsteps.splice(next.index, 0, {\n            cut: false,\n            offset: Length.percent(percent),\n            color: Color$1.mix(prev.color, next.color, (percent - prev.offset.value) / (next.offset.value - prev.offset.value))\n          });\n          targetIndex = prev.index + 1;\n        } else if (prev) {\n          var colorstep = {\n            cut: false,\n            offset: Length.percent(percent),\n            color: prev.color\n          };\n          if (this.colorsteps.length - 1 === prev.index) {\n            this.colorsteps.push(colorstep);\n          } else {\n            this.colorsteps.splice(prev.index + 1, 0, colorstep);\n          }\n          targetIndex = prev.index + 1;\n        } else if (next) {\n          var _colorstep = {\n            cut: false,\n            offset: Length.percent(percent),\n            color: next.color\n          };\n          if (next.index === 0) {\n            this.colorsteps.unshift(_colorstep);\n            targetIndex = 0;\n          } else {\n            this.colorsteps.splice(next.index - 1, 0, _colorstep);\n            targetIndex = next.index;\n          }\n        } else {\n          this.colorsteps.push({\n            cut: false,\n            offset: Length.percent(0),\n            color: 'rgba(0, 0, 0, 1)'\n          });\n          targetIndex = 0;\n        }\n        this.refresh();\n        this.updateData(true);\n        this.selectStep(targetIndex);\n      }\n    }, {\n      key: \"reloadStepList\",\n      value: function reloadStepList() {\n        this.refs.$stepList.html(this.colorsteps.map(function (it, index) {\n          return \"<div class='step' data-index='\" + index + \"' data-cut='\" + it.cut + \"' style='left: \" + it.offset + \";'>\\n        <div class='color-view' style=\\\"background-color: \" + it.color + \"\\\"></div>\\n        <div class='arrow' style=\\\"background-color: \" + it.color + \"\\\"></div>\\n      </div>\";\n        }).join(''));\n      }\n    }, {\n      key: 'click $cut',\n      value: function click$cut() {\n        if (this.currentStep) {\n          this.currentStep.cut = this.refs.$cut.checked();\n          this.$currentStep.attr('data-cut', this.currentStep.cut);\n          this.setColorUI();\n          this.updateData(true);\n        }\n      }\n    }, {\n      key: 'click $remove',\n      value: function click$remove() {\n        this.removeStep(this.index);\n      }\n    }, {\n      key: \"removeStep\",\n      value: function removeStep(index) {\n        // if (this.colorsteps.length === 1) return; \n        this.colorsteps.splice(index, 1);\n        var currentStep = this.colorsteps[index];\n        var currentIndex = index;\n        if (!currentStep) {\n          currentStep = this.colorsteps[index - 1];\n          currentIndex = index - 1;\n        }\n        if (currentStep) {\n          this.selectStep(currentIndex);\n        }\n        this.refresh();\n        this.updateData(true);\n      }\n    }, {\n      key: \"selectStep\",\n      value: function selectStep(index) {\n        this.index = index;\n        this.currentStep = this.colorsteps[index];\n        this.refs.$stepList.attr('data-selected-index', index);\n        this.$currentStep = this.refs.$stepList.$(\"[data-index=\\\"\" + index.toString() + \"\\\"]\");\n        if (this.$currentStep) {\n          this.$colorView = this.$currentStep.$('.color-view');\n          this.$arrow = this.$currentStep.$('.arrow');\n          this.refs.$cut.el.checked = this.currentStep.cut;\n        }\n        this.prev = this.colorsteps[index - 1];\n        this.next = this.colorsteps[index + 1];\n      }\n    }, {\n      key: 'mousedown $stepList .step',\n      value: function mousedown$stepListStep(e) {\n        var index = +e.$delegateTarget.attr('data-index');\n        if (e.altKey) {\n          this.removeStep(index);\n          // return false; \n        } else {\n          this.selectStep(index);\n          this.startXY = e.xy;\n          this.$store.emit('selectColorStep', this.currentStep.color);\n          this.refs.$cut.checked(this.currentStep.cut);\n          this.refs.$offset.val(this.currentStep.offset.value);\n          this.refs.$stepList.attr('data-selected-index', index);\n          this.cachedStepListRect = this.refs.$stepList.rect();\n        }\n      }\n    }, {\n      key: \"getStepListRect\",\n      value: function getStepListRect() {\n        return this.cachedStepListRect;\n      }\n    }, {\n      key: 'mouseup document',\n      value: function mouseupDocument(e) {\n        if (this.startXY) {\n          this.startXY = null;\n          this.updateData(true);\n        }\n      }\n    }, {\n      key: 'mousemove document',\n      value: function mousemoveDocument(e) {\n        if (!this.startXY) return;\n        var dx = e.xy.x - this.startXY.x;\n        var dy = e.xy.y - this.startXY.y;\n        var rect = this.getStepListRect();\n        var minX = rect.x;\n        var maxX = rect.right;\n        var x = this.startXY.x + dx;\n        if (x < minX) x = minX;else if (x > maxX) x = maxX;\n        var percent = (x - minX) / rect.width * 100;\n        if (this.prev) {\n          if (this.prev.offset.value > percent) {\n            percent = this.prev.offset.value;\n          }\n        }\n        if (this.next) {\n          if (this.next.offset.value < percent) {\n            percent = this.next.offset.value;\n          }\n        }\n        this.currentStep.offset.set(round(percent, 100));\n        this.$currentStep.css({\n          left: Length.percent(percent)\n        });\n        this.refs.$offset.val(this.currentStep.offset.value);\n        this.setColorUI();\n        this.updateData();\n      }\n    }, {\n      key: \"refresh\",\n      value: function refresh() {\n        this.reloadStepList();\n        this.setColorUI();\n      }\n    }, {\n      key: \"getLinearGradient\",\n      value: function getLinearGradient() {\n        var _this3 = this;\n        if (this.colorsteps.length === 0) {\n          return '';\n        }\n        if (this.colorsteps.length === 1) {\n          var colorstep = this.colorsteps[0];\n          return \"linear-gradient(to right, \" + colorstep.color + \" \" + colorstep.offset + \", \" + colorstep.color + \" 100%)\";\n        }\n        return \"linear-gradient(to right, \" + this.colorsteps.map(function (it, index) {\n          if (it.cut) {\n            var prev = _this3.colorsteps[index - 1];\n            if (prev) {\n              return it.color + \" \" + prev.offset + \" \" + it.offset;\n            } else {\n              return it.color + \" \" + it.offset;\n            }\n          } else {\n            return it.color + \" \" + it.offset;\n          }\n        }).join(',') + \")\";\n      }\n    }, {\n      key: \"setColorUI\",\n      value: function setColorUI() {\n        this.refs.$stepList.css(\"background-image\", this.getLinearGradient());\n        this.refs.$el.attr(\"data-selected-editor\", this.type);\n      }\n    }, {\n      key: \"reloadInputValue\",\n      value: function reloadInputValue() {\n        this.refs.$offset.val(this.currentStep.offset.value);\n        this.refs.$offsetNumber.val(this.currentStep.offset.value);\n        this.refs.$offsetSelect.val(this.currentStep.offset.unit);\n        this.refs.$angle.val(this.angle.value);\n        this.refs.$angleNumber.val(this.angle.value);\n        var radialPosition = this.radialPosition.map(function (it) {\n          if (it === 'center') {\n            return Length.percent(50);\n          }\n          return it;\n        });\n        this.refs.$centerX.val(radialPosition[0].value);\n        this.refs.$centerXNumber.val(radialPosition[0].value);\n        this.refs.$centerXSelect.val(radialPosition[0].unit);\n        this.refs.$centerY.val(radialPosition[1].value);\n        this.refs.$centerYNumber.val(radialPosition[1].value);\n        this.refs.$centerYSelect.val(radialPosition[1].unit);\n        this.refs.$radialType.val(this.radialType);\n      }\n    }, {\n      key: '@setColorStepColor',\n      value: function setColorStepColor(color) {\n        var isLastUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n        if (this.currentStep) {\n          this.currentStep.color = color;\n          this.$colorView.css({\n            'background-color': color\n          });\n          this.$arrow.css({\n            'background-color': color\n          });\n          this.setColorUI();\n          this.updateData(isLastUpdate);\n        }\n      }\n    }, {\n      key: \"updateData\",\n      value: function updateData() {\n        var isLastUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n        this.$store.emit('changeGradientEditor', {\n          type: this.type,\n          index: this.index,\n          angle: this.angle,\n          colorsteps: this.colorsteps,\n          radialPosition: this.radialPosition,\n          radialType: this.radialType\n        }, isLastUpdate);\n      }\n    }, {\n      key: \"radialPositionX\",\n      get: function get$$1() {\n        return new Length(+this.refs.$centerX.val(), this.refs.$centerXSelect.val()).round(1000);\n      }\n    }, {\n      key: \"radialPositionY\",\n      get: function get$$1() {\n        return new Length(+this.refs.$centerY.val(), this.refs.$centerYSelect.val()).round(1000);\n      }\n    }]);\n    return GradientEditor;\n  }(UIElement);\n  var DEFINED_DIRECTIONS = {\n    \"0\": \"to top\",\n    \"45\": \"to top right\",\n    \"90\": \"to right\",\n    \"135\": \"to bottom right\",\n    \"180\": \"to bottom\",\n    \"225\": \"to bottom left\",\n    \"270\": \"to left\",\n    \"315\": \"to top left\"\n  };\n  var DEFINED_ANGLES$1 = {\n    \"to top\": \"0\",\n    \"to top right\": \"45\",\n    \"to right\": \"90\",\n    \"to bottom right\": \"135\",\n    \"to bottom\": \"180\",\n    \"to bottom left\": \"225\",\n    \"to left\": \"270\",\n    \"to top left\": \"315\"\n  };\n  var LinearGradient = function (_Gradient) {\n    inherits(LinearGradient, _Gradient);\n    function LinearGradient() {\n      classCallCheck(this, LinearGradient);\n      return possibleConstructorReturn(this, (LinearGradient.__proto__ || Object.getPrototypeOf(LinearGradient)).apply(this, arguments));\n    }\n    createClass(LinearGradient, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        return get(LinearGradient.prototype.__proto__ || Object.getPrototypeOf(LinearGradient.prototype), \"getDefaultObject\", this).call(this, _extends({\n          type: \"linear-gradient\",\n          angle: 0\n        }, obj));\n      }\n    }, {\n      key: \"toCloneObject\",\n      value: function toCloneObject() {\n        return _extends({}, get(LinearGradient.prototype.__proto__ || Object.getPrototypeOf(LinearGradient.prototype), \"toCloneObject\", this).call(this), {\n          angle: this.json.angle\n        });\n      }\n    }, {\n      key: \"isLinear\",\n      value: function isLinear() {\n        return true;\n      }\n    }, {\n      key: \"hasAngle\",\n      value: function hasAngle() {\n        return true;\n      }\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        if (this.colorsteps.length === 0) return '';\n        var colorString = this.getColorString();\n        var opt = '';\n        var angle = this.json.angle || 0;\n        opt = angle;\n        if (isNumber(opt)) {\n          opt = DEFINED_DIRECTIONS[\"\" + opt] || opt;\n        }\n        if (isNumber(opt)) {\n          opt = opt > 360 ? opt % 360 : opt;\n          opt = opt + \"deg\";\n        }\n        var result = this.json.type + \"(\" + opt + \", \" + colorString + \")\";\n        return result;\n      }\n    }], [{\n      key: \"toLinearGradient\",\n      value: function toLinearGradient(colorsteps) {\n        if (colorsteps.length === 0) {\n          return \"none\";\n        }\n        var gradient = new LinearGradient({\n          angle: \"to right\",\n          colorsteps: colorsteps\n        });\n        return gradient + \"\";\n      }\n    }, {\n      key: \"parse\",\n      value: function parse$$1(str) {\n        var results = convertMatches(str);\n        var angle = 0;\n        var colorsteps = [];\n        results.str.split(\"(\")[1].split(\")\")[0].split(\",\").map(function (it) {\n          return it.trim();\n        }).forEach(function (newValue, index) {\n          if (newValue.includes(\"@\")) {\n            // color 복원\n            newValue = reverseMatches(newValue, results.matches);\n\n            // 나머지는 ColorStep 이 파싱하는걸로\n            // ColorStep 은 파싱이후 colorsteps 를 리턴해줌... 배열임, 명심 명심\n            colorsteps.push.apply(colorsteps, toConsumableArray(ColorStep.parse(newValue)));\n          } else {\n            // direction\n            angle = isUndefined(DEFINED_ANGLES$1[newValue]) ? Length.parse(newValue) : Length.deg(+DEFINED_ANGLES$1[newValue]);\n          }\n        });\n        return new LinearGradient({\n          angle: angle,\n          colorsteps: colorsteps\n        });\n      }\n    }]);\n    return LinearGradient;\n  }(Gradient);\n  var RepeatingLinearGradient = function (_LinearGradient) {\n    inherits(RepeatingLinearGradient, _LinearGradient);\n    function RepeatingLinearGradient() {\n      classCallCheck(this, RepeatingLinearGradient);\n      return possibleConstructorReturn(this, (RepeatingLinearGradient.__proto__ || Object.getPrototypeOf(RepeatingLinearGradient)).apply(this, arguments));\n    }\n    createClass(RepeatingLinearGradient, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        return get(RepeatingLinearGradient.prototype.__proto__ || Object.getPrototypeOf(RepeatingLinearGradient.prototype), \"getDefaultObject\", this).call(this, {\n          type: \"repeating-linear-gradient\",\n          angle: 0\n        });\n      }\n    }], [{\n      key: \"parse\",\n      value: function parse(str) {\n        var linear = LinearGradient.parse(str);\n        return new RepeatingLinearGradient({\n          angle: linear.angle,\n          colorsteps: linear.colorsteps\n        });\n      }\n    }]);\n    return RepeatingLinearGradient;\n  }(LinearGradient);\n  var _DEFINED_POSITIONS;\n  var DEFINED_POSITIONS = (_DEFINED_POSITIONS = {}, defineProperty(_DEFINED_POSITIONS, \"center\", true), defineProperty(_DEFINED_POSITIONS, \"top\", true), defineProperty(_DEFINED_POSITIONS, \"left\", true), defineProperty(_DEFINED_POSITIONS, \"right\", true), defineProperty(_DEFINED_POSITIONS, \"bottom\", true), _DEFINED_POSITIONS);\n  var RadialGradient = function (_Gradient) {\n    inherits(RadialGradient, _Gradient);\n    function RadialGradient() {\n      classCallCheck(this, RadialGradient);\n      return possibleConstructorReturn(this, (RadialGradient.__proto__ || Object.getPrototypeOf(RadialGradient)).apply(this, arguments));\n    }\n    createClass(RadialGradient, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        return get(RadialGradient.prototype.__proto__ || Object.getPrototypeOf(RadialGradient.prototype), \"getDefaultObject\", this).call(this, _extends({\n          type: \"radial-gradient\",\n          radialType: \"ellipse\",\n          radialPosition: [Position.CENTER, Position.CENTER]\n        }, obj));\n      }\n    }, {\n      key: \"toCloneObject\",\n      value: function toCloneObject() {\n        var radialPosition = this.json.radialPosition || [Length.percent(50), Length.percent(50)];\n        return _extends({}, get(RadialGradient.prototype.__proto__ || Object.getPrototypeOf(RadialGradient.prototype), \"toCloneObject\", this).call(this), {\n          radialType: this.json.radialType || 'ellipse',\n          radialPosition: JSON.parse(JSON.stringify(radialPosition))\n        });\n      }\n    }, {\n      key: \"isRadial\",\n      value: function isRadial() {\n        return true;\n      }\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        if (this.colorsteps.length === 0) return '';\n        var colorString = this.getColorString();\n        var json = this.json;\n        var opt = '';\n        var radialType = json.radialType;\n        var radialPosition = json.radialPosition || [\"center\", \"center\"];\n        if (DEFINED_POSITIONS[radialPosition]) {\n          // noop \n        } else {\n          if (typeof radialPosition === 'string') {} else {\n            radialPosition = radialPosition.map(function (it) {\n              if (typeof it === 'string') {\n                return it;\n              }\n              if (it.isString()) {\n                return it.value;\n              }\n              return it.round(1000);\n            }).join(' ');\n          }\n        }\n        opt = radialPosition ? radialType + \" at \" + radialPosition : radialType;\n        return (json.type || \"radial-gradient\") + \"(\" + opt + \", \" + colorString + \")\";\n      }\n    }], [{\n      key: \"parse\",\n      value: function parse$$1(str) {\n        var results = convertMatches(str);\n        var radialType = \"ellipse\";\n        var radialPosition = [Position.CENTER, Position.CENTER];\n        var colorsteps = [];\n        results.str.split(\"(\")[1].split(\")\")[0].split(\",\").map(function (it) {\n          return it.trim();\n        }).forEach(function (newValue, index) {\n          if (newValue.includes(\"@\")) {\n            // color 복원\n            newValue = reverseMatches(newValue, results.matches);\n\n            // 나머지는 ColorStep 이 파싱하는걸로\n            // ColorStep 은 파싱이후 colorsteps 를 리턴해줌... 배열임, 명심 명심\n            colorsteps.push.apply(colorsteps, toConsumableArray(ColorStep.parse(newValue)));\n          } else {\n            // direction\n            if (newValue.includes(\"at\")) {\n              var _newValue$split$map = newValue.split(\"at\").map(function (it) {\n                return it.trim();\n              });\n              // at 이 있으면 radialPosition 이 있는 것임\n\n              var _newValue$split$map2 = slicedToArray(_newValue$split$map, 2);\n              radialType = _newValue$split$map2[0];\n              radialPosition = _newValue$split$map2[1];\n            } else {\n              // at 이 없으면 radialPosition 이 center, center 로 있음\n              radialType = newValue;\n            }\n            if (isString(radialPosition)) {\n              var arr = radialPosition.split(' ');\n              if (arr.length === 1) {\n                var len = Length.parse(arr[0]);\n                if (len.isString()) {\n                  radialPosition = [len.value, len.value];\n                } else {\n                  radialPosition = [len.clone(), len.clone()];\n                }\n              } else if (arr.length === 2) {\n                radialPosition = arr.map(function (it) {\n                  var len = Length.parse(it);\n                  return len.isString() ? len.value : len;\n                });\n              }\n            }\n          }\n        });\n        return new RadialGradient({\n          radialType: radialType,\n          colorsteps: colorsteps\n        });\n      }\n    }]);\n    return RadialGradient;\n  }(Gradient);\n  var RepeatingRadialGradient = function (_RadialGradient) {\n    inherits(RepeatingRadialGradient, _RadialGradient);\n    function RepeatingRadialGradient() {\n      classCallCheck(this, RepeatingRadialGradient);\n      return possibleConstructorReturn(this, (RepeatingRadialGradient.__proto__ || Object.getPrototypeOf(RepeatingRadialGradient)).apply(this, arguments));\n    }\n    createClass(RepeatingRadialGradient, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        return get(RepeatingRadialGradient.prototype.__proto__ || Object.getPrototypeOf(RepeatingRadialGradient.prototype), \"getDefaultObject\", this).call(this, {\n          type: \"repeating-radial-gradient\"\n        });\n      }\n    }], [{\n      key: \"parse\",\n      value: function parse(str) {\n        var radial = RadialGradient.parse(str);\n        return new RepeatingRadialGradient({\n          radialType: radial.radialType,\n          radialPosition: radial.radialPosition,\n          colorsteps: radial.colorsteps\n        });\n      }\n    }]);\n    return RepeatingRadialGradient;\n  }(RadialGradient);\n  var _DEFINED_POSITIONS$1;\n  var DEFINED_POSITIONS$1 = (_DEFINED_POSITIONS$1 = {}, defineProperty(_DEFINED_POSITIONS$1, \"center\", true), defineProperty(_DEFINED_POSITIONS$1, \"top\", true), defineProperty(_DEFINED_POSITIONS$1, \"left\", true), defineProperty(_DEFINED_POSITIONS$1, \"right\", true), defineProperty(_DEFINED_POSITIONS$1, \"bottom\", true), _DEFINED_POSITIONS$1);\n  var DEFINED_ANGLES$2 = {\n    \"to top\": 0,\n    \"to top right\": 45,\n    \"to right\": 90,\n    \"to bottom right\": 135,\n    \"to bottom\": 180,\n    \"to bottom left\": 225,\n    \"to left\": 270,\n    \"to top left\": 315\n  };\n  var ConicGradient = function (_Gradient) {\n    inherits(ConicGradient, _Gradient);\n    function ConicGradient() {\n      classCallCheck(this, ConicGradient);\n      return possibleConstructorReturn(this, (ConicGradient.__proto__ || Object.getPrototypeOf(ConicGradient)).apply(this, arguments));\n    }\n    createClass(ConicGradient, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        return get(ConicGradient.prototype.__proto__ || Object.getPrototypeOf(ConicGradient.prototype), \"getDefaultObject\", this).call(this, _extends({\n          type: \"conic-gradient\",\n          angle: 0,\n          radialPosition: [Position.CENTER, Position.CENTER]\n        }, obj));\n      }\n    }, {\n      key: \"toCloneObject\",\n      value: function toCloneObject() {\n        return _extends({}, get(ConicGradient.prototype.__proto__ || Object.getPrototypeOf(ConicGradient.prototype), \"toCloneObject\", this).call(this), {\n          angle: this.json.angle,\n          radialPosition: JSON.parse(JSON.stringify(this.json.radialPosition))\n        });\n      }\n    }, {\n      key: \"isConic\",\n      value: function isConic() {\n        return true;\n      }\n    }, {\n      key: \"hasAngle\",\n      value: function hasAngle() {\n        return true;\n      }\n    }, {\n      key: \"getColorString\",\n      value: function getColorString() {\n        if (this.colorsteps.length === 0) return '';\n        var colorsteps = this.colorsteps;\n        if (!colorsteps) return '';\n        colorsteps.sort(function (a, b) {\n          if (a.percent == b.percent) return 0;\n          return a.percent > b.percent ? 1 : -1;\n        });\n        var newColors = colorsteps.map(function (c, index) {\n          c.prevColorStep = c.cut && index > 0 ? colorsteps[index - 1] : null;\n          return c;\n        });\n        return newColors.map(function (f) {\n          var deg = Math.floor(f.percent * 3.6);\n          var prev = '';\n          if (f.cut && f.prevColorStep) {\n            var prevDeg = Math.floor(f.prevColorStep.percent * 3.6);\n            prev = prevDeg + \"deg\";\n          }\n          return f.color + \" \" + prev + \" \" + deg + \"deg\";\n        }).join(\",\");\n      }\n    }, {\n      key: \"toString\",\n      value: function toString() {\n        var colorString = this.getColorString();\n        var opt = [];\n        var json = this.json;\n        var conicAngle = json.angle;\n        var conicPosition = json.radialPosition || Position.CENTER;\n        conicPosition = DEFINED_POSITIONS$1[conicPosition] ? conicPosition : conicPosition.join(' ');\n        if (isNotUndefined(conicAngle)) {\n          conicAngle = +(DEFINED_ANGLES$2[conicAngle] || conicAngle);\n          opt.push(\"from \" + conicAngle + \"deg\");\n        }\n        if (conicPosition) {\n          opt.push(\"at \" + conicPosition);\n        }\n        var optString = opt.length ? opt.join(' ') + \",\" : '';\n        return json.type + \"(\" + optString + \" \" + colorString + \")\";\n      }\n    }], [{\n      key: \"parse\",\n      value: function parse$$1(str) {\n        var results = convertMatches(str);\n        var angle = \"0deg\"; //\n        var radialPosition = [Position.CENTER, Position.CENTER];\n        var colorsteps = [];\n        results.str.split(\"(\")[1].split(\")\")[0].split(\",\").map(function (it) {\n          return it.trim();\n        }).forEach(function (newValue, index) {\n          if (newValue.includes(\"@\")) {\n            // conic 은 최종 값이 deg 라  gradient 의 공통 영역을 위해서\n            // deg 르 % 로 미리 바꾸는 작업이 필요하다.\n            newValue = newValue.split(' ').map(function (it) {\n              return it.trim();\n            }).map(function (it) {\n              if (it.includes(\"deg\")) {\n                return Length.parse(it).toPercent();\n              } else {\n                return it;\n              }\n            }).join(' ');\n\n            // color 복원\n            newValue = reverseMatches(newValue, results.matches);\n\n            // 나머지는 ColorStep 이 파싱하는걸로\n            // ColorStep 은 파싱이후 colorsteps 를 리턴해줌... 배열임, 명심 명심\n            colorsteps.push.apply(colorsteps, toConsumableArray(ColorStep.parse(newValue)));\n          } else {\n            // direction\n            if (newValue.includes(\"at\")) {\n              var _newValue$split$map = newValue.split(\"at\").map(function (it) {\n                return it.trim();\n              });\n              // at 이 있으면 radialPosition 이 있는 것임\n\n              var _newValue$split$map2 = slicedToArray(_newValue$split$map, 2);\n              angle = _newValue$split$map2[0];\n              radialPosition = _newValue$split$map2[1];\n            } else {\n              // at 이 없으면 radialPosition 이 center, center 로 있음\n              angle = newValue;\n            }\n            if (isString(radialPosition)) {\n              var arr = radialPosition.split(' ');\n              if (arr.length === 1) {\n                var len = Length.parse(arr[0]);\n                if (len.isString()) {\n                  radialPosition = [len.value, len.value];\n                } else {\n                  radialPosition = [len.clone(), len.clone()];\n                }\n              } else if (arr.length === 2) {\n                radialPosition = arr.map(function (it) {\n                  var len = Length.parse(it);\n                  return len.isString() ? len.value : len;\n                });\n              }\n            }\n            if (isString(angle)) {\n              if (angle.includes(\"from\")) {\n                angle = angle.split(\"from\")[1];\n                angle = isUndefined(DEFINED_ANGLES$2[angle]) ? Length.parse(angle) : Length.deg(+DEFINED_ANGLES$2[angle]);\n              }\n            }\n          }\n        });\n        return new ConicGradient({\n          angle: angle,\n          radialPosition: radialPosition,\n          colorsteps: colorsteps\n        });\n      }\n    }]);\n    return ConicGradient;\n  }(Gradient);\n  var RepeatingConicGradient = function (_ConicGradient) {\n    inherits(RepeatingConicGradient, _ConicGradient);\n    function RepeatingConicGradient() {\n      classCallCheck(this, RepeatingConicGradient);\n      return possibleConstructorReturn(this, (RepeatingConicGradient.__proto__ || Object.getPrototypeOf(RepeatingConicGradient)).apply(this, arguments));\n    }\n    createClass(RepeatingConicGradient, [{\n      key: \"getDefaultObject\",\n      value: function getDefaultObject() {\n        return get(RepeatingConicGradient.prototype.__proto__ || Object.getPrototypeOf(RepeatingConicGradient.prototype), \"getDefaultObject\", this).call(this, {\n          type: \"repeating-conic-gradient\",\n          angle: 0,\n          radialPosition: [Position.CENTER, Position.CENTER]\n        });\n      }\n    }], [{\n      key: \"parse\",\n      value: function parse(str) {\n        var conic = ConicGradient.parse(str);\n        return new RepeatingConicGradient({\n          angle: conic.angle,\n          radialPosition: conic.radialPosition,\n          colorsteps: conic.colorsteps\n        });\n      }\n    }]);\n    return RepeatingConicGradient;\n  }(ConicGradient);\n  var tabs = [{\n    type: \"linear-gradient\",\n    title: \"Linear Gradient\"\n  }, {\n    type: \"repeating-linear-gradient\",\n    title: \"Repeating Linear Gradient\"\n  }, {\n    type: \"radial-gradient\",\n    title: \"Radial Gradient\"\n  }, {\n    type: \"repeating-radial-gradient\",\n    title: \"Repeating Radial Gradient\"\n  }, {\n    type: \"conic-gradient\",\n    title: \"Conic Gradient\"\n  }, {\n    type: \"repeating-conic-gradient\",\n    title: \"Repeating Conic Gradient\"\n  }];\n  var reg = /((linear\\-gradient|repeating\\-linear\\-gradient|radial\\-gradient|repeating\\-radial\\-gradient|conic\\-gradient|repeating\\-conic\\-gradient|url)\\(([^\\)]*)\\))/gi;\n  var GradientPicker$1 = function (_BaseColorPicker) {\n    inherits(GradientPicker, _BaseColorPicker);\n    function GradientPicker() {\n      classCallCheck(this, GradientPicker);\n      return possibleConstructorReturn(this, (GradientPicker.__proto__ || Object.getPrototypeOf(GradientPicker)).apply(this, arguments));\n    }\n    createClass(GradientPicker, [{\n      key: \"components\",\n      value: function components() {\n        return {\n          EmbedColorPicker: EmbedColorPicker,\n          gradientEditor: GradientEditor\n        };\n      }\n    }, {\n      key: \"parseImage\",\n      value: function parseImage(str) {\n        var results = convertMatches(str);\n        var image = null;\n        results.str.match(reg).forEach(function (value, index) {\n          value = reverseMatches(value, results.matches);\n          if (value.includes(\"repeating-linear-gradient\")) {\n            image = RepeatingLinearGradient.parse(value);\n          } else if (value.includes(\"linear-gradient\")) {\n            image = LinearGradient.parse(value);\n          } else if (value.includes(\"repeating-radial-gradient\")) {\n            image = RepeatingRadialGradient.parse(value);\n          } else if (value.includes(\"radial\")) {\n            image = RadialGradient.parse(value);\n          } else if (value.includes(\"repeating-conic-gradient\")) {\n            image = RepeatingConicGradient.parse(value);\n          } else if (value.includes(\"conic\")) {\n            image = ConicGradient.parse(value);\n          }\n        });\n        return image;\n      }\n\n      /**\n       * @override\n       */\n    }, {\n      key: \"callbackColorValue\",\n      value: function callbackColorValue(color) {\n        var gradientString = this.image.toString();\n        if (typeof this.opt.onChange == 'function') {\n          this.opt.onChange.call(this, gradientString, this.image);\n        }\n        if (typeof this.colorpickerShowCallback == 'function') {\n          this.colorpickerShowCallback(gradientString, this.image);\n        }\n      }\n\n      /**\n       * @override\n       */\n    }, {\n      key: \"callbackLastUpdateColorValue\",\n      value: function callbackLastUpdateColorValue(color) {\n        var gradientString = this.image.toString();\n        if (typeof this.opt.onLastUpdate == 'function') {\n          this.opt.onLastUpdate.call(this, gradientString, this.image);\n        }\n      }\n    }, {\n      key: \"callbackHideColorValue\",\n      value: function callbackHideColorValue(color) {\n        var gradientString = this.image.toString();\n        if (typeof this.opt.onHide == 'function') {\n          this.opt.onHide.call(this, gradientString, this.image);\n        }\n        if (typeof this.colorpickerHideCallback == 'function') {\n          this.colorpickerHideCallback(gradientString, this.image);\n        }\n      }\n    }, {\n      key: \"initialize\",\n      value: function initialize() {\n        get(GradientPicker.prototype.__proto__ || Object.getPrototypeOf(GradientPicker.prototype), \"initialize\", this).call(this);\n        this.$root.addClass('gradient-picker');\n        this.selectedTab = \"linear-gradient\";\n        this.setValue(this.opt.gradient || 'linear-gradient(to right, red 0%, yellow 100%)');\n      }\n    }, {\n      key: \"setValue\",\n      value: function setValue(gradientString) {\n        this.gradient = gradientString;\n        this.image = this.parseImage(this.gradient);\n        this.selectTabContent(this.image.type);\n      }\n    }, {\n      key: \"getValue\",\n      value: function getValue() {\n        return this.image.toString();\n      }\n    }, {\n      key: \"template\",\n      value: function template() {\n        return /*html*/\"\\n      <div class=\\\"gradient-body\\\">\\n\\n        <div class='box'>\\n          <div class='gradient-preview'>\\n            <div class='gradient-view' ref='$gradientView'></div>\\n          </div>\\n          <div class=\\\"picker-tab\\\">\\n            <div class=\\\"picker-tab-list\\\" ref=\\\"$tab\\\" data-value=\\\"static-gradient\\\" data-is-image-hidden=\\\"false\\\">\\n              \" + tabs.map(function (it) {\n          return \"\\n                  <span \\n                    class='picker-tab-item \" + (it.selected ? \"selected\" : '') + \"' \\n                    data-selected-value='\" + it.type + \"'\\n                    title='\" + it.title + \"'\\n                  > \\n                  <div class='icon'></div>\\n                  </span>\";\n        }).join('') + \"\\n            </div>\\n          </div>\\n          <div target='gradientEditor'></div>\\n\\n        </div>\\n        <div class='box'>\\n          <div target=\\\"EmbedColorPicker\\\"></div>\\n        </div>\\n      </div>\\n     \\n    \";\n      }\n    }, {\n      key: \"getColorString\",\n      value: function getColorString() {\n        if (!this.image) return '';\n        var value = this.image.getColorString();\n        return value;\n      }\n    }, {\n      key: \"getCurrentStepColor\",\n      value: function getCurrentStepColor() {\n        var colorstep = this.image.colorsteps[this.selectColorStepIndex || 0] || {\n          color: 'rgba(0, 0, 0, 1)'\n        };\n        return colorstep.color;\n      }\n    }, {\n      key: '@changeGradientEditor',\n      value: function changeGradientEditor(data) {\n        var isLastUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n        var colorsteps = data.colorsteps.map(function (it, index) {\n          return new ColorStep({\n            color: it.color,\n            percent: it.offset.value,\n            cut: it.cut,\n            index: (index + 1) * 100\n          });\n        });\n        data = _extends({}, data, {\n          type: this.selectedTab,\n          colorsteps: colorsteps\n        });\n        this.image.reset(data);\n        this.updateGradientPreview(isLastUpdate);\n        // this.updateData(isLastUpdate);\n      }\n    }, {\n      key: \"click $tab .picker-tab-item\",\n      value: function click$tabPickerTabItem(e) {\n        var type = e.$delegateTarget.attr(\"data-selected-value\");\n\n        //TODO: picker 타입이 바뀌면 내부 속성도 같이 바뀌어야 한다.\n        this.selectTabContent(type);\n      }\n    }, {\n      key: \"selectTabContent\",\n      value: function selectTabContent(type) {\n        this.selectedTab = type;\n        this.refs.$tab.attr(\"data-value\", type);\n\n        // 설정된 이미지를 재생성한다. type 에 맞게 \n        // 데이타 전송은 다 문자열로 하는게 나을까? 객체로 하는게 나을 까 ? \n        // json 형태로만 주고 받는게 좋을 듯 하다. \n        // 자체 객체가 있으니 다루기가 너무 힘들어지고 있다. \n        // 파싱 용도로만 쓰자. \n\n        this.image = this.createGradient({\n          type: type\n        }, this.image);\n        this.$store.emit('setGradientEditor', this.getColorString(), this.selectColorStepIndex, this.image.type, this.image.angle, this.image.radialPosition, this.image.radialType);\n        var color = this.getCurrentStepColor();\n        this['@selectColorStep'](color);\n        this.updateGradientPreview(true);\n      }\n    }, {\n      key: \"createGradient\",\n      value: function createGradient(data, gradient) {\n        var colorsteps = data.colorsteps || gradient.colorsteps;\n\n        // linear, conic 은 angle 도 같이 설정한다.\n        var angle = data.angle || gradient.angle;\n\n        // radial 은  radialType 도 같이 설정한다.\n        var radialType = data.radialType || gradient.radialType || 'ellipse';\n        var radialPosition = data.radialPosition || gradient.radialPosition || [Length.percent(50), Length.percent(50)];\n        var json = gradient.clone().toJSON();\n        delete json.itemType;\n        delete json.type;\n        switch (data.type) {\n          case \"linear-gradient\":\n            return new LinearGradient({\n              colorsteps: colorsteps,\n              angle: angle\n            });\n          case \"repeating-linear-gradient\":\n            return new RepeatingLinearGradient({\n              colorsteps: colorsteps,\n              angle: angle\n            });\n          case \"radial-gradient\":\n            return new RadialGradient({\n              colorsteps: colorsteps,\n              radialType: radialType,\n              radialPosition: radialPosition\n            });\n          case \"repeating-radial-gradient\":\n            return new RepeatingRadialGradient({\n              colorsteps: colorsteps,\n              radialType: radialType,\n              radialPosition: radialPosition\n            });\n          case \"conic-gradient\":\n            return new ConicGradient({\n              colorsteps: colorsteps,\n              angle: angle,\n              radialPosition: radialPosition\n            });\n          case \"repeating-conic-gradient\":\n            return new RepeatingConicGradient({\n              colorsteps: colorsteps,\n              angle: angle,\n              radialPosition: radialPosition\n            });\n        }\n        return new Gradient();\n      }\n    }, {\n      key: '@changeEmbedColorPicker',\n      value: function changeEmbedColorPicker(color) {\n        var isLastUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n        this.$store.emit('setColorStepColor', color, isLastUpdate);\n      }\n    }, {\n      key: \"@selectColorStep\",\n      value: function selectColorStep(color) {\n        this.EmbedColorPicker.setValue(color);\n      }\n    }, {\n      key: '@changeColorStep',\n      value: function changeColorStep() {\n        var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n        this.image.reset(_extends({}, data));\n        this.updateGradientPreview();\n        // this.updateData();\n      }\n    }, {\n      key: \"updateGradientPreview\",\n      value: function updateGradientPreview() {\n        var isLastUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n        if (this.image) {\n          this.refs.$gradientView.css('background-image', this.image.toString());\n          this.updateData(isLastUpdate);\n        }\n      }\n    }, {\n      key: 'mousedown $gradientView',\n      value: function mousedown$gradientView(e) {\n        this.mouseDown = true;\n        this.mouseDownX = e.clientX;\n        this.mouseDownY = e.clientY;\n        this.rect = this.refs.$gradientView.rect();\n      }\n    }, {\n      key: 'mousemove document',\n      value: function mousemoveDocument(e) {\n        if (this.mouseDown) {\n          var minX = this.rect.left;\n          var maxX = this.rect.right;\n          var minY = this.rect.top;\n          var maxY = this.rect.bottom;\n          var currentX = Math.min(Math.max(minX, e.clientX), maxX);\n          var currentY = Math.min(Math.max(minY, e.clientY), maxY);\n          var posX = Length.percent((currentX - minX) / (maxX - minX) * 100);\n          var posY = Length.percent((currentY - minY) / (maxY - minY) * 100);\n          this.$store.emit('changeRadialPosition', posX, posY);\n        }\n      }\n    }, {\n      key: 'mouseup document',\n      value: function mouseupDocument(e) {\n        if (this.mouseDown) {\n          this.mouseDown = false;\n          this.updateData(true);\n        }\n      }\n    }, {\n      key: \"updateData\",\n      value: function updateData() {\n        var isLastUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n        this.callbackChange();\n\n        // on last update \n        if (isLastUpdate) {\n          this.callbackLastUpdate();\n        }\n      }\n    }]);\n    return GradientPicker;\n  }(BaseColorPicker);\n  var GradientPicker = {\n    createGradientPicker: function createGradientPicker(opts) {\n      return new GradientPicker$1(opts);\n    }\n  };\n  var index = _extends({}, Util, ColorPickerUI, GradientPicker);\n  return index;\n});\n\n//# sourceURL=webpack://ocyan.plugin.coyote/./node_modules/@easylogic/colorpicker/dist/colorpicker.js?");

/***/ }),

/***/ "./node_modules/@easylogic/colorpicker/dist/colorpicker.css":
/*!******************************************************************!*\
  !*** ./node_modules/@easylogic/colorpicker/dist/colorpicker.css ***!
  \******************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://ocyan.plugin.coyote/./node_modules/@easylogic/colorpicker/dist/colorpicker.css?");

/***/ }),

/***/ "./js/scss/stylesettingscolorpicker.scss":
/*!***********************************************!*\
  !*** ./js/scss/stylesettingscolorpicker.scss ***!
  \***********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://ocyan.plugin.coyote/./js/scss/stylesettingscolorpicker.scss?");

/***/ }),

/***/ "jquery":
/*!*************************!*\
  !*** external "jQuery" ***!
  \*************************/
/***/ ((module) => {

"use strict";
module.exports = window["jQuery"];

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/compat get default export */
/******/ 	(() => {
/******/ 		// getDefaultExport function for compatibility with non-harmony modules
/******/ 		__webpack_require__.n = (module) => {
/******/ 			var getter = module && module.__esModule ?
/******/ 				() => (module['default']) :
/******/ 				() => (module);
/******/ 			__webpack_require__.d(getter, { a: getter });
/******/ 			return getter;
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./js/stylesettingscolorpicker.js");
/******/ 	var __webpack_export_target__ = window;
/******/ 	for(var i in __webpack_exports__) __webpack_export_target__[i] = __webpack_exports__[i];
/******/ 	if(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });
/******/ 	
/******/ })()
;