From 994e6a288ef0e5de97f86a309cbb08c805605191 Mon Sep 17 00:00:00 2001 From: easylogic Date: Tue, 28 Aug 2018 01:06:22 +0900 Subject: [PATCH] Refactoring color picker --- addon/codemirror-colorpicker.css | 10 +- addon/codemirror-colorpicker.js | 263 +++++++++--------- dist/codemirror-colorpicker.css | 10 +- dist/codemirror-colorpicker.js | 263 +++++++++--------- dist/codemirror-colorpicker.min.js | 2 +- package.json | 2 +- src/colorpicker/chromedevtool/ColorControl.js | 44 +-- .../chromedevtool/ColorInformation.js | 98 +++---- src/colorpicker/chromedevtool/ColorPalette.js | 28 +- .../chromedevtool/ColorSetsChooser.js | 71 ++--- .../chromedevtool/CurrentColorSets.js | 60 ++-- .../CurrentColorSetsContextMenu.js | 11 +- src/colorpicker/chromedevtool/index.js | 35 +-- src/scss/component/colorchooser.scss | 9 +- src/scss/index.scss | 2 +- src/util/EventMachin.js | 37 ++- 16 files changed, 494 insertions(+), 451 deletions(-) diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css index 27bdddc..0dd65a2 100644 --- a/addon/codemirror-colorpicker.css +++ b/addon/codemirror-colorpicker.css @@ -441,7 +441,9 @@ padding-left: 14px; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; } + white-space: nowrap; + color: #000; + text-align: left; } .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-item-header .items { -webkit-box-flex: 1; -ms-flex: 1; @@ -450,7 +452,7 @@ padding-right: 10px; display: block; height: 100%; - line-height: 1.6; + line-height: 2; cursor: pointer; } .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list { position: absolute; @@ -485,7 +487,9 @@ font-size: 13px; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; } + white-space: nowrap; + color: #000; + text-align: left; } .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { -webkit-box-flex: 3; -ms-flex: 3; diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js index fbba0dc..6e02b1c 100644 --- a/addon/codemirror-colorpicker.js +++ b/addon/codemirror-colorpicker.js @@ -5836,19 +5836,48 @@ var EventMachin = function () { this.state = new State(this); this.refs = {}; + + this.$el = this.parseTemplate(this.template()); + this.refs.$el = this.$el; } createClass(EventMachin, [{ - key: 'template', - value: function template(html) { + key: 'parseTemplate', + value: function parseTemplate(html) { var _this = this; - this.$el = new Dom("div").html(html).firstChild(); - var refs = this.$el.findAll("[ref]"); + var $el = new Dom("div").html(html).firstChild(); + var refs = $el.findAll("[ref]"); [].concat(toConsumableArray(refs)).forEach(function (node) { - _this.refs[node.getAttribute("ref")] = new Dom(node); + var name = node.getAttribute("ref"); + _this.refs[name] = new Dom(node); + + var callbackName = 'load ' + name; + + if (_this[callbackName]) { + _this.refs[name].load = function () { + new Dom(node).html(_this.parseTemplate(_this[callbackName].call(_this))); + }; + } + }); + + return $el; + } + }, { + key: 'load', + value: function load() { + var _this2 = this; + + Object.keys(this.refs).forEach(function (key) { + if (_this2.refs[key].load) { + _this2.refs[key].load(); + } }); - this.refs.$el = this.$el; + } + }, { + key: 'template', + value: function template() { + return '
'; } }, { key: 'initializeEvent', @@ -5905,7 +5934,7 @@ var EventMachin = function () { }, { key: 'getDefaultEventObject', value: function getDefaultEventObject(eventName) { - var _this2 = this; + var _this3 = this; var arr = eventName.split('.'); var realEventName = arr.shift(); @@ -5920,7 +5949,7 @@ var EventMachin = function () { }); var checkMethodList = arr.filter(function (code) { - return !!_this2[code]; + return !!_this3[code]; }); arr = arr.filter(function (code) { @@ -5989,7 +6018,7 @@ var EventMachin = function () { }, { key: 'checkEventType', value: function checkEventType(e, eventObject) { - var _this3 = this; + var _this4 = this; var onlyControl = e.ctrlKey ? eventObject.isControl : true; var onlyShift = e.shiftKey ? eventObject.isShift : true; @@ -6005,7 +6034,7 @@ var EventMachin = function () { if (eventObject.checkMethodList.length) { // 체크 메소드들은 모든 메소드를 다 적용해야한다. isAllCheck = eventObject.checkMethodList.every(function (method) { - return _this3[method].call(_this3, e); + return _this4[method].call(_this4, e); }); } @@ -6014,13 +6043,13 @@ var EventMachin = function () { }, { key: 'makeCallback', value: function makeCallback(eventObject, callback) { - var _this4 = this; + var _this5 = this; if (eventObject.delegate) { return function (e) { - if (_this4.checkEventType(e, eventObject)) { - var delegateTarget = _this4.matchPath(e.target || e.srcElement, eventObject.delegate); + if (_this5.checkEventType(e, eventObject)) { + var delegateTarget = _this5.matchPath(e.target || e.srcElement, eventObject.delegate); if (delegateTarget) { // delegate target 이 있는 경우만 callback 실행 @@ -6032,7 +6061,7 @@ var EventMachin = function () { }; } else { return function (e) { - if (_this4.checkEventType(e, eventObject)) { + if (_this5.checkEventType(e, eventObject)) { return callback(e); } }; @@ -6048,10 +6077,10 @@ var EventMachin = function () { }, { key: 'removeEventAll', value: function removeEventAll() { - var _this5 = this; + var _this6 = this; this.getBindings().forEach(function (obj) { - _this5.removeEvent(obj); + _this6.removeEvent(obj); }); this.initBindings(); } @@ -6549,9 +6578,13 @@ var ColorControl = function (_EventMachin) { } createClass(ColorControl, [{ + key: 'template', + value: function template() { + return '\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '; + } + }, { key: 'initialize', value: function initialize() { - this.template('\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '); this.drag_bar_pos = {}; this.opacity_drag_bar_pos = {}; @@ -6725,6 +6758,19 @@ var ColorControl = function (_EventMachin) { value: function setOnlyHueColor() { this.setHueColor(null, true); } + + // Event Bindings + + }, { + key: 'mouseup document', + value: function mouseupDocument(e) { + this.EventDocumentMouseUp(e); + } + }, { + key: 'mousemove document', + value: function mousemoveDocument(e) { + this.EventDocumentMouseMove(e); + } }, { key: 'mousedown $drag_bar', value: function mousedown$drag_bar(e) { @@ -6768,11 +6814,14 @@ var ColorInformation = function (_EventMachin) { } createClass(ColorInformation, [{ + key: 'template', + value: function template() { + return '\n
\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
H
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '; + } + }, { key: 'initialize', value: function initialize() { - this.template('\n
\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
H
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '); - this.format = 'hex'; } }, { @@ -7030,11 +7079,13 @@ var ColorPallet = function (_EventMachin) { } createClass(ColorPallet, [{ - key: 'initialize', - value: function initialize() { - - this.template('\n
\n
\n
\n
\n
\n
\n
\n '); + key: 'template', + value: function template() { + return '\n
\n
\n
\n
\n
\n
\n
\n '; } + }, { + key: 'initialize', + value: function initialize() {} }, { key: 'setBackgroundColor', value: function setBackgroundColor(color) { @@ -7108,6 +7159,16 @@ var ColorPallet = function (_EventMachin) { this.setMainColor(e); } } + }, { + key: 'mouseup document', + value: function mouseupDocument(e) { + this.EventDocumentMouseUp(e); + } + }, { + key: 'mousemove document', + value: function mousemoveDocument(e) { + this.EventDocumentMouseMove(e); + } }, { key: 'mousedown', value: function mousedown(e) { @@ -7140,61 +7201,33 @@ var ColorSetsChooser = function (_EventMachin) { } createClass(ColorSetsChooser, [{ + key: 'template', + value: function template() { + return '\n
\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n
\n '; + } + }, { key: 'initialize', value: function initialize() { - this.template('\n
\n
\n
\n

Color Paletts

\n ×\n
\n
\n
\n
\n '); - - this.refresh(); + this.load(); } - }, { - key: 'refresh', - value: function refresh() { - this.refs.$colorsetsList.html(this.makeColorSetsList()); - } - }, { - key: 'makeColorItemList', - value: function makeColorItemList(colors) { - var maxCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5; - - - var $list = new Dom('div'); - - for (var i = 0; i < maxCount; i++) { - var color = colors[i] || 'rgba(255, 255, 255, 1)'; - var $item = $list.createChild('div', 'color-item', { - title: color - }); - $item.createChild('div', 'color-view', null, { - 'background-color': color - }); - } + // loadable - return $list; - } }, { - key: 'makeColorSetsList', - value: function makeColorSetsList() { - var _this2 = this; - - var $div = new Dom('div'); - + key: 'load $colorsetsList', + value: function load$colorsetsList() { // colorsets var colorSets = this.colorpicker.getColorSetsList(); - colorSets.forEach(function (element, index) { - if (_this2.colorpicker.isPaletteType() && element.edit) { - // NOOP - } else { - var $item = $div.createChild('div', 'colorsets-item', defineProperty({}, DATA_COLORSETS_INDEX, index)); - - $item.createChild('h1', 'title').html(element.name); - $item.createChild('div', 'items').append(_this2.makeColorItemList(element.colors, 5)); - } - }); - - return $div; + return '\n
\n ' + colorSets.map(function (element, index) { + return '\n
\n

' + element.name + '

\n
\n
\n ' + element.colors.filter(function (color, i) { + return i < 5; + }).map(function (color) { + color = color || 'rgba(255, 255, 255, 1)'; + return '
\n
\n
'; + }).join('') + '\n
\n
\n
'; + }).join('') + '\n
\n '; } }, { key: 'show', @@ -7256,49 +7289,29 @@ var CurrentColorSets = function (_EventMachin) { } createClass(CurrentColorSets, [{ - key: 'makeCurrentColorSets', - value: function makeCurrentColorSets() { - var list = new Dom('div', 'current-color-sets'); + key: 'template', + value: function template() { + return '\n
\n
\n \n
\n
\n
\n '; + } + }, { + key: 'load $colorSetsColorList', + value: function load$colorSetsColorList() { var currentColorSets = this.colorSetsList.getCurrentColorSets(); var colors = this.colorSetsList.getCurrentColors(); - for (var i = 0, len = colors.length; i < len; i++) { - var color = colors[i]; - var item = list.createChild('div', 'color-item', { - 'title': color, - 'data-index': i, - 'data-color': color - }); - - item.createChild('div', 'empty'); - item.createChild('div', 'color-view', null, { - 'background-color': color - }); - } - - if (currentColorSets.edit) { - list.createChild('div', 'add-color-item').html('+'); - } - - return list; + return '\n
\n ' + colors.map(function (color, i) { + return '
\n
\n
\n
'; + }).join('') + ' \n ' + (currentColorSets.edit ? '
+
' : '') + ' \n
\n '; } }, { key: 'initialize', value: function initialize() { - - this.template('\n
\n
\n \n
\n
\n
\n '); - - this.refresh(); - } - }, { - key: 'refresh', - value: function refresh() { - this.refs.$colorSetsColorList.html(this.makeCurrentColorSets()); + this.load(); } }, { key: 'refreshAll', value: function refreshAll() { - this.refresh(); + this.load(); this.colorpicker.refreshColorSetsChooser(); } }, { @@ -7385,11 +7398,13 @@ var CurrentColorSetsContextMenu = function (_EventMachin) { } createClass(CurrentColorSetsContextMenu, [{ - key: 'initialize', - value: function initialize() { - - this.template('\n \n '); + key: 'template', + value: function template() { + return '\n \n '; } + }, { + key: 'initialize', + value: function initialize() {} }, { key: 'show', value: function show(e, index) { @@ -7797,28 +7812,6 @@ var ColorPicker$1 = function (_BaseColorPicker) { value: function setHueColor() { this.control.setOnlyHueColor(); } - - // Event Bindings - - }, { - key: 'mouseup document', - value: function mouseupDocument(e) { - this.palette.EventDocumentMouseUp(e); - this.control.EventDocumentMouseUp(e); - - // when color picker clicked in outside - if (this.checkInHtml(e.target)) { - //this.setHideDelay(hideDelay); - } else if (this.checkColorPickerClass(e.target) == false) { - this.hide(); - } - } - }, { - key: 'mousemove document', - value: function mousemoveDocument(e) { - this.palette.EventDocumentMouseMove(e); - this.control.EventDocumentMouseMove(e); - } }, { key: 'initializeEvent', value: function initializeEvent() { @@ -7845,7 +7838,7 @@ var ColorPicker$1 = function (_BaseColorPicker) { }, { key: 'refreshColorSetsChooser', value: function refreshColorSetsChooser() { - this.colorSetsChooser.refresh(); + this.colorSetsChooser.load(); } }, { key: 'getColorSetsList', @@ -7856,7 +7849,7 @@ var ColorPicker$1 = function (_BaseColorPicker) { key: 'setCurrentColorSets', value: function setCurrentColorSets(nameOrIndex) { this.colorSetsList.setCurrentColorSets(nameOrIndex); - this.currentColorSets.refresh(); + this.currentColorSets.load(); } }, { key: 'setColorSets', @@ -7876,6 +7869,20 @@ var ColorPicker$1 = function (_BaseColorPicker) { this.currentColorSets.destroy(); this.contextMenu.destroy(); } + + // Event Bindings + + }, { + key: 'mouseup document', + value: function mouseupDocument(e) { + + // when color picker clicked in outside + if (this.checkInHtml(e.target)) { + //this.setHideDelay(hideDelay); + } else if (this.checkColorPickerClass(e.target) == false) { + this.hide(); + } + } }]); return ColorPicker; }(BaseColorPicker); diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css index 27bdddc..0dd65a2 100644 --- a/dist/codemirror-colorpicker.css +++ b/dist/codemirror-colorpicker.css @@ -441,7 +441,9 @@ padding-left: 14px; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; } + white-space: nowrap; + color: #000; + text-align: left; } .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-item-header .items { -webkit-box-flex: 1; -ms-flex: 1; @@ -450,7 +452,7 @@ padding-right: 10px; display: block; height: 100%; - line-height: 1.6; + line-height: 2; cursor: pointer; } .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list { position: absolute; @@ -485,7 +487,9 @@ font-size: 13px; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; } + white-space: nowrap; + color: #000; + text-align: left; } .codemirror-colorpicker > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { -webkit-box-flex: 3; -ms-flex: 3; diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js index 712c1a5..814b201 100644 --- a/dist/codemirror-colorpicker.js +++ b/dist/codemirror-colorpicker.js @@ -5936,19 +5936,48 @@ var EventMachin = function () { this.state = new State(this); this.refs = {}; + + this.$el = this.parseTemplate(this.template()); + this.refs.$el = this.$el; } createClass(EventMachin, [{ - key: 'template', - value: function template(html) { + key: 'parseTemplate', + value: function parseTemplate(html) { var _this = this; - this.$el = new Dom("div").html(html).firstChild(); - var refs = this.$el.findAll("[ref]"); + var $el = new Dom("div").html(html).firstChild(); + var refs = $el.findAll("[ref]"); [].concat(toConsumableArray(refs)).forEach(function (node) { - _this.refs[node.getAttribute("ref")] = new Dom(node); + var name = node.getAttribute("ref"); + _this.refs[name] = new Dom(node); + + var callbackName = 'load ' + name; + + if (_this[callbackName]) { + _this.refs[name].load = function () { + new Dom(node).html(_this.parseTemplate(_this[callbackName].call(_this))); + }; + } + }); + + return $el; + } + }, { + key: 'load', + value: function load() { + var _this2 = this; + + Object.keys(this.refs).forEach(function (key) { + if (_this2.refs[key].load) { + _this2.refs[key].load(); + } }); - this.refs.$el = this.$el; + } + }, { + key: 'template', + value: function template() { + return '
'; } }, { key: 'initializeEvent', @@ -6005,7 +6034,7 @@ var EventMachin = function () { }, { key: 'getDefaultEventObject', value: function getDefaultEventObject(eventName) { - var _this2 = this; + var _this3 = this; var arr = eventName.split('.'); var realEventName = arr.shift(); @@ -6020,7 +6049,7 @@ var EventMachin = function () { }); var checkMethodList = arr.filter(function (code) { - return !!_this2[code]; + return !!_this3[code]; }); arr = arr.filter(function (code) { @@ -6089,7 +6118,7 @@ var EventMachin = function () { }, { key: 'checkEventType', value: function checkEventType(e, eventObject) { - var _this3 = this; + var _this4 = this; var onlyControl = e.ctrlKey ? eventObject.isControl : true; var onlyShift = e.shiftKey ? eventObject.isShift : true; @@ -6105,7 +6134,7 @@ var EventMachin = function () { if (eventObject.checkMethodList.length) { // 체크 메소드들은 모든 메소드를 다 적용해야한다. isAllCheck = eventObject.checkMethodList.every(function (method) { - return _this3[method].call(_this3, e); + return _this4[method].call(_this4, e); }); } @@ -6114,13 +6143,13 @@ var EventMachin = function () { }, { key: 'makeCallback', value: function makeCallback(eventObject, callback) { - var _this4 = this; + var _this5 = this; if (eventObject.delegate) { return function (e) { - if (_this4.checkEventType(e, eventObject)) { - var delegateTarget = _this4.matchPath(e.target || e.srcElement, eventObject.delegate); + if (_this5.checkEventType(e, eventObject)) { + var delegateTarget = _this5.matchPath(e.target || e.srcElement, eventObject.delegate); if (delegateTarget) { // delegate target 이 있는 경우만 callback 실행 @@ -6132,7 +6161,7 @@ var EventMachin = function () { }; } else { return function (e) { - if (_this4.checkEventType(e, eventObject)) { + if (_this5.checkEventType(e, eventObject)) { return callback(e); } }; @@ -6148,10 +6177,10 @@ var EventMachin = function () { }, { key: 'removeEventAll', value: function removeEventAll() { - var _this5 = this; + var _this6 = this; this.getBindings().forEach(function (obj) { - _this5.removeEvent(obj); + _this6.removeEvent(obj); }); this.initBindings(); } @@ -6649,9 +6678,13 @@ var ColorControl = function (_EventMachin) { } createClass(ColorControl, [{ + key: 'template', + value: function template() { + return '\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '; + } + }, { key: 'initialize', value: function initialize() { - this.template('\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '); this.drag_bar_pos = {}; this.opacity_drag_bar_pos = {}; @@ -6825,6 +6858,19 @@ var ColorControl = function (_EventMachin) { value: function setOnlyHueColor() { this.setHueColor(null, true); } + + // Event Bindings + + }, { + key: 'mouseup document', + value: function mouseupDocument(e) { + this.EventDocumentMouseUp(e); + } + }, { + key: 'mousemove document', + value: function mousemoveDocument(e) { + this.EventDocumentMouseMove(e); + } }, { key: 'mousedown $drag_bar', value: function mousedown$drag_bar(e) { @@ -6868,11 +6914,14 @@ var ColorInformation = function (_EventMachin) { } createClass(ColorInformation, [{ + key: 'template', + value: function template() { + return '\n
\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
H
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '; + } + }, { key: 'initialize', value: function initialize() { - this.template('\n
\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
H
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '); - this.format = 'hex'; } }, { @@ -7130,11 +7179,13 @@ var ColorPallet = function (_EventMachin) { } createClass(ColorPallet, [{ - key: 'initialize', - value: function initialize() { - - this.template('\n
\n
\n
\n
\n
\n
\n
\n '); + key: 'template', + value: function template() { + return '\n
\n
\n
\n
\n
\n
\n
\n '; } + }, { + key: 'initialize', + value: function initialize() {} }, { key: 'setBackgroundColor', value: function setBackgroundColor(color) { @@ -7208,6 +7259,16 @@ var ColorPallet = function (_EventMachin) { this.setMainColor(e); } } + }, { + key: 'mouseup document', + value: function mouseupDocument(e) { + this.EventDocumentMouseUp(e); + } + }, { + key: 'mousemove document', + value: function mousemoveDocument(e) { + this.EventDocumentMouseMove(e); + } }, { key: 'mousedown', value: function mousedown(e) { @@ -7240,61 +7301,33 @@ var ColorSetsChooser = function (_EventMachin) { } createClass(ColorSetsChooser, [{ + key: 'template', + value: function template() { + return '\n
\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n
\n '; + } + }, { key: 'initialize', value: function initialize() { - this.template('\n
\n
\n
\n

Color Paletts

\n ×\n
\n
\n
\n
\n '); - - this.refresh(); + this.load(); } - }, { - key: 'refresh', - value: function refresh() { - this.refs.$colorsetsList.html(this.makeColorSetsList()); - } - }, { - key: 'makeColorItemList', - value: function makeColorItemList(colors) { - var maxCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5; - - - var $list = new Dom('div'); - - for (var i = 0; i < maxCount; i++) { - var color = colors[i] || 'rgba(255, 255, 255, 1)'; - var $item = $list.createChild('div', 'color-item', { - title: color - }); - $item.createChild('div', 'color-view', null, { - 'background-color': color - }); - } + // loadable - return $list; - } }, { - key: 'makeColorSetsList', - value: function makeColorSetsList() { - var _this2 = this; - - var $div = new Dom('div'); - + key: 'load $colorsetsList', + value: function load$colorsetsList() { // colorsets var colorSets = this.colorpicker.getColorSetsList(); - colorSets.forEach(function (element, index) { - if (_this2.colorpicker.isPaletteType() && element.edit) { - // NOOP - } else { - var $item = $div.createChild('div', 'colorsets-item', defineProperty({}, DATA_COLORSETS_INDEX, index)); - - $item.createChild('h1', 'title').html(element.name); - $item.createChild('div', 'items').append(_this2.makeColorItemList(element.colors, 5)); - } - }); - - return $div; + return '\n
\n ' + colorSets.map(function (element, index) { + return '\n
\n

' + element.name + '

\n
\n
\n ' + element.colors.filter(function (color, i) { + return i < 5; + }).map(function (color) { + color = color || 'rgba(255, 255, 255, 1)'; + return '
\n
\n
'; + }).join('') + '\n
\n
\n
'; + }).join('') + '\n
\n '; } }, { key: 'show', @@ -7356,49 +7389,29 @@ var CurrentColorSets = function (_EventMachin) { } createClass(CurrentColorSets, [{ - key: 'makeCurrentColorSets', - value: function makeCurrentColorSets() { - var list = new Dom('div', 'current-color-sets'); + key: 'template', + value: function template() { + return '\n
\n
\n \n
\n
\n
\n '; + } + }, { + key: 'load $colorSetsColorList', + value: function load$colorSetsColorList() { var currentColorSets = this.colorSetsList.getCurrentColorSets(); var colors = this.colorSetsList.getCurrentColors(); - for (var i = 0, len = colors.length; i < len; i++) { - var color = colors[i]; - var item = list.createChild('div', 'color-item', { - 'title': color, - 'data-index': i, - 'data-color': color - }); - - item.createChild('div', 'empty'); - item.createChild('div', 'color-view', null, { - 'background-color': color - }); - } - - if (currentColorSets.edit) { - list.createChild('div', 'add-color-item').html('+'); - } - - return list; + return '\n
\n ' + colors.map(function (color, i) { + return '
\n
\n
\n
'; + }).join('') + ' \n ' + (currentColorSets.edit ? '
+
' : '') + ' \n
\n '; } }, { key: 'initialize', value: function initialize() { - - this.template('\n
\n
\n \n
\n
\n
\n '); - - this.refresh(); - } - }, { - key: 'refresh', - value: function refresh() { - this.refs.$colorSetsColorList.html(this.makeCurrentColorSets()); + this.load(); } }, { key: 'refreshAll', value: function refreshAll() { - this.refresh(); + this.load(); this.colorpicker.refreshColorSetsChooser(); } }, { @@ -7485,11 +7498,13 @@ var CurrentColorSetsContextMenu = function (_EventMachin) { } createClass(CurrentColorSetsContextMenu, [{ - key: 'initialize', - value: function initialize() { - - this.template('\n \n '); + key: 'template', + value: function template() { + return '\n \n '; } + }, { + key: 'initialize', + value: function initialize() {} }, { key: 'show', value: function show(e, index) { @@ -7897,28 +7912,6 @@ var ColorPicker$1 = function (_BaseColorPicker) { value: function setHueColor() { this.control.setOnlyHueColor(); } - - // Event Bindings - - }, { - key: 'mouseup document', - value: function mouseupDocument(e) { - this.palette.EventDocumentMouseUp(e); - this.control.EventDocumentMouseUp(e); - - // when color picker clicked in outside - if (this.checkInHtml(e.target)) { - //this.setHideDelay(hideDelay); - } else if (this.checkColorPickerClass(e.target) == false) { - this.hide(); - } - } - }, { - key: 'mousemove document', - value: function mousemoveDocument(e) { - this.palette.EventDocumentMouseMove(e); - this.control.EventDocumentMouseMove(e); - } }, { key: 'initializeEvent', value: function initializeEvent() { @@ -7945,7 +7938,7 @@ var ColorPicker$1 = function (_BaseColorPicker) { }, { key: 'refreshColorSetsChooser', value: function refreshColorSetsChooser() { - this.colorSetsChooser.refresh(); + this.colorSetsChooser.load(); } }, { key: 'getColorSetsList', @@ -7956,7 +7949,7 @@ var ColorPicker$1 = function (_BaseColorPicker) { key: 'setCurrentColorSets', value: function setCurrentColorSets(nameOrIndex) { this.colorSetsList.setCurrentColorSets(nameOrIndex); - this.currentColorSets.refresh(); + this.currentColorSets.load(); } }, { key: 'setColorSets', @@ -7976,6 +7969,20 @@ var ColorPicker$1 = function (_BaseColorPicker) { this.currentColorSets.destroy(); this.contextMenu.destroy(); } + + // Event Bindings + + }, { + key: 'mouseup document', + value: function mouseupDocument(e) { + + // when color picker clicked in outside + if (this.checkInHtml(e.target)) { + //this.setHideDelay(hideDelay); + } else if (this.checkColorPickerClass(e.target) == false) { + this.hide(); + } + } }]); return ColorPicker; }(BaseColorPicker); diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js index b21bf90..fecf1ec 100644 --- a/dist/codemirror-colorpicker.min.js +++ b/dist/codemirror-colorpicker.min.js @@ -1 +1 @@ -var CodeMirrorColorPicker=function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)"};var r={isColorName:function(t){return!!e[t]},getColorByName:function(t){return e[t]}};function n(t,e){if(t.length!==e.length)return!1;for(var r=0,n=t.length;r0)h=l(u);else h=e[Math.floor(a()*e.length)];o=!n(h,c),i[s]=h}return o}function c(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:10,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"linear";t=t,e=e||Math.max(2,Math.ceil(Math.sqrt(t.length/2)));var l=r||"euclidean";"string"==typeof l&&(l=i[l]);for(var c=0,h=function(){return(c=(9301*c+49297)%233280)/233280},f=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"linear";return o[r](t.length,e).map(function(e){return t[e]})}(t,e,a),v=!0,g=0;v;){if(v=u(e,t,s(e,t,f,l),f,!1,h),++g%n==0)break}return f}var h={create:function(t,e){var r=document.createElement("canvas");return r.width=t||0,r.height=e||0,r},drawPixels:function(t){var e=this.create(t.width,t.height),r=e.getContext("2d"),n=r.getImageData(0,0,e.width,e.height);return n.data.set(t.pixels),r.putImageData(n,0,0),e},createHistogram:function(t,e,r,n){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{black:!0,red:!1,green:!1,blue:!1},o=this.create(t,e),a=o.getContext("2d");a.clearRect(0,0,t,e),a.fillStyle="white",a.fillRect(0,0,t,e),a.globalAlpha=.7;var l={black:!1};i.black?l.black=!1:l.black=!0,i.red?l.red=!1:l.red=!0,i.green?l.green=!1:l.green=!0,i.blue?l.blue=!1:l.blue=!0,Object.keys(r).forEach(function(n){if(!l[n]){var i=r[n],o=Math.max.apply(Math,i),s=t/i.length;a.fillStyle=n,i.forEach(function(t,r){var n=e*(t/o),i=r*s;a.fillRect(i,e-n,s,n)})}}),"function"==typeof n&&n(o)},getHistogram:function(t){for(var e,r,n=new Array(256),i=new Array(256),o=new Array(256),a=new Array(256),l=0;l<256;l++)n[l]=0,i[l]=0,o[l]=0,a[l]=0;return r=function(t,e){var r=Math.round(qt.brightness(t[e],t[e+1],t[e+2]));n[r]++,i[t[e]]++,o[t[e+1]]++,a[t[e+2]]++},function(t,e){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:{};v(this,t),this.isLoaded=!1,this.imageUrl=e,this.opt=r,this.initialize()}return g(t,[{key:"initialize",value:function(){this.canvas=this.createCanvas(),this.context=this.canvas.getContext("2d")}},{key:"createCanvas",value:function(){return document.createElement("canvas")}},{key:"load",value:function(t){this.loadImage(t)}},{key:"loadImage",value:function(t){var e=this,r=this.context;this.newImage=new Image;var n=this.newImage;n.onload=function(){var i=n.height/n.width;e.opt.canvasWidth&&e.opt.canvasHeight?(e.canvas.width=e.opt.canvasWidth,e.canvas.height=e.opt.canvasHeight):(e.canvas.width=e.opt.maxWidth?e.opt.maxWidth:n.width,e.canvas.height=e.canvas.width*i),r.drawImage(n,0,0,n.width,n.height,0,0,e.canvas.width,e.canvas.height),e.isLoaded=!0,t&&t()},this.getImageUrl(function(t){n.src=t})}},{key:"load",value:function(t){var e=this;this.newImage=new Image;var r=this.newImage;r.onload=function(){e.isLoaded=!0,t&&t()},this.getImageUrl(function(t){r.src=t})}},{key:"getImageUrl",value:function(t){if("string"==typeof this.imageUrl)return t(this.imageUrl);if(this.imageUrl instanceof Blob){var e=new FileReader;e.onload=function(e){t(e.target.result)},e.readAsDataURL(this.imageUrl)}}},{key:"getRGBA",value:function(t,e,r,n){return[t,e,r,n]}},{key:"toArray",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=this.context.getImageData(0,0,this.canvas.width,this.canvas.height),i=n.width,o=n.height,a=new Uint8ClampedArray(n.data);t||(t=function(t,e){e(t)}),t({pixels:a,width:i,height:o},function(t){var n=h.drawPixels(t);"canvas"==r.returnTo?e(n):e(n.toDataURL(r.outputFormat||"image/png"))},r)}},{key:"toHistogram",value:function(t){var e=this.context.getImageData(0,0,this.canvas.width,this.canvas.height),r=e.width,n=e.height,i={pixels:new Uint8ClampedArray(e.data),width:r,height:n};return h.getHistogram(i)}},{key:"toRGB",value:function(){for(var t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height).data,e=[],r=0,n=t.length;r0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return[t=t||0===t?t:1,0,0,0,e=e||0===e?e:1,0,0,0,1]},scaleX:function(t){return this.scale(t)},scaleY:function(t){return this.scale(1,t)},translate:function(t,e){return[1,0,t,0,1,e,0,0,1]},rotate:function(t){var e=this.radian(t);return[Math.cos(e),-Math.sin(e),0,Math.sin(e),Math.cos(e),0,0,0,1]},rotate90:function(){return[0,-1,0,1,0,0,0,0,1]},rotate180:function(){return[-1,0,0,0,-1,0,0,0,1]},rotate270:function(){return[0,1,0,-1,0,0,0,0,1]},radian:function(t){return t*Math.PI/180},skew:function(t,e){var r=this.radian(t),n=this.radian(e);return[1,Math.tan(r),0,Math.tan(n),1,0,0,0,1]},skewX:function(t){var e=this.radian(t);return[1,Math.tan(e),0,0,1,0,0,0,1]},skewY:function(t){var e=this.radian(t);return[1,0,0,Math.tan(e),1,0,0,0,1]},shear1:function(t){return[1,-Math.tan(this.radian(t)/2),0,0,1,0,0,0,1]},shear2:function(t){return[1,0,0,Math.sin(this.radian(t)),1,0,0,0,1]}},_={CONSTANT:x,radian:function(t){return x.radian(t)},multiply:function(t,e){return[t[0]*e[0]+t[1]*e[1]+t[2]*e[2],t[3]*e[0]+t[4]*e[1]+t[5]*e[2],t[6]*e[0]+t[7]*e[1]+t[8]*e[2]]},identity:function(t){return this.multiply(x.identity(),t)},translate:function(t,e,r){return this.multiply(x.translate(t,e),r)},rotate:function(t,e){return this.multiply(x.rotate(t),e)},shear1:function(t,e){return this.multiply(x.shear1(t),e)},shear2:function(t,e){return this.multiply(x.shear2(t),e)},rotateShear:function(t,e){var r=e;return r=this.shear1(t,r),r=this.shear2(t,r),r=this.shear1(t,r)}};function w(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"center";return function(n,i){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=Q(n.pixels.length,n.width,n.height),l=n.width,s=n.height;"center"==e&&(e=Math.floor(l/2)),"center"==r&&(r=Math.floor(s/2));var u=_.CONSTANT.translate(-e,-r),c=_.CONSTANT.translate(e,r),h=_.CONSTANT.shear1(t),f=_.CONSTANT.shear2(t);st(function(t,e,r,i){var o=_.multiply(u,[r,i,1]);o=_.multiply(h,o).map(Math.round),o=_.multiply(f,o).map(Math.round),o=_.multiply(h,o).map(Math.round),o=_.multiply(c,o);var a=k(o,2),v=a[0],g=a[1];v<0||(g<0||v>l-1||g>s-1||ht(t,g*l+v<<2,n.pixels,e))})(a,function(){i(a)},o)}}function S(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:200,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=rt(t),i=(e=rt(e))/100,o=r;return ot(function(){var t=i*Math.ceil(.2126*$r+.7152*$g+.0722*$b)>=n?255:0;if(o)0==t&&($r=0,$g=0,$b=0);else{var e=Math.round(t);$r=e,$g=e,$b=e}},{$C:i,$scale:n,$hasColor:o})}function E(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([1,2,1,2,4,2,1,2,1],1/16*((t=rt(t))/100)))}function A(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([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*((t=rt(t))/100)))}function R(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return t=rt(t),ft([5,5,5,-3,0,-3,-3,-3,-3])}function T(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return t=rt(t),ft([5,-3,-3,5,0,-3,5,-3,-3])}function M(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([-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],(t=rt(t))/100))}function B(){return ft(q([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))}function H(){return ft(q([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))}function I(){return ft(q([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))}function F(){return ft([-1,-2,-1,0,0,0,1,2,1])}function O(){return ft([-1,0,1,-2,0,2,-1,0,1])}var L=[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],P=[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];function G(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function D(t,e,r){return r?function(t,e,r,n){if(isNaN(n)||n<1)return t;n|=0;var i,o,a,l,s,u,c,h,f,v,g,d,p,m,b,y,k,C,$,x,_,w,S,E,A=t.pixels,R=t.width,T=t.height,M=n+n+1,B=R-1,H=T-1,I=n+1,F=I*(I+1)/2,O=new G,D=O;for(a=1;a>U,0!=S?(S=255/S,A[u]=(h*V>>U)*S,A[u+1]=(f*V>>U)*S,A[u+2]=(v*V>>U)*S):A[u]=A[u+1]=A[u+2]=0,h-=d,f-=p,v-=m,g-=b,d-=j.r,p-=j.g,m-=j.b,b-=j.a,l=c+((l=i+n+1)>U,S>0?(S=255/S,A[l]=(h*V>>U)*S,A[l+1]=(f*V>>U)*S,A[l+2]=(v*V>>U)*S):A[l]=A[l+1]=A[l+2]=0,h-=d,f-=p,v-=m,g-=b,d-=j.r,p-=j.g,m-=j.b,b-=j.a,l=i+((l=o+I)0&&void 0!==arguments[0]?arguments[0]:10,e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return t=rt(t),function(r,n){n(D(r,t,e))}}function j(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:256;return ft(q([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/(t=rt(t))))}var z,V=p({},{crop:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments[2],n=arguments[3],i=Q(r*n*4,r,n);return function(o,a){for(var l=e,s=0;l0&&void 0!==arguments[0]?arguments[0]:0;return t=rt(t),t%=360,function(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(0==t)return e;if(90==t||270==t)var i=Q(e.pixels.length,e.height,e.width);else{if(180!=t)return w(t)(e,r,n);i=Q(e.pixels.length,e.width,e.height)}st(function(r,n,o,a){if(90==t)var l=o*i.width+(i.width-1-a)<<2;else 270==t?l=(i.height-1-o)*i.width+a<<2:180==t&&(l=(i.height-1-a)*i.width+(i.width-1-o)<<2);ht(i.pixels,l,e.pixels,n)})(e,function(){r(i)},n)}},rotateDegree:w,histogram:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"gray",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=[],n=0;n2&&void 0!==arguments[2]?arguments[2]:100,n=qt.parse(t),i=qt.parse(e),o=r;return ot(function(){var t=$r+$g+$b<=o?n:i;$r=t.r,$g=t.g,$b=t.b},{$threshold:o},{$darkColor:n,$lightColor:i})},brightness:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t=rt(t);var e=Math.floor(t/100*255);return ot(function(){$r+=e,$g+=e,$b+=e},{$C:e})},brownie:function(){var t=[.5997023498159715,.34553243048391263,-.2708298674538042,0,-.037703249837783157,.8609577587992641,.15059552388459913,0,.24113635128153335,-.07441037908422492,.44972182064877153,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},clip:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;t=rt(t);var e=2.55*Math.abs(t);return ot(function(){$r=$r>255-e?255:0,$g=$g>255-e?255:0,$b=$b>255-e?255:0},{$C:e})},contrast:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;t=rt(t);var e=Math.max((128+t)/128,0);return ot(function(){$r*=e,$g*=e,$b*=e},{$C:e})},gamma:function(){var t=rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);return ot(function(){$r=255*Math.pow($r/255,t),$g=255*Math.pow($g/255,t),$b=255*Math.pow($b/255,t)},{$C:t})},gradient:function(){var t=[].concat(Array.prototype.slice.call(arguments));1===t.length&&"string"==typeof t[0]&&(t=qt.convertMatchesArray(t[0]));var e=(t=t.map(function(t){return qt.matches(t).length?{type:"param",value:t}:{type:"scale",value:t}})).filter(function(t){return"scale"==t.type})[0];e=e?+e.value:256,t=t.filter(function(t){return"param"==t.type}).map(function(t){return t.value}).join(",");var r=qt.gradient(t,e).map(function(t){var e=qt.parse(t);return{r:e.r,g:e.g,b:e.b,a:e.a}});return ot(function(){var t=dt(Math.ceil(.2126*$r+.7152*$g+.0722*$b)),n=dt(Math.floor(t*(e/256))),i=r[n];$r=i.r,$g=i.g,$b=i.b,$a=dt(Math.floor(256*i.a))},{},{$colors:r,$scale:e})},grayscale:function(t){var e=(t=rt(t))/100;e>1&&(e=1);var r=[.2126+.7874*(1-e),.7152-.7152*(1-e),.0722-.0722*(1-e),0,.2126-.2126*(1-e),.7152+.2848*(1-e),.0722-.0722*(1-e),0,.2126-.2126*(1-e),.7152-.7152*(1-e),.0722+.9278*(1-e),0,0,0,0,1];return ot(function(){$r=r[0]*$r+r[1]*$g+r[2]*$b+r[3]*$a,$g=r[4]*$r+r[5]*$g+r[6]*$b+r[7]*$a,$b=r[8]*$r+r[9]*$g+r[10]*$b+r[11]*$a,$a=r[12]*$r+r[13]*$g+r[14]*$b+r[15]*$a},{$matrix:r})},hue:function(){return ot(function(){var t=Color.RGBtoHSV($r,$g,$b),e=t.h;e+=Math.abs($amount),e%=360,t.h=e;var r=Color.HSVtoRGB(t);$r=r.r,$g=r.g,$b=r.b},{$C:rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:360)})},invert:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,e=(t=rt(t))/100;return ot(function(){$r=(255-$r)*e,$g=(255-$g)*e,$b=(255-$b)*e},{$C:e})},kodachrome:function(){var t=[1.1285582396593525,-.3967382283601348,-.03992559172921793,0,-.16404339962244616,1.0835251566291304,-.05498805115633132,0,-.16786010706155763,-.5603416277695248,1.6014850761964943,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},matrix:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:0,s=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,u=arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,c=arguments.length>10&&void 0!==arguments[10]?arguments[10]:0,h=arguments.length>11&&void 0!==arguments[11]?arguments[11]:0,f=arguments.length>12&&void 0!==arguments[12]?arguments[12]:0,v=arguments.length>13&&void 0!==arguments[13]?arguments[13]:0,g=arguments.length>14&&void 0!==arguments[14]?arguments[14]:0,d=arguments.length>15&&void 0!==arguments[15]?arguments[15]:0,p=[t,e,r,n,i,o,a,l,s,u,c,h,f,v,g,d];return ot(function(){$r=p[0]*$r+p[1]*a+p[2]*e+p[3]*t,a=p[4]*$r+p[5]*a+p[6]*e+p[7]*t,e=p[8]*$r+p[9]*a+p[10]*e+p[11]*t,t=p[12]*$r+p[13]*a+p[14]*e+p[15]*t},{$matrix:p})},noise:function(){var t=rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);return ot(function(){var e=5*Math.abs(t),r=-e,n=e,i=Math.round(r+Math.random()*(n-r));$r+=i,$g+=i,$b+=i},{$C:t})},opacity:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,e=(t=rt(t))/100;return ot(function(){$a*=e},{$C:e})},polaroid:function(){var t=[1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},saturation:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,e=(t=rt(t))/100,r=1-Math.abs(e),n=[r,0,0,0,0,r,0,0,0,0,r,0,0,0,0,r];return ot(function(){$r=n[0]*$r+n[1]*$g+n[2]*$b+n[3]*$a,$g=n[4]*$r+n[5]*$g+n[6]*$b+n[7]*$a,$b=n[8]*$r+n[9]*$g+n[10]*$b+n[11]*$a,$a=n[12]*$r+n[13]*$g+n[14]*$b+n[15]*$a},{$matrix:n})},sepia:function(){var t=rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);t>1&&(t=1);var e=[.393+.607*(1-t),.769-.769*(1-t),.189-.189*(1-t),0,.349-.349*(1-t),.686+.314*(1-t),.168-.168*(1-t),0,.272-.272*(1-t),.534-.534*(1-t),.131+.869*(1-t),0,0,0,0,1];return ot(function(){$r=e[0]*$r+e[1]*$g+e[2]*$b+e[3]*$a,$g=e[4]*$r+e[5]*$g+e[6]*$b+e[7]*$a,$b=e[8]*$r+e[9]*$g+e[10]*$b+e[11]*$a,$a=e[12]*$r+e[13]*$g+e[14]*$b+e[15]*$a},{$matrix:e})},shade:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=rt(t),i=rt(e),o=rt(r);return ot(function(){$r*=n,$g*=i,$b*=o},{$redValue:n,$greenValue:i,$blueValue:o})},shift:function(){var t=[1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},solarize:function(t,e,r){var n=rt(t),i=rt(e),o=rt(r);return ot(function(){$r=$r0&&void 0!==arguments[0]?arguments[0]:200,arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,!1)},"threshold-color":S,tint:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=parseParamNumber(t),i=parseParamNumber(e),o=parseParamNumber(r);return ot(function(){$r+=(255-$r)*n,$g+=(255-$g)*i,$b+=(255-$b)*o},{$redTint:n,$greenTint:i,$blueTint:o})}},{blur:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:3;return ft(ut(t=rt(t)))},emboss:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:4;return ft([-2*(t=rt(t)),-t,0,-t,1,t,0,t,2*t])},gaussianBlur:E,"gaussian-blur":E,gaussianBlur5x:A,"gaussian-blur-5x":A,grayscale2:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([.3,.3,.3,0,0,.59,.59,.59,0,0,.11,.11,.11,0,0,0,0,0,0,0,0,0,0,0,0],(t=rt(t))/100))},normal:function(){return ft([0,0,0,0,1,0,0,0,0])},kirschHorizontal:R,"kirsch-horizontal":R,kirschVertical:T,"kirsch-vertical":T,laplacian:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([-1,-1,-1,-1,8,-1,-1,-1,-1],(t=rt(t))/100))},laplacian5x:M,"laplacian-5x":M,motionBlur:B,"motion-blur":B,motionBlur2:H,"motion-blur-2":H,motionBlur3:I,"motion-blur-3":I,negative:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([-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],(t=rt(t))/100))},sepia2:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([.393,.349,.272,0,0,.769,.686,.534,0,0,.189,.168,.131,0,0,0,0,0,0,0,0,0,0,0,0],(t=rt(t))/100))},sharpen:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([0,-1,0,-1,5,-1,0,-1,0],(t=rt(t))/100))},sobelHorizontal:F,"sobel-horizontal":F,sobelVertical:O,"sobel-vertical":O,stackBlur:N,"stack-blur":N,transparency:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,.3,0,0,0,0,0,1],(t=rt(t))/100))},unsharpMasking:j,"unsharp-masking":j},{kirsch:function(){return pt("kirsch-horizontal kirsch-vertical")},sobel:function(){return pt("sobel-horizontal sobel-vertical")},vintage:function(){return pt("brightness(15) saturation(-20) gamma(1.8)")}}),U=0,X=(d(z={partial:kt,multi:bt,merge:yt,weight:q,repeat:Y,colorMatrix:function(t,e,r){var n=t[e],i=t[e+1],o=t[e+2],a=t[e+3];ct(t,e,r[0]*n+r[1]*i+r[2]*o+r[3]*a,r[4]*n+r[5]*i+r[6]*o+r[7]*a,r[8]*n+r[9]*i+r[10]*o+r[11]*a,r[12]*n+r[13]*i+r[14]*o+r[15]*a)},each:Z,eachXY:J,createRandomCount:function(){return[9,16,25,36,49,64,81,100].sort(function(t,e){return.5-Math.random()})[0]},createRandRange:function(t,e,r){for(var n=[],i=1;i<=r;i++){var o=Math.random()*(e-t)+t,a=Math.floor(10*Math.random())%2==0?-1:1;n.push(a*o)}n.sort();var l=Math.floor(r>>1),s=n[l];return n[l]=n[0],n[0]=s,n},createBitmap:Q,createBlurMatrix:ut,pack:function(t){return function(e,r){Z(e.pixels.length,function(r,n){t(e.pixels,r,n,e.pixels[r],e.pixels[r+1],e.pixels[r+2],e.pixels[r+3])},function(){r(e)})}},packXY:st,pixel:ot,getBitmap:tt,putBitmap:et,radian:function(t){return _.CONSTANT.radian(t)},convolution:ft,parseParamNumber:rt,filter:pt,clamp:dt,fillColor:ct,fillPixelColor:ht},"multi",bt),d(z,"merge",yt),d(z,"matches",vt),d(z,"parseFilter",gt),d(z,"partial",kt),z),W=X;function q(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return t.map(function(t){return t*e})}function Y(t,e){for(var r=new Array(e),n=0;n1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=arguments[3],i=arguments[4],o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1e4,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"full",l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:50,s=e,u=function(t){setTimeout(t,0)};function c(){for(var e=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:50,e=[].concat(C(Array(t))).map(function(t){return"cri = ri + i * s; if (cri >= mx) return {currentRunIndex: cri, i: null}; c(cri); i++;"}).join("\n");return new Function("ri","i","s","mx","c","\n let cri = ri;\n \n "+e+"\n \n return {currentRunIndex: cri, i: i} \n ")}(l),a=s,h={},f=0;f=t)return void i();u?u(c):c()}(a)}"requestAnimationFrame"==a&&(u=requestAnimationFrame,o=1e3),"full"==a&&(u=null,o=t),c()}function Z(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};K(t,0,4,function(t){e(t,t>>2)},function(){r()},n.functionDumpCount,n.frameTimer,n.loopCount)}function J(t,e,r,n){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};K(t,0,4,function(t){var n=t>>2;r(t,n%e,Math.floor(n/e))},function(){n()},i.functionDumpCount,i.frameTimer,i.loopCount)}function Q(t,e,r){return{pixels:new Uint8ClampedArray(t),width:e,height:r}}function tt(t,e){return h.getBitmap(t,e)}function et(t,e,r){return h.putBitmap(t,e,r)}function rt(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}var nt=/(([\w_\-]+)(\(([^\)]*)\))?)+/gi;function it(t){var e,r,n,i,o,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return e={},r=[{callback:t,context:a,rootContext:l}].map(function(t){var r=[];Object.keys(t.context).forEach(function(t,e){r[t]="n$"+U+++t+"$"}),Object.keys(t.rootContext).forEach(function(n,i){r[n]="r$"+U+++n+"$",e[r[n]]=t.rootContext[n]});var n=Object.keys(t.context).filter(function(e){return"number"!=typeof t.context[e]&&"string"!=typeof t.context[e]&&(!Array.isArray(t.context[e])||"number"!=typeof t.context[e][0]&&"string"!=typeof t.context[e][0])}).map(function(e,n){return[r[e],JSON.stringify(t.context[e])].join(" = ")}),i=t.callback.toString().split("{");return i.shift(),(i=(i=i.join("{")).split("}")).pop(),i=i.join("}"),Object.keys(r).forEach(function(e){var n=r[e];"number"==typeof t.context[e]||"string"==typeof t.context[e]?i=i.replace(new RegExp("\\"+e,"g"),t.context[e]):!Array.isArray(t.context[e])||"number"!=typeof t.context[e][0]&&"string"!=typeof t.context[e][0]?i=i.replace(new RegExp("\\"+e,"g"),n):t.context[e].forEach(function(t,r){i=i.replace(new RegExp("\\"+e+"\\["+r+"\\]","g"),t)})}),{preCallbackString:i,preContext:n}}),n=r.map(function(t,e){return t.preContext.length?"const "+t.preContext+";":""}).join("\n\n"),i=r.map(function(t){return t.preCallbackString}).join("\n\n"),(o=new Function("$pixels","$pixelIndex","$clamp","$Color"," \n let $r = $pixels[$pixelIndex], $g = $pixels[$pixelIndex+1], $b = $pixels[$pixelIndex+2], $a = $pixels[$pixelIndex+3];\n\n "+n+"\n\n "+i+"\n \n $pixels[$pixelIndex] = $r\n $pixels[$pixelIndex+1] = $g \n $pixels[$pixelIndex+2] = $b \n $pixels[$pixelIndex+3] = $a \n ")).$preCallbackString=i,o.$preContext=n,o.rootContextObject=e,o}function ot(t){var e=it(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),r=function(t,e){};return r.userFunction=e,r}var at=[0,1,2,3];function lt(t,e,r){at.forEach(function(n){var i=t[e+n];t[e+n]=t[r+n],t[r+n]=i})}function st(t){return function(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};J(e.pixels.length,e.width,function(r,n,i){t(e.pixels,r,n,i)},function(){r(e)},n)}}function ut(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:3,e=Math.pow(t,2);return Y(1/e,e)}function ct(t,e,r,n,i,o){if(3==arguments.length){var a=arguments[2];r=a.r,n=a.g,i=a.b,o=a.a}"number"==typeof r&&(t[e]=r),"number"==typeof n&&(t[e+1]=n),"number"==typeof i&&(t[e+2]=i),"number"==typeof o&&(t[e+3]=o)}function ht(t,e,r,n){ct(t,e,r[n],r[n+1],r[n+2],r[n+3])}function ft(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=function(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:255;return e=t.map(function(t,e){return[]}),t.forEach(function(t,i){if(0!=t){var o=e[i];for(i=r;i<=n;i++)o[i]=t*i}}),e}(t);return function(n,i){var o=Math.round(Math.sqrt(t.length)),a=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=t.width+e,n=t.height+e;return{pixels:new Uint8ClampedArray(r*n*4),width:r,height:n}}(n,2*o);!function(t,e,r,n){for(var i=e.pixels.length/4,o=0,a=0,l=0,s=0,u=0,c=0,h=0;ht.width||a>t.height||(u=s*e.width+l<<2,c=a*t.width+o<<2,t.pixels[c]=e.pixels[u],t.pixels[c+1]=e.pixels[u+1],t.pixels[c+2]=e.pixels[u+2],t.pixels[c+3]=e.pixels[u+3])}(a,n,o,o);for(var l=Q(a.pixels.length,a.width,a.height),s=Q(n.pixels.length,n.width,n.height),u=function(t,e,r,n,i){var o=Math.round(Math.sqrt(t.length)),a=Math.floor(o/2),l=i?1:0,s="let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ",u=[],c=[],h=[],f=[];t.forEach(function(t,e){var n=Math.floor(e/o)-a,i=e%o-a;0!=t&&(u.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4]]"),c.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4 + 1]]"),h.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4 + 2]]"),f.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4 + 3]]"))}),s+="r = "+u.join(" + ")+"; g = "+c.join(" + ")+"; b = "+h.join(" + ")+"; a = "+f.join(" + ")+";",s+="$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + ("+l+")*(255-a); ";var v=new Function("$dp","$sp","$di","$sx","$sy","$t",s);return function(t,r,n,i,o){v(t,r,n,i,o,e)}}(t,r,a.width,a.height,e),c=n.pixels.length/4,h=0;h>2,o=0,a=0,l=0,s=0,u=0,c=0,h=0;ht.width||a>t.height||(u=a*t.width+o<<2,c=s*e.width+l<<2,e.pixels[c]=t.pixels[u],e.pixels[c+1]=t.pixels[u+1],e.pixels[c+2]=t.pixels[u+2],e.pixels[c+3]=t.pixels[u+3])}(l,s,o,o),i(s)}}function vt(t){var e=qt.convertMatches(t),r=e.str.match(nt),n=[];if(!r)return n;var i={next:0};return n=(n=r.map(function(t){return{filter:t,origin:qt.reverseMatches(t,e.matches)}})).map(function(e){var r=t.indexOf(e.origin,i.next);return e.startIndex=r,e.endIndex=r+e.origin.length,e.arr=gt(e.origin),i.next=e.endIndex,e}).filter(function(t){return!!t.arr.length})}function gt(t){var e=qt.convertMatches(t),r=e.str.match(nt);if(!r[0])return[];var n=r[0].split("("),i=n.shift(),o=[];return n.length&&(o=n.shift().split(")")[0].split(",").map(function(t){return qt.reverseMatches(t,e.matches)})),[i].concat(C(o)).map(qt.trim)}function dt(t){return Math.min(255,t)}function pt(t){return yt(vt(t).map(function(t){return t.arr}))}function mt(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=[],r=[],n=0,i=t.length;n2&&void 0!==arguments[2]?arguments[2]:{},o=t,a=0;function l(){e[a].call(null,o,function(t){o=t,function(){if(++a>=n)return void r(o);l()}()},i)}l()}}function yt(t){return bt.apply(void 0,C(t))}function kt(t){for(var e=null,r=arguments.length,n=Array(r>1?r-1:0),i=1;i2&&void 0!==arguments[2]?arguments[2]:{};e(tt(r,t),function(e){n(et(r,e,t))},i)}}function Ct(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}function $t(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return t.map(function(t){return t*e})}var xt=0;function _t(t){return[].concat(Array.prototype.slice.call(arguments))}function wt(t){return{type:"convolution",length:t.length,content:t}}function St(t,e){return{type:"shader",index:xt,options:e,content:(r=t,n=xt++,"\n if (u_filterIndex == "+n+".0) {\n "+r+"\n }\n ")};var r,n}function Et(t){return"\n \n if (u_kernelSelect == "+t+".0) {\n vec4 colorSum = "+(e=t,r=Math.sqrt(e),n=Math.floor(r/2),[].concat(C(Array(e))).map(function(t,i){var o=Math.floor(i/r)-n;return"texture(u_image, v_texCoord + onePixel * vec2("+(i%r-n)+", "+o+")) * u_kernel"+e+"["+i+"]"}).join(" + \n"))+"; \n\n outColor = vec4((colorSum / u_kernel"+t+"Weight).rgb, 1);\n \n }\n ";var e,r,n}function At(t){return"vec4("+(t=[t.r/255,t.g/255,t.b/255,t.a||0].map(Rt))+")"}function Rt(t){return t==Math.floor(t)?t+".0":t}function Tt(){return wt($t([1,2,1,2,4,2,1,2,1],Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1)*(1/16)))}function Mt(){return wt([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])}function Bt(){return wt([5,5,5,-3,0,-3,-3,-3,-3])}function Ht(){return wt([5,-3,-3,5,0,-3,5,-3,-3])}function It(){return wt([-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])}function Ft(){return wt([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])}function Ot(){return wt([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])}function Lt(){return wt([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])}function Pt(){return wt([-1,-2,-1,0,0,0,1,2,1])}function Gt(){return wt([-1,0,1,-2,0,2,-1,0,1])}function Dt(){return wt($t([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/256))}function Nt(){var t=[arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,arguments.length>7&&void 0!==arguments[7]?arguments[7]:0,arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,arguments.length>10&&void 0!==arguments[10]?arguments[10]:0,arguments.length>11&&void 0!==arguments[11]?arguments[11]:0,arguments.length>12&&void 0!==arguments[12]?arguments[12]:0,arguments.length>13&&void 0!==arguments[13]?arguments[13]:0,arguments.length>14&&void 0!==arguments[14]?arguments[14]:0,arguments.length>15&&void 0!==arguments[15]?arguments[15]:0].map(Rt);return St("\n\n outColor = vec4(\n "+t[0]+" * pixelColor.r + "+t[1]+" * pixelColor.g + "+t[2]+" * pixelColor.b + "+t[3]+" * pixelColor.a,\n "+t[4]+" * pixelColor.r + "+t[5]+" * pixelColor.g + "+t[6]+" * pixelColor.b + "+t[7]+" * pixelColor.a,\n "+t[8]+" * pixelColor.r + "+t[9]+" * pixelColor.g + "+t[10]+" * pixelColor.b + "+t[11]+" * pixelColor.a,\n "+t[12]+" * pixelColor.r + "+t[13]+" * pixelColor.g + "+t[14]+" * pixelColor.b + "+t[15]+" * pixelColor.a\n ); \n ")}function jt(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return St("\n float c = ( (pixelColor.r * 0.2126 + pixelColor.g * 0.7152 + pixelColor.b * 0.0722) ) >= "+(t=Rt(Ct(t)))+" ? 1.0 : 0.0;\n\n outColor = vec4(c, c, c, pixelColor.a);\n ")}var zt=p({},{blur:function(){return wt([1,1,1,1,1,1,1,1,1])},normal:function(){return wt([0,0,0,0,1,0,0,0,0])},emboss:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:4;return wt([-2*(t=Ct(t)),-t,0,-t,1,t,0,t,2*t])},gaussianBlur:Tt,"gaussian-blur":Tt,gaussianBlur5x:Mt,"gaussian-blur-5x":Mt,grayscale2:function(){return wt([.3,.3,.3,0,0,.59,.59,.59,0,0,.11,.11,.11,0,0,0,0,0,0,0,0,0,0,0,0])},kirschHorizontal:Bt,"kirsch-horizontal":Bt,kirschVertical:Ht,"kirsch-vertical":Ht,laplacian:function(){return wt([-1,-1,-1,-1,8,-1,-1,-1,-1])},laplacian5x:It,"laplacian-5x":It,motionBlur:Ft,"motion-blur":Ft,motionBlur2:Ot,"motion-blur-2":Ot,motionBlur3:Lt,"motion-blur-3":Lt,negative:function(){return wt([-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])},sepia2:function(){return wt([.393,.349,.272,0,0,.769,.686,.534,0,0,.189,.168,.131,0,0,0,0,0,0,0,0,0,0,0,0])},sharpen:function(){return wt([0,-1,0,-1,5,-1,0,-1,0])},sobelHorizontal:Pt,"sobel-horizontal":Pt,sobelVertical:Gt,"sobel-vertical":Gt,transparency:function(){return wt([1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,.3,0,0,0,0,0,1])},unsharpMasking:Dt,"unsharp-masking":Dt},{bitonal:function(t,e){var r=Rt(arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5),n=At(qt.parse(t));return St("\n if ((pixelColor.r + pixelColor.g + pixelColor.b) > "+r+") {\n outColor = vec4("+At(qt.parse(e))+".rgb, pixelColor.a);\n } else {\n outColor = vec4("+n+".rgb, pixelColor.a);\n }\n ")},brightness:function(){return St("\n outColor = pixelColor + ("+Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+");\n ")},brownie:function(){return Nt(.5997023498159715,.34553243048391263,-.2708298674538042,0,-.037703249837783157,.8609577587992641,.15059552388459913,0,.24113635128153335,-.07441037908422492,.44972182064877153,0,0,0,0,1)},clip:function(){var t=Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:0));return St("\n outColor = vec4(\n (pixelColor.r > 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.g > 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.b > 1.0 - "+t+") ? 1.0 : 0.0,\n pixelColor.a \n );\n ")},chaos:function(){return St("\n vec2 st = pixelColor.st;\n st *= "+Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:10))+";\n \n vec2 ipos = floor(st); // get the integer coords\n\n vec3 color = vec3(random( ipos ));\n\n outColor = vec4(color, pixelColor.a);\n ")},contrast:function(){return St("\n outColor = pixelColor * "+Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+";\n ")},gamma:function(){var t=Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1));return St("\n outColor = vec4(pow(pixelColor.r, "+t+"), pow(pixelColor.g, "+t+"), pow(pixelColor.b, "+t+"), pixelColor.a );\n ")},gradient:function(){var t=[].concat(Array.prototype.slice.call(arguments));1===t.length&&"string"==typeof t[0]&&(t=qt.convertMatchesArray(t[0])),t=t.map(function(t){return t}).join(", ");var e=qt.parseGradient(t);e[0][1]=0,e[e.length-1][1]=1;for(var r=[],n=0,i=(e=e.map(function(t){var e=qt.parse(t[0]);return[{r:e.r,g:e.g,b:e.b,a:e.a},t[1]]})).length;n0&&void 0!==arguments[0]?arguments[0]:1);return t>1&&(t=1),Nt(.2126+.7874*(1-t),.7152-.7152*(1-t),.0722-.0722*(1-t),0,.2126-.2126*(1-t),.7152+.2848*(1-t),.0722-.0722*(1-t),0,.2126-.2126*(1-t),.7152-.7152*(1-t),.0722+.9278*(1-t),0,0,0,0,1)},hue:function(){return St("\n vec3 hsv = rgb2hsv(pixelColor.rgb);\n hsv.x += "+Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+";\n outColor = vec4(hsv2rgb(hsv).rgb, pixelColor.a);\n ")},invert:function(){var t=Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1));return St("\n outColor = vec4(\n (1.0 - pixelColor.r) * "+t+",\n (1.0 - pixelColor.g) * "+t+",\n (1.0 - pixelColor.b) * "+t+",\n pixelColor.a\n );\n ")},kodachrome:function(){return Nt(1.1285582396593525,-.3967382283601348,-.03992559172921793,0,-.16404339962244616,1.0835251566291304,-.05498805115633132,0,-.16786010706155763,-.5603416277695248,1.6014850761964943,0,0,0,0,1)},matrix:Nt,noise:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=Math.abs(Ct(t)),r=Rt(-e);return St("\n float rnd = "+r+" + random( pixelColor.st ) * ("+Rt(e)+" - "+r+");\n\n outColor = vec4(pixelColor.rgb + rnd, 1.0);\n ")},opacity:function(){return St("\n outColor = vec4(pixelColor.rgb, pixelColor.a * "+Rt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+");\n ")},polaroid:function(){return Nt(1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1)},saturation:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=1-Math.abs(Ct(t));return Nt(e,0,0,0,0,e,0,0,0,0,e,0,0,0,0,e)},sepia:function(){var t=Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);return t>1&&(t=1),Nt(.393+.607*(1-t),.769-.769*(1-t),.189-.189*(1-t),0,.349-.349*(1-t),.686+.314*(1-t),.168-.168*(1-t),0,.272-.272*(1-t),.534-.534*(1-t),.131+.869*(1-t),0,0,0,0,1)},shade:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return St("\n outColor = vec4(\n pixelColor.r * "+Rt(Ct(t)/255)+",\n pixelColor.g * "+Rt(Ct(e)/255)+",\n pixelColor.b * "+Rt(Ct(r)/255)+",\n pixelColor.a\n );\n ")},shift:function(){return Nt(1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1)},solarize:function(t,e,r){return St("\n outColor = vec4(\n (pixelColor.r < "+Rt(Ct(t))+") ? 1.0 - pixelColor.r: pixelColor.r,\n (pixelColor.g < "+Rt(Ct(e))+") ? 1.0 - pixelColor.g: pixelColor.g,\n (pixelColor.b < "+Rt(Ct(r))+") ? 1.0 - pixelColor.b: pixelColor.b,\n pixelColor.a\n );\n ")},technicolor:function(){return Nt(1.9125277891456083,-.8545344976951645,-.09155508482755585,0,-.3087833385928097,1.7658908555458428,-.10601743074722245,0,-.231103377548616,-.7501899197440212,1.847597816108189,0,0,0,0,1)},threshold:function(){return jt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:200,arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,!1)},"threshold-color":jt,tint:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return St("\n outColor = vec4(\n pixelColor.r += (1 - pixelColor.r) * "+Ct(t)+",\n pixelColor.g += (1 - pixelColor.g) * "+Ct(e)+",\n pixelColor.b += (1 - pixelColor.b) * "+Ct(r)+",\n pixelColor.a\n );\n ")}},{kirsch:function(){return _t("kirsch-horizontal kirsch-vertical")},sobel:function(){return _t("sobel-horizontal sobel-vertical")},vintage:function(){return _t("brightness(0.15) saturation(-0.2) gamma(1.8)")}}),Vt=0,Ut={GLCanvas:function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{width:"400px",height:"300px"};v(this,t),this.img=e.img,this.width=parseFloat(this.img.width||e.width||"400px"),this.height=parseFloat(this.img.height||e.height||"300px"),this.init()}return g(t,[{key:"resize",value:function(){this.canvas.width=this.width,this.canvas.height=this.height,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px",this.viewport()}},{key:"clear",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=this.gl;i.clearColor(t,e,r,n),i.clear(i.COLOR_BUFFER_BIT|i.DEPTH_BUFFER_BIT)}},{key:"viewport",value:function(t,e,r,n){var i=this.gl;i.viewport(t||0,e||0,r||i.canvas.width,n||i.canvas.height)}},{key:"initCanvas",value:function(t,e){if(this.canvas=document.createElement("canvas"),this.gl=this.canvas.getContext("webgl2"),!this.gl)throw new Error("you need webgl2 support");this.program=this.createProgram(t,e),this.resize(),this.initBuffer()}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"TRIANGLES",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:6,n=this.gl;n.drawArrays(n[t],e,r)}},{key:"triangles",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6;this.draw("TRIANGLES",t,e)}},{key:"uniform2f",value:function(){for(var t,e=arguments.length,r=Array(e),n=0;n2&&void 0!==arguments[2]?arguments[2]:"STATIC_DRAW",n=this.gl;this.buffers[t]||(this.buffers[t]=n.createBuffer()),n.bindBuffer(n.ARRAY_BUFFER,this.buffers[t]),e&&n.bufferData(n.ARRAY_BUFFER,new Float32Array(e),n[r])}},{key:"enable",value:function(t){this.gl.enableVertexAttribArray(this.locations[t])}},{key:"location",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"attribute";"attribute"===e?this.locations[t]=this.gl.getAttribLocation(this.program,t):"uniform"===e&&(this.locations[t]=this.gl.getUniformLocation(this.program,t))}},{key:"a",value:function(t){return this.location(t)}},{key:"u",value:function(t){return this.location(t,"uniform")}},{key:"pointer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"FLOAT",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=this.gl;a.vertexAttribPointer(this.locations[t],r,a[e],n,i,o)}},{key:"bufferData",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=this.gl;e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW)}},{key:"isPowerOf2",value:function(t){return 0==(t&t-1)}},{key:"bindTexture",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"RGBA",i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"RGBA",o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"UNSIGNED_BYTE",a=this.gl;1!=arguments.length?(this.textures[t]||(this.textures[t]=a.createTexture()),this.textureIndex[t]=Vt++,a.bindTexture(a.TEXTURE_2D,this.textures[t]),this.setTextureParameter(),a.texImage2D(a.TEXTURE_2D,r,a[n],a[i],a[o],e.newImage||e)):a.bindTexture(a.TEXTURE_2D,this.textures[t])}},{key:"bindColorTexture",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:256,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"RGBA",a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"RGBA",l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:"UNSIGNED_BYTE",s=this.gl;this.textures[t]||(this.textures[t]=s.createTexture()),this.textureIndex[t]=Vt++,s.bindTexture(s.TEXTURE_2D,this.textures[t]),this.setTextureParameter(),s.texImage2D(s.TEXTURE_2D,i,s[o],r,n,0,s[a],s[l],new Uint8Array(e))}},{key:"bindEmptyTexture",value:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"RGBA",o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"RGBA",a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"UNSIGNED_BYTE",l=this.gl;this.textures[t]||(this.textures[t]=l.createTexture()),this.textureIndex[t]=Vt++,l.bindTexture(l.TEXTURE_2D,this.textures[t]),this.setTextureParameter();l.texImage2D(l.TEXTURE_2D,n,l[i],e,r,0,l[o],l[a],null)}},{key:"setTextureParameter",value:function(){var t=this.gl;t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST)}},{key:"bindFrameBufferWithTexture",value:function(t,e,r,n){this.bindEmptyTexture(e,r,n),this.bindFrameBuffer(t,e)}},{key:"enumToString",value:function(t){var e=this.gl;if(0===t)return"NONE";for(var r in e)if(e[r]===t)return r;return"0x"+t.toString(16)}},{key:"bindFrameBuffer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,r=this.gl;if(1!==arguments.length){this.framebuffers[t]||(this.framebuffers[t]=r.createFramebuffer()),r.bindFramebuffer(r.FRAMEBUFFER,this.framebuffers[t]);var n=r.COLOR_ATTACHMENT0;r.framebufferTexture2D(r.FRAMEBUFFER,n,r.TEXTURE_2D,this.textures[e],0);r.checkFramebufferStatus(r.FRAMEBUFFER);r.FRAMEBUFFER_COMPLETE}else r.bindFramebuffer(r.FRAMEBUFFER,null==t?null:this.framebuffers[t])}},{key:"bindVA",value:function(){var t=this.gl;this.vao||(this.vao=t.createVertexArray()),t.bindVertexArray(this.vao)}},{key:"bindAttr",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"STATIC_DRAW",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;this.bindBuffer(t,e,r),this.enable(t),this.pointer(t,"FLOAT",n)}},{key:"initBuffer",value:function(){var t=this.canvas,e=t.width,r=t.height;this.a("a_position"),this.a("a_texCoord"),this.u("u_resolution"),this.u("u_image"),this.u("u_flipY"),this.u("u_kernelSelect"),this.u("u_filterIndex"),this.u("u_kernel9[0]"),this.u("u_kernel9Weight"),this.u("u_kernel25[0]"),this.u("u_kernel25Weight"),this.u("u_kernel49[0]"),this.u("u_kernel49Weight"),this.u("u_kernel81[0]"),this.u("u_kernel81Weight"),this.bindVA(),this.bindAttr("a_position",[0,0,e,0,0,r,0,r,e,0,e,r],"STATIC_DRAW",2),this.bindAttr("a_texCoord",[0,0,1,0,0,1,0,1,1,0,1,1],"STATIC_DRAW",2),this.bindTexture("u_image",this.img),this.bindFrameBufferWithTexture("frame_buffer_0","img_texture_0",e,r),this.bindFrameBufferWithTexture("frame_buffer_1","img_texture_1",e,r)}},{key:"activeTexture",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=this.gl;e.activeTexture(e.TEXTURE0+t)}},{key:"drawFilter",value:function(){var t=this,e=this.gl;this.resize(),this.clear(),this.useProgram(),this.bindVA(),this.activeTexture(0),this.bindTexture("u_image"),this.uniform1i("u_image",0),this.uniform1f("u_flipY",1);var r=e.canvas,n=r.width,i=r.height;this.eachFilter(function(e,r){t.bindFrameBuffer("frame_buffer_"+r%2),t.uniform2f("u_resolution",n,i),t.viewport(0,0,n,i),t.effectFilter(e),t.bindTexture("img_texture_"+r%2)}),this.uniform1f("u_flipY",-1),this.bindFrameBuffer(null),this.uniform2f("u_resolution",n,i),this.viewport(0,0,n,i),this.clear(),this.effectFilter("normal")}},{key:"effectFilter",value:function(t){"string"==typeof t&&(t=(zt[t]||zt.normal).call(zt)),"convolution"==t.type?(this.uniform1f("u_kernelSelect",t.length),this.uniform1f("u_filterIndex",-1),this.uniform1fv("u_kernel"+t.length+"[0]",t.content),this.uniform1f("u_kernel"+t.length+"Weight",this.computeKernelWeight(t.content))):(this.uniform1f("u_kernelSelect",-1),this.uniform1f("u_filterIndex",t.index)),this.triangles(0,6)}},{key:"computeKernelWeight",value:function(t){var e=t.reduce(function(t,e){return t+e});return e<=0?1:e}},{key:"createProgram",value:function(t,e){var r=this.gl,n=r.createProgram();if(this.vertexShader=this.createVertexShader(t),this.fragmentShader=this.createFragmentShader(e),r.attachShader(n,this.vertexShader),r.attachShader(n,this.fragmentShader),r.linkProgram(n),r.getProgramParameter(n,r.LINK_STATUS))return n;console.error(r.getProgramInfoLog(n)),r.deleteProgram(n)}},{key:"createShader",value:function(t,e){var r=this.gl,n=r.createShader(t);if(r.shaderSource(n,e),r.compileShader(n),r.getShaderParameter(n,r.COMPILE_STATUS))return n;console.error(r.getShaderInfoLog(n)),r.deleteShader(n)}},{key:"createVertexShader",value:function(t){var e=this.gl;return this.createShader(e.VERTEX_SHADER,t)}},{key:"createFragmentShader",value:function(t){var e=this.gl;return this.createShader(e.FRAGMENT_SHADER,t)}},{key:"eachFilter",value:function(t){this.filterList.forEach(t)}},{key:"init",value:function(){this.locations={},this.buffers={},this.framebuffers={},this.textures={},this.textureIndex={},this.hasTexParameter={}}},{key:"destroy",value:function(){var t=this.gl;this.init(),t.deleteProgram(this.program)}},{key:"filter",value:function(t,e){var r,n,i;this.filterList=t,this.initCanvas("#version 300 es \n\n in vec2 a_position;\n in vec2 a_texCoord; \n\n uniform vec2 u_resolution;\n uniform float u_flipY;\n\n out vec2 v_texCoord; \n\n void main() {\n vec2 zeroToOne = a_position / u_resolution;\n\n vec2 zeroToTwo = zeroToOne * 2.0;\n\n vec2 clipSpace = zeroToTwo - 1.0;\n\n gl_Position = vec4(clipSpace * vec2(1, u_flipY), 0, 1);\n\n v_texCoord = a_texCoord;\n\n }\n ",(r=this.filterList,n=r.filter(function(t){return"shader"==t.type}).map(function(t){return t.content}).join("\n\n"),i={9:!0},r.filter(function(t){return"convolution"==t.type}).forEach(function(t){i[t.length]=!0}),"#version 300 es\n\n precision highp int;\n precision mediump float;\n \n uniform sampler2D u_image;\n\n // 3 is 3x3 matrix kernel \n uniform float u_kernelSelect;\n uniform float u_filterIndex;\n\n uniform float u_kernel9[9];\n uniform float u_kernel9Weight;\n uniform float u_kernel25[25];\n uniform float u_kernel25Weight;\n uniform float u_kernel49[49];\n uniform float u_kernel49Weight;\n uniform float u_kernel81[81];\n uniform float u_kernel81Weight; \n\n in vec2 v_texCoord;\n \n out vec4 outColor;\n\n float random (vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);\n } \n\n // \n vec3 rgb2hsv(vec3 c)\n {\n vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n vec4 p = c.g < c.b ? vec4(c.bg, K.wz) : vec4(c.gb, K.xy);\n vec4 q = c.r < p.x ? vec4(p.xyw, c.r) : vec4(c.r, p.yzx);\n\n float d = q.x - min(q.w, q.y);\n float e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n }\n\n vec3 hsv2rgb(vec3 c)\n {\n vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec4 pixelColor = texture(u_image, v_texCoord);\n vec2 onePixel = vec2(1) / vec2(textureSize(u_image, 0)); \n\n "+n+"\n\n "+Object.keys(i).map(function(t){return Et(+t)}).join("\n")+"\n\n }")),this.drawFilter(),"function"==typeof e&&e(this)}}]),t}()};var Xt=p({},Ut,{filter:function(t,e,r,n){var i=new Ut.GLCanvas({width:n.width||t.width,height:n.height||t.height,img:t});i.filter(function t(e){var r=[];"string"==typeof e?r=vt(e):Array.isArray(e)&&(r=e);var n=[];r.forEach(function(e){var r=e.arr[0];if(zt[r]){var i=function(t){var e=t.arr[0],r=zt[e],n=t.arr;return n.shift(),r.apply(this,n)}(e);"convolution"==i.type||"shader"==i.type?n.push(i):i.forEach(function(e){n=n.concat(t(e))})}});return n}(e),function(){"function"==typeof r&&r(i)})}}),Wt=/(#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi,qt={matches:function(t){var e=t.match(Wt),n=[];if(!e)return n;for(var i=0,o=e.length;i-1||e[i].indexOf("rgb")>-1||e[i].indexOf("hsl")>-1)n.push({color:e[i]});else{var a=r.getColorByName(e[i]);a&&n.push({color:e[i],nameColor:a})}var l={next:0};return n.forEach(function(e){var r=t.indexOf(e.color,l.next);e.startIndex=r,e.endIndex=r+e.color.length,l.next=e.endIndex}),n},convertMatches:function(t){var e=this.matches(t);return e.forEach(function(e,r){t=t.replace(e.color,"@"+r)}),{str:t,matches:e}},convertMatchesArray:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:",",n=this.convertMatches(t);return n.str.split(r).map(function(t,r){return t=e.trim(t),n.matches[r]&&(t=t.replace("@"+r,n.matches[r].color)),t})},reverseMatches:function(t,e){return e.forEach(function(e,r){t=t.replace("@"+r,e.color)}),t},trim:function(t){return t.replace(/^\s+|\s+$/g,"")},round:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return Math.round(t*e)/e},format:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgba(0, 0, 0, 0)";return Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),"hex"==e?this.hex(t):"rgb"==e?this.rgb(t,r):"hsl"==e?this.hsl(t):t},hex:function(t){Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]});var e=t.r.toString(16);t.r<16&&(e="0"+e);var r=t.g.toString(16);t.g<16&&(r="0"+r);var n=t.b.toString(16);return t.b<16&&(n="0"+n),"#"+e+r+n},rgb:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"rgba(0, 0, 0, 0)";if(Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),void 0!==t)return 1==t.a||void 0===t.a?isNaN(t.r)?e:"rgb("+t.r+","+t.g+","+t.b+")":"rgba("+t.r+","+t.g+","+t.b+","+t.a+")"},hsl:function(t){return Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),1==t.a||void 0===t.a?"hsl("+t.h+","+t.s+"%,"+t.l+"%)":"hsla("+t.h+","+t.s+"%,"+t.l+"%,"+t.a+")"},parse:function(t){if("string"==typeof t){if(r.isColorName(t)&&(t=r.getColorByName(t)),t.indexOf("rgb(")>-1){for(var e=0,n=(o=t.replace("rgb(","").replace(")","").split(",")).length;e-1){for(e=0,n=(o=t.replace("rgba(","").replace(")","").split(",")).length;e-1){for(e=0,n=(o=t.replace("hsl(","").replace(")","").split(",")).length;e-1){for(e=0,n=(o=t.replace("hsla(","").replace(")","").split(",")).length;e>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};return i=Object.assign(i,this.RGBtoHSL(i))}if(0<=t&&t<=4294967295){i={type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255};return i=Object.assign(i,this.RGBtoHSL(i))}}return t},HSVtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,r=n.v}var i=t,o=r;360==i&&(i=0);var a=e*o,l=a*(1-Math.abs(i/60%2-1)),s=o-a,u=[];return 0<=i&&i<60?u=[a,l,0]:60<=i&&i<120?u=[l,a,0]:120<=i&&i<180?u=[0,a,l]:180<=i&&i<240?u=[0,l,a]:240<=i&&i<300?u=[l,0,a]:300<=i&&i<360&&(u=[a,0,l]),{r:this.round(255*(u[0]+s)),g:this.round(255*(u[1]+s)),b:this.round(255*(u[2]+s))}},RGBtoHSV:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=t/255,o=e/255,a=r/255,l=Math.max(i,o,a),s=l-Math.min(i,o,a),u=0;0==s?u=0:l==i?u=(o-a)/s%6*60:l==o?u=60*((a-i)/s+2):l==a&&(u=60*((i-o)/s+4)),u<0&&(u=360+u);return{h:u,s:0==l?0:s/l,v:l}},HSVtoHSL:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,r=n.v}var i=this.HSVtoRGB(t,e,r);return this.RGBtoHSL(i.r,i.g,i.b)},RGBtoCMYK:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=t/255,o=e/255,a=r/255,l=1-Math.max(i,o,a);return{c:(1-i-l)/(1-l),m:(1-o-l)/(1-l),y:(1-a-l)/(1-l),k:l}},CMYKtoRGB:function(t,e,r,n){if(1==arguments.length){var i=arguments[0];t=i.c,e=i.m,r=i.y,n=i.k}return{r:255*(1-t)*(1-n),g:255*(1-e)*(1-n),b:255*(1-r)*(1-n)}},RGBtoHSL:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}t/=255,e/=255,r/=255;var i,o,a=Math.max(t,e,r),l=Math.min(t,e,r),s=(a+l)/2;if(a==l)i=o=0;else{var u=a-l;switch(o=s>.5?u/(2-a-l):u/(a+l),a){case t:i=(e-r)/u+(e1&&(r-=1),r<1/6?t+6*(e-t)*r:r<.5?e:r<2/3?t+(e-t)*(2/3-r)*6:t},HSLtoHSV:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,n.v}var i=this.HSLtoRGB(t,e,r);return this.RGBtoHSV(i.r,i.g,i.b)},HSLtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,r=n.l}var i,o,a;if(t/=360,r/=100,0==(e/=100))i=o=a=r;else{var l=r<.5?r*(1+e):r+e-r*e,s=2*r-l;i=this.HUEtoRGB(s,l,t+1/3),o=this.HUEtoRGB(s,l,t),a=this.HUEtoRGB(s,l,t-1/3)}return{r:this.round(255*i),g:this.round(255*o),b:this.round(255*a)}},c:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.gray((t+e+r)/3>90?0:255)},gray:function(t){return{r:t,g:t,b:t}},RGBtoSimpleGray:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.gray(Math.ceil((t+e+r)/3))},RGBtoGray:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.gray(this.RGBtoYCrCb(t,e,r).y)},brightness:function(t,e,r){return Math.ceil(.2126*t+.7152*e+.0722*r)},RGBtoYCrCb:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=this.brightness(t,e,r);return{y:i,cr:.713*(t-i),cb:.564*(r-i)}},YCrCbtoRGB:function(t,e,r,n){if(1==arguments.length){var i=arguments[0];t=i.y,e=i.cr,r=i.cb;n=(n=i.bit)||0}var o=t+1.402*(e-n),a=t-.344*(r-n)-.714*(e-n),l=t+1.772*(r-n);return{r:Math.ceil(o),g:Math.ceil(a),b:Math.ceil(l)}},ReverseRGB:function(t){return t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t},XYZtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.x,e=n.y,r=n.z}var i=t/100,o=e/100,a=r/100,l=3.2406*i+-1.5372*o+-.4986*a,s=-.9689*i+1.8758*o+.0415*a,u=.0557*i+-.204*o+1.057*a;return l=this.ReverseRGB(l),s=this.ReverseRGB(s),u=this.ReverseRGB(u),{r:this.round(255*l),g:this.round(255*s),b:this.round(255*u)}},PivotRGB:function(t){return 100*(t>.04045?Math.pow((t+.055)/1.055,2.4):t/12.92)},RGBtoXYZ:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=t/255,o=e/255,a=r/255;return{x:.4124*(i=this.PivotRGB(i))+.3576*(o=this.PivotRGB(o))+.1805*(a=this.PivotRGB(a)),y:.2126*i+.7152*o+.0722*a,z:.0193*i+.1192*o+.9505*a}},ReverseXyz:function(t){return Math.pow(t,3)>.008856?Math.pow(t,3):(t-16/116)/7.787},LABtoXYZ:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.l,e=n.a,r=n.b}var i=(t+16)/116,o=e/500+i,a=i-r/200;return i=this.ReverseXyz(i),{x:95.047*(o=this.ReverseXyz(o)),y:100*i,z:108.883*(a=this.ReverseXyz(a))}},PivotXyz:function(t){return t>.008856?Math.pow(t,1/3):(7.787*t+16)/116},XYZtoLAB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.x,e=n.y,r=n.z}var i=t/95.047,o=e/100,a=r/108.883;return i=this.PivotXyz(i),{l:116*(o=this.PivotXyz(o))-16,a:500*(i-o),b:200*(o-(a=this.PivotXyz(a)))}},RGBtoLAB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.XYZtoLAB(this.RGBtoXYZ(t,e,r))},LABtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.l,e=n.a,r=n.b}return this.XYZtoRGB(this.LABtoXYZ(t,e,r))},blend:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"hex",i=this.parse(t),o=this.parse(e);return this.interpolateRGB(i,o,r,n)},mix:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"hex";return this.blend(t,e,r,n)},contrast:function(t){return t=this.parse(t),(Math.round(299*t.r)+Math.round(587*t.g)+Math.round(114*t.b))/1e3},contrastColor:function(t){return this.contrast(t)>=128?"black":"white"},interpolateRGB:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"hex",i={r:this.round(t.r+(e.r-t.r)*r),g:this.round(t.g+(e.g-t.g)*r),b:this.round(t.b+(e.b-t.b)*r),a:this.round(t.a+(e.a-t.a)*r,100)};return this.format(i,i.a<1?"rgb":n)},scale:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;if(!t)return[];"string"==typeof t&&(t=this.convertMatchesArray(t));for(var r=(t=t||[]).length,n=[],i=0;i0){var n=(1-t.filter(function(t){return"*"!=t[1]&&1!=t[1]}).map(function(t){return t[1]}).reduce(function(t,e){return t+e},0))/r;t.forEach(function(e,r){"*"==e[1]&&r>0&&(t.length-1==r||(e[1]=n))})}return t},gradient:function(t){for(var e=[],r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:10)-((t=this.parseGradient(t)).length-1),n=r,i=1,o=t.length;i1&&void 0!==arguments[1]?arguments[1]:"h",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:9,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"rgb",i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:100,l=this.parse(t),s=this.RGBtoHSV(l),u=(o-i)*a/r,c=[],h=1;h<=r;h++)s[e]=Math.abs((a-u*h)/a),c.push(this.format(this.HSVtoRGB(s),n));return c},scaleH:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:360;return this.scaleHSV(t,"h",e,r,n,i,1)},scaleS:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"s",e,r,n,i,100)},scaleV:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"v",e,r,n,i,100)},palette:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"hex";return t.length>r&&(t=c(t,r)),t.map(function(t){return e.format(t,n)})},ImageToRGB:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments[2];if(r){if(r){var n;(n=new $(t,e)).loadImage(function(){"function"==typeof r&&r(n.toRGB())})}}else(n=new $(t)).loadImage(function(){"function"==typeof e&&e(n.toRGB())})},ImageToCanvas:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{frameTimer:"full"};this.ImageToURL(t,e,r,Object.assign({returnTo:"canvas"},n))},ImageToURL:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{frameTimer:"full"},i=new $(t);i.loadImage(function(){i.toArray(e,function(t){"function"==typeof r&&r(t)},n)})},GLToCanvas:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=new $(t);i.load(function(){Xt.filter(i.newImage,e,function(t){"function"==typeof r&&r(t)},n)})},histogram:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=new $(t);n.loadImage(function(){"function"==typeof e&&e(n.toHistogram(r))})},histogramToPoints:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.2,r=[],n=0;n2&&void 0!==arguments[2]?arguments[2]:{width:200,height:100},n=new $(t);n.loadImage(function(){h.createHistogram(r.width||200,r.height||100,n.toHistogram(r),function(t){"function"==typeof e&&e(t.toDataURL("image/png"))},r)})}};qt.scale.parula=function(t){return qt.scale(["#352a87","#0f5cdd","#00b5a6","#ffc337","#fdff00"],t)},qt.scale.jet=function(t){return qt.scale(["#00008f","#0020ff","#00ffff","#51ff77","#fdff00","#ff0000","#800000"],t)},qt.scale.hsv=function(t){return qt.scale(["#ff0000","#ffff00","#00ff00","#00ffff","#0000ff","#ff00ff","#ff0000"],t)},qt.scale.hot=function(t){return qt.scale(["#0b0000","#ff0000","#ffff00","#ffffff"],t)},qt.scale.pink=function(t){return qt.scale(["#1e0000","#bd7b7b","#e7e5b2","#ffffff"],t)},qt.scale.bone=function(t){return qt.scale(["#000000","#4a4a68","#a6c6c6","#ffffff"],t)},qt.scale.copper=function(t){return qt.scale(["#000000","#3d2618","#9d623e","#ffa167","#ffc77f"],t)};var Yt=[{rgb:"#ff0000",start:0},{rgb:"#ffff00",start:.17},{rgb:"#00ff00",start:.33},{rgb:"#00ffff",start:.5},{rgb:"#0000ff",start:.67},{rgb:"#ff00ff",start:.83},{rgb:"#ff0000",start:1}];!function(){for(var t=0,e=Yt.length;t=t){e=Yt[n-1],r=Yt[n];break}return e&&r?qt.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):Yt[0].rgb}},Zt=p({},V,X),Jt=0,Qt=[],te=function(){function t(e,r,n){if(v(this,t),"string"!=typeof e)this.el=e;else{var i=document.createElement(e);for(var o in this.uniqId=Jt++,r&&(i.className=r),n=n||{})i.setAttribute(o,n[o]);this.el=i}}return g(t,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(e){for(var r=this,n=!1;!(n=r.hasClass(e));){if(!r.el.parentNode)return null;r=new t(r.el.parentNode)}return n?r:null}},{key:"removeClass",value:function(t){return this.el.className=(" "+this.el.className+" ").replace(" "+t+" "," ").trim(),this}},{key:"hasClass",value:function(t){return!!this.el.className&&(" "+this.el.className+" ").indexOf(" "+t+" ")>-1}},{key:"addClass",value:function(t){return this.hasClass(t)||(this.el.className=this.el.className+" "+t),this}},{key:"toggleClass",value:function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)}},{key:"html",value:function(t){return"string"==typeof t?this.el.innerHTML=t:this.empty().append(t),this}},{key:"find",value:function(t){return this.el.querySelector(t)}},{key:"findAll",value:function(t){return this.el.querySelectorAll(t)}},{key:"empty",value:function(){return this.html("")}},{key:"append",value:function(t){return"string"==typeof t?this.el.appendChild(document.createTextNode(t)):this.el.appendChild(t.el||t),this}},{key:"appendTo",value:function(t){return(t.el?t.el:t).appendChild(this.el),this}},{key:"remove",value:function(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}},{key:"text",value:function(){return this.el.textContent}},{key:"css",value:function(t,e){var r=this;if(2==arguments.length)this.el.style[t]=e;else if(1==arguments.length){if("string"==typeof t)return getComputedStyle(this.el)[t];var n=t||{};Object.keys(n).forEach(function(t){r.el.style[t]=n[t]})}return this}},{key:"cssFloat",value:function(t){return parseFloat(this.css(t))}},{key:"cssInt",value:function(t){return parseInt(this.css(t))}},{key:"offset",value:function(){var t=this.el.getBoundingClientRect();return{top:t.top+document.documentElement.scrollTop,left:t.left+document.documentElement.scrollLeft}}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"width",value:function(){return this.el.offsetWidth}},{key:"contentWidth",value:function(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}},{key:"height",value:function(){return this.el.offsetHeight}},{key:"contentHeight",value:function(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}},{key:"dataKey",value:function(t){return this.uniqId+"."+t}},{key:"data",value:function(t,e){if(2!=arguments.length){if(1==arguments.length)return Qt[this.dataKey(t)];var r=Object.keys(Qt),n=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(n)}).map(function(t){return Qt[t]})}return Qt[this.dataKey(t)]=e,this}},{key:"val",value:function(t){return 0==arguments.length?this.el.value:(1==arguments.length&&(this.el.value=t),this)}},{key:"int",value:function(){return parseInt(this.val(),10)}},{key:"float",value:function(){return parseFloat(this.val())}},{key:"show",value:function(){return this.css("display","block")}},{key:"hide",value:function(){return this.css("display","none")}},{key:"toggle",value:function(){return"none"==this.css("display")?this.show():this.hide()}},{key:"scrollTop",value:function(){return this.el===document.body?document.documentElement.scrollTop:this.el.scrollTop}},{key:"scrollLeft",value:function(){return this.el===document.body?document.documentElement.scrollLeft:this.el.scrollLeft}},{key:"on",value:function(t,e,r,n){return this.el.addEventListener(t,e,r,n),this}},{key:"off",value:function(t,e){return this.el.removeEventListener(t,e),this}},{key:"getElement",value:function(){return this.el}},{key:"createChild",value:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=new t(e,r,n);return o.css(i),this.append(o),o}},{key:"firstChild",value:function(){return new t(this.el.firstElementChild)}}]),t}(),ee={addEvent:function(t,e,r){t.addEventListener(e,r)},removeEvent:function(t,e,r){t.removeEventListener(e,r)},pos:function(t){return t.touches&&t.touches[0]?t.touches[0]:t}},re=function(){function t(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};v(this,t),this.masterObj=e,this.settingObj=r}return g(t,[{key:"set",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;this.settingObj[t]=e||r}},{key:"init",value:function(t){if(!this.has(t)){var e=t.split("."),r=this.masterObj.refs[e[0]]||this.masterObj[e[0]]||this.masterObj,n=e.pop();if(r[n]){for(var i=arguments.length,o=Array(i>1?i-1:0),a=1;a1&&void 0!==arguments[1]?arguments[1]:"";return this.init(t,e),this.settingObj[t]||e}},{key:"has",value:function(t){return!!this.settingObj[t]}}]),t}(),ne=/^(click|mouse(down|up|move|enter|leave)|key(down|up|press)|contextmenu|change|input)/gi,ie=["Control","Shift","Alt","Meta"],oe=function(){function t(){v(this,t),this.state=new re(this),this.refs={}}return g(t,[{key:"template",value:function(t){var e=this;this.$el=new te("div").html(t).firstChild();var r=this.$el.findAll("[ref]");[].concat(C(r)).forEach(function(t){e.refs[t.getAttribute("ref")]=new te(t)}),this.refs.$el=this.$el}},{key:"initializeEvent",value:function(){this.initializeEventMachin()}},{key:"destroy",value:function(){this.destroyEventMachin()}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(ne).forEach(this.parseEvent.bind(this))}},{key:"filterProps",value:function(t){return Object.getOwnPropertyNames(this.__proto__).filter(function(e){return e.match(t)})}},{key:"parseEvent",value:function(t){var e=t.split(" ");this.bindingEvent(e,this[t].bind(this))}},{key:"getDefaultDomElement",value:function(t){var e=void 0;return(e=t?this.refs[t]||this[t]||window[t]:this.el||this.$el||this.$root)instanceof te?e.getElement():e}},{key:"getDefaultEventObject",value:function(t){var e=this,r=t.split("."),n=r.shift(),i=r.includes("Control"),o=r.includes("Shift"),a=r.includes("Alt"),l=r.includes("Meta"),s=(r=r.filter(function(t){return!1===ie.includes(t)})).filter(function(t){return!!e[t]});return{eventName:n,isControl:i,isShift:o,isAlt:a,isMeta:l,codes:r=r.filter(function(t){return!1===s.includes(t)}).map(function(t){return t.toLowerCase()}),checkMethodList:s}}},{key:"bindingEvent",value:function(t,e){var r,n=(r=t,Array.isArray(r)?r:Array.from(r)),i=n[0],o=n[1],a=n.slice(2);o=this.getDefaultDomElement(o);var l=this.getDefaultEventObject(i);l.dom=o,l.delegate=a.join(" "),this.addEvent(l,e)}},{key:"matchPath",value:function(t,e){return t?t.matches(e)?t:this.matchPath(t.parentElement,e):null}},{key:"getBindings",value:function(){return this._bindings||this.initBindings(),this._bindings}},{key:"addBinding",value:function(t){this.getBindings().push(t)}},{key:"initBindings",value:function(){this._bindings=[]}},{key:"checkEventType",value:function(t,e){var r=this,n=!t.ctrlKey||e.isControl,i=!t.shiftKey||e.isShift,o=!t.altKey||e.isAlt,a=!t.metaKey||e.isMeta,l=!0;e.codes.length&&(l=e.codes.includes(t.code.toLowerCase())||e.codes.includes(t.key.toLowerCase()));var s=!0;return e.checkMethodList.length&&(s=e.checkMethodList.every(function(e){return r[e].call(r,t)})),n&&o&&i&&a&&l&&s}},{key:"makeCallback",value:function(t,e){var r=this;return t.delegate?function(n){if(r.checkEventType(n,t)){var i=r.matchPath(n.target||n.srcElement,t.delegate);if(i)return n.delegateTarget=i,n.$delegateTarget=new te(i),e(n)}}:function(n){if(r.checkEventType(n,t))return e(n)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t),ee.addEvent(t.dom,t.eventName,t.callback)}},{key:"removeEventAll",value:function(){var t=this;this.getBindings().forEach(function(e){t.removeEvent(e)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,n=t.callback;ee.removeEvent(r,e,n)}}]),t}(),ae=[{name:"Material",colors:["#F44336","#E91E63","#9C27B0","#673AB7","#3F51B5","#2196F3","#03A9F4","#00BCD4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548","#9E9E9E","#607D8B"]},{name:"Custom",edit:!0,colors:[]},{name:"Color Scale",scale:["red","yellow","black"],count:5}],le=function(){function t(e){v(this,t),this.colorpicker=e,this.setUserList(this.colorpicker.getOption("colorSets"))}return g(t,[{key:"list",value:function(){return this.userList||ae}},{key:"setUserList",value:function(t){this.userList=t,this.resetUserList(),this.setCurrentColorSets()}},{key:"resetUserList",value:function(){var t=this;this.userList&&this.userList.length&&(this.userList=this.userList.map(function(e,r){if("function"==typeof e.colors){var n=e.colors;e.colors=n(t.colorpicker,t),e._colors=n}return Object.assign({name:"color-"+r,colors:[]},e)}))}},{key:"setCurrentColorSets",value:function(t){var e=this.list();this.currentColorSets=void 0===t?e[0]:"number"==typeof t?e[t]:e.filter(function(e){return e.name==t})[0]}},{key:"getCurrentColorSets",value:function(){return this.currentColorSets}},{key:"addCurrentColor",value:function(t){Array.isArray(this.currentColorSets.colors)&&this.currentColorSets.colors.push(t)}},{key:"removeCurrentColor",value:function(t){this.currentColorSets.colors[t]&&this.currentColorSets.colors.splice(t,1)}},{key:"removeCurrentColorToTheRight",value:function(t){this.currentColorSets.colors[t]&&this.currentColorSets.colors.splice(t,Number.MAX_VALUE)}},{key:"clearPalette",value:function(){this.currentColorSets.colors&&(this.currentColorSets.colors=[])}},{key:"getCurrentColors",value:function(){return this.getColors(this.currentColorSets)}},{key:"getColors",value:function(t){return t.scale?qt.scale(t.scale,t.count):t.colors||[]}},{key:"getColorSetsList",value:function(){var t=this;return this.list().map(function(e){return{name:e.name,edit:e.edit,colors:t.getColors(e)}})}},{key:"destroy",value:function(){}}]),t}(),se=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.opt=t||{},r.$body=null,r.$root=null,r.format="rgb",r.currentA=0,r.currentH=0,r.currentS=0,r.currentV=0,r.colorSetsList=new le(r),r.colorpickerCallback=function(){},r.isColorPickerShow=!1,r.isShortCut=!1,r.hideDelay=r.opt.hideDeplay||2e3,r.timerCloseColorPicker,r.autoHide=r.opt.autoHide||!0,r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.$body=new te(this.getContainer()),this.$root=new te("div","codemirror-colorpicker"),"inline"==this.opt.position&&this.$body.append(this.$root),this.opt.type&&this.$root.addClass(this.opt.type),this.$arrow=new te("div","arrow"),this.$root.append(this.$arrow)}},{key:"getOption",value:function(t){return this.opt[t]}},{key:"setOption",value:function(t,e){this.opt[t]=e}},{key:"isType",value:function(t){return this.getOption("type")==t}},{key:"isPaletteType",value:function(){return this.isType("palette")}},{key:"isSketchType",value:function(){return this.isType("sketch")}},{key:"getContainer",value:function(){return this.opt.container||document.body}},{key:"getColor",value:function(t){this.caculateHSV();var e=this.convertRGB();return t?qt.format(e,t):e}},{key:"definePositionForArrow",value:function(t,e,r){}},{key:"definePosition",value:function(t){var e=this.$root.width(),r=this.$root.height(),n=t.left-this.$body.scrollLeft();e+n>window.innerWidth&&(n-=e+n-window.innerWidth),n<0&&(n=0);var i=t.top-this.$body.scrollTop();r+i>window.innerHeight&&(i-=r+i-window.innerHeight),i<0&&(i=0),this.$root.css({left:n+"px",top:i+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"show",value:function(t,e,r){this.destroy(),this.initializeEvent(),this.$root.appendTo(this.$body),this.$root.css(this.getInitalizePosition()).show(),this.definePosition(t),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.initColor(e),this.colorpickerCallback=r,this.hideDelay=t.hideDelay||2e3,this.hideDelay>0&&this.setHideDelay(this.hideDelay)}},{key:"setHideDelay",value:function(t){var e=this;t=t||0,this.$root.off("mouseenter"),this.$root.off("mouseleave"),this.$root.on("mouseenter",function(){clearTimeout(e.timerCloseColorPicker)}),this.$root.on("mouseleave",function(){clearTimeout(e.timerCloseColorPicker),e.timerCloseColorPicker=setTimeout(e.hide.bind(e),t)}),clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),t)}},{key:"hide",value:function(){this.isColorPickerShow&&(this.destroy(),this.$root.hide(),this.$root.remove(),this.isColorPickerShow=!1)}},{key:"convertRGB",value:function(){return qt.HSVtoRGB(this.currentH,this.currentS,this.currentV)}},{key:"convertHEX",value:function(){return qt.format(this.convertRGB(),"hex")}},{key:"convertHSL",value:function(){return qt.HSVtoHSL(this.currentH,this.currentS,this.currentV)}},{key:"getFormattedColor",value:function(t){if("rgb"==(t=t||"hex"))return(r=this.convertRGB()).a=this.currentA,qt.format(r,"rgb");if("hsl"==t){var e=this.convertHSL();return e.a=this.currentA,qt.format(e,"hsl")}var r=this.convertRGB();return qt.format(r,"hex")}},{key:"callbackColorValue",value:function(t){isNaN(this.currentA)||("function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerCallback&&this.colorpickerCallback(t))}},{key:"setCurrentHSV",value:function(t,e,r,n){this.currentA=n,this.currentH=t,this.currentS=e,this.currentV=r}},{key:"setCurrentH",value:function(t){this.currentH=t}},{key:"setCurrentA",value:function(t){this.currentA=t}},{key:"getHSV",value:function(t){return"hsl"==t.type?qt.HSLtoHSV(t):qt.RGBtoHSV(t)}},{key:"initColor",value:function(t,e){var r=t||"#FF0000",n=qt.parse(r);e=e||n.type;var i=this.getHSV(n);this.setCurrentHSV(i.h,i.s,i.v,n.a)}},{key:"checkColorPickerClass",value:function(t){var e=new te(t).closest("codemirror-colorview"),r=new te(t).closest("codemirror-colorpicker"),n=new te(t).closest("CodeMirror");t.nodeName;return!!(r||e||n)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"initializeEvent",value:function(){this.initializeEventMachin()}},{key:"setColorSets",value:function(t){this.colorSetsList.setUserList(t)}},{key:"destroy",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.colorpickerCallback=void 0}}]),e}(),ue=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.template('\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '),this.drag_bar_pos={},this.opacity_drag_bar_pos={}}},{key:"setBackgroundColor",value:function(t){this.refs.$controlColor.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setOpacityColorBar",value:function(t){var e=qt.parse(t);e.a=0;var r=qt.format(e,"rgb");e.a=1;var n=qt.format(e,"rgb");this.refs.$opacityColorBar.css("background","linear-gradient(to right, "+r+", "+n+")")}},{key:"setOpacity",value:function(t){var e,r=this.refs.$opacityContainer.offset().left,n=r+this.state.get("$opacityContainer.width"),i=ee.pos(t).clientX;in?(e=100,this.refs.$opacity_drag_bar.addClass("last").removeClass("first")):(e=(i-r)/(n-r)*100,this.refs.$opacity_drag_bar.removeClass("first").removeClass("last"));var o=this.state.get("$opacityContainer.width")*(e/100);this.refs.$opacity_drag_bar.css({left:o+"px"}),this.opacity_drag_bar_pos={x:o},this.colorpicker.setCurrentA(this.caculateOpacity()),this.colorpicker.currentFormat(),this.colorpicker.setInputColor()}},{key:"setInputColor",value:function(){this.setBackgroundColor(this.colorpicker.getFormattedColor("rgb"));var t=this.colorpicker.convertRGB(),e=qt.format(t,"rgb");this.setOpacityColorBar(e)}},{key:"setColorUI",value:function(){var t=this.state.get("$hueContainer.width")*(this.colorpicker.currentH/360);this.refs.$drag_bar.css({left:t+"px"}),this.drag_bar_pos={x:t};var e=this.state.get("$opacityContainer.width")*(this.colorpicker.currentA||0);this.refs.$opacity_drag_bar.css({left:e+"px"}),this.opacity_drag_bar_pos={x:e}}},{key:"caculateH",value:function(){return{h:(this.drag_bar_pos||{x:0}).x/this.state.get("$hueContainer.width")*360}}},{key:"caculateOpacity",value:function(){var t=this.opacity_drag_bar_pos||{x:0},e=Math.round(t.x/this.state.get("$opacityContainer.width")*100)/100;return isNaN(e)?1:e}},{key:"EventDocumentMouseMove",value:function(t){this.isHueDown&&this.setHueColor(t),this.isOpacityDown&&this.setOpacity(t)}},{key:"EventDocumentMouseUp",value:function(t){this.isHueDown=!1,this.isOpacityDown=!1}},{key:"setControlColor",value:function(t){this.refs.$controlColor.css("background-color",t)}},{key:"setHueColor",value:function(t,e){var r,n=this.refs.$hueContainer.offset().left,i=n+this.state.get("$hueContainer.width"),o=t?ee.pos(t).clientX:n+(i-n)*(this.colorpicker.currentH/360);oi?(r=100,this.refs.$drag_bar.addClass("last").removeClass("first")):(r=(o-n)/(i-n)*100,this.refs.$drag_bar.removeClass("first").removeClass("last"));var a=this.state.get("$hueContainer.width")*(r/100);this.refs.$drag_bar.css({left:a+"px"}),this.drag_bar_pos={x:a};var l=Kt.checkHueColor(r/100);this.colorpicker.setBackgroundColor(l),this.colorpicker.setCurrentH(r/100*360),e||this.colorpicker.setInputColor()}},{key:"setOnlyHueColor",value:function(){this.setHueColor(null,!0)}},{key:"mousedown $drag_bar",value:function(t){t.preventDefault(),this.isHueDown=!0}},{key:"mousedown $opacity_drag_bar",value:function(t){t.preventDefault(),this.isOpacityDown=!0}},{key:"mousedown $hueContainer",value:function(t){this.isHueDown=!0,this.setHueColor(t)}},{key:"mousedown $opacityContainer",value:function(t){this.isOpacityDown=!0,this.setOpacity(t)}}]),e}(),ce=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.template('\n
\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
H
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '),this.format="hex"}},{key:"currentFormat",value:function(){var t=this.format||"hex";if(this.colorpicker.currentA<1&&"hex"==t){this.$el.removeClass(t),this.$el.addClass("rgb"),this.format="rgb",this.colorpicker.setInputColor()}}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var t=this.format||"hex";this.$el.removeClass("hex"),this.$el.removeClass("rgb"),this.$el.removeClass("hsl"),this.$el.addClass(t)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e=1==this.colorpicker.currentA?"hex":"rgb"),this.$el.removeClass(t),this.$el.addClass(e),this.format=e,this.setInputColor(),this.colorpicker.changeInputColorAfterNextFormat()}},{key:"setRGBInput",value:function(t,e,r){this.refs.$rgb_r.val(t),this.refs.$rgb_g.val(e),this.refs.$rgb_b.val(r),this.refs.$rgb_a.val(this.colorpicker.currentA)}},{key:"setHSLInput",value:function(t,e,r){this.refs.$hsl_h.val(t),this.refs.$hsl_s.val(e),this.refs.$hsl_l.val(r),this.refs.$hsl_a.val(this.colorpicker.currentA)}},{key:"getHexFormat",value:function(){return qt.format({r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int()},"hex",this.colorpicker.opt.color)}},{key:"getRgbFormat",value:function(){return qt.format({r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int(),a:this.refs.$rgb_a.float()},"rgb",this.colorpicker.opt.color)}},{key:"getHslFormat",value:function(){return qt.format({h:this.refs.$hsl_h.val(),s:this.refs.$hsl_s.val(),l:this.refs.$hsl_l.val(),a:this.refs.$hsl_a.float()},"hsl",this.colorpicker.opt.color)}},{key:"convertRGB",value:function(){return this.colorpicker.convertRGB()}},{key:"convertHEX",value:function(){return this.colorpicker.convertHEX()}},{key:"convertHSL",value:function(){return this.colorpicker.convertHSL()}},{key:"getFormattedColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return"hex"==(t=t||this.getFormat())?this.refs.$hexCode.val():"rgb"==t?this.getRgbFormat(e):"hsl"==t?this.getHslFormat(e):void 0}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"setInputColor",value:function(){var t=this.getFormat(),e=null;if("hex"==t){this.refs.$hexCode.val(this.convertHEX());e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a)}else if("rgb"==t){e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a),this.refs.$hexCode.val(this.convertHEX())}else if("hsl"==t){var r=this.convertHSL();this.setHSLInput(r.h,r.s,r.l,r.a)}}},{key:"checkNumberKey",value:function(t){return ee.checkNumberKey(t)}},{key:"checkNotNumberKey",value:function(t){return!ee.checkNumberKey(t)}},{key:"changeRgbColor",value:function(){this.colorpicker.changeInformationColor(this.getRgbFormat())}},{key:"changeHslColor",value:function(){this.colorpicker.changeInformationColor(this.getHslFormat())}},{key:"change $rgb_r",value:function(t){this.changeRgbColor()}},{key:"change $rgb_g",value:function(t){this.changeRgbColor()}},{key:"change $rgb_b",value:function(t){this.changeRgbColor()}},{key:"change $rgb_a",value:function(t){this.changeRgbColor()}},{key:"change $hsl_h",value:function(t){this.changeHslColor()}},{key:"change $hsl_s",value:function(t){this.changeHslColor()}},{key:"change $hsl_l",value:function(t){this.changeHslColor()}},{key:"change $hsl_a",value:function(t){this.changeHslColor()}},{key:"keydown $hexCode",value:function(t){if(t.which<65||t.which>70)return this.checkNumberKey(t)}},{key:"keyup $hexCode",value:function(t){var e=this.refs.$hexCode.val();"#"==e.charAt(0)&&7==e.length&&(this.colorpicker.changeInformationColor(e),this.setInputColor())}},{key:"click $formatChangeButton",value:function(t){this.nextFormat()}},{key:"refresh",value:function(){}}]),e}(),he=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.template('\n
\n
\n
\n
\n
\n
\n
\n ')}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.state.get("$el.width"),r=this.state.get("$el.height");return{s:t.x/e,v:(r-t.y)/r,width:e,height:r}}},{key:"setColorUI",value:function(){var t=this.state.get("$el.width")*this.colorpicker.currentS,e=this.state.get("$el.height")*(1-this.colorpicker.currentV);this.refs.$drag_pointer.css({left:t-5+"px",top:e-5+"px"}),this.drag_pointer_pos={x:t,y:e}}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.$el.position(),r=this.state.get("$el.contentWidth"),n=this.state.get("$el.contentHeight"),i=t.clientX-e.left,o=t.clientY-e.top;i<0?i=0:i>r&&(i=r),o<0?o=0:o>n&&(o=n),this.refs.$drag_pointer.css({left:i-5+"px",top:o-5+"px"}),this.drag_pointer_pos={x:i,y:o},this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"EventDocumentMouseUp",value:function(t){this.isDown=!1}},{key:"EventDocumentMouseMove",value:function(t){this.isDown&&this.setMainColor(t)}},{key:"mousedown",value:function(t){this.isDown=!0,this.setMainColor(t)}},{key:"mouseup",value:function(t){this.isDown=!1}}]),e}(),fe="data-colorsets-index",ve=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.template('\n
\n
\n
\n

Color Paletts

\n ×\n
\n
\n
\n
\n '),this.refresh()}},{key:"refresh",value:function(){this.refs.$colorsetsList.html(this.makeColorSetsList())}},{key:"makeColorItemList",value:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5,r=new te("div"),n=0;n\n
\n \n
\n
\n \n '),this.refresh()}},{key:"refresh",value:function(){this.refs.$colorSetsColorList.html(this.makeCurrentColorSets())}},{key:"refreshAll",value:function(){this.refresh(),this.colorpicker.refreshColorSetsChooser()}},{key:"addColor",value:function(t){this.colorSetsList.addCurrentColor(t),this.refreshAll()}},{key:"removeColor",value:function(t){this.colorSetsList.removeCurrentColor(t),this.refreshAll()}},{key:"removeAllToTheRight",value:function(t){this.colorSetsList.removeCurrentColorToTheRight(t),this.refreshAll()}},{key:"clearPalette",value:function(){this.colorSetsList.clearPalette(),this.refreshAll()}},{key:"click $colorSetsChooseButton",value:function(t){this.colorpicker.toggleColorChooser()}},{key:"contextmenu $colorSetsColorList",value:function(t){if(t.preventDefault(),this.colorSetsList.getCurrentColorSets().edit){var e=new te(t.target).closest("color-item");if(e){var r=parseInt(e.attr("data-index"));this.colorpicker.showContextMenu(t,r)}else this.colorpicker.showContextMenu(t)}}},{key:"click $colorSetsColorList .add-color-item",value:function(t){this.addColor(this.colorpicker.getCurrentColor())}},{key:"click $colorSetsColorList .color-item",value:function(t){var e=!!this.colorpicker.isPaletteType();this.colorpicker.setColor(t.$delegateTarget.attr("data-color"),e)}}]),e}(),de=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.currentColorSets=t.currentColorSets,r.initialize(),r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.template('\n
    \n
  • Remove color
    • \n
  • Remove all to the right
    • \n
  • Clear palette
    • \n
\n ')}},{key:"show",value:function(t,e){var r=ee.pos(t);this.$el.css({top:r.clientY-10+"px",left:r.clientX+"px"}),this.$el.addClass("show"),this.selectedColorIndex=e,void 0===this.selectedColorIndex?this.$el.addClass("small"):this.$el.removeClass("small")}},{key:"hide",value:function(){this.$el.removeClass("show")}},{key:"runCommand",value:function(t){switch(t){case"remove-color":this.currentColorSets.removeColor(this.selectedColorIndex);break;case"remove-all-to-the-right":this.currentColorSets.removeAllToTheRight(this.selectedColorIndex);break;case"clear-palette":this.currentColorSets.clearPalette()}}},{key:"click $el .menu-item",value:function(t){t.preventDefault(),this.runCommand(t.$delegateTarget.attr("data-type")),this.hide()}}]),e}(),pe=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return r.control=new ue(r),r.palette=new he(r),r.information=new ce(r),r.colorSetsChooser=new ve(r),r.currentColorSets=new ge(r),r.contextMenu=new de(r,r.currentColorSets),r.initialize(),r}return b(e,se),g(e,[{key:"initialize",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"initialize",this).call(this),this.$root.append(this.palette.$el),this.$root.append(this.control.$el),this.$root.append(this.information.$el),this.$root.append(this.currentColorSets.$el),this.$root.append(this.colorSetsChooser.$el),this.$root.append(this.contextMenu.$el),this.$checkColorPickerClass=this.checkColorPickerClass.bind(this),this.initColor(this.opt.color),this.initializeEvent()}},{key:"showContextMenu",value:function(t,e){this.contextMenu.show(t,e)}},{key:"setColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if("object"==(void 0===t?"undefined":f(t))){if(!t.r||!t.g||!t.b)return;e?this.callbackColorValue(qt.format(t,"hex")):this.initColor(qt.format(t,"hex"))}else"string"==typeof t&&(e?this.callbackColorValue(t):this.initColor(t))}},{key:"getColor",value:function(t){this.caculateHSV();var e=this.convertRGB();return t?qt.format(e,t):e}},{key:"definePositionForArrow",value:function(t,e,r){}},{key:"definePosition",value:function(t){var e=this.$root.width(),r=this.$root.height(),n=t.left-this.$body.scrollLeft();e+n>window.innerWidth&&(n-=e+n-window.innerWidth),n<0&&(n=0);var i=t.top-this.$body.scrollTop();r+i>window.innerHeight&&(i-=r+i-window.innerHeight),i<0&&(i=0),this.$root.css({left:n+"px",top:i+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"show",value:function(t,e,r){this.destroy(),this.initializeEvent(),this.$root.appendTo(this.$body),this.$root.css(this.getInitalizePosition()).show(),this.definePosition(t),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.initColor(e),this.colorpickerCallback=r,this.hideDelay=t.hideDelay||2e3,this.hideDelay>0&&this.setHideDelay(this.hideDelay)}},{key:"setHideDelay",value:function(t){var e=this;t=t||0,this.$root.off("mouseenter"),this.$root.off("mouseleave"),this.$root.on("mouseenter",function(){clearTimeout(e.timerCloseColorPicker)}),this.$root.on("mouseleave",function(){clearTimeout(e.timerCloseColorPicker),e.timerCloseColorPicker=setTimeout(e.hide.bind(e),t)}),clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),t)}},{key:"hide",value:function(){this.isColorPickerShow&&(this.destroy(),this.$root.hide(),this.$root.remove(),this.isColorPickerShow=!1)}},{key:"convertRGB",value:function(){return qt.HSVtoRGB(this.currentH,this.currentS,this.currentV)}},{key:"convertHEX",value:function(){return qt.format(this.convertRGB(),"hex")}},{key:"convertHSL",value:function(){return qt.HSVtoHSL(this.currentH,this.currentS,this.currentV)}},{key:"getCurrentColor",value:function(){return this.information.getFormattedColor()}},{key:"getFormattedColor",value:function(t){if("rgb"==(t=t||"hex"))return(r=this.convertRGB()).a=this.currentA,qt.format(r,"rgb");if("hsl"==t){var e=this.convertHSL();return e.a=this.currentA,qt.format(e,"hsl")}var r=this.convertRGB();return qt.format(r,"hex")}},{key:"setInputColor",value:function(t){this.information.setInputColor(t),this.control.setInputColor(t),this.callbackColorValue()}},{key:"changeInputColorAfterNextFormat",value:function(){this.control.setInputColor(),this.callbackColorValue()}},{key:"callbackColorValue",value:function(t){t=t||this.getCurrentColor(),isNaN(this.currentA)||("function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerCallback&&this.colorpickerCallback(t))}},{key:"caculateHSV",value:function(){var t=this.palette.caculateSV(),e=this.control.caculateH(),r=t.s,n=t.v,i=e.h;0==t.width&&(i=0,r=0,n=0),this.currentH=i,this.currentS=r,this.currentV=n}},{key:"setColorUI",value:function(){this.control.setColorUI(),this.palette.setColorUI()}},{key:"setCurrentHSV",value:function(t,e,r,n){this.currentA=n,this.currentH=t,this.currentS=e,this.currentV=r}},{key:"setCurrentH",value:function(t){this.currentH=t}},{key:"setCurrentA",value:function(t){this.currentA=t}},{key:"setBackgroundColor",value:function(t){this.palette.setBackgroundColor(t)}},{key:"setCurrentFormat",value:function(t){this.format=t,this.information.setCurrentFormat(t)}},{key:"getHSV",value:function(t){return"hsl"==t.type?qt.HSLtoHSV(t):qt.RGBtoHSV(t)}},{key:"initColor",value:function(t,e){var r=t||"#FF0000",n=qt.parse(r);e=e||n.type,this.setCurrentFormat(e);var i=this.getHSV(n);this.setCurrentHSV(i.h,i.s,i.v,n.a),this.setColorUI(),this.setHueColor(),this.setInputColor()}},{key:"changeInformationColor",value:function(t){var e=t||"#FF0000",r=qt.parse(e),n=this.getHSV(r);this.setCurrentHSV(n.h,n.s,n.v,r.a),this.setColorUI(),this.setHueColor(),this.control.setInputColor(),this.callbackColorValue()}},{key:"setHueColor",value:function(){this.control.setOnlyHueColor()}},{key:"mouseup document",value:function(t){this.palette.EventDocumentMouseUp(t),this.control.EventDocumentMouseUp(t),this.checkInHtml(t.target)||0==this.checkColorPickerClass(t.target)&&this.hide()}},{key:"mousemove document",value:function(t){this.palette.EventDocumentMouseMove(t),this.control.EventDocumentMouseMove(t)}},{key:"initializeEvent",value:function(){this.initializeEventMachin(),this.palette.initializeEvent(),this.control.initializeEvent(),this.information.initializeEvent(),this.currentColorSets.initializeEvent(),this.colorSetsChooser.initializeEvent(),this.contextMenu.initializeEvent()}},{key:"currentFormat",value:function(){this.information.currentFormat()}},{key:"toggleColorChooser",value:function(){this.colorSetsChooser.toggle()}},{key:"refreshColorSetsChooser",value:function(){this.colorSetsChooser.refresh()}},{key:"getColorSetsList",value:function(){return this.colorSetsList.getColorSetsList()}},{key:"setCurrentColorSets",value:function(t){this.colorSetsList.setCurrentColorSets(t),this.currentColorSets.refresh()}},{key:"setColorSets",value:function(t){this.colorSetsList.setUserList(t)}},{key:"destroy",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.control.destroy(),this.palette.destroy(),this.information.destroy(),this.colorSetsChooser.destroy(),this.colorSetsList.destroy(),this.currentColorSets.destroy(),this.contextMenu.destroy()}}]),e}(),me={create:function(t){switch(t.type){case"sketch":case"palette":default:return new pe(t)}},ColorPicker:pe,ChromeDevToolColorPicker:pe},be="codemirror-colorview",ye="codemirror-colorview-background",ke=["comment"];function Ce(t,e){"setValue"==e.origin?(t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update()):t.state.colorpicker.style_color_update(t.getCursor().line)}function $e(t,e){t.state.colorpicker.isUpdate||(t.state.colorpicker.isUpdate=!0,t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update())}function xe(t,e){Ce(t,{origin:"setValue"})}function _e(t,e){t.state.colorpicker.keyup(e)}function we(t,e){t.state.colorpicker.is_edit_mode()&&t.state.colorpicker.check_mousedown(e)}function Se(t,e){Ce(t,{origin:"setValue"})}function Ee(t){t.state.colorpicker.close_color_picker()}var Ae=function(){function t(e,r){v(this,t),r="boolean"==typeof r?{mode:"edit"}:Object.assign({mode:"edit"},r||{}),this.opt=r,this.cm=e,this.markers={},this.excluded_token=this.opt.excluded_token||ke,this.opt.colorpicker?this.colorpicker=this.opt.colorpicker(this.opt):this.colorpicker=me.create(this.opt),this.init_event()}return g(t,[{key:"init_event",value:function(){var t,e,r,n,i;this.cm.on("mousedown",we),this.cm.on("keyup",_e),this.cm.on("change",Ce),this.cm.on("update",$e),this.cm.on("refresh",xe),this.onPasteCallback=(t=this.cm,e=Se,function(r){e.call(this,t,r)}),this.cm.getWrapperElement().addEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.on("scroll",(r=Ee,n=50,i=void 0,function(t,e){i&&clearTimeout(i),i=setTimeout(function(){r(t,e)},n||300)}))}},{key:"is_edit_mode",value:function(){return"edit"==this.opt.mode}},{key:"is_view_mode",value:function(){return"view"==this.opt.mode}},{key:"destroy",value:function(){this.cm.off("mousedown",we),this.cm.off("keyup",_e),this.cm.off("change",Ce),this.cm.getWrapperElement().removeEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.off("scroll")}},{key:"hasClass",value:function(t,e){return!!t.className&&(" "+t.className+" ").indexOf(" "+e+" ")>-1}},{key:"check_mousedown",value:function(t){this.hasClass(t.target,ye)?this.open_color_picker(t.target.parentNode):this.close_color_picker()}},{key:"popup_color_picker",value:function(t){var e=this.cm.getCursor(),r=this,n={lineNo:e.line,ch:e.ch,color:t||"#FFFFFF",isShortCut:!0};Object.keys(this.markers).forEach(function(t){if(("#"+t).indexOf("#"+n.lineNo+":")>-1){var e=r.markers[t];e.ch<=n.ch&&n.ch<=e.ch+e.color.length&&(n.ch=e.ch,n.color=e.color,n.nameColor=e.nameColor)}}),this.open_color_picker(n)}},{key:"open_color_picker",value:function(t){var e=t.lineNo,r=t.ch,n=t.nameColor,i=t.color;if(this.colorpicker){var o=this,a=i,l=this.cm.charCoords({line:e,ch:r});this.colorpicker.show({left:l.left,top:l.bottom,isShortCut:t.isShortCut||!1,hideDelay:o.opt.hideDelay||2e3},n||i,function(t){o.cm.replaceRange(t,{line:e,ch:r},{line:e,ch:r+a.length},"*colorpicker"),a=t})}}},{key:"close_color_picker",value:function(t){this.colorpicker&&this.colorpicker.hide()}},{key:"key",value:function(t,e){return[t,e].join(":")}},{key:"keyup",value:function(t){this.colorpicker&&("Escape"==t.key?this.colorpicker.hide():0==this.colorpicker.isShortCut&&this.colorpicker.hide())}},{key:"init_color_update",value:function(){this.markers={}}},{key:"style_color_update",value:function(t){if(t)this.match(t);else for(var e=this.cm.lineCount(),r=0;r-1)&&(delete this.markers[l],i[o].marker.clear())}}},{key:"match_result",value:function(t){return qt.matches(t.text)}},{key:"submatch",value:function(t,e){var r=this;this.empty_marker(t,e);var n={next:0};this.match_result(e).forEach(function(i){r.render(n,t,e,i.color,i.nameColor)})}},{key:"match",value:function(t){var e=this.cm.getLineHandle(t),r=this;this.cm.operation(function(){r.submatch(t,e)})}},{key:"make_element",value:function(){var t=document.createElement("div");return t.className=be,this.is_edit_mode()?t.title="open color picker":t.title="",t.back_element=this.make_background_element(),t.appendChild(t.back_element),t}},{key:"make_background_element",value:function(){var t=document.createElement("div");return t.className=ye,t}},{key:"set_state",value:function(t,e,r,n){var i=this.create_marker(t,e);return i.lineNo=t,i.ch=e,i.color=r,i.nameColor=n,i}},{key:"create_marker",value:function(t,e){var r=this.key(t,e);return this.markers[r]||(this.markers[r]=this.make_element()),this.markers[r]}},{key:"has_marker",value:function(t,e){var r=this.key(t,e);return!!this.markers[r]}},{key:"update_element",value:function(t,e){t.back_element.style.backgroundColor=e}},{key:"set_mark",value:function(t,e,r){this.cm.setBookmark({line:t,ch:e},{widget:r,handleMouseEvents:!0})}},{key:"is_excluded_token",value:function(t,e){for(var r=this.cm.getTokenTypeAt({line:t,ch:e}),n=0,i=0,o=this.excluded_token.length;i0}},{key:"render",value:function(t,e,r,n,i){var o=r.text.indexOf(n,t.next);if(!0!==this.is_excluded_token(e,o)){if(t.next=o+n.length,this.has_marker(e,o))return this.update_element(this.create_marker(e,o),i||n),void this.set_state(e,o,n,i);var a=this.create_marker(e,o);this.update_element(a,i||n),this.set_state(e,o,n,i||n),this.set_mark(e,o,a)}}}]),t}();return t&&t.defineOption("colorpicker",!1,function(e,r,n){n&&n!=t.Init&&e.state.colorpicker&&(e.state.colorpicker.destroy(),e.state.colorpicker=null),r&&(e.state.colorpicker=new Ae(e,r))}),p({Color:qt,ColorNames:r},me,{ImageFilter:Zt,GL:Xt,HueColor:Kt,Canvas:h,ImageLoader:$})}(CodeMirror); +var CodeMirrorColorPicker=function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)"};var r={isColorName:function(t){return!!e[t]},getColorByName:function(t){return e[t]}};function n(t,e){if(t.length!==e.length)return!1;for(var r=0,n=t.length;r0)h=l(u);else h=e[Math.floor(a()*e.length)];o=!n(h,c),i[s]=h}return o}function c(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:10,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"linear";t=t,e=e||Math.max(2,Math.ceil(Math.sqrt(t.length/2)));var l=r||"euclidean";"string"==typeof l&&(l=i[l]);for(var c=0,h=function(){return(c=(9301*c+49297)%233280)/233280},f=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"linear";return o[r](t.length,e).map(function(e){return t[e]})}(t,e,a),v=!0,g=0;v;){if(v=u(e,t,s(e,t,f,l),f,!1,h),++g%n==0)break}return f}var h={create:function(t,e){var r=document.createElement("canvas");return r.width=t||0,r.height=e||0,r},drawPixels:function(t){var e=this.create(t.width,t.height),r=e.getContext("2d"),n=r.getImageData(0,0,e.width,e.height);return n.data.set(t.pixels),r.putImageData(n,0,0),e},createHistogram:function(t,e,r,n){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{black:!0,red:!1,green:!1,blue:!1},o=this.create(t,e),a=o.getContext("2d");a.clearRect(0,0,t,e),a.fillStyle="white",a.fillRect(0,0,t,e),a.globalAlpha=.7;var l={black:!1};i.black?l.black=!1:l.black=!0,i.red?l.red=!1:l.red=!0,i.green?l.green=!1:l.green=!0,i.blue?l.blue=!1:l.blue=!0,Object.keys(r).forEach(function(n){if(!l[n]){var i=r[n],o=Math.max.apply(Math,i),s=t/i.length;a.fillStyle=n,i.forEach(function(t,r){var n=e*(t/o),i=r*s;a.fillRect(i,e-n,s,n)})}}),"function"==typeof n&&n(o)},getHistogram:function(t){for(var e,r,n=new Array(256),i=new Array(256),o=new Array(256),a=new Array(256),l=0;l<256;l++)n[l]=0,i[l]=0,o[l]=0,a[l]=0;return r=function(t,e){var r=Math.round(qt.brightness(t[e],t[e+1],t[e+2]));n[r]++,i[t[e]]++,o[t[e+1]]++,a[t[e+2]]++},function(t,e){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:{};v(this,t),this.isLoaded=!1,this.imageUrl=e,this.opt=r,this.initialize()}return g(t,[{key:"initialize",value:function(){this.canvas=this.createCanvas(),this.context=this.canvas.getContext("2d")}},{key:"createCanvas",value:function(){return document.createElement("canvas")}},{key:"load",value:function(t){this.loadImage(t)}},{key:"loadImage",value:function(t){var e=this,r=this.context;this.newImage=new Image;var n=this.newImage;n.onload=function(){var i=n.height/n.width;e.opt.canvasWidth&&e.opt.canvasHeight?(e.canvas.width=e.opt.canvasWidth,e.canvas.height=e.opt.canvasHeight):(e.canvas.width=e.opt.maxWidth?e.opt.maxWidth:n.width,e.canvas.height=e.canvas.width*i),r.drawImage(n,0,0,n.width,n.height,0,0,e.canvas.width,e.canvas.height),e.isLoaded=!0,t&&t()},this.getImageUrl(function(t){n.src=t})}},{key:"load",value:function(t){var e=this;this.newImage=new Image;var r=this.newImage;r.onload=function(){e.isLoaded=!0,t&&t()},this.getImageUrl(function(t){r.src=t})}},{key:"getImageUrl",value:function(t){if("string"==typeof this.imageUrl)return t(this.imageUrl);if(this.imageUrl instanceof Blob){var e=new FileReader;e.onload=function(e){t(e.target.result)},e.readAsDataURL(this.imageUrl)}}},{key:"getRGBA",value:function(t,e,r,n){return[t,e,r,n]}},{key:"toArray",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=this.context.getImageData(0,0,this.canvas.width,this.canvas.height),i=n.width,o=n.height,a=new Uint8ClampedArray(n.data);t||(t=function(t,e){e(t)}),t({pixels:a,width:i,height:o},function(t){var n=h.drawPixels(t);"canvas"==r.returnTo?e(n):e(n.toDataURL(r.outputFormat||"image/png"))},r)}},{key:"toHistogram",value:function(t){var e=this.context.getImageData(0,0,this.canvas.width,this.canvas.height),r=e.width,n=e.height,i={pixels:new Uint8ClampedArray(e.data),width:r,height:n};return h.getHistogram(i)}},{key:"toRGB",value:function(){for(var t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height).data,e=[],r=0,n=t.length;r0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return[t=t||0===t?t:1,0,0,0,e=e||0===e?e:1,0,0,0,1]},scaleX:function(t){return this.scale(t)},scaleY:function(t){return this.scale(1,t)},translate:function(t,e){return[1,0,t,0,1,e,0,0,1]},rotate:function(t){var e=this.radian(t);return[Math.cos(e),-Math.sin(e),0,Math.sin(e),Math.cos(e),0,0,0,1]},rotate90:function(){return[0,-1,0,1,0,0,0,0,1]},rotate180:function(){return[-1,0,0,0,-1,0,0,0,1]},rotate270:function(){return[0,1,0,-1,0,0,0,0,1]},radian:function(t){return t*Math.PI/180},skew:function(t,e){var r=this.radian(t),n=this.radian(e);return[1,Math.tan(r),0,Math.tan(n),1,0,0,0,1]},skewX:function(t){var e=this.radian(t);return[1,Math.tan(e),0,0,1,0,0,0,1]},skewY:function(t){var e=this.radian(t);return[1,0,0,Math.tan(e),1,0,0,0,1]},shear1:function(t){return[1,-Math.tan(this.radian(t)/2),0,0,1,0,0,0,1]},shear2:function(t){return[1,0,0,Math.sin(this.radian(t)),1,0,0,0,1]}},_={CONSTANT:x,radian:function(t){return x.radian(t)},multiply:function(t,e){return[t[0]*e[0]+t[1]*e[1]+t[2]*e[2],t[3]*e[0]+t[4]*e[1]+t[5]*e[2],t[6]*e[0]+t[7]*e[1]+t[8]*e[2]]},identity:function(t){return this.multiply(x.identity(),t)},translate:function(t,e,r){return this.multiply(x.translate(t,e),r)},rotate:function(t,e){return this.multiply(x.rotate(t),e)},shear1:function(t,e){return this.multiply(x.shear1(t),e)},shear2:function(t,e){return this.multiply(x.shear2(t),e)},rotateShear:function(t,e){var r=e;return r=this.shear1(t,r),r=this.shear2(t,r),r=this.shear1(t,r)}};function w(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"center",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"center";return function(n,i){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=Q(n.pixels.length,n.width,n.height),l=n.width,s=n.height;"center"==e&&(e=Math.floor(l/2)),"center"==r&&(r=Math.floor(s/2));var u=_.CONSTANT.translate(-e,-r),c=_.CONSTANT.translate(e,r),h=_.CONSTANT.shear1(t),f=_.CONSTANT.shear2(t);st(function(t,e,r,i){var o=_.multiply(u,[r,i,1]);o=_.multiply(h,o).map(Math.round),o=_.multiply(f,o).map(Math.round),o=_.multiply(h,o).map(Math.round),o=_.multiply(c,o);var a=k(o,2),v=a[0],g=a[1];v<0||(g<0||v>l-1||g>s-1||ht(t,g*l+v<<2,n.pixels,e))})(a,function(){i(a)},o)}}function S(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:200,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=rt(t),i=(e=rt(e))/100,o=r;return ot(function(){var t=i*Math.ceil(.2126*$r+.7152*$g+.0722*$b)>=n?255:0;if(o)0==t&&($r=0,$g=0,$b=0);else{var e=Math.round(t);$r=e,$g=e,$b=e}},{$C:i,$scale:n,$hasColor:o})}function E(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([1,2,1,2,4,2,1,2,1],1/16*((t=rt(t))/100)))}function A(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([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*((t=rt(t))/100)))}function T(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return t=rt(t),ft([5,5,5,-3,0,-3,-3,-3,-3])}function R(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return t=rt(t),ft([5,-3,-3,5,0,-3,5,-3,-3])}function M(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([-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],(t=rt(t))/100))}function B(){return ft(q([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))}function H(){return ft(q([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))}function I(){return ft(q([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))}function F(){return ft([-1,-2,-1,0,0,0,1,2,1])}function O(){return ft([-1,0,1,-2,0,2,-1,0,1])}var P=[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],L=[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];function G(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function D(t,e,r){return r?function(t,e,r,n){if(isNaN(n)||n<1)return t;n|=0;var i,o,a,l,s,u,c,h,f,v,g,d,p,m,b,y,k,C,$,x,_,w,S,E,A=t.pixels,T=t.width,R=t.height,M=n+n+1,B=T-1,H=R-1,I=n+1,F=I*(I+1)/2,O=new G,D=O;for(a=1;a>U,0!=S?(S=255/S,A[u]=(h*V>>U)*S,A[u+1]=(f*V>>U)*S,A[u+2]=(v*V>>U)*S):A[u]=A[u+1]=A[u+2]=0,h-=d,f-=p,v-=m,g-=b,d-=j.r,p-=j.g,m-=j.b,b-=j.a,l=c+((l=i+n+1)>U,S>0?(S=255/S,A[l]=(h*V>>U)*S,A[l+1]=(f*V>>U)*S,A[l+2]=(v*V>>U)*S):A[l]=A[l+1]=A[l+2]=0,h-=d,f-=p,v-=m,g-=b,d-=j.r,p-=j.g,m-=j.b,b-=j.a,l=i+((l=o+I)0&&void 0!==arguments[0]?arguments[0]:10,e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return t=rt(t),function(r,n){n(D(r,t,e))}}function j(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:256;return ft(q([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/(t=rt(t))))}var z,V=p({},{crop:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments[2],n=arguments[3],i=Q(r*n*4,r,n);return function(o,a){for(var l=e,s=0;l0&&void 0!==arguments[0]?arguments[0]:0;return t=rt(t),t%=360,function(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(0==t)return e;if(90==t||270==t)var i=Q(e.pixels.length,e.height,e.width);else{if(180!=t)return w(t)(e,r,n);i=Q(e.pixels.length,e.width,e.height)}st(function(r,n,o,a){if(90==t)var l=o*i.width+(i.width-1-a)<<2;else 270==t?l=(i.height-1-o)*i.width+a<<2:180==t&&(l=(i.height-1-a)*i.width+(i.width-1-o)<<2);ht(i.pixels,l,e.pixels,n)})(e,function(){r(i)},n)}},rotateDegree:w,histogram:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"gray",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=[],n=0;n2&&void 0!==arguments[2]?arguments[2]:100,n=qt.parse(t),i=qt.parse(e),o=r;return ot(function(){var t=$r+$g+$b<=o?n:i;$r=t.r,$g=t.g,$b=t.b},{$threshold:o},{$darkColor:n,$lightColor:i})},brightness:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t=rt(t);var e=Math.floor(t/100*255);return ot(function(){$r+=e,$g+=e,$b+=e},{$C:e})},brownie:function(){var t=[.5997023498159715,.34553243048391263,-.2708298674538042,0,-.037703249837783157,.8609577587992641,.15059552388459913,0,.24113635128153335,-.07441037908422492,.44972182064877153,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},clip:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;t=rt(t);var e=2.55*Math.abs(t);return ot(function(){$r=$r>255-e?255:0,$g=$g>255-e?255:0,$b=$b>255-e?255:0},{$C:e})},contrast:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;t=rt(t);var e=Math.max((128+t)/128,0);return ot(function(){$r*=e,$g*=e,$b*=e},{$C:e})},gamma:function(){var t=rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);return ot(function(){$r=255*Math.pow($r/255,t),$g=255*Math.pow($g/255,t),$b=255*Math.pow($b/255,t)},{$C:t})},gradient:function(){var t=[].concat(Array.prototype.slice.call(arguments));1===t.length&&"string"==typeof t[0]&&(t=qt.convertMatchesArray(t[0]));var e=(t=t.map(function(t){return qt.matches(t).length?{type:"param",value:t}:{type:"scale",value:t}})).filter(function(t){return"scale"==t.type})[0];e=e?+e.value:256,t=t.filter(function(t){return"param"==t.type}).map(function(t){return t.value}).join(",");var r=qt.gradient(t,e).map(function(t){var e=qt.parse(t);return{r:e.r,g:e.g,b:e.b,a:e.a}});return ot(function(){var t=dt(Math.ceil(.2126*$r+.7152*$g+.0722*$b)),n=dt(Math.floor(t*(e/256))),i=r[n];$r=i.r,$g=i.g,$b=i.b,$a=dt(Math.floor(256*i.a))},{},{$colors:r,$scale:e})},grayscale:function(t){var e=(t=rt(t))/100;e>1&&(e=1);var r=[.2126+.7874*(1-e),.7152-.7152*(1-e),.0722-.0722*(1-e),0,.2126-.2126*(1-e),.7152+.2848*(1-e),.0722-.0722*(1-e),0,.2126-.2126*(1-e),.7152-.7152*(1-e),.0722+.9278*(1-e),0,0,0,0,1];return ot(function(){$r=r[0]*$r+r[1]*$g+r[2]*$b+r[3]*$a,$g=r[4]*$r+r[5]*$g+r[6]*$b+r[7]*$a,$b=r[8]*$r+r[9]*$g+r[10]*$b+r[11]*$a,$a=r[12]*$r+r[13]*$g+r[14]*$b+r[15]*$a},{$matrix:r})},hue:function(){return ot(function(){var t=Color.RGBtoHSV($r,$g,$b),e=t.h;e+=Math.abs($amount),e%=360,t.h=e;var r=Color.HSVtoRGB(t);$r=r.r,$g=r.g,$b=r.b},{$C:rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:360)})},invert:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,e=(t=rt(t))/100;return ot(function(){$r=(255-$r)*e,$g=(255-$g)*e,$b=(255-$b)*e},{$C:e})},kodachrome:function(){var t=[1.1285582396593525,-.3967382283601348,-.03992559172921793,0,-.16404339962244616,1.0835251566291304,-.05498805115633132,0,-.16786010706155763,-.5603416277695248,1.6014850761964943,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},matrix:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:0,s=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,u=arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,c=arguments.length>10&&void 0!==arguments[10]?arguments[10]:0,h=arguments.length>11&&void 0!==arguments[11]?arguments[11]:0,f=arguments.length>12&&void 0!==arguments[12]?arguments[12]:0,v=arguments.length>13&&void 0!==arguments[13]?arguments[13]:0,g=arguments.length>14&&void 0!==arguments[14]?arguments[14]:0,d=arguments.length>15&&void 0!==arguments[15]?arguments[15]:0,p=[t,e,r,n,i,o,a,l,s,u,c,h,f,v,g,d];return ot(function(){$r=p[0]*$r+p[1]*a+p[2]*e+p[3]*t,a=p[4]*$r+p[5]*a+p[6]*e+p[7]*t,e=p[8]*$r+p[9]*a+p[10]*e+p[11]*t,t=p[12]*$r+p[13]*a+p[14]*e+p[15]*t},{$matrix:p})},noise:function(){var t=rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);return ot(function(){var e=5*Math.abs(t),r=-e,n=e,i=Math.round(r+Math.random()*(n-r));$r+=i,$g+=i,$b+=i},{$C:t})},opacity:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,e=(t=rt(t))/100;return ot(function(){$a*=e},{$C:e})},polaroid:function(){var t=[1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},saturation:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100,e=(t=rt(t))/100,r=1-Math.abs(e),n=[r,0,0,0,0,r,0,0,0,0,r,0,0,0,0,r];return ot(function(){$r=n[0]*$r+n[1]*$g+n[2]*$b+n[3]*$a,$g=n[4]*$r+n[5]*$g+n[6]*$b+n[7]*$a,$b=n[8]*$r+n[9]*$g+n[10]*$b+n[11]*$a,$a=n[12]*$r+n[13]*$g+n[14]*$b+n[15]*$a},{$matrix:n})},sepia:function(){var t=rt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);t>1&&(t=1);var e=[.393+.607*(1-t),.769-.769*(1-t),.189-.189*(1-t),0,.349-.349*(1-t),.686+.314*(1-t),.168-.168*(1-t),0,.272-.272*(1-t),.534-.534*(1-t),.131+.869*(1-t),0,0,0,0,1];return ot(function(){$r=e[0]*$r+e[1]*$g+e[2]*$b+e[3]*$a,$g=e[4]*$r+e[5]*$g+e[6]*$b+e[7]*$a,$b=e[8]*$r+e[9]*$g+e[10]*$b+e[11]*$a,$a=e[12]*$r+e[13]*$g+e[14]*$b+e[15]*$a},{$matrix:e})},shade:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=rt(t),i=rt(e),o=rt(r);return ot(function(){$r*=n,$g*=i,$b*=o},{$redValue:n,$greenValue:i,$blueValue:o})},shift:function(){var t=[1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1];return ot(function(){$r=t[0]*$r+t[1]*$g+t[2]*$b+t[3]*$a,$g=t[4]*$r+t[5]*$g+t[6]*$b+t[7]*$a,$b=t[8]*$r+t[9]*$g+t[10]*$b+t[11]*$a,$a=t[12]*$r+t[13]*$g+t[14]*$b+t[15]*$a},{$matrix:t})},solarize:function(t,e,r){var n=rt(t),i=rt(e),o=rt(r);return ot(function(){$r=$r0&&void 0!==arguments[0]?arguments[0]:200,arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,!1)},"threshold-color":S,tint:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=parseParamNumber(t),i=parseParamNumber(e),o=parseParamNumber(r);return ot(function(){$r+=(255-$r)*n,$g+=(255-$g)*i,$b+=(255-$b)*o},{$redTint:n,$greenTint:i,$blueTint:o})}},{blur:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:3;return ft(ut(t=rt(t)))},emboss:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:4;return ft([-2*(t=rt(t)),-t,0,-t,1,t,0,t,2*t])},gaussianBlur:E,"gaussian-blur":E,gaussianBlur5x:A,"gaussian-blur-5x":A,grayscale2:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([.3,.3,.3,0,0,.59,.59,.59,0,0,.11,.11,.11,0,0,0,0,0,0,0,0,0,0,0,0],(t=rt(t))/100))},normal:function(){return ft([0,0,0,0,1,0,0,0,0])},kirschHorizontal:T,"kirsch-horizontal":T,kirschVertical:R,"kirsch-vertical":R,laplacian:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([-1,-1,-1,-1,8,-1,-1,-1,-1],(t=rt(t))/100))},laplacian5x:M,"laplacian-5x":M,motionBlur:B,"motion-blur":B,motionBlur2:H,"motion-blur-2":H,motionBlur3:I,"motion-blur-3":I,negative:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([-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],(t=rt(t))/100))},sepia2:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([.393,.349,.272,0,0,.769,.686,.534,0,0,.189,.168,.131,0,0,0,0,0,0,0,0,0,0,0,0],(t=rt(t))/100))},sharpen:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([0,-1,0,-1,5,-1,0,-1,0],(t=rt(t))/100))},sobelHorizontal:F,"sobel-horizontal":F,sobelVertical:O,"sobel-vertical":O,stackBlur:N,"stack-blur":N,transparency:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return ft(q([1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,.3,0,0,0,0,0,1],(t=rt(t))/100))},unsharpMasking:j,"unsharp-masking":j},{kirsch:function(){return pt("kirsch-horizontal kirsch-vertical")},sobel:function(){return pt("sobel-horizontal sobel-vertical")},vintage:function(){return pt("brightness(15) saturation(-20) gamma(1.8)")}}),U=0,X=(d(z={partial:kt,multi:bt,merge:yt,weight:q,repeat:Y,colorMatrix:function(t,e,r){var n=t[e],i=t[e+1],o=t[e+2],a=t[e+3];ct(t,e,r[0]*n+r[1]*i+r[2]*o+r[3]*a,r[4]*n+r[5]*i+r[6]*o+r[7]*a,r[8]*n+r[9]*i+r[10]*o+r[11]*a,r[12]*n+r[13]*i+r[14]*o+r[15]*a)},each:Z,eachXY:J,createRandomCount:function(){return[9,16,25,36,49,64,81,100].sort(function(t,e){return.5-Math.random()})[0]},createRandRange:function(t,e,r){for(var n=[],i=1;i<=r;i++){var o=Math.random()*(e-t)+t,a=Math.floor(10*Math.random())%2==0?-1:1;n.push(a*o)}n.sort();var l=Math.floor(r>>1),s=n[l];return n[l]=n[0],n[0]=s,n},createBitmap:Q,createBlurMatrix:ut,pack:function(t){return function(e,r){Z(e.pixels.length,function(r,n){t(e.pixels,r,n,e.pixels[r],e.pixels[r+1],e.pixels[r+2],e.pixels[r+3])},function(){r(e)})}},packXY:st,pixel:ot,getBitmap:tt,putBitmap:et,radian:function(t){return _.CONSTANT.radian(t)},convolution:ft,parseParamNumber:rt,filter:pt,clamp:dt,fillColor:ct,fillPixelColor:ht},"multi",bt),d(z,"merge",yt),d(z,"matches",vt),d(z,"parseFilter",gt),d(z,"partial",kt),z),W=X;function q(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return t.map(function(t){return t*e})}function Y(t,e){for(var r=new Array(e),n=0;n1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,n=arguments[3],i=arguments[4],o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1e4,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"full",l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:50,s=e,u=function(t){setTimeout(t,0)};function c(){for(var e=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:50,e=[].concat(C(Array(t))).map(function(t){return"cri = ri + i * s; if (cri >= mx) return {currentRunIndex: cri, i: null}; c(cri); i++;"}).join("\n");return new Function("ri","i","s","mx","c","\n let cri = ri;\n \n "+e+"\n \n return {currentRunIndex: cri, i: i} \n ")}(l),a=s,h={},f=0;f=t)return void i();u?u(c):c()}(a)}"requestAnimationFrame"==a&&(u=requestAnimationFrame,o=1e3),"full"==a&&(u=null,o=t),c()}function Z(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};K(t,0,4,function(t){e(t,t>>2)},function(){r()},n.functionDumpCount,n.frameTimer,n.loopCount)}function J(t,e,r,n){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};K(t,0,4,function(t){var n=t>>2;r(t,n%e,Math.floor(n/e))},function(){n()},i.functionDumpCount,i.frameTimer,i.loopCount)}function Q(t,e,r){return{pixels:new Uint8ClampedArray(t),width:e,height:r}}function tt(t,e){return h.getBitmap(t,e)}function et(t,e,r){return h.putBitmap(t,e,r)}function rt(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}var nt=/(([\w_\-]+)(\(([^\)]*)\))?)+/gi;function it(t){var e,r,n,i,o,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return e={},r=[{callback:t,context:a,rootContext:l}].map(function(t){var r=[];Object.keys(t.context).forEach(function(t,e){r[t]="n$"+U+++t+"$"}),Object.keys(t.rootContext).forEach(function(n,i){r[n]="r$"+U+++n+"$",e[r[n]]=t.rootContext[n]});var n=Object.keys(t.context).filter(function(e){return"number"!=typeof t.context[e]&&"string"!=typeof t.context[e]&&(!Array.isArray(t.context[e])||"number"!=typeof t.context[e][0]&&"string"!=typeof t.context[e][0])}).map(function(e,n){return[r[e],JSON.stringify(t.context[e])].join(" = ")}),i=t.callback.toString().split("{");return i.shift(),(i=(i=i.join("{")).split("}")).pop(),i=i.join("}"),Object.keys(r).forEach(function(e){var n=r[e];"number"==typeof t.context[e]||"string"==typeof t.context[e]?i=i.replace(new RegExp("\\"+e,"g"),t.context[e]):!Array.isArray(t.context[e])||"number"!=typeof t.context[e][0]&&"string"!=typeof t.context[e][0]?i=i.replace(new RegExp("\\"+e,"g"),n):t.context[e].forEach(function(t,r){i=i.replace(new RegExp("\\"+e+"\\["+r+"\\]","g"),t)})}),{preCallbackString:i,preContext:n}}),n=r.map(function(t,e){return t.preContext.length?"const "+t.preContext+";":""}).join("\n\n"),i=r.map(function(t){return t.preCallbackString}).join("\n\n"),(o=new Function("$pixels","$pixelIndex","$clamp","$Color"," \n let $r = $pixels[$pixelIndex], $g = $pixels[$pixelIndex+1], $b = $pixels[$pixelIndex+2], $a = $pixels[$pixelIndex+3];\n\n "+n+"\n\n "+i+"\n \n $pixels[$pixelIndex] = $r\n $pixels[$pixelIndex+1] = $g \n $pixels[$pixelIndex+2] = $b \n $pixels[$pixelIndex+3] = $a \n ")).$preCallbackString=i,o.$preContext=n,o.rootContextObject=e,o}function ot(t){var e=it(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}),r=function(t,e){};return r.userFunction=e,r}var at=[0,1,2,3];function lt(t,e,r){at.forEach(function(n){var i=t[e+n];t[e+n]=t[r+n],t[r+n]=i})}function st(t){return function(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};J(e.pixels.length,e.width,function(r,n,i){t(e.pixels,r,n,i)},function(){r(e)},n)}}function ut(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:3,e=Math.pow(t,2);return Y(1/e,e)}function ct(t,e,r,n,i,o){if(3==arguments.length){var a=arguments[2];r=a.r,n=a.g,i=a.b,o=a.a}"number"==typeof r&&(t[e]=r),"number"==typeof n&&(t[e+1]=n),"number"==typeof i&&(t[e+2]=i),"number"==typeof o&&(t[e+3]=o)}function ht(t,e,r,n){ct(t,e,r[n],r[n+1],r[n+2],r[n+3])}function ft(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=function(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:255;return e=t.map(function(t,e){return[]}),t.forEach(function(t,i){if(0!=t){var o=e[i];for(i=r;i<=n;i++)o[i]=t*i}}),e}(t);return function(n,i){var o=Math.round(Math.sqrt(t.length)),a=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=t.width+e,n=t.height+e;return{pixels:new Uint8ClampedArray(r*n*4),width:r,height:n}}(n,2*o);!function(t,e,r,n){for(var i=e.pixels.length/4,o=0,a=0,l=0,s=0,u=0,c=0,h=0;ht.width||a>t.height||(u=s*e.width+l<<2,c=a*t.width+o<<2,t.pixels[c]=e.pixels[u],t.pixels[c+1]=e.pixels[u+1],t.pixels[c+2]=e.pixels[u+2],t.pixels[c+3]=e.pixels[u+3])}(a,n,o,o);for(var l=Q(a.pixels.length,a.width,a.height),s=Q(n.pixels.length,n.width,n.height),u=function(t,e,r,n,i){var o=Math.round(Math.sqrt(t.length)),a=Math.floor(o/2),l=i?1:0,s="let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ",u=[],c=[],h=[],f=[];t.forEach(function(t,e){var n=Math.floor(e/o)-a,i=e%o-a;0!=t&&(u.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4]]"),c.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4 + 1]]"),h.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4 + 2]]"),f.push("$t["+e+"][$sp[(($sy + ("+n+")) * "+r+" + ($sx + ("+i+"))) * 4 + 3]]"))}),s+="r = "+u.join(" + ")+"; g = "+c.join(" + ")+"; b = "+h.join(" + ")+"; a = "+f.join(" + ")+";",s+="$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + ("+l+")*(255-a); ";var v=new Function("$dp","$sp","$di","$sx","$sy","$t",s);return function(t,r,n,i,o){v(t,r,n,i,o,e)}}(t,r,a.width,a.height,e),c=n.pixels.length/4,h=0;h>2,o=0,a=0,l=0,s=0,u=0,c=0,h=0;ht.width||a>t.height||(u=a*t.width+o<<2,c=s*e.width+l<<2,e.pixels[c]=t.pixels[u],e.pixels[c+1]=t.pixels[u+1],e.pixels[c+2]=t.pixels[u+2],e.pixels[c+3]=t.pixels[u+3])}(l,s,o,o),i(s)}}function vt(t){var e=qt.convertMatches(t),r=e.str.match(nt),n=[];if(!r)return n;var i={next:0};return n=(n=r.map(function(t){return{filter:t,origin:qt.reverseMatches(t,e.matches)}})).map(function(e){var r=t.indexOf(e.origin,i.next);return e.startIndex=r,e.endIndex=r+e.origin.length,e.arr=gt(e.origin),i.next=e.endIndex,e}).filter(function(t){return!!t.arr.length})}function gt(t){var e=qt.convertMatches(t),r=e.str.match(nt);if(!r[0])return[];var n=r[0].split("("),i=n.shift(),o=[];return n.length&&(o=n.shift().split(")")[0].split(",").map(function(t){return qt.reverseMatches(t,e.matches)})),[i].concat(C(o)).map(qt.trim)}function dt(t){return Math.min(255,t)}function pt(t){return yt(vt(t).map(function(t){return t.arr}))}function mt(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=[],r=[],n=0,i=t.length;n2&&void 0!==arguments[2]?arguments[2]:{},o=t,a=0;function l(){e[a].call(null,o,function(t){o=t,function(){if(++a>=n)return void r(o);l()}()},i)}l()}}function yt(t){return bt.apply(void 0,C(t))}function kt(t){for(var e=null,r=arguments.length,n=Array(r>1?r-1:0),i=1;i2&&void 0!==arguments[2]?arguments[2]:{};e(tt(r,t),function(e){n(et(r,e,t))},i)}}function Ct(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}function $t(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return t.map(function(t){return t*e})}var xt=0;function _t(t){return[].concat(Array.prototype.slice.call(arguments))}function wt(t){return{type:"convolution",length:t.length,content:t}}function St(t,e){return{type:"shader",index:xt,options:e,content:(r=t,n=xt++,"\n if (u_filterIndex == "+n+".0) {\n "+r+"\n }\n ")};var r,n}function Et(t){return"\n \n if (u_kernelSelect == "+t+".0) {\n vec4 colorSum = "+(e=t,r=Math.sqrt(e),n=Math.floor(r/2),[].concat(C(Array(e))).map(function(t,i){var o=Math.floor(i/r)-n;return"texture(u_image, v_texCoord + onePixel * vec2("+(i%r-n)+", "+o+")) * u_kernel"+e+"["+i+"]"}).join(" + \n"))+"; \n\n outColor = vec4((colorSum / u_kernel"+t+"Weight).rgb, 1);\n \n }\n ";var e,r,n}function At(t){return"vec4("+(t=[t.r/255,t.g/255,t.b/255,t.a||0].map(Tt))+")"}function Tt(t){return t==Math.floor(t)?t+".0":t}function Rt(){return wt($t([1,2,1,2,4,2,1,2,1],Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1)*(1/16)))}function Mt(){return wt([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])}function Bt(){return wt([5,5,5,-3,0,-3,-3,-3,-3])}function Ht(){return wt([5,-3,-3,5,0,-3,5,-3,-3])}function It(){return wt([-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])}function Ft(){return wt([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])}function Ot(){return wt([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])}function Pt(){return wt([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])}function Lt(){return wt([-1,-2,-1,0,0,0,1,2,1])}function Gt(){return wt([-1,0,1,-2,0,2,-1,0,1])}function Dt(){return wt($t([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/256))}function Nt(){var t=[arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,arguments.length>7&&void 0!==arguments[7]?arguments[7]:0,arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,arguments.length>10&&void 0!==arguments[10]?arguments[10]:0,arguments.length>11&&void 0!==arguments[11]?arguments[11]:0,arguments.length>12&&void 0!==arguments[12]?arguments[12]:0,arguments.length>13&&void 0!==arguments[13]?arguments[13]:0,arguments.length>14&&void 0!==arguments[14]?arguments[14]:0,arguments.length>15&&void 0!==arguments[15]?arguments[15]:0].map(Tt);return St("\n\n outColor = vec4(\n "+t[0]+" * pixelColor.r + "+t[1]+" * pixelColor.g + "+t[2]+" * pixelColor.b + "+t[3]+" * pixelColor.a,\n "+t[4]+" * pixelColor.r + "+t[5]+" * pixelColor.g + "+t[6]+" * pixelColor.b + "+t[7]+" * pixelColor.a,\n "+t[8]+" * pixelColor.r + "+t[9]+" * pixelColor.g + "+t[10]+" * pixelColor.b + "+t[11]+" * pixelColor.a,\n "+t[12]+" * pixelColor.r + "+t[13]+" * pixelColor.g + "+t[14]+" * pixelColor.b + "+t[15]+" * pixelColor.a\n ); \n ")}function jt(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return St("\n float c = ( (pixelColor.r * 0.2126 + pixelColor.g * 0.7152 + pixelColor.b * 0.0722) ) >= "+(t=Tt(Ct(t)))+" ? 1.0 : 0.0;\n\n outColor = vec4(c, c, c, pixelColor.a);\n ")}var zt=p({},{blur:function(){return wt([1,1,1,1,1,1,1,1,1])},normal:function(){return wt([0,0,0,0,1,0,0,0,0])},emboss:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:4;return wt([-2*(t=Ct(t)),-t,0,-t,1,t,0,t,2*t])},gaussianBlur:Rt,"gaussian-blur":Rt,gaussianBlur5x:Mt,"gaussian-blur-5x":Mt,grayscale2:function(){return wt([.3,.3,.3,0,0,.59,.59,.59,0,0,.11,.11,.11,0,0,0,0,0,0,0,0,0,0,0,0])},kirschHorizontal:Bt,"kirsch-horizontal":Bt,kirschVertical:Ht,"kirsch-vertical":Ht,laplacian:function(){return wt([-1,-1,-1,-1,8,-1,-1,-1,-1])},laplacian5x:It,"laplacian-5x":It,motionBlur:Ft,"motion-blur":Ft,motionBlur2:Ot,"motion-blur-2":Ot,motionBlur3:Pt,"motion-blur-3":Pt,negative:function(){return wt([-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])},sepia2:function(){return wt([.393,.349,.272,0,0,.769,.686,.534,0,0,.189,.168,.131,0,0,0,0,0,0,0,0,0,0,0,0])},sharpen:function(){return wt([0,-1,0,-1,5,-1,0,-1,0])},sobelHorizontal:Lt,"sobel-horizontal":Lt,sobelVertical:Gt,"sobel-vertical":Gt,transparency:function(){return wt([1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,.3,0,0,0,0,0,1])},unsharpMasking:Dt,"unsharp-masking":Dt},{bitonal:function(t,e){var r=Tt(arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5),n=At(qt.parse(t));return St("\n if ((pixelColor.r + pixelColor.g + pixelColor.b) > "+r+") {\n outColor = vec4("+At(qt.parse(e))+".rgb, pixelColor.a);\n } else {\n outColor = vec4("+n+".rgb, pixelColor.a);\n }\n ")},brightness:function(){return St("\n outColor = pixelColor + ("+Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+");\n ")},brownie:function(){return Nt(.5997023498159715,.34553243048391263,-.2708298674538042,0,-.037703249837783157,.8609577587992641,.15059552388459913,0,.24113635128153335,-.07441037908422492,.44972182064877153,0,0,0,0,1)},clip:function(){var t=Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:0));return St("\n outColor = vec4(\n (pixelColor.r > 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.g > 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.b > 1.0 - "+t+") ? 1.0 : 0.0,\n pixelColor.a \n );\n ")},chaos:function(){return St("\n vec2 st = pixelColor.st;\n st *= "+Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:10))+";\n \n vec2 ipos = floor(st); // get the integer coords\n\n vec3 color = vec3(random( ipos ));\n\n outColor = vec4(color, pixelColor.a);\n ")},contrast:function(){return St("\n outColor = pixelColor * "+Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+";\n ")},gamma:function(){var t=Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1));return St("\n outColor = vec4(pow(pixelColor.r, "+t+"), pow(pixelColor.g, "+t+"), pow(pixelColor.b, "+t+"), pixelColor.a );\n ")},gradient:function(){var t=[].concat(Array.prototype.slice.call(arguments));1===t.length&&"string"==typeof t[0]&&(t=qt.convertMatchesArray(t[0])),t=t.map(function(t){return t}).join(", ");var e=qt.parseGradient(t);e[0][1]=0,e[e.length-1][1]=1;for(var r=[],n=0,i=(e=e.map(function(t){var e=qt.parse(t[0]);return[{r:e.r,g:e.g,b:e.b,a:e.a},t[1]]})).length;n0&&void 0!==arguments[0]?arguments[0]:1);return t>1&&(t=1),Nt(.2126+.7874*(1-t),.7152-.7152*(1-t),.0722-.0722*(1-t),0,.2126-.2126*(1-t),.7152+.2848*(1-t),.0722-.0722*(1-t),0,.2126-.2126*(1-t),.7152-.7152*(1-t),.0722+.9278*(1-t),0,0,0,0,1)},hue:function(){return St("\n vec3 hsv = rgb2hsv(pixelColor.rgb);\n hsv.x += "+Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+";\n outColor = vec4(hsv2rgb(hsv).rgb, pixelColor.a);\n ")},invert:function(){var t=Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1));return St("\n outColor = vec4(\n (1.0 - pixelColor.r) * "+t+",\n (1.0 - pixelColor.g) * "+t+",\n (1.0 - pixelColor.b) * "+t+",\n pixelColor.a\n );\n ")},kodachrome:function(){return Nt(1.1285582396593525,-.3967382283601348,-.03992559172921793,0,-.16404339962244616,1.0835251566291304,-.05498805115633132,0,-.16786010706155763,-.5603416277695248,1.6014850761964943,0,0,0,0,1)},matrix:Nt,noise:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=Math.abs(Ct(t)),r=Tt(-e);return St("\n float rnd = "+r+" + random( pixelColor.st ) * ("+Tt(e)+" - "+r+");\n\n outColor = vec4(pixelColor.rgb + rnd, 1.0);\n ")},opacity:function(){return St("\n outColor = vec4(pixelColor.rgb, pixelColor.a * "+Tt(Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1))+");\n ")},polaroid:function(){return Nt(1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1)},saturation:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=1-Math.abs(Ct(t));return Nt(e,0,0,0,0,e,0,0,0,0,e,0,0,0,0,e)},sepia:function(){var t=Ct(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1);return t>1&&(t=1),Nt(.393+.607*(1-t),.769-.769*(1-t),.189-.189*(1-t),0,.349-.349*(1-t),.686+.314*(1-t),.168-.168*(1-t),0,.272-.272*(1-t),.534-.534*(1-t),.131+.869*(1-t),0,0,0,0,1)},shade:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return St("\n outColor = vec4(\n pixelColor.r * "+Tt(Ct(t)/255)+",\n pixelColor.g * "+Tt(Ct(e)/255)+",\n pixelColor.b * "+Tt(Ct(r)/255)+",\n pixelColor.a\n );\n ")},shift:function(){return Nt(1.438,-.062,-.062,0,-.122,1.378,-.122,0,-.016,-.016,1.483,0,0,0,0,1)},solarize:function(t,e,r){return St("\n outColor = vec4(\n (pixelColor.r < "+Tt(Ct(t))+") ? 1.0 - pixelColor.r: pixelColor.r,\n (pixelColor.g < "+Tt(Ct(e))+") ? 1.0 - pixelColor.g: pixelColor.g,\n (pixelColor.b < "+Tt(Ct(r))+") ? 1.0 - pixelColor.b: pixelColor.b,\n pixelColor.a\n );\n ")},technicolor:function(){return Nt(1.9125277891456083,-.8545344976951645,-.09155508482755585,0,-.3087833385928097,1.7658908555458428,-.10601743074722245,0,-.231103377548616,-.7501899197440212,1.847597816108189,0,0,0,0,1)},threshold:function(){return jt(arguments.length>0&&void 0!==arguments[0]?arguments[0]:200,arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,!1)},"threshold-color":jt,tint:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return St("\n outColor = vec4(\n pixelColor.r += (1 - pixelColor.r) * "+Ct(t)+",\n pixelColor.g += (1 - pixelColor.g) * "+Ct(e)+",\n pixelColor.b += (1 - pixelColor.b) * "+Ct(r)+",\n pixelColor.a\n );\n ")}},{kirsch:function(){return _t("kirsch-horizontal kirsch-vertical")},sobel:function(){return _t("sobel-horizontal sobel-vertical")},vintage:function(){return _t("brightness(0.15) saturation(-0.2) gamma(1.8)")}}),Vt=0,Ut={GLCanvas:function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{width:"400px",height:"300px"};v(this,t),this.img=e.img,this.width=parseFloat(this.img.width||e.width||"400px"),this.height=parseFloat(this.img.height||e.height||"300px"),this.init()}return g(t,[{key:"resize",value:function(){this.canvas.width=this.width,this.canvas.height=this.height,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px",this.viewport()}},{key:"clear",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=this.gl;i.clearColor(t,e,r,n),i.clear(i.COLOR_BUFFER_BIT|i.DEPTH_BUFFER_BIT)}},{key:"viewport",value:function(t,e,r,n){var i=this.gl;i.viewport(t||0,e||0,r||i.canvas.width,n||i.canvas.height)}},{key:"initCanvas",value:function(t,e){if(this.canvas=document.createElement("canvas"),this.gl=this.canvas.getContext("webgl2"),!this.gl)throw new Error("you need webgl2 support");this.program=this.createProgram(t,e),this.resize(),this.initBuffer()}},{key:"draw",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"TRIANGLES",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:6,n=this.gl;n.drawArrays(n[t],e,r)}},{key:"triangles",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6;this.draw("TRIANGLES",t,e)}},{key:"uniform2f",value:function(){for(var t,e=arguments.length,r=Array(e),n=0;n2&&void 0!==arguments[2]?arguments[2]:"STATIC_DRAW",n=this.gl;this.buffers[t]||(this.buffers[t]=n.createBuffer()),n.bindBuffer(n.ARRAY_BUFFER,this.buffers[t]),e&&n.bufferData(n.ARRAY_BUFFER,new Float32Array(e),n[r])}},{key:"enable",value:function(t){this.gl.enableVertexAttribArray(this.locations[t])}},{key:"location",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"attribute";"attribute"===e?this.locations[t]=this.gl.getAttribLocation(this.program,t):"uniform"===e&&(this.locations[t]=this.gl.getUniformLocation(this.program,t))}},{key:"a",value:function(t){return this.location(t)}},{key:"u",value:function(t){return this.location(t,"uniform")}},{key:"pointer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"FLOAT",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2,n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,a=this.gl;a.vertexAttribPointer(this.locations[t],r,a[e],n,i,o)}},{key:"bufferData",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=this.gl;e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW)}},{key:"isPowerOf2",value:function(t){return 0==(t&t-1)}},{key:"bindTexture",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"RGBA",i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"RGBA",o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"UNSIGNED_BYTE",a=this.gl;1!=arguments.length?(this.textures[t]||(this.textures[t]=a.createTexture()),this.textureIndex[t]=Vt++,a.bindTexture(a.TEXTURE_2D,this.textures[t]),this.setTextureParameter(),a.texImage2D(a.TEXTURE_2D,r,a[n],a[i],a[o],e.newImage||e)):a.bindTexture(a.TEXTURE_2D,this.textures[t])}},{key:"bindColorTexture",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:256,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"RGBA",a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"RGBA",l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:"UNSIGNED_BYTE",s=this.gl;this.textures[t]||(this.textures[t]=s.createTexture()),this.textureIndex[t]=Vt++,s.bindTexture(s.TEXTURE_2D,this.textures[t]),this.setTextureParameter(),s.texImage2D(s.TEXTURE_2D,i,s[o],r,n,0,s[a],s[l],new Uint8Array(e))}},{key:"bindEmptyTexture",value:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"RGBA",o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"RGBA",a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"UNSIGNED_BYTE",l=this.gl;this.textures[t]||(this.textures[t]=l.createTexture()),this.textureIndex[t]=Vt++,l.bindTexture(l.TEXTURE_2D,this.textures[t]),this.setTextureParameter();l.texImage2D(l.TEXTURE_2D,n,l[i],e,r,0,l[o],l[a],null)}},{key:"setTextureParameter",value:function(){var t=this.gl;t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST)}},{key:"bindFrameBufferWithTexture",value:function(t,e,r,n){this.bindEmptyTexture(e,r,n),this.bindFrameBuffer(t,e)}},{key:"enumToString",value:function(t){var e=this.gl;if(0===t)return"NONE";for(var r in e)if(e[r]===t)return r;return"0x"+t.toString(16)}},{key:"bindFrameBuffer",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,r=this.gl;if(1!==arguments.length){this.framebuffers[t]||(this.framebuffers[t]=r.createFramebuffer()),r.bindFramebuffer(r.FRAMEBUFFER,this.framebuffers[t]);var n=r.COLOR_ATTACHMENT0;r.framebufferTexture2D(r.FRAMEBUFFER,n,r.TEXTURE_2D,this.textures[e],0);r.checkFramebufferStatus(r.FRAMEBUFFER);r.FRAMEBUFFER_COMPLETE}else r.bindFramebuffer(r.FRAMEBUFFER,null==t?null:this.framebuffers[t])}},{key:"bindVA",value:function(){var t=this.gl;this.vao||(this.vao=t.createVertexArray()),t.bindVertexArray(this.vao)}},{key:"bindAttr",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"STATIC_DRAW",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2;this.bindBuffer(t,e,r),this.enable(t),this.pointer(t,"FLOAT",n)}},{key:"initBuffer",value:function(){var t=this.canvas,e=t.width,r=t.height;this.a("a_position"),this.a("a_texCoord"),this.u("u_resolution"),this.u("u_image"),this.u("u_flipY"),this.u("u_kernelSelect"),this.u("u_filterIndex"),this.u("u_kernel9[0]"),this.u("u_kernel9Weight"),this.u("u_kernel25[0]"),this.u("u_kernel25Weight"),this.u("u_kernel49[0]"),this.u("u_kernel49Weight"),this.u("u_kernel81[0]"),this.u("u_kernel81Weight"),this.bindVA(),this.bindAttr("a_position",[0,0,e,0,0,r,0,r,e,0,e,r],"STATIC_DRAW",2),this.bindAttr("a_texCoord",[0,0,1,0,0,1,0,1,1,0,1,1],"STATIC_DRAW",2),this.bindTexture("u_image",this.img),this.bindFrameBufferWithTexture("frame_buffer_0","img_texture_0",e,r),this.bindFrameBufferWithTexture("frame_buffer_1","img_texture_1",e,r)}},{key:"activeTexture",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=this.gl;e.activeTexture(e.TEXTURE0+t)}},{key:"drawFilter",value:function(){var t=this,e=this.gl;this.resize(),this.clear(),this.useProgram(),this.bindVA(),this.activeTexture(0),this.bindTexture("u_image"),this.uniform1i("u_image",0),this.uniform1f("u_flipY",1);var r=e.canvas,n=r.width,i=r.height;this.eachFilter(function(e,r){t.bindFrameBuffer("frame_buffer_"+r%2),t.uniform2f("u_resolution",n,i),t.viewport(0,0,n,i),t.effectFilter(e),t.bindTexture("img_texture_"+r%2)}),this.uniform1f("u_flipY",-1),this.bindFrameBuffer(null),this.uniform2f("u_resolution",n,i),this.viewport(0,0,n,i),this.clear(),this.effectFilter("normal")}},{key:"effectFilter",value:function(t){"string"==typeof t&&(t=(zt[t]||zt.normal).call(zt)),"convolution"==t.type?(this.uniform1f("u_kernelSelect",t.length),this.uniform1f("u_filterIndex",-1),this.uniform1fv("u_kernel"+t.length+"[0]",t.content),this.uniform1f("u_kernel"+t.length+"Weight",this.computeKernelWeight(t.content))):(this.uniform1f("u_kernelSelect",-1),this.uniform1f("u_filterIndex",t.index)),this.triangles(0,6)}},{key:"computeKernelWeight",value:function(t){var e=t.reduce(function(t,e){return t+e});return e<=0?1:e}},{key:"createProgram",value:function(t,e){var r=this.gl,n=r.createProgram();if(this.vertexShader=this.createVertexShader(t),this.fragmentShader=this.createFragmentShader(e),r.attachShader(n,this.vertexShader),r.attachShader(n,this.fragmentShader),r.linkProgram(n),r.getProgramParameter(n,r.LINK_STATUS))return n;console.error(r.getProgramInfoLog(n)),r.deleteProgram(n)}},{key:"createShader",value:function(t,e){var r=this.gl,n=r.createShader(t);if(r.shaderSource(n,e),r.compileShader(n),r.getShaderParameter(n,r.COMPILE_STATUS))return n;console.error(r.getShaderInfoLog(n)),r.deleteShader(n)}},{key:"createVertexShader",value:function(t){var e=this.gl;return this.createShader(e.VERTEX_SHADER,t)}},{key:"createFragmentShader",value:function(t){var e=this.gl;return this.createShader(e.FRAGMENT_SHADER,t)}},{key:"eachFilter",value:function(t){this.filterList.forEach(t)}},{key:"init",value:function(){this.locations={},this.buffers={},this.framebuffers={},this.textures={},this.textureIndex={},this.hasTexParameter={}}},{key:"destroy",value:function(){var t=this.gl;this.init(),t.deleteProgram(this.program)}},{key:"filter",value:function(t,e){var r,n,i;this.filterList=t,this.initCanvas("#version 300 es \n\n in vec2 a_position;\n in vec2 a_texCoord; \n\n uniform vec2 u_resolution;\n uniform float u_flipY;\n\n out vec2 v_texCoord; \n\n void main() {\n vec2 zeroToOne = a_position / u_resolution;\n\n vec2 zeroToTwo = zeroToOne * 2.0;\n\n vec2 clipSpace = zeroToTwo - 1.0;\n\n gl_Position = vec4(clipSpace * vec2(1, u_flipY), 0, 1);\n\n v_texCoord = a_texCoord;\n\n }\n ",(r=this.filterList,n=r.filter(function(t){return"shader"==t.type}).map(function(t){return t.content}).join("\n\n"),i={9:!0},r.filter(function(t){return"convolution"==t.type}).forEach(function(t){i[t.length]=!0}),"#version 300 es\n\n precision highp int;\n precision mediump float;\n \n uniform sampler2D u_image;\n\n // 3 is 3x3 matrix kernel \n uniform float u_kernelSelect;\n uniform float u_filterIndex;\n\n uniform float u_kernel9[9];\n uniform float u_kernel9Weight;\n uniform float u_kernel25[25];\n uniform float u_kernel25Weight;\n uniform float u_kernel49[49];\n uniform float u_kernel49Weight;\n uniform float u_kernel81[81];\n uniform float u_kernel81Weight; \n\n in vec2 v_texCoord;\n \n out vec4 outColor;\n\n float random (vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);\n } \n\n // \n vec3 rgb2hsv(vec3 c)\n {\n vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n vec4 p = c.g < c.b ? vec4(c.bg, K.wz) : vec4(c.gb, K.xy);\n vec4 q = c.r < p.x ? vec4(p.xyw, c.r) : vec4(c.r, p.yzx);\n\n float d = q.x - min(q.w, q.y);\n float e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n }\n\n vec3 hsv2rgb(vec3 c)\n {\n vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec4 pixelColor = texture(u_image, v_texCoord);\n vec2 onePixel = vec2(1) / vec2(textureSize(u_image, 0)); \n\n "+n+"\n\n "+Object.keys(i).map(function(t){return Et(+t)}).join("\n")+"\n\n }")),this.drawFilter(),"function"==typeof e&&e(this)}}]),t}()};var Xt=p({},Ut,{filter:function(t,e,r,n){var i=new Ut.GLCanvas({width:n.width||t.width,height:n.height||t.height,img:t});i.filter(function t(e){var r=[];"string"==typeof e?r=vt(e):Array.isArray(e)&&(r=e);var n=[];r.forEach(function(e){var r=e.arr[0];if(zt[r]){var i=function(t){var e=t.arr[0],r=zt[e],n=t.arr;return n.shift(),r.apply(this,n)}(e);"convolution"==i.type||"shader"==i.type?n.push(i):i.forEach(function(e){n=n.concat(t(e))})}});return n}(e),function(){"function"==typeof r&&r(i)})}}),Wt=/(#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi,qt={matches:function(t){var e=t.match(Wt),n=[];if(!e)return n;for(var i=0,o=e.length;i-1||e[i].indexOf("rgb")>-1||e[i].indexOf("hsl")>-1)n.push({color:e[i]});else{var a=r.getColorByName(e[i]);a&&n.push({color:e[i],nameColor:a})}var l={next:0};return n.forEach(function(e){var r=t.indexOf(e.color,l.next);e.startIndex=r,e.endIndex=r+e.color.length,l.next=e.endIndex}),n},convertMatches:function(t){var e=this.matches(t);return e.forEach(function(e,r){t=t.replace(e.color,"@"+r)}),{str:t,matches:e}},convertMatchesArray:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:",",n=this.convertMatches(t);return n.str.split(r).map(function(t,r){return t=e.trim(t),n.matches[r]&&(t=t.replace("@"+r,n.matches[r].color)),t})},reverseMatches:function(t,e){return e.forEach(function(e,r){t=t.replace("@"+r,e.color)}),t},trim:function(t){return t.replace(/^\s+|\s+$/g,"")},round:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return Math.round(t*e)/e},format:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgba(0, 0, 0, 0)";return Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),"hex"==e?this.hex(t):"rgb"==e?this.rgb(t,r):"hsl"==e?this.hsl(t):t},hex:function(t){Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]});var e=t.r.toString(16);t.r<16&&(e="0"+e);var r=t.g.toString(16);t.g<16&&(r="0"+r);var n=t.b.toString(16);return t.b<16&&(n="0"+n),"#"+e+r+n},rgb:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"rgba(0, 0, 0, 0)";if(Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),void 0!==t)return 1==t.a||void 0===t.a?isNaN(t.r)?e:"rgb("+t.r+","+t.g+","+t.b+")":"rgba("+t.r+","+t.g+","+t.b+","+t.a+")"},hsl:function(t){return Array.isArray(t)&&(t={r:t[0],g:t[1],b:t[2],a:t[3]}),1==t.a||void 0===t.a?"hsl("+t.h+","+t.s+"%,"+t.l+"%)":"hsla("+t.h+","+t.s+"%,"+t.l+"%,"+t.a+")"},parse:function(t){if("string"==typeof t){if(r.isColorName(t)&&(t=r.getColorByName(t)),t.indexOf("rgb(")>-1){for(var e=0,n=(o=t.replace("rgb(","").replace(")","").split(",")).length;e-1){for(e=0,n=(o=t.replace("rgba(","").replace(")","").split(",")).length;e-1){for(e=0,n=(o=t.replace("hsl(","").replace(")","").split(",")).length;e-1){for(e=0,n=(o=t.replace("hsla(","").replace(")","").split(",")).length;e>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};return i=Object.assign(i,this.RGBtoHSL(i))}if(0<=t&&t<=4294967295){i={type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255};return i=Object.assign(i,this.RGBtoHSL(i))}}return t},HSVtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,r=n.v}var i=t,o=r;360==i&&(i=0);var a=e*o,l=a*(1-Math.abs(i/60%2-1)),s=o-a,u=[];return 0<=i&&i<60?u=[a,l,0]:60<=i&&i<120?u=[l,a,0]:120<=i&&i<180?u=[0,a,l]:180<=i&&i<240?u=[0,l,a]:240<=i&&i<300?u=[l,0,a]:300<=i&&i<360&&(u=[a,0,l]),{r:this.round(255*(u[0]+s)),g:this.round(255*(u[1]+s)),b:this.round(255*(u[2]+s))}},RGBtoHSV:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=t/255,o=e/255,a=r/255,l=Math.max(i,o,a),s=l-Math.min(i,o,a),u=0;0==s?u=0:l==i?u=(o-a)/s%6*60:l==o?u=60*((a-i)/s+2):l==a&&(u=60*((i-o)/s+4)),u<0&&(u=360+u);return{h:u,s:0==l?0:s/l,v:l}},HSVtoHSL:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,r=n.v}var i=this.HSVtoRGB(t,e,r);return this.RGBtoHSL(i.r,i.g,i.b)},RGBtoCMYK:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=t/255,o=e/255,a=r/255,l=1-Math.max(i,o,a);return{c:(1-i-l)/(1-l),m:(1-o-l)/(1-l),y:(1-a-l)/(1-l),k:l}},CMYKtoRGB:function(t,e,r,n){if(1==arguments.length){var i=arguments[0];t=i.c,e=i.m,r=i.y,n=i.k}return{r:255*(1-t)*(1-n),g:255*(1-e)*(1-n),b:255*(1-r)*(1-n)}},RGBtoHSL:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}t/=255,e/=255,r/=255;var i,o,a=Math.max(t,e,r),l=Math.min(t,e,r),s=(a+l)/2;if(a==l)i=o=0;else{var u=a-l;switch(o=s>.5?u/(2-a-l):u/(a+l),a){case t:i=(e-r)/u+(e1&&(r-=1),r<1/6?t+6*(e-t)*r:r<.5?e:r<2/3?t+(e-t)*(2/3-r)*6:t},HSLtoHSV:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,n.v}var i=this.HSLtoRGB(t,e,r);return this.RGBtoHSV(i.r,i.g,i.b)},HSLtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.h,e=n.s,r=n.l}var i,o,a;if(t/=360,r/=100,0==(e/=100))i=o=a=r;else{var l=r<.5?r*(1+e):r+e-r*e,s=2*r-l;i=this.HUEtoRGB(s,l,t+1/3),o=this.HUEtoRGB(s,l,t),a=this.HUEtoRGB(s,l,t-1/3)}return{r:this.round(255*i),g:this.round(255*o),b:this.round(255*a)}},c:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.gray((t+e+r)/3>90?0:255)},gray:function(t){return{r:t,g:t,b:t}},RGBtoSimpleGray:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.gray(Math.ceil((t+e+r)/3))},RGBtoGray:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.gray(this.RGBtoYCrCb(t,e,r).y)},brightness:function(t,e,r){return Math.ceil(.2126*t+.7152*e+.0722*r)},RGBtoYCrCb:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=this.brightness(t,e,r);return{y:i,cr:.713*(t-i),cb:.564*(r-i)}},YCrCbtoRGB:function(t,e,r,n){if(1==arguments.length){var i=arguments[0];t=i.y,e=i.cr,r=i.cb;n=(n=i.bit)||0}var o=t+1.402*(e-n),a=t-.344*(r-n)-.714*(e-n),l=t+1.772*(r-n);return{r:Math.ceil(o),g:Math.ceil(a),b:Math.ceil(l)}},ReverseRGB:function(t){return t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t},XYZtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.x,e=n.y,r=n.z}var i=t/100,o=e/100,a=r/100,l=3.2406*i+-1.5372*o+-.4986*a,s=-.9689*i+1.8758*o+.0415*a,u=.0557*i+-.204*o+1.057*a;return l=this.ReverseRGB(l),s=this.ReverseRGB(s),u=this.ReverseRGB(u),{r:this.round(255*l),g:this.round(255*s),b:this.round(255*u)}},PivotRGB:function(t){return 100*(t>.04045?Math.pow((t+.055)/1.055,2.4):t/12.92)},RGBtoXYZ:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}var i=t/255,o=e/255,a=r/255;return{x:.4124*(i=this.PivotRGB(i))+.3576*(o=this.PivotRGB(o))+.1805*(a=this.PivotRGB(a)),y:.2126*i+.7152*o+.0722*a,z:.0193*i+.1192*o+.9505*a}},ReverseXyz:function(t){return Math.pow(t,3)>.008856?Math.pow(t,3):(t-16/116)/7.787},LABtoXYZ:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.l,e=n.a,r=n.b}var i=(t+16)/116,o=e/500+i,a=i-r/200;return i=this.ReverseXyz(i),{x:95.047*(o=this.ReverseXyz(o)),y:100*i,z:108.883*(a=this.ReverseXyz(a))}},PivotXyz:function(t){return t>.008856?Math.pow(t,1/3):(7.787*t+16)/116},XYZtoLAB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.x,e=n.y,r=n.z}var i=t/95.047,o=e/100,a=r/108.883;return i=this.PivotXyz(i),{l:116*(o=this.PivotXyz(o))-16,a:500*(i-o),b:200*(o-(a=this.PivotXyz(a)))}},RGBtoLAB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.r,e=n.g,r=n.b}return this.XYZtoLAB(this.RGBtoXYZ(t,e,r))},LABtoRGB:function(t,e,r){if(1==arguments.length){var n=arguments[0];t=n.l,e=n.a,r=n.b}return this.XYZtoRGB(this.LABtoXYZ(t,e,r))},blend:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"hex",i=this.parse(t),o=this.parse(e);return this.interpolateRGB(i,o,r,n)},mix:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"hex";return this.blend(t,e,r,n)},contrast:function(t){return t=this.parse(t),(Math.round(299*t.r)+Math.round(587*t.g)+Math.round(114*t.b))/1e3},contrastColor:function(t){return this.contrast(t)>=128?"black":"white"},interpolateRGB:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"hex",i={r:this.round(t.r+(e.r-t.r)*r),g:this.round(t.g+(e.g-t.g)*r),b:this.round(t.b+(e.b-t.b)*r),a:this.round(t.a+(e.a-t.a)*r,100)};return this.format(i,i.a<1?"rgb":n)},scale:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;if(!t)return[];"string"==typeof t&&(t=this.convertMatchesArray(t));for(var r=(t=t||[]).length,n=[],i=0;i0){var n=(1-t.filter(function(t){return"*"!=t[1]&&1!=t[1]}).map(function(t){return t[1]}).reduce(function(t,e){return t+e},0))/r;t.forEach(function(e,r){"*"==e[1]&&r>0&&(t.length-1==r||(e[1]=n))})}return t},gradient:function(t){for(var e=[],r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:10)-((t=this.parseGradient(t)).length-1),n=r,i=1,o=t.length;i1&&void 0!==arguments[1]?arguments[1]:"h",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:9,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"rgb",i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,a=arguments.length>6&&void 0!==arguments[6]?arguments[6]:100,l=this.parse(t),s=this.RGBtoHSV(l),u=(o-i)*a/r,c=[],h=1;h<=r;h++)s[e]=Math.abs((a-u*h)/a),c.push(this.format(this.HSVtoRGB(s),n));return c},scaleH:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:360;return this.scaleHSV(t,"h",e,r,n,i,1)},scaleS:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"s",e,r,n,i,100)},scaleV:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:9,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"rgb",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1;return this.scaleHSV(t,"v",e,r,n,i,100)},palette:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:6,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"hex";return t.length>r&&(t=c(t,r)),t.map(function(t){return e.format(t,n)})},ImageToRGB:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments[2];if(r){if(r){var n;(n=new $(t,e)).loadImage(function(){"function"==typeof r&&r(n.toRGB())})}}else(n=new $(t)).loadImage(function(){"function"==typeof e&&e(n.toRGB())})},ImageToCanvas:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{frameTimer:"full"};this.ImageToURL(t,e,r,Object.assign({returnTo:"canvas"},n))},ImageToURL:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{frameTimer:"full"},i=new $(t);i.loadImage(function(){i.toArray(e,function(t){"function"==typeof r&&r(t)},n)})},GLToCanvas:function(t,e,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=new $(t);i.load(function(){Xt.filter(i.newImage,e,function(t){"function"==typeof r&&r(t)},n)})},histogram:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=new $(t);n.loadImage(function(){"function"==typeof e&&e(n.toHistogram(r))})},histogramToPoints:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.2,r=[],n=0;n2&&void 0!==arguments[2]?arguments[2]:{width:200,height:100},n=new $(t);n.loadImage(function(){h.createHistogram(r.width||200,r.height||100,n.toHistogram(r),function(t){"function"==typeof e&&e(t.toDataURL("image/png"))},r)})}};qt.scale.parula=function(t){return qt.scale(["#352a87","#0f5cdd","#00b5a6","#ffc337","#fdff00"],t)},qt.scale.jet=function(t){return qt.scale(["#00008f","#0020ff","#00ffff","#51ff77","#fdff00","#ff0000","#800000"],t)},qt.scale.hsv=function(t){return qt.scale(["#ff0000","#ffff00","#00ff00","#00ffff","#0000ff","#ff00ff","#ff0000"],t)},qt.scale.hot=function(t){return qt.scale(["#0b0000","#ff0000","#ffff00","#ffffff"],t)},qt.scale.pink=function(t){return qt.scale(["#1e0000","#bd7b7b","#e7e5b2","#ffffff"],t)},qt.scale.bone=function(t){return qt.scale(["#000000","#4a4a68","#a6c6c6","#ffffff"],t)},qt.scale.copper=function(t){return qt.scale(["#000000","#3d2618","#9d623e","#ffa167","#ffc77f"],t)};var Yt=[{rgb:"#ff0000",start:0},{rgb:"#ffff00",start:.17},{rgb:"#00ff00",start:.33},{rgb:"#00ffff",start:.5},{rgb:"#0000ff",start:.67},{rgb:"#ff00ff",start:.83},{rgb:"#ff0000",start:1}];!function(){for(var t=0,e=Yt.length;t=t){e=Yt[n-1],r=Yt[n];break}return e&&r?qt.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):Yt[0].rgb}},Zt=p({},V,X),Jt=0,Qt=[],te=function(){function t(e,r,n){if(v(this,t),"string"!=typeof e)this.el=e;else{var i=document.createElement(e);for(var o in this.uniqId=Jt++,r&&(i.className=r),n=n||{})i.setAttribute(o,n[o]);this.el=i}}return g(t,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(e){for(var r=this,n=!1;!(n=r.hasClass(e));){if(!r.el.parentNode)return null;r=new t(r.el.parentNode)}return n?r:null}},{key:"removeClass",value:function(t){return this.el.className=(" "+this.el.className+" ").replace(" "+t+" "," ").trim(),this}},{key:"hasClass",value:function(t){return!!this.el.className&&(" "+this.el.className+" ").indexOf(" "+t+" ")>-1}},{key:"addClass",value:function(t){return this.hasClass(t)||(this.el.className=this.el.className+" "+t),this}},{key:"toggleClass",value:function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)}},{key:"html",value:function(t){return"string"==typeof t?this.el.innerHTML=t:this.empty().append(t),this}},{key:"find",value:function(t){return this.el.querySelector(t)}},{key:"findAll",value:function(t){return this.el.querySelectorAll(t)}},{key:"empty",value:function(){return this.html("")}},{key:"append",value:function(t){return"string"==typeof t?this.el.appendChild(document.createTextNode(t)):this.el.appendChild(t.el||t),this}},{key:"appendTo",value:function(t){return(t.el?t.el:t).appendChild(this.el),this}},{key:"remove",value:function(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}},{key:"text",value:function(){return this.el.textContent}},{key:"css",value:function(t,e){var r=this;if(2==arguments.length)this.el.style[t]=e;else if(1==arguments.length){if("string"==typeof t)return getComputedStyle(this.el)[t];var n=t||{};Object.keys(n).forEach(function(t){r.el.style[t]=n[t]})}return this}},{key:"cssFloat",value:function(t){return parseFloat(this.css(t))}},{key:"cssInt",value:function(t){return parseInt(this.css(t))}},{key:"offset",value:function(){var t=this.el.getBoundingClientRect();return{top:t.top+document.documentElement.scrollTop,left:t.left+document.documentElement.scrollLeft}}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"width",value:function(){return this.el.offsetWidth}},{key:"contentWidth",value:function(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}},{key:"height",value:function(){return this.el.offsetHeight}},{key:"contentHeight",value:function(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}},{key:"dataKey",value:function(t){return this.uniqId+"."+t}},{key:"data",value:function(t,e){if(2!=arguments.length){if(1==arguments.length)return Qt[this.dataKey(t)];var r=Object.keys(Qt),n=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(n)}).map(function(t){return Qt[t]})}return Qt[this.dataKey(t)]=e,this}},{key:"val",value:function(t){return 0==arguments.length?this.el.value:(1==arguments.length&&(this.el.value=t),this)}},{key:"int",value:function(){return parseInt(this.val(),10)}},{key:"float",value:function(){return parseFloat(this.val())}},{key:"show",value:function(){return this.css("display","block")}},{key:"hide",value:function(){return this.css("display","none")}},{key:"toggle",value:function(){return"none"==this.css("display")?this.show():this.hide()}},{key:"scrollTop",value:function(){return this.el===document.body?document.documentElement.scrollTop:this.el.scrollTop}},{key:"scrollLeft",value:function(){return this.el===document.body?document.documentElement.scrollLeft:this.el.scrollLeft}},{key:"on",value:function(t,e,r,n){return this.el.addEventListener(t,e,r,n),this}},{key:"off",value:function(t,e){return this.el.removeEventListener(t,e),this}},{key:"getElement",value:function(){return this.el}},{key:"createChild",value:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=new t(e,r,n);return o.css(i),this.append(o),o}},{key:"firstChild",value:function(){return new t(this.el.firstElementChild)}}]),t}(),ee={addEvent:function(t,e,r){t.addEventListener(e,r)},removeEvent:function(t,e,r){t.removeEventListener(e,r)},pos:function(t){return t.touches&&t.touches[0]?t.touches[0]:t}},re=function(){function t(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};v(this,t),this.masterObj=e,this.settingObj=r}return g(t,[{key:"set",value:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;this.settingObj[t]=e||r}},{key:"init",value:function(t){if(!this.has(t)){var e=t.split("."),r=this.masterObj.refs[e[0]]||this.masterObj[e[0]]||this.masterObj,n=e.pop();if(r[n]){for(var i=arguments.length,o=Array(i>1?i-1:0),a=1;a1&&void 0!==arguments[1]?arguments[1]:"";return this.init(t,e),this.settingObj[t]||e}},{key:"has",value:function(t){return!!this.settingObj[t]}}]),t}(),ne=/^(click|mouse(down|up|move|enter|leave)|key(down|up|press)|contextmenu|change|input)/gi,ie=["Control","Shift","Alt","Meta"],oe=function(){function t(){v(this,t),this.state=new re(this),this.refs={},this.$el=this.parseTemplate(this.template()),this.refs.$el=this.$el}return g(t,[{key:"parseTemplate",value:function(t){var e=this,r=new te("div").html(t).firstChild(),n=r.findAll("[ref]");return[].concat(C(n)).forEach(function(t){var r=t.getAttribute("ref");e.refs[r]=new te(t);var n="load "+r;e[n]&&(e.refs[r].load=function(){new te(t).html(e.parseTemplate(e[n].call(e)))})}),r}},{key:"load",value:function(){var t=this;Object.keys(this.refs).forEach(function(e){t.refs[e].load&&t.refs[e].load()})}},{key:"template",value:function(){return"
"}},{key:"initializeEvent",value:function(){this.initializeEventMachin()}},{key:"destroy",value:function(){this.destroyEventMachin()}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(ne).forEach(this.parseEvent.bind(this))}},{key:"filterProps",value:function(t){return Object.getOwnPropertyNames(this.__proto__).filter(function(e){return e.match(t)})}},{key:"parseEvent",value:function(t){var e=t.split(" ");this.bindingEvent(e,this[t].bind(this))}},{key:"getDefaultDomElement",value:function(t){var e=void 0;return(e=t?this.refs[t]||this[t]||window[t]:this.el||this.$el||this.$root)instanceof te?e.getElement():e}},{key:"getDefaultEventObject",value:function(t){var e=this,r=t.split("."),n=r.shift(),i=r.includes("Control"),o=r.includes("Shift"),a=r.includes("Alt"),l=r.includes("Meta"),s=(r=r.filter(function(t){return!1===ie.includes(t)})).filter(function(t){return!!e[t]});return{eventName:n,isControl:i,isShift:o,isAlt:a,isMeta:l,codes:r=r.filter(function(t){return!1===s.includes(t)}).map(function(t){return t.toLowerCase()}),checkMethodList:s}}},{key:"bindingEvent",value:function(t,e){var r,n=(r=t,Array.isArray(r)?r:Array.from(r)),i=n[0],o=n[1],a=n.slice(2);o=this.getDefaultDomElement(o);var l=this.getDefaultEventObject(i);l.dom=o,l.delegate=a.join(" "),this.addEvent(l,e)}},{key:"matchPath",value:function(t,e){return t?t.matches(e)?t:this.matchPath(t.parentElement,e):null}},{key:"getBindings",value:function(){return this._bindings||this.initBindings(),this._bindings}},{key:"addBinding",value:function(t){this.getBindings().push(t)}},{key:"initBindings",value:function(){this._bindings=[]}},{key:"checkEventType",value:function(t,e){var r=this,n=!t.ctrlKey||e.isControl,i=!t.shiftKey||e.isShift,o=!t.altKey||e.isAlt,a=!t.metaKey||e.isMeta,l=!0;e.codes.length&&(l=e.codes.includes(t.code.toLowerCase())||e.codes.includes(t.key.toLowerCase()));var s=!0;return e.checkMethodList.length&&(s=e.checkMethodList.every(function(e){return r[e].call(r,t)})),n&&o&&i&&a&&l&&s}},{key:"makeCallback",value:function(t,e){var r=this;return t.delegate?function(n){if(r.checkEventType(n,t)){var i=r.matchPath(n.target||n.srcElement,t.delegate);if(i)return n.delegateTarget=i,n.$delegateTarget=new te(i),e(n)}}:function(n){if(r.checkEventType(n,t))return e(n)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t),ee.addEvent(t.dom,t.eventName,t.callback)}},{key:"removeEventAll",value:function(){var t=this;this.getBindings().forEach(function(e){t.removeEvent(e)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,n=t.callback;ee.removeEvent(r,e,n)}}]),t}(),ae=[{name:"Material",colors:["#F44336","#E91E63","#9C27B0","#673AB7","#3F51B5","#2196F3","#03A9F4","#00BCD4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548","#9E9E9E","#607D8B"]},{name:"Custom",edit:!0,colors:[]},{name:"Color Scale",scale:["red","yellow","black"],count:5}],le=function(){function t(e){v(this,t),this.colorpicker=e,this.setUserList(this.colorpicker.getOption("colorSets"))}return g(t,[{key:"list",value:function(){return this.userList||ae}},{key:"setUserList",value:function(t){this.userList=t,this.resetUserList(),this.setCurrentColorSets()}},{key:"resetUserList",value:function(){var t=this;this.userList&&this.userList.length&&(this.userList=this.userList.map(function(e,r){if("function"==typeof e.colors){var n=e.colors;e.colors=n(t.colorpicker,t),e._colors=n}return Object.assign({name:"color-"+r,colors:[]},e)}))}},{key:"setCurrentColorSets",value:function(t){var e=this.list();this.currentColorSets=void 0===t?e[0]:"number"==typeof t?e[t]:e.filter(function(e){return e.name==t})[0]}},{key:"getCurrentColorSets",value:function(){return this.currentColorSets}},{key:"addCurrentColor",value:function(t){Array.isArray(this.currentColorSets.colors)&&this.currentColorSets.colors.push(t)}},{key:"removeCurrentColor",value:function(t){this.currentColorSets.colors[t]&&this.currentColorSets.colors.splice(t,1)}},{key:"removeCurrentColorToTheRight",value:function(t){this.currentColorSets.colors[t]&&this.currentColorSets.colors.splice(t,Number.MAX_VALUE)}},{key:"clearPalette",value:function(){this.currentColorSets.colors&&(this.currentColorSets.colors=[])}},{key:"getCurrentColors",value:function(){return this.getColors(this.currentColorSets)}},{key:"getColors",value:function(t){return t.scale?qt.scale(t.scale,t.count):t.colors||[]}},{key:"getColorSetsList",value:function(){var t=this;return this.list().map(function(e){return{name:e.name,edit:e.edit,colors:t.getColors(e)}})}},{key:"destroy",value:function(){}}]),t}(),se=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.opt=t||{},r.$body=null,r.$root=null,r.format="rgb",r.currentA=0,r.currentH=0,r.currentS=0,r.currentV=0,r.colorSetsList=new le(r),r.colorpickerCallback=function(){},r.isColorPickerShow=!1,r.isShortCut=!1,r.hideDelay=r.opt.hideDeplay||2e3,r.timerCloseColorPicker,r.autoHide=r.opt.autoHide||!0,r}return b(e,oe),g(e,[{key:"initialize",value:function(){this.$body=new te(this.getContainer()),this.$root=new te("div","codemirror-colorpicker"),"inline"==this.opt.position&&this.$body.append(this.$root),this.opt.type&&this.$root.addClass(this.opt.type),this.$arrow=new te("div","arrow"),this.$root.append(this.$arrow)}},{key:"getOption",value:function(t){return this.opt[t]}},{key:"setOption",value:function(t,e){this.opt[t]=e}},{key:"isType",value:function(t){return this.getOption("type")==t}},{key:"isPaletteType",value:function(){return this.isType("palette")}},{key:"isSketchType",value:function(){return this.isType("sketch")}},{key:"getContainer",value:function(){return this.opt.container||document.body}},{key:"getColor",value:function(t){this.caculateHSV();var e=this.convertRGB();return t?qt.format(e,t):e}},{key:"definePositionForArrow",value:function(t,e,r){}},{key:"definePosition",value:function(t){var e=this.$root.width(),r=this.$root.height(),n=t.left-this.$body.scrollLeft();e+n>window.innerWidth&&(n-=e+n-window.innerWidth),n<0&&(n=0);var i=t.top-this.$body.scrollTop();r+i>window.innerHeight&&(i-=r+i-window.innerHeight),i<0&&(i=0),this.$root.css({left:n+"px",top:i+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"show",value:function(t,e,r){this.destroy(),this.initializeEvent(),this.$root.appendTo(this.$body),this.$root.css(this.getInitalizePosition()).show(),this.definePosition(t),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.initColor(e),this.colorpickerCallback=r,this.hideDelay=t.hideDelay||2e3,this.hideDelay>0&&this.setHideDelay(this.hideDelay)}},{key:"setHideDelay",value:function(t){var e=this;t=t||0,this.$root.off("mouseenter"),this.$root.off("mouseleave"),this.$root.on("mouseenter",function(){clearTimeout(e.timerCloseColorPicker)}),this.$root.on("mouseleave",function(){clearTimeout(e.timerCloseColorPicker),e.timerCloseColorPicker=setTimeout(e.hide.bind(e),t)}),clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),t)}},{key:"hide",value:function(){this.isColorPickerShow&&(this.destroy(),this.$root.hide(),this.$root.remove(),this.isColorPickerShow=!1)}},{key:"convertRGB",value:function(){return qt.HSVtoRGB(this.currentH,this.currentS,this.currentV)}},{key:"convertHEX",value:function(){return qt.format(this.convertRGB(),"hex")}},{key:"convertHSL",value:function(){return qt.HSVtoHSL(this.currentH,this.currentS,this.currentV)}},{key:"getFormattedColor",value:function(t){if("rgb"==(t=t||"hex"))return(r=this.convertRGB()).a=this.currentA,qt.format(r,"rgb");if("hsl"==t){var e=this.convertHSL();return e.a=this.currentA,qt.format(e,"hsl")}var r=this.convertRGB();return qt.format(r,"hex")}},{key:"callbackColorValue",value:function(t){isNaN(this.currentA)||("function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerCallback&&this.colorpickerCallback(t))}},{key:"setCurrentHSV",value:function(t,e,r,n){this.currentA=n,this.currentH=t,this.currentS=e,this.currentV=r}},{key:"setCurrentH",value:function(t){this.currentH=t}},{key:"setCurrentA",value:function(t){this.currentA=t}},{key:"getHSV",value:function(t){return"hsl"==t.type?qt.HSLtoHSV(t):qt.RGBtoHSV(t)}},{key:"initColor",value:function(t,e){var r=t||"#FF0000",n=qt.parse(r);e=e||n.type;var i=this.getHSV(n);this.setCurrentHSV(i.h,i.s,i.v,n.a)}},{key:"checkColorPickerClass",value:function(t){var e=new te(t).closest("codemirror-colorview"),r=new te(t).closest("codemirror-colorpicker"),n=new te(t).closest("CodeMirror");t.nodeName;return!!(r||e||n)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"initializeEvent",value:function(){this.initializeEventMachin()}},{key:"setColorSets",value:function(t){this.colorSetsList.setUserList(t)}},{key:"destroy",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.colorpickerCallback=void 0}}]),e}(),ue=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"initialize",value:function(){this.drag_bar_pos={},this.opacity_drag_bar_pos={}}},{key:"setBackgroundColor",value:function(t){this.refs.$controlColor.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setOpacityColorBar",value:function(t){var e=qt.parse(t);e.a=0;var r=qt.format(e,"rgb");e.a=1;var n=qt.format(e,"rgb");this.refs.$opacityColorBar.css("background","linear-gradient(to right, "+r+", "+n+")")}},{key:"setOpacity",value:function(t){var e,r=this.refs.$opacityContainer.offset().left,n=r+this.state.get("$opacityContainer.width"),i=ee.pos(t).clientX;in?(e=100,this.refs.$opacity_drag_bar.addClass("last").removeClass("first")):(e=(i-r)/(n-r)*100,this.refs.$opacity_drag_bar.removeClass("first").removeClass("last"));var o=this.state.get("$opacityContainer.width")*(e/100);this.refs.$opacity_drag_bar.css({left:o+"px"}),this.opacity_drag_bar_pos={x:o},this.colorpicker.setCurrentA(this.caculateOpacity()),this.colorpicker.currentFormat(),this.colorpicker.setInputColor()}},{key:"setInputColor",value:function(){this.setBackgroundColor(this.colorpicker.getFormattedColor("rgb"));var t=this.colorpicker.convertRGB(),e=qt.format(t,"rgb");this.setOpacityColorBar(e)}},{key:"setColorUI",value:function(){var t=this.state.get("$hueContainer.width")*(this.colorpicker.currentH/360);this.refs.$drag_bar.css({left:t+"px"}),this.drag_bar_pos={x:t};var e=this.state.get("$opacityContainer.width")*(this.colorpicker.currentA||0);this.refs.$opacity_drag_bar.css({left:e+"px"}),this.opacity_drag_bar_pos={x:e}}},{key:"caculateH",value:function(){return{h:(this.drag_bar_pos||{x:0}).x/this.state.get("$hueContainer.width")*360}}},{key:"caculateOpacity",value:function(){var t=this.opacity_drag_bar_pos||{x:0},e=Math.round(t.x/this.state.get("$opacityContainer.width")*100)/100;return isNaN(e)?1:e}},{key:"EventDocumentMouseMove",value:function(t){this.isHueDown&&this.setHueColor(t),this.isOpacityDown&&this.setOpacity(t)}},{key:"EventDocumentMouseUp",value:function(t){this.isHueDown=!1,this.isOpacityDown=!1}},{key:"setControlColor",value:function(t){this.refs.$controlColor.css("background-color",t)}},{key:"setHueColor",value:function(t,e){var r,n=this.refs.$hueContainer.offset().left,i=n+this.state.get("$hueContainer.width"),o=t?ee.pos(t).clientX:n+(i-n)*(this.colorpicker.currentH/360);oi?(r=100,this.refs.$drag_bar.addClass("last").removeClass("first")):(r=(o-n)/(i-n)*100,this.refs.$drag_bar.removeClass("first").removeClass("last"));var a=this.state.get("$hueContainer.width")*(r/100);this.refs.$drag_bar.css({left:a+"px"}),this.drag_bar_pos={x:a};var l=Kt.checkHueColor(r/100);this.colorpicker.setBackgroundColor(l),this.colorpicker.setCurrentH(r/100*360),e||this.colorpicker.setInputColor()}},{key:"setOnlyHueColor",value:function(){this.setHueColor(null,!0)}},{key:"mouseup document",value:function(t){this.EventDocumentMouseUp(t)}},{key:"mousemove document",value:function(t){this.EventDocumentMouseMove(t)}},{key:"mousedown $drag_bar",value:function(t){t.preventDefault(),this.isHueDown=!0}},{key:"mousedown $opacity_drag_bar",value:function(t){t.preventDefault(),this.isOpacityDown=!0}},{key:"mousedown $hueContainer",value:function(t){this.isHueDown=!0,this.setHueColor(t)}},{key:"mousedown $opacityContainer",value:function(t){this.isOpacityDown=!0,this.setOpacity(t)}}]),e}(),ce=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"template",value:function(){return'\n
\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
H
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '}},{key:"initialize",value:function(){this.format="hex"}},{key:"currentFormat",value:function(){var t=this.format||"hex";if(this.colorpicker.currentA<1&&"hex"==t){this.$el.removeClass(t),this.$el.addClass("rgb"),this.format="rgb",this.colorpicker.setInputColor()}}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var t=this.format||"hex";this.$el.removeClass("hex"),this.$el.removeClass("rgb"),this.$el.removeClass("hsl"),this.$el.addClass(t)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e=1==this.colorpicker.currentA?"hex":"rgb"),this.$el.removeClass(t),this.$el.addClass(e),this.format=e,this.setInputColor(),this.colorpicker.changeInputColorAfterNextFormat()}},{key:"setRGBInput",value:function(t,e,r){this.refs.$rgb_r.val(t),this.refs.$rgb_g.val(e),this.refs.$rgb_b.val(r),this.refs.$rgb_a.val(this.colorpicker.currentA)}},{key:"setHSLInput",value:function(t,e,r){this.refs.$hsl_h.val(t),this.refs.$hsl_s.val(e),this.refs.$hsl_l.val(r),this.refs.$hsl_a.val(this.colorpicker.currentA)}},{key:"getHexFormat",value:function(){return qt.format({r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int()},"hex",this.colorpicker.opt.color)}},{key:"getRgbFormat",value:function(){return qt.format({r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int(),a:this.refs.$rgb_a.float()},"rgb",this.colorpicker.opt.color)}},{key:"getHslFormat",value:function(){return qt.format({h:this.refs.$hsl_h.val(),s:this.refs.$hsl_s.val(),l:this.refs.$hsl_l.val(),a:this.refs.$hsl_a.float()},"hsl",this.colorpicker.opt.color)}},{key:"convertRGB",value:function(){return this.colorpicker.convertRGB()}},{key:"convertHEX",value:function(){return this.colorpicker.convertHEX()}},{key:"convertHSL",value:function(){return this.colorpicker.convertHSL()}},{key:"getFormattedColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return"hex"==(t=t||this.getFormat())?this.refs.$hexCode.val():"rgb"==t?this.getRgbFormat(e):"hsl"==t?this.getHslFormat(e):void 0}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"setInputColor",value:function(){var t=this.getFormat(),e=null;if("hex"==t){this.refs.$hexCode.val(this.convertHEX());e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a)}else if("rgb"==t){e=this.convertRGB();this.setRGBInput(e.r,e.g,e.b,e.a),this.refs.$hexCode.val(this.convertHEX())}else if("hsl"==t){var r=this.convertHSL();this.setHSLInput(r.h,r.s,r.l,r.a)}}},{key:"checkNumberKey",value:function(t){return ee.checkNumberKey(t)}},{key:"checkNotNumberKey",value:function(t){return!ee.checkNumberKey(t)}},{key:"changeRgbColor",value:function(){this.colorpicker.changeInformationColor(this.getRgbFormat())}},{key:"changeHslColor",value:function(){this.colorpicker.changeInformationColor(this.getHslFormat())}},{key:"change $rgb_r",value:function(t){this.changeRgbColor()}},{key:"change $rgb_g",value:function(t){this.changeRgbColor()}},{key:"change $rgb_b",value:function(t){this.changeRgbColor()}},{key:"change $rgb_a",value:function(t){this.changeRgbColor()}},{key:"change $hsl_h",value:function(t){this.changeHslColor()}},{key:"change $hsl_s",value:function(t){this.changeHslColor()}},{key:"change $hsl_l",value:function(t){this.changeHslColor()}},{key:"change $hsl_a",value:function(t){this.changeHslColor()}},{key:"keydown $hexCode",value:function(t){if(t.which<65||t.which>70)return this.checkNumberKey(t)}},{key:"keyup $hexCode",value:function(t){var e=this.refs.$hexCode.val();"#"==e.charAt(0)&&7==e.length&&(this.colorpicker.changeInformationColor(e),this.setInputColor())}},{key:"click $formatChangeButton",value:function(t){this.nextFormat()}},{key:"refresh",value:function(){}}]),e}(),he=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"initialize",value:function(){}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.state.get("$el.width"),r=this.state.get("$el.height");return{s:t.x/e,v:(r-t.y)/r,width:e,height:r}}},{key:"setColorUI",value:function(){var t=this.state.get("$el.width")*this.colorpicker.currentS,e=this.state.get("$el.height")*(1-this.colorpicker.currentV);this.refs.$drag_pointer.css({left:t-5+"px",top:e-5+"px"}),this.drag_pointer_pos={x:t,y:e}}},{key:"setMainColor",value:function(t){t.preventDefault();var e=this.$el.position(),r=this.state.get("$el.contentWidth"),n=this.state.get("$el.contentHeight"),i=t.clientX-e.left,o=t.clientY-e.top;i<0?i=0:i>r&&(i=r),o<0?o=0:o>n&&(o=n),this.refs.$drag_pointer.css({left:i-5+"px",top:o-5+"px"}),this.drag_pointer_pos={x:i,y:o},this.colorpicker.caculateHSV(),this.colorpicker.setInputColor()}},{key:"EventDocumentMouseUp",value:function(t){this.isDown=!1}},{key:"EventDocumentMouseMove",value:function(t){this.isDown&&this.setMainColor(t)}},{key:"mouseup document",value:function(t){this.EventDocumentMouseUp(t)}},{key:"mousemove document",value:function(t){this.EventDocumentMouseMove(t)}},{key:"mousedown",value:function(t){this.isDown=!0,this.setMainColor(t)}},{key:"mouseup",value:function(t){this.isDown=!1}}]),e}(),fe=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.initialize(),r}return b(e,oe),g(e,[{key:"template",value:function(){return'\n
\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n
\n '}},{key:"initialize",value:function(){this.load()}},{key:"load $colorsetsList",value:function(){return"\n
\n "+this.colorpicker.getColorSetsList().map(function(t,e){return'\n
\n

'+t.name+'

\n
\n
\n '+t.colors.filter(function(t,e){return e<5}).map(function(t){return'
\n
\n
'}).join("")+"\n
\n
\n
"}).join("")+"\n
\n "}},{key:"show",value:function(){this.$el.addClass("open")}},{key:"hide",value:function(){this.$el.removeClass("open")}},{key:"toggle",value:function(){this.$el.toggleClass("open")}},{key:"click $toggleButton",value:function(t){this.toggle()}},{key:"click $colorsetsList .colorsets-item",value:function(t){var e=t.$delegateTarget;if(e){var r=parseInt(e.attr("data-colorsets-index"));this.colorpicker.setCurrentColorSets(r),this.hide()}}},{key:"destroy",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.hide()}}]),e}(),ve=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.colorSetsList=r.colorpicker.colorSetsList,r.initialize(),r}return b(e,oe),g(e,[{key:"template",value:function(){return'\n
\n
\n \n
\n
\n
\n '}},{key:"load $colorSetsColorList",value:function(){var t=this.colorSetsList.getCurrentColorSets();return'\n
\n '+this.colorSetsList.getCurrentColors().map(function(t,e){return'
\n
\n
\n
'}).join("")+" \n "+(t.edit?'
+
':"")+" \n
\n "}},{key:"initialize",value:function(){this.load()}},{key:"refreshAll",value:function(){this.load(),this.colorpicker.refreshColorSetsChooser()}},{key:"addColor",value:function(t){this.colorSetsList.addCurrentColor(t),this.refreshAll()}},{key:"removeColor",value:function(t){this.colorSetsList.removeCurrentColor(t),this.refreshAll()}},{key:"removeAllToTheRight",value:function(t){this.colorSetsList.removeCurrentColorToTheRight(t),this.refreshAll()}},{key:"clearPalette",value:function(){this.colorSetsList.clearPalette(),this.refreshAll()}},{key:"click $colorSetsChooseButton",value:function(t){this.colorpicker.toggleColorChooser()}},{key:"contextmenu $colorSetsColorList",value:function(t){if(t.preventDefault(),this.colorSetsList.getCurrentColorSets().edit){var e=new te(t.target).closest("color-item");if(e){var r=parseInt(e.attr("data-index"));this.colorpicker.showContextMenu(t,r)}else this.colorpicker.showContextMenu(t)}}},{key:"click $colorSetsColorList .add-color-item",value:function(t){this.addColor(this.colorpicker.getCurrentColor())}},{key:"click $colorSetsColorList .color-item",value:function(t){var e=!!this.colorpicker.isPaletteType();this.colorpicker.setColor(t.$delegateTarget.attr("data-color"),e)}}]),e}(),ge=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.colorpicker=t,r.currentColorSets=t.currentColorSets,r.initialize(),r}return b(e,oe),g(e,[{key:"template",value:function(){return'\n
    \n
  • Remove color
    • \n
  • Remove all to the right
    • \n
  • Clear palette
    • \n
\n '}},{key:"initialize",value:function(){}},{key:"show",value:function(t,e){var r=ee.pos(t);this.$el.css({top:r.clientY-10+"px",left:r.clientX+"px"}),this.$el.addClass("show"),this.selectedColorIndex=e,void 0===this.selectedColorIndex?this.$el.addClass("small"):this.$el.removeClass("small")}},{key:"hide",value:function(){this.$el.removeClass("show")}},{key:"runCommand",value:function(t){switch(t){case"remove-color":this.currentColorSets.removeColor(this.selectedColorIndex);break;case"remove-all-to-the-right":this.currentColorSets.removeAllToTheRight(this.selectedColorIndex);break;case"clear-palette":this.currentColorSets.clearPalette()}}},{key:"click $el .menu-item",value:function(t){t.preventDefault(),this.runCommand(t.$delegateTarget.attr("data-type")),this.hide()}}]),e}(),de=function(t){function e(t){v(this,e);var r=y(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return r.control=new ue(r),r.palette=new he(r),r.information=new ce(r),r.colorSetsChooser=new fe(r),r.currentColorSets=new ve(r),r.contextMenu=new ge(r,r.currentColorSets),r.initialize(),r}return b(e,se),g(e,[{key:"initialize",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"initialize",this).call(this),this.$root.append(this.palette.$el),this.$root.append(this.control.$el),this.$root.append(this.information.$el),this.$root.append(this.currentColorSets.$el),this.$root.append(this.colorSetsChooser.$el),this.$root.append(this.contextMenu.$el),this.$checkColorPickerClass=this.checkColorPickerClass.bind(this),this.initColor(this.opt.color),this.initializeEvent()}},{key:"showContextMenu",value:function(t,e){this.contextMenu.show(t,e)}},{key:"setColor",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if("object"==(void 0===t?"undefined":f(t))){if(!t.r||!t.g||!t.b)return;e?this.callbackColorValue(qt.format(t,"hex")):this.initColor(qt.format(t,"hex"))}else"string"==typeof t&&(e?this.callbackColorValue(t):this.initColor(t))}},{key:"getColor",value:function(t){this.caculateHSV();var e=this.convertRGB();return t?qt.format(e,t):e}},{key:"definePositionForArrow",value:function(t,e,r){}},{key:"definePosition",value:function(t){var e=this.$root.width(),r=this.$root.height(),n=t.left-this.$body.scrollLeft();e+n>window.innerWidth&&(n-=e+n-window.innerWidth),n<0&&(n=0);var i=t.top-this.$body.scrollTop();r+i>window.innerHeight&&(i-=r+i-window.innerHeight),i<0&&(i=0),this.$root.css({left:n+"px",top:i+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"show",value:function(t,e,r){this.destroy(),this.initializeEvent(),this.$root.appendTo(this.$body),this.$root.css(this.getInitalizePosition()).show(),this.definePosition(t),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.initColor(e),this.colorpickerCallback=r,this.hideDelay=t.hideDelay||2e3,this.hideDelay>0&&this.setHideDelay(this.hideDelay)}},{key:"setHideDelay",value:function(t){var e=this;t=t||0,this.$root.off("mouseenter"),this.$root.off("mouseleave"),this.$root.on("mouseenter",function(){clearTimeout(e.timerCloseColorPicker)}),this.$root.on("mouseleave",function(){clearTimeout(e.timerCloseColorPicker),e.timerCloseColorPicker=setTimeout(e.hide.bind(e),t)}),clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),t)}},{key:"hide",value:function(){this.isColorPickerShow&&(this.destroy(),this.$root.hide(),this.$root.remove(),this.isColorPickerShow=!1)}},{key:"convertRGB",value:function(){return qt.HSVtoRGB(this.currentH,this.currentS,this.currentV)}},{key:"convertHEX",value:function(){return qt.format(this.convertRGB(),"hex")}},{key:"convertHSL",value:function(){return qt.HSVtoHSL(this.currentH,this.currentS,this.currentV)}},{key:"getCurrentColor",value:function(){return this.information.getFormattedColor()}},{key:"getFormattedColor",value:function(t){if("rgb"==(t=t||"hex"))return(r=this.convertRGB()).a=this.currentA,qt.format(r,"rgb");if("hsl"==t){var e=this.convertHSL();return e.a=this.currentA,qt.format(e,"hsl")}var r=this.convertRGB();return qt.format(r,"hex")}},{key:"setInputColor",value:function(t){this.information.setInputColor(t),this.control.setInputColor(t),this.callbackColorValue()}},{key:"changeInputColorAfterNextFormat",value:function(){this.control.setInputColor(),this.callbackColorValue()}},{key:"callbackColorValue",value:function(t){t=t||this.getCurrentColor(),isNaN(this.currentA)||("function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerCallback&&this.colorpickerCallback(t))}},{key:"caculateHSV",value:function(){var t=this.palette.caculateSV(),e=this.control.caculateH(),r=t.s,n=t.v,i=e.h;0==t.width&&(i=0,r=0,n=0),this.currentH=i,this.currentS=r,this.currentV=n}},{key:"setColorUI",value:function(){this.control.setColorUI(),this.palette.setColorUI()}},{key:"setCurrentHSV",value:function(t,e,r,n){this.currentA=n,this.currentH=t,this.currentS=e,this.currentV=r}},{key:"setCurrentH",value:function(t){this.currentH=t}},{key:"setCurrentA",value:function(t){this.currentA=t}},{key:"setBackgroundColor",value:function(t){this.palette.setBackgroundColor(t)}},{key:"setCurrentFormat",value:function(t){this.format=t,this.information.setCurrentFormat(t)}},{key:"getHSV",value:function(t){return"hsl"==t.type?qt.HSLtoHSV(t):qt.RGBtoHSV(t)}},{key:"initColor",value:function(t,e){var r=t||"#FF0000",n=qt.parse(r);e=e||n.type,this.setCurrentFormat(e);var i=this.getHSV(n);this.setCurrentHSV(i.h,i.s,i.v,n.a),this.setColorUI(),this.setHueColor(),this.setInputColor()}},{key:"changeInformationColor",value:function(t){var e=t||"#FF0000",r=qt.parse(e),n=this.getHSV(r);this.setCurrentHSV(n.h,n.s,n.v,r.a),this.setColorUI(),this.setHueColor(),this.control.setInputColor(),this.callbackColorValue()}},{key:"setHueColor",value:function(){this.control.setOnlyHueColor()}},{key:"initializeEvent",value:function(){this.initializeEventMachin(),this.palette.initializeEvent(),this.control.initializeEvent(),this.information.initializeEvent(),this.currentColorSets.initializeEvent(),this.colorSetsChooser.initializeEvent(),this.contextMenu.initializeEvent()}},{key:"currentFormat",value:function(){this.information.currentFormat()}},{key:"toggleColorChooser",value:function(){this.colorSetsChooser.toggle()}},{key:"refreshColorSetsChooser",value:function(){this.colorSetsChooser.load()}},{key:"getColorSetsList",value:function(){return this.colorSetsList.getColorSetsList()}},{key:"setCurrentColorSets",value:function(t){this.colorSetsList.setCurrentColorSets(t),this.currentColorSets.load()}},{key:"setColorSets",value:function(t){this.colorSetsList.setUserList(t)}},{key:"destroy",value:function(){m(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this),this.control.destroy(),this.palette.destroy(),this.information.destroy(),this.colorSetsChooser.destroy(),this.colorSetsList.destroy(),this.currentColorSets.destroy(),this.contextMenu.destroy()}},{key:"mouseup document",value:function(t){this.checkInHtml(t.target)||0==this.checkColorPickerClass(t.target)&&this.hide()}}]),e}(),pe={create:function(t){switch(t.type){case"sketch":case"palette":default:return new de(t)}},ColorPicker:de,ChromeDevToolColorPicker:de},me="codemirror-colorview",be="codemirror-colorview-background",ye=["comment"];function ke(t,e){"setValue"==e.origin?(t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update()):t.state.colorpicker.style_color_update(t.getCursor().line)}function Ce(t,e){t.state.colorpicker.isUpdate||(t.state.colorpicker.isUpdate=!0,t.state.colorpicker.close_color_picker(),t.state.colorpicker.init_color_update(),t.state.colorpicker.style_color_update())}function $e(t,e){ke(t,{origin:"setValue"})}function xe(t,e){t.state.colorpicker.keyup(e)}function _e(t,e){t.state.colorpicker.is_edit_mode()&&t.state.colorpicker.check_mousedown(e)}function we(t,e){ke(t,{origin:"setValue"})}function Se(t){t.state.colorpicker.close_color_picker()}var Ee=function(){function t(e,r){v(this,t),r="boolean"==typeof r?{mode:"edit"}:Object.assign({mode:"edit"},r||{}),this.opt=r,this.cm=e,this.markers={},this.excluded_token=this.opt.excluded_token||ye,this.opt.colorpicker?this.colorpicker=this.opt.colorpicker(this.opt):this.colorpicker=pe.create(this.opt),this.init_event()}return g(t,[{key:"init_event",value:function(){var t,e,r,n,i;this.cm.on("mousedown",_e),this.cm.on("keyup",xe),this.cm.on("change",ke),this.cm.on("update",Ce),this.cm.on("refresh",$e),this.onPasteCallback=(t=this.cm,e=we,function(r){e.call(this,t,r)}),this.cm.getWrapperElement().addEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.on("scroll",(r=Se,n=50,i=void 0,function(t,e){i&&clearTimeout(i),i=setTimeout(function(){r(t,e)},n||300)}))}},{key:"is_edit_mode",value:function(){return"edit"==this.opt.mode}},{key:"is_view_mode",value:function(){return"view"==this.opt.mode}},{key:"destroy",value:function(){this.cm.off("mousedown",_e),this.cm.off("keyup",xe),this.cm.off("change",ke),this.cm.getWrapperElement().removeEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.off("scroll")}},{key:"hasClass",value:function(t,e){return!!t.className&&(" "+t.className+" ").indexOf(" "+e+" ")>-1}},{key:"check_mousedown",value:function(t){this.hasClass(t.target,be)?this.open_color_picker(t.target.parentNode):this.close_color_picker()}},{key:"popup_color_picker",value:function(t){var e=this.cm.getCursor(),r=this,n={lineNo:e.line,ch:e.ch,color:t||"#FFFFFF",isShortCut:!0};Object.keys(this.markers).forEach(function(t){if(("#"+t).indexOf("#"+n.lineNo+":")>-1){var e=r.markers[t];e.ch<=n.ch&&n.ch<=e.ch+e.color.length&&(n.ch=e.ch,n.color=e.color,n.nameColor=e.nameColor)}}),this.open_color_picker(n)}},{key:"open_color_picker",value:function(t){var e=t.lineNo,r=t.ch,n=t.nameColor,i=t.color;if(this.colorpicker){var o=this,a=i,l=this.cm.charCoords({line:e,ch:r});this.colorpicker.show({left:l.left,top:l.bottom,isShortCut:t.isShortCut||!1,hideDelay:o.opt.hideDelay||2e3},n||i,function(t){o.cm.replaceRange(t,{line:e,ch:r},{line:e,ch:r+a.length},"*colorpicker"),a=t})}}},{key:"close_color_picker",value:function(t){this.colorpicker&&this.colorpicker.hide()}},{key:"key",value:function(t,e){return[t,e].join(":")}},{key:"keyup",value:function(t){this.colorpicker&&("Escape"==t.key?this.colorpicker.hide():0==this.colorpicker.isShortCut&&this.colorpicker.hide())}},{key:"init_color_update",value:function(){this.markers={}}},{key:"style_color_update",value:function(t){if(t)this.match(t);else for(var e=this.cm.lineCount(),r=0;r-1)&&(delete this.markers[l],i[o].marker.clear())}}},{key:"match_result",value:function(t){return qt.matches(t.text)}},{key:"submatch",value:function(t,e){var r=this;this.empty_marker(t,e);var n={next:0};this.match_result(e).forEach(function(i){r.render(n,t,e,i.color,i.nameColor)})}},{key:"match",value:function(t){var e=this.cm.getLineHandle(t),r=this;this.cm.operation(function(){r.submatch(t,e)})}},{key:"make_element",value:function(){var t=document.createElement("div");return t.className=me,this.is_edit_mode()?t.title="open color picker":t.title="",t.back_element=this.make_background_element(),t.appendChild(t.back_element),t}},{key:"make_background_element",value:function(){var t=document.createElement("div");return t.className=be,t}},{key:"set_state",value:function(t,e,r,n){var i=this.create_marker(t,e);return i.lineNo=t,i.ch=e,i.color=r,i.nameColor=n,i}},{key:"create_marker",value:function(t,e){var r=this.key(t,e);return this.markers[r]||(this.markers[r]=this.make_element()),this.markers[r]}},{key:"has_marker",value:function(t,e){var r=this.key(t,e);return!!this.markers[r]}},{key:"update_element",value:function(t,e){t.back_element.style.backgroundColor=e}},{key:"set_mark",value:function(t,e,r){this.cm.setBookmark({line:t,ch:e},{widget:r,handleMouseEvents:!0})}},{key:"is_excluded_token",value:function(t,e){for(var r=this.cm.getTokenTypeAt({line:t,ch:e}),n=0,i=0,o=this.excluded_token.length;i0}},{key:"render",value:function(t,e,r,n,i){var o=r.text.indexOf(n,t.next);if(!0!==this.is_excluded_token(e,o)){if(t.next=o+n.length,this.has_marker(e,o))return this.update_element(this.create_marker(e,o),i||n),void this.set_state(e,o,n,i);var a=this.create_marker(e,o);this.update_element(a,i||n),this.set_state(e,o,n,i||n),this.set_mark(e,o,a)}}}]),t}();return t&&t.defineOption("colorpicker",!1,function(e,r,n){n&&n!=t.Init&&e.state.colorpicker&&(e.state.colorpicker.destroy(),e.state.colorpicker=null),r&&(e.state.colorpicker=new Ee(e,r))}),p({Color:qt,ColorNames:r},pe,{ImageFilter:Zt,GL:Xt,HueColor:Kt,Canvas:h,ImageLoader:$})}(CodeMirror); diff --git a/package.json b/package.json index a3c3080..a79fa97 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codemirror-colorpicker", - "version": "1.9.11", + "version": "1.9.12", "description": "colorpicker for codemirror", "main": "./dist/codemirror-colorpicker.js", "scripts": { diff --git a/src/colorpicker/chromedevtool/ColorControl.js b/src/colorpicker/chromedevtool/ColorControl.js index 8dc7bd1..2408445 100644 --- a/src/colorpicker/chromedevtool/ColorControl.js +++ b/src/colorpicker/chromedevtool/ColorControl.js @@ -11,25 +11,28 @@ export default class ColorControl extends EventMachin { this.colorpicker = colorpicker; this.initialize(); } - - initialize () { - this.template(` -
-
-
-
-
+ + template () { + return ` +
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
- `) +
+
+
+ ` + } + + initialize () { this.drag_bar_pos = {} this.opacity_drag_bar_pos = {} @@ -196,6 +199,15 @@ export default class ColorControl extends EventMachin { this.setHueColor(null, true) } + // Event Bindings + 'mouseup document' (e) { + this.EventDocumentMouseUp(e); + } + + 'mousemove document' (e) { + this.EventDocumentMouseMove(e); + } + 'mousedown $drag_bar' (e) { e.preventDefault(); this.isHueDown = true; diff --git a/src/colorpicker/chromedevtool/ColorInformation.js b/src/colorpicker/chromedevtool/ColorInformation.js index de5d767..8a365b1 100644 --- a/src/colorpicker/chromedevtool/ColorInformation.js +++ b/src/colorpicker/chromedevtool/ColorInformation.js @@ -13,59 +13,61 @@ export default class ColorInformation extends EventMachin { } - initialize () { - - this.template(` -
-
- + template () { + return ` +
+
+ +
+
+
+ +
HEX
-
-
- -
HEX
-
+
+
+
+ +
R
+
+
+ +
G
-
-
- -
R
-
-
- -
G
-
-
- -
B
-
-
- -
A
-
+
+ +
B
+
+
+ +
A
+
+
+
+
+ +
H
-
-
- -
H
-
-
- -
%
-
H
-
-
- -
%
-
L
-
-
- -
A
-
+
+ +
%
+
H
+
+
+ +
%
+
L
+
+
+ +
A
- `) +
+ ` + } + + initialize () { this.format = 'hex'; } diff --git a/src/colorpicker/chromedevtool/ColorPalette.js b/src/colorpicker/chromedevtool/ColorPalette.js index 48927d3..e6bc06e 100644 --- a/src/colorpicker/chromedevtool/ColorPalette.js +++ b/src/colorpicker/chromedevtool/ColorPalette.js @@ -9,18 +9,21 @@ export default class ColorPallet extends EventMachin { this.colorpicker = colorpicker; this.initialize(); } + + template () { + return ` +
+
+
+
+
+
+
+ ` + } initialize () { - this.template(` -
-
-
-
-
-
-
- `) } setBackgroundColor (color) { @@ -92,6 +95,13 @@ export default class ColorPallet extends EventMachin { } } + 'mouseup document' (e) { + this.EventDocumentMouseUp(e); + } + + 'mousemove document' (e) { + this.EventDocumentMouseMove(e); + } mousedown (e) { this.isDown = true; diff --git a/src/colorpicker/chromedevtool/ColorSetsChooser.js b/src/colorpicker/chromedevtool/ColorSetsChooser.js index c103f47..feb97bf 100644 --- a/src/colorpicker/chromedevtool/ColorSetsChooser.js +++ b/src/colorpicker/chromedevtool/ColorSetsChooser.js @@ -12,65 +12,50 @@ export default class ColorSetsChooser extends EventMachin { this.initialize(); } - initialize () { - - this.template(` + template () { + return `
-

Color Paletts

+

Color Palettes

×
- `) - - this.refresh(); + ` } - refresh () { - this.refs.$colorsetsList.html(this.makeColorSetsList()); - } - - makeColorItemList (colors, maxCount = 5) { - - var $list = new Dom('div'); - - for(var i = 0; i < maxCount; i++) { - var color = colors[i] || 'rgba(255, 255, 255, 1)'; - var $item = $list.createChild('div', 'color-item', { - title: color - }); + initialize () { - $item.createChild('div', 'color-view', null, { - 'background-color': color - }); - } - - return $list; + this.load(); } - makeColorSetsList () { - const $div = new Dom('div'); - + // loadable + 'load $colorsetsList' () { // colorsets const colorSets = this.colorpicker.getColorSetsList(); - colorSets.forEach( (element, index) => { - if (this.colorpicker.isPaletteType() && element.edit ) { - // NOOP - } else { - const $item = $div.createChild('div', 'colorsets-item', { - [DATA_COLORSETS_INDEX] : index - }); - $item.createChild('h1', 'title').html(element.name) - - $item.createChild('div', 'items').append(this.makeColorItemList(element.colors, 5)) - } - }); - - return $div; + return ` +
+ ${colorSets.map( (element, index) => { + return ` +
+

${element.name}

+
+
+ ${element.colors.filter((color, i) => i < 5).map(color => { + color = color || 'rgba(255, 255, 255, 1)'; + return `
+
+
` + }).join('')} +
+
+
` + }).join('')} +
+ ` } show () { diff --git a/src/colorpicker/chromedevtool/CurrentColorSets.js b/src/colorpicker/chromedevtool/CurrentColorSets.js index 10557e3..8bcb488 100644 --- a/src/colorpicker/chromedevtool/CurrentColorSets.js +++ b/src/colorpicker/chromedevtool/CurrentColorSets.js @@ -11,55 +11,41 @@ export default class CurrentColorSets extends EventMachin { this.initialize(); } - - makeCurrentColorSets () { - var list = new Dom('div', 'current-color-sets'); - const currentColorSets = this.colorSetsList.getCurrentColorSets() - const colors = this.colorSetsList.getCurrentColors() - - - for(var i = 0, len = colors.length; i < len; i++) { - var color = colors[i]; - var item = list.createChild('div', 'color-item', { - 'title' : color, - 'data-index' : i, - 'data-color' : color - }); - - item.createChild('div', 'empty'); - item.createChild('div', 'color-view', null, { - 'background-color': color - }) - } - - - if (currentColorSets.edit) { - list.createChild('div', 'add-color-item').html('+'); - } - - return list; - } - initialize () { - - this.template(` + template() { + return `
- `) + ` + } - this.refresh(); - } + 'load $colorSetsColorList' () { + const currentColorSets = this.colorSetsList.getCurrentColorSets() + const colors = this.colorSetsList.getCurrentColors() - refresh () { - this.refs.$colorSetsColorList.html(this.makeCurrentColorSets()) + return ` +
+ ${colors.map( (color, i) => { + return `
+
+
+
` + }).join('')} + ${currentColorSets.edit ? `
+
` : ''} +
+ ` + } + + initialize () { + this.load() } refreshAll () { - this.refresh(); + this.load(); this.colorpicker.refreshColorSetsChooser(); } diff --git a/src/colorpicker/chromedevtool/CurrentColorSetsContextMenu.js b/src/colorpicker/chromedevtool/CurrentColorSetsContextMenu.js index 9d05da1..616b41a 100644 --- a/src/colorpicker/chromedevtool/CurrentColorSetsContextMenu.js +++ b/src/colorpicker/chromedevtool/CurrentColorSetsContextMenu.js @@ -12,15 +12,18 @@ export default class CurrentColorSetsContextMenu extends EventMachin { this.initialize(); } - initialize () { - - this.template(` + template () { + return `
  • Remove color
  • Remove all to the right
  • Clear palette
- `) + ` + } + + initialize () { + } show (e, index) { diff --git a/src/colorpicker/chromedevtool/index.js b/src/colorpicker/chromedevtool/index.js index 179717f..f78a06a 100644 --- a/src/colorpicker/chromedevtool/index.js +++ b/src/colorpicker/chromedevtool/index.js @@ -338,24 +338,7 @@ export default class ColorPicker extends BaseColorPicker { this.control.setOnlyHueColor(); } - // Event Bindings - 'mouseup document' (e) { - this.palette.EventDocumentMouseUp(e); - this.control.EventDocumentMouseUp(e); - - // when color picker clicked in outside - if (this.checkInHtml(e.target)) { - //this.setHideDelay(hideDelay); - } else if (this.checkColorPickerClass(e.target) == false) { - this.hide(); - } - } - - 'mousemove document' (e) { - this.palette.EventDocumentMouseMove(e); - this.control.EventDocumentMouseMove(e); - } - + initializeEvent() { this.initializeEventMachin(); @@ -378,7 +361,7 @@ export default class ColorPicker extends BaseColorPicker { } refreshColorSetsChooser() { - this.colorSetsChooser.refresh(); + this.colorSetsChooser.load(); } getColorSetsList() { @@ -387,7 +370,7 @@ export default class ColorPicker extends BaseColorPicker { setCurrentColorSets(nameOrIndex) { this.colorSetsList.setCurrentColorSets(nameOrIndex); - this.currentColorSets.refresh(); + this.currentColorSets.load(); } setColorSets(list) { @@ -405,4 +388,16 @@ export default class ColorPicker extends BaseColorPicker { this.currentColorSets.destroy(); this.contextMenu.destroy(); } + + // Event Bindings + 'mouseup document' (e) { + + // when color picker clicked in outside + if (this.checkInHtml(e.target)) { + //this.setHideDelay(hideDelay); + } else if (this.checkColorPickerClass(e.target) == false) { + this.hide(); + } + } + } \ No newline at end of file diff --git a/src/scss/component/colorchooser.scss b/src/scss/component/colorchooser.scss index 8045376..a060de5 100644 --- a/src/scss/component/colorchooser.scss +++ b/src/scss/component/colorchooser.scss @@ -45,7 +45,9 @@ padding-left:14px; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + white-space: nowrap; + color:#000; + text-align: left; } .items { @@ -54,7 +56,7 @@ padding-right: 10px; display:block; height: 100%; - line-height: 1.6; + line-height: 2; cursor:pointer; } } @@ -89,7 +91,8 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - + color:#000; + text-align: left; } .items { diff --git a/src/scss/index.scss b/src/scss/index.scss index 4181d0e..04d584c 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -2,4 +2,4 @@ @import './colorview'; @import './colorpicker'; - \ No newline at end of file + \ No newline at end of file diff --git a/src/util/EventMachin.js b/src/util/EventMachin.js index cf746e5..109b6aa 100644 --- a/src/util/EventMachin.js +++ b/src/util/EventMachin.js @@ -11,18 +11,43 @@ export default class EventMachin { constructor() { this.state = new State(this); this.refs = {} + + this.$el = this.parseTemplate(this.template()) + this.refs.$el = this.$el; } - template (html) { - this.$el = new Dom("div").html(html).firstChild() - const refs = this.$el.findAll("[ref]"); + parseTemplate (html) { + const $el = new Dom("div").html(html).firstChild() + const refs = $el.findAll("[ref]"); [...refs].forEach(node => { - this.refs[node.getAttribute("ref")] = new Dom(node); + const name = node.getAttribute("ref"); + this.refs[name] = new Dom(node); + + const callbackName = `load ${name}` + + if (this[callbackName]) { + this.refs[name].load = () => { + new Dom(node).html(this.parseTemplate(this[callbackName].call(this))) + } + } }) - this.refs.$el = this.$el + + return $el; + } + + load () { + Object.keys(this.refs).forEach(key => { + if (this.refs[key].load) { + this.refs[key].load() + } + }) + } + + template () { + return '
'; } - initializeEvent () { + initializeEvent () { this.initializeEventMachin(); }