diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css index ede0d40..04aecf1 100644 --- a/addon/codemirror-colorpicker.css +++ b/addon/codemirror-colorpicker.css @@ -93,46 +93,46 @@ margin: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } - .codemirror-colorpicker .colorpicker-body > .color { + .codemirror-colorpicker .colorpicker-body .color { position: relative; height: 120px; overflow: hidden; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation { + .codemirror-colorpicker .colorpicker-body .color > .saturation { position: relative; width: 100%; height: 100%; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value { position: relative; width: 100%; height: 100%; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value > .drag-pointer { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer { position: absolute; width: 10px; height: 10px; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } - .codemirror-colorpicker .colorpicker-body > .color > .saturation { + .codemirror-colorpicker .colorpicker-body .color > .saturation { background-color: rgba(204, 154, 129, 0); background-image: -webkit-gradient(linear, left top, right top, from(#FFF), to(rgba(204, 154, 129, 0))); background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0)); background-repeat: repeat-x; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value { background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(rgba(204, 154, 129, 0))); background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0)); } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value > .drag-pointer { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer { border: 1px solid #fff; -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); } - .codemirror-colorpicker .colorpicker-body > .control { + .codemirror-colorpicker .colorpicker-body .control { position: relative; padding: 10px 0px 10px 0px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - .codemirror-colorpicker .colorpicker-body > .control > .color, .codemirror-colorpicker .colorpicker-body > .control > .empty { + .codemirror-colorpicker .colorpicker-body .control > .color, .codemirror-colorpicker .colorpicker-body .control > .empty { position: absolute; left: 12px; top: 14px; @@ -141,33 +141,33 @@ border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; } - .codemirror-colorpicker .colorpicker-body > .control > .color { + .codemirror-colorpicker .colorpicker-body .control > .color { border: 1px solid rgba(0, 0, 0, 0.1); } - .codemirror-colorpicker .colorpicker-body > .control > .hue { + .codemirror-colorpicker .colorpicker-body .control > .hue { position: relative; padding: 6px 16px; margin: 0px 0px 0px 42px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .control > .hue > .hue-container { + .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container { position: relative; width: 100%; height: 10px; border-radius: 3px; } - .codemirror-colorpicker .colorpicker-body > .control > .opacity { + .codemirror-colorpicker .colorpicker-body .control > .opacity { position: relative; padding: 3px 16px; margin: 0px 0px 0px 42px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .control > .opacity > .opacity-container { + .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container { position: relative; width: 100%; height: 10px; border-radius: 3px; } - .codemirror-colorpicker .colorpicker-body > .control .drag-bar, .codemirror-colorpicker .colorpicker-body > .control .drag-bar2 { + .codemirror-colorpicker .colorpicker-body .control .drag-bar, .codemirror-colorpicker .colorpicker-body .control .drag-bar2 { position: absolute; cursor: pointer; top: 50%; @@ -177,12 +177,12 @@ width: 12px; height: 12px; border-radius: 50%; } - .codemirror-colorpicker .colorpicker-body > .control > .hue > .hue-container { + .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container { background: -webkit-gradient(linear, left top, right top, from(#ff0000), color-stop(17%, #ffff00), color-stop(33%, #00ff00), color-stop(50%, #00ffff), color-stop(67%, #0000ff), color-stop(83%, #ff00ff), to(#ff0000)); background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } - .codemirror-colorpicker .colorpicker-body > .control > .opacity > .opacity-container { + .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } - .codemirror-colorpicker .colorpicker-body > .control > .opacity > .opacity-container > .color-bar { + .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container > .color-bar { position: absolute; display: block; content: ""; @@ -190,20 +190,20 @@ right: 0px; bottom: 0px; top: 0px; } - .codemirror-colorpicker .colorpicker-body > .control > .empty { + .codemirror-colorpicker .colorpicker-body .control > .empty { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } - .codemirror-colorpicker .colorpicker-body > .control .drag-bar, - .codemirror-colorpicker .colorpicker-body > .control .drag-bar2 { + .codemirror-colorpicker .colorpicker-body .control .drag-bar, + .codemirror-colorpicker .colorpicker-body .control .drag-bar2 { border: 1px solid rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2); background-color: #fefefe; } - .codemirror-colorpicker .colorpicker-body > .information { + .codemirror-colorpicker .colorpicker-body .information { /*border-top: 1px solid #e8e8e8;*/ position: relative; -webkit-box-sizing: padding-box; box-sizing: padding-box; } - .codemirror-colorpicker .colorpicker-body > .information > input { + .codemirror-colorpicker .colorpicker-body .information > input { position: absolute; font-size: 10px; height: 20px; @@ -215,27 +215,27 @@ -moz-user-select: text; -ms-user-select: text; user-select: text; } - .codemirror-colorpicker .colorpicker-body > .information > input[type=number] { + .codemirror-colorpicker .colorpicker-body .information > input[type=number] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - .codemirror-colorpicker .colorpicker-body > .information > input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body > .information > input[type=number]::-webkit-outer-spin-button { + .codemirror-colorpicker .colorpicker-body .information > input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body .information > input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } - .codemirror-colorpicker .colorpicker-body > .information.hex > .information-item.hex { + .codemirror-colorpicker .colorpicker-body .information.hex > .information-item.hex { display: -webkit-box; display: -ms-flexbox; display: flex; } - .codemirror-colorpicker .colorpicker-body > .information.rgb > .information-item.rgb { + .codemirror-colorpicker .colorpicker-body .information.rgb > .information-item.rgb { display: -webkit-box; display: -ms-flexbox; display: flex; } - .codemirror-colorpicker .colorpicker-body > .information.hsl > .information-item.hsl { + .codemirror-colorpicker .colorpicker-body .information.hsl > .information-item.hsl { display: -webkit-box; display: -ms-flexbox; display: flex; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item { + .codemirror-colorpicker .colorpicker-body .information > .information-item { display: none; position: relative; padding: 0px 5px; @@ -243,7 +243,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 40px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field { display: block; -webkit-box-flex: 1; -ms-flex: 1; @@ -252,12 +252,12 @@ -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field > .title { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field > .title { text-align: center; font-size: 12px; color: #a9a9a9; padding-top: 2px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input { text-align: center; width: 100%; padding: 3px; @@ -272,21 +272,21 @@ user-select: text; border: 1px solid #cbcbcb; border-radius: 2px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input[type=number] { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input[type=number]::-webkit-outer-spin-button { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field.hsl-l input[type=number], .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field.hsl-s input[type=number] { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-l input[type=number], .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-s input[type=number] { padding-left: 1px; padding-right: 10px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field .postfix { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field .postfix { display: inline-block; position: absolute; - right: 4px; + right: 3px; top: 2px; height: 21px; line-height: 2; @@ -295,7 +295,7 @@ box-sizing: border-box; text-align: center; font-size: 11px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-change { + .codemirror-colorpicker .colorpicker-body .information > .information-change { position: absolute; display: block; width: 40px; @@ -306,38 +306,38 @@ -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 5px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-change > .format-change-button { + .codemirror-colorpicker .colorpicker-body .information > .information-change > .format-change-button { -webkit-box-sizing: border-box; box-sizing: border-box; background: transparent; border: 0px; cursor: pointer; outline: none; } - .codemirror-colorpicker .colorpicker-body > .information > .title { + .codemirror-colorpicker .colorpicker-body .information > .title { color: #a3a3a3; } - .codemirror-colorpicker .colorpicker-body > .information > .input { + .codemirror-colorpicker .colorpicker-body .information > .input { color: #333; } - .codemirror-colorpicker .colorpicker-body > .colorsets { + .codemirror-colorpicker .colorpicker-body .colorsets { border-top: 1px solid #e2e2e2; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .menu { + .codemirror-colorpicker .colorpicker-body .colorsets > .menu { float: right; padding: 10px 5px; padding-right: 15px; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .menu button { + .codemirror-colorpicker .colorpicker-body .colorsets > .menu button { border: 0px; font-size: 14px; font-weight: 300; font-family: serif, sans-serif; outline: none; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list { margin-right: 30px; display: block; padding: 12px 0px 0px 12px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item { width: 13px; height: 13px; border-radius: 2px; @@ -351,10 +351,10 @@ box-sizing: border-box; cursor: pointer; vertical-align: middle; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item:hover { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item .empty { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item .empty { position: absolute; left: 0px; top: 0px; @@ -364,7 +364,7 @@ padding: 0px; margin: 0px; pointer-events: none; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item .color-view { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item .color-view { position: absolute; left: 0px; top: 0px; @@ -376,7 +376,7 @@ border: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; box-sizing: border-box; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .add-color-item { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .add-color-item { width: 13px; height: 13px; display: inline-block; @@ -390,7 +390,7 @@ font-family: serif,sans-serif; color: #8e8e8e; vertical-align: middle; } - .codemirror-colorpicker .colorpicker-body > .color-chooser { + .codemirror-colorpicker .colorpicker-body .color-chooser { position: absolute; left: 0px; right: 0px; @@ -401,17 +401,17 @@ -webkit-transition: opacity 0.05s ease-out; transition: opacity 0.05s ease-out; pointer-events: none; } - .codemirror-colorpicker .colorpicker-body > .color-chooser.open { + .codemirror-colorpicker .colorpicker-body .color-chooser.open { opacity: 1; pointer-events: all; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container { position: absolute; top: 120px; left: 0px; right: 0px; bottom: 0px; background-color: white; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-item-header { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header { position: absolute; top: 0px; left: 0px; @@ -424,7 +424,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-item-header .title { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; @@ -442,7 +442,7 @@ white-space: nowrap; color: #000; text-align: left; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-item-header .items { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; @@ -452,23 +452,23 @@ height: 100%; line-height: 2; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list { position: absolute; top: 34px; left: 0px; right: 0px; bottom: 0px; overflow: auto; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 3px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover { background-color: rgba(0, 0, 0, 0.05); } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; @@ -488,7 +488,7 @@ white-space: nowrap; color: #000; text-align: left; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; @@ -497,7 +497,7 @@ line-height: 1.6; cursor: pointer; pointer-events: none; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item { width: 13px; height: 13px; border-radius: 3px; @@ -511,7 +511,7 @@ box-sizing: border-box; cursor: pointer; vertical-align: middle; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view { width: 100%; height: 100%; padding: 0px; @@ -572,30 +572,44 @@ display: none; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.rgb { display: inherit; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.hsl { + display: none !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hex { display: inherit; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hsl { + display: none !important; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.rgb { + display: none !important; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.hsl { + display: inherit; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; margin-right: 0px; } - .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title { - color: black; - font-size: 11px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field { + padding-left: 0px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child { + padding-right: 0px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title { + color: black; + font-size: 11px; + cursor: pointer; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child:not(:first-child) { padding-right: 0px; } - .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl { - display: none !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hex { - width: 70px; + width: 74px; padding-right: 0px; padding-left: 5px; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.rgb { - width: 144px; + width: 140px; + padding-left: 0px; + padding-right: 0px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl { + display: none; + width: 140px; padding-left: 0px; padding-right: 0px; } - .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .menu { - display: none; } .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list { margin-right: 0px; padding-right: 12px; } @@ -953,6 +967,78 @@ transform: translateX(-50%) translateY(-50%); } .codemirror-colorpicker.xd .information { margin-top: 5px; } + .codemirror-colorpicker.vscode { + width: 336px; + display: inline-block; + background-color: #333; + border: 1px solid #ececec; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0px; } + .codemirror-colorpicker.vscode .colorpicker-body { + border-radius: 0px; + display: inline-block; } + .codemirror-colorpicker.vscode .colorpicker-body .color-view { + height: 34px; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } + .codemirror-colorpicker.vscode .colorpicker-body .color-view .color-view-container { + line-height: 34px; + font-size: 14px; + text-align: center; + width: 100%; + height: 100%; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + text-shadow: 0 0 3px #535353; } + .codemirror-colorpicker.vscode .colorpicker-body .color-tool { + padding: 8px; } + .codemirror-colorpicker.vscode .color { + display: inline-block; + width: 240px; + height: 160px; + vertical-align: middle; } + .codemirror-colorpicker.vscode .control { + height: 160px; + vertical-align: middle; + display: inline-block; + padding: 0px 0px 0px 4px; } + .codemirror-colorpicker.vscode .control .hue, .codemirror-colorpicker.vscode .control .opacity { + margin: 0px; + padding: 0px; + width: 30px; + display: inline-block; + vertical-align: middle; + height: 100%; + position: relative; } + .codemirror-colorpicker.vscode .control .hue { + padding-left: 5px; + width: 35px; } + .codemirror-colorpicker.vscode .control .hue > .hue-container { + border-radius: 0px; + height: 100%; + background: -webkit-gradient(linear, left bottom, left top, from(#ff0000), color-stop(17%, #ffff00), color-stop(33%, #00ff00), color-stop(50%, #00ffff), color-stop(67%, #0000ff), color-stop(83%, #ff00ff), to(#ff0000)); + background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } + .codemirror-colorpicker.vscode .control .opacity > .opacity-container { + border-radius: 0px; + height: 100%; + width: 30px; } + .codemirror-colorpicker.vscode .control .drag-bar, .codemirror-colorpicker.vscode .control .drag-bar2 { + background-color: transparent; + height: 5px; + width: 33px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transform: translateY(-50%) translateX(-2px); + transform: translateY(-50%) translateX(-2px); + border: 1px solid white; + border-radius: 0px; + -webkit-box-shadow: 0 0 2px 0 black, inset 0 0 0 0 black; + box-shadow: 0 0 2px 0 black, inset 0 0 0 0 black; } .colorsets-contextmenu { position: fixed; diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js index f8783a9..37fb80f 100644 --- a/addon/codemirror-colorpicker.js +++ b/addon/codemirror-colorpicker.js @@ -8,7 +8,7 @@ var CodeMirrorColorPicker = (function () { * convert color to format string * * // hex - * color.format({ r : 255, g : 255, b : 255 }, 'hex') // #FFFFFF + * color.format({ r : 255, g : 255, b : 255, a: 1 }, 'hex') // #FFFFFFFF * * // rgb * color.format({ r : 255, g : 255, b : 255 }, 'rgb') // rgba(255, 255, 255, 0.5); @@ -53,7 +53,14 @@ function hex(obj) { var b = obj.b.toString(16); if (obj.b < 16) b = "0" + b; - return '#' + r + g + b; + var alphaValue = ''; + if (obj.a < 1) { + var alpha = Math.floor(obj.a * 255); + var alphaValue = alpha.toString(16); + if (alpha < 16) alphaValue = "0" + alphaValue; + } + + return '#' + r + g + b + alphaValue; } function rgb(obj) { @@ -158,932 +165,947 @@ var math = { caculateAngle: caculateAngle }; -function RGBtoHSV(r, g, b) { +var color_names = { aliceblue: "rgb(240, 248, 255)", antiquewhite: "rgb(250, 235, 215)", aqua: "rgb(0, 255, 255)", aquamarine: "rgb(127, 255, 212)", azure: "rgb(240, 255, 255)", beige: "rgb(245, 245, 220)", bisque: "rgb(255, 228, 196)", black: "rgb(0, 0, 0)", blanchedalmond: "rgb(255, 235, 205)", blue: "rgb(0, 0, 255)", blueviolet: "rgb(138, 43, 226)", brown: "rgb(165, 42, 42)", burlywood: "rgb(222, 184, 135)", cadetblue: "rgb(95, 158, 160)", chartreuse: "rgb(127, 255, 0)", chocolate: "rgb(210, 105, 30)", coral: "rgb(255, 127, 80)", cornflowerblue: "rgb(100, 149, 237)", cornsilk: "rgb(255, 248, 220)", crimson: "rgb(237, 20, 61)", cyan: "rgb(0, 255, 255)", darkblue: "rgb(0, 0, 139)", darkcyan: "rgb(0, 139, 139)", darkgoldenrod: "rgb(184, 134, 11)", darkgray: "rgb(169, 169, 169)", darkgrey: "rgb(169, 169, 169)", darkgreen: "rgb(0, 100, 0)", darkkhaki: "rgb(189, 183, 107)", darkmagenta: "rgb(139, 0, 139)", darkolivegreen: "rgb(85, 107, 47)", darkorange: "rgb(255, 140, 0)", darkorchid: "rgb(153, 50, 204)", darkred: "rgb(139, 0, 0)", darksalmon: "rgb(233, 150, 122)", darkseagreen: "rgb(143, 188, 143)", darkslateblue: "rgb(72, 61, 139)", darkslategray: "rgb(47, 79, 79)", darkslategrey: "rgb(47, 79, 79)", darkturquoise: "rgb(0, 206, 209)", darkviolet: "rgb(148, 0, 211)", deeppink: "rgb(255, 20, 147)", deepskyblue: "rgb(0, 191, 255)", dimgray: "rgb(105, 105, 105)", dimgrey: "rgb(105, 105, 105)", dodgerblue: "rgb(30, 144, 255)", firebrick: "rgb(178, 34, 34)", floralwhite: "rgb(255, 250, 240)", forestgreen: "rgb(34, 139, 34)", fuchsia: "rgb(255, 0, 255)", gainsboro: "rgb(220, 220, 220)", ghostwhite: "rgb(248, 248, 255)", gold: "rgb(255, 215, 0)", goldenrod: "rgb(218, 165, 32)", gray: "rgb(128, 128, 128)", grey: "rgb(128, 128, 128)", green: "rgb(0, 128, 0)", greenyellow: "rgb(173, 255, 47)", honeydew: "rgb(240, 255, 240)", hotpink: "rgb(255, 105, 180)", indianred: "rgb(205, 92, 92)", indigo: "rgb(75, 0, 130)", ivory: "rgb(255, 255, 240)", khaki: "rgb(240, 230, 140)", lavender: "rgb(230, 230, 250)", lavenderblush: "rgb(255, 240, 245)", lawngreen: "rgb(124, 252, 0)", lemonchiffon: "rgb(255, 250, 205)", lightblue: "rgb(173, 216, 230)", lightcoral: "rgb(240, 128, 128)", lightcyan: "rgb(224, 255, 255)", lightgoldenrodyellow: "rgb(250, 250, 210)", lightgreen: "rgb(144, 238, 144)", lightgray: "rgb(211, 211, 211)", lightgrey: "rgb(211, 211, 211)", lightpink: "rgb(255, 182, 193)", lightsalmon: "rgb(255, 160, 122)", lightseagreen: "rgb(32, 178, 170)", lightskyblue: "rgb(135, 206, 250)", lightslategray: "rgb(119, 136, 153)", lightslategrey: "rgb(119, 136, 153)", lightsteelblue: "rgb(176, 196, 222)", lightyellow: "rgb(255, 255, 224)", lime: "rgb(0, 255, 0)", limegreen: "rgb(50, 205, 50)", linen: "rgb(250, 240, 230)", magenta: "rgb(255, 0, 255)", maroon: "rgb(128, 0, 0)", mediumaquamarine: "rgb(102, 205, 170)", mediumblue: "rgb(0, 0, 205)", mediumorchid: "rgb(186, 85, 211)", mediumpurple: "rgb(147, 112, 219)", mediumseagreen: "rgb(60, 179, 113)", mediumslateblue: "rgb(123, 104, 238)", mediumspringgreen: "rgb(0, 250, 154)", mediumturquoise: "rgb(72, 209, 204)", mediumvioletred: "rgb(199, 21, 133)", midnightblue: "rgb(25, 25, 112)", mintcream: "rgb(245, 255, 250)", mistyrose: "rgb(255, 228, 225)", moccasin: "rgb(255, 228, 181)", navajowhite: "rgb(255, 222, 173)", navy: "rgb(0, 0, 128)", oldlace: "rgb(253, 245, 230)", olive: "rgb(128, 128, 0)", olivedrab: "rgb(107, 142, 35)", orange: "rgb(255, 165, 0)", orangered: "rgb(255, 69, 0)", orchid: "rgb(218, 112, 214)", palegoldenrod: "rgb(238, 232, 170)", palegreen: "rgb(152, 251, 152)", paleturquoise: "rgb(175, 238, 238)", palevioletred: "rgb(219, 112, 147)", papayawhip: "rgb(255, 239, 213)", peachpuff: "rgb(255, 218, 185)", peru: "rgb(205, 133, 63)", pink: "rgb(255, 192, 203)", plum: "rgb(221, 160, 221)", powderblue: "rgb(176, 224, 230)", purple: "rgb(128, 0, 128)", rebeccapurple: "rgb(102, 51, 153)", red: "rgb(255, 0, 0)", rosybrown: "rgb(188, 143, 143)", royalblue: "rgb(65, 105, 225)", saddlebrown: "rgb(139, 69, 19)", salmon: "rgb(250, 128, 114)", sandybrown: "rgb(244, 164, 96)", seagreen: "rgb(46, 139, 87)", seashell: "rgb(255, 245, 238)", sienna: "rgb(160, 82, 45)", silver: "rgb(192, 192, 192)", skyblue: "rgb(135, 206, 235)", slateblue: "rgb(106, 90, 205)", slategray: "rgb(112, 128, 144)", slategrey: "rgb(112, 128, 144)", snow: "rgb(255, 250, 250)", springgreen: "rgb(0, 255, 127)", steelblue: "rgb(70, 130, 180)", tan: "rgb(210, 180, 140)", teal: "rgb(0, 128, 128)", thistle: "rgb(216, 191, 216)", tomato: "rgb(255, 99, 71)", turquoise: "rgb(64, 224, 208)", violet: "rgb(238, 130, 238)", wheat: "rgb(245, 222, 179)", white: "rgb(255, 255, 255)", whitesmoke: "rgb(245, 245, 245)", yellow: "rgb(255, 255, 0)", yellowgreen: "rgb(154, 205, 50)", transparent: "rgba(0, 0, 0, 0)" }; - if (arguments.length == 1) { - var _arguments$ = arguments[0], - r = _arguments$.r, - g = _arguments$.g, - b = _arguments$.b; - } +function isColorName(name) { + return !!color_names[name]; +} - var R1 = r / 255; - var G1 = g / 255; - var B1 = b / 255; +function getColorByName(name) { + return color_names[name]; +} - var MaxC = Math.max(R1, G1, B1); - var MinC = Math.min(R1, G1, B1); +var ColorNames = { + isColorName: isColorName, + getColorByName: getColorByName +}; - var DeltaC = MaxC - MinC; +function HUEtoRGB(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; +} - var H = 0; +function HSLtoHSV(h, s, l) { - if (DeltaC == 0) { - H = 0; - } else if (MaxC == R1) { - H = 60 * ((G1 - B1) / DeltaC % 6); - } else if (MaxC == G1) { - H = 60 * ((B1 - R1) / DeltaC + 2); - } else if (MaxC == B1) { - H = 60 * ((R1 - G1) / DeltaC + 4); + if (arguments.length == 1) { + var _arguments$ = arguments[0], + h = _arguments$.h, + s = _arguments$.s, + l = _arguments$.l; } + var rgb = HSLtoRGB(h, s, l); - if (H < 0) { - H = 360 + H; + return RGBtoHSV(rgb.r, rgb.g, rgb.b); +} + +function HSLtoRGB(h, s, l) { + + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + h = _arguments$2.h, + s = _arguments$2.s, + l = _arguments$2.l; } - var S = 0; + var r, g, b; - if (MaxC == 0) S = 0;else S = DeltaC / MaxC; + h /= 360; + s /= 100; + l /= 100; - var V = MaxC; + if (s == 0) { + r = g = b = l; // achromatic + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = HUEtoRGB(p, q, h + 1 / 3); + g = HUEtoRGB(p, q, h); + b = HUEtoRGB(p, q, h - 1 / 3); + } - return { h: H, s: S, v: V }; + return { r: round(r * 255), g: round(g * 255), b: round(b * 255) }; } -function RGBtoCMYK(r, g, b) { +var fromHSL = { + HUEtoRGB: HUEtoRGB, + HSLtoHSV: HSLtoHSV, + HSLtoRGB: HSLtoRGB +}; - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - r = _arguments$2.r, - g = _arguments$2.g, - b = _arguments$2.b; +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - var R1 = r / 255; - var G1 = g / 255; - var B1 = b / 255; + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); - var K = 1 - Math.max(R1, G1, B1); - var C = (1 - R1 - K) / (1 - K); - var M = (1 - G1 - K) / (1 - K); - var Y = (1 - B1 - K) / (1 - K); - return { c: C, m: M, y: Y, k: K }; -} -function RGBtoHSL(r, g, b) { - if (arguments.length == 1) { - var _arguments$3 = arguments[0], - r = _arguments$3.r, - g = _arguments$3.g, - b = _arguments$3.b; + +var defineProperty = function (obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +}; + +var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } } + } - r /= 255, g /= 255, b /= 255; - var max = Math.max(r, g, b), - min = Math.min(r, g, b); - var h, - s, - l = (max + min) / 2; + return target; +}; - if (max == min) { - h = s = 0; // achromatic +var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; } else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0);break; - case g: - h = (b - r) / d + 2;break; - case b: - h = (r - g) / d + 4;break; - } - h /= 6; + return get(parent, property, receiver); } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; - return { h: round(h * 360), s: round(s * 100), l: round(l * 100) }; -} + if (getter === undefined) { + return undefined; + } -function c(r, g, b) { + return getter.call(receiver); + } +}; - if (arguments.length == 1) { - var _arguments$4 = arguments[0], - r = _arguments$4.r, - g = _arguments$4.g, - b = _arguments$4.b; +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true } - return gray((r + g + b) / 3 > 90 ? 0 : 255); -} + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; -function gray(gray) { - return { r: gray, g: gray, b: gray }; -} -function RGBtoSimpleGray(r, g, b) { - if (arguments.length == 1) { - var _arguments$5 = arguments[0], - r = _arguments$5.r, - g = _arguments$5.g, - b = _arguments$5.b; - } - return gray(Math.ceil((r + g + b) / 3)); -} -function RGBtoGray(r, g, b) { - if (arguments.length == 1) { - var _arguments$6 = arguments[0], - r = _arguments$6.r, - g = _arguments$6.g, - b = _arguments$6.b; - } - return gray(RGBtoYCrCb(r, g, b).y); -} -function brightness(r, g, b) { - return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722); -} -function RGBtoYCrCb(r, g, b) { - if (arguments.length == 1) { - var _arguments$7 = arguments[0], - r = _arguments$7.r, - g = _arguments$7.g, - b = _arguments$7.b; - } - var Y = brightness(r, g, b); - var Cb = 0.564 * (b - Y); - var Cr = 0.713 * (r - Y); - return { y: Y, cr: Cr, cb: Cb }; -} -function PivotRGB(n) { - return (n > 0.04045 ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92) * 100; -} -function RGBtoXYZ(r, g, b) { - //sR, sG and sB (Standard RGB) input range = 0 ÷ 255 - //X, Y and Z output refer to a D65/2° standard illuminant. - if (arguments.length == 1) { - var _arguments$8 = arguments[0], - r = _arguments$8.r, - g = _arguments$8.g, - b = _arguments$8.b; - } +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } - var R = r / 255; - var G = g / 255; - var B = b / 255; + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; - R = PivotRGB(R); - G = PivotRGB(G); - B = PivotRGB(B); - var x = R * 0.4124 + G * 0.3576 + B * 0.1805; - var y = R * 0.2126 + G * 0.7152 + B * 0.0722; - var z = R * 0.0193 + G * 0.1192 + B * 0.9505; - return { x: x, y: y, z: z }; -} -function RGBtoLAB(r, g, b) { - if (arguments.length == 1) { - var _arguments$9 = arguments[0], - r = _arguments$9.r, - g = _arguments$9.g, - b = _arguments$9.b; - } - return XYZtoLAB(RGBtoXYZ(r, g, b)); -} -var fromRGB = { - RGBtoCMYK: RGBtoCMYK, - RGBtoGray: RGBtoGray, - RGBtoHSL: RGBtoHSL, - RGBtoHSV: RGBtoHSV, - RGBtoLAB: RGBtoLAB, - RGBtoSimpleGray: RGBtoSimpleGray, - RGBtoXYZ: RGBtoXYZ, - RGBtoYCrCb: RGBtoYCrCb, - c: c, - brightness: brightness, - gray: gray -}; +var slicedToArray = function () { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; -function CMYKtoRGB(c, m, y, k) { + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); - if (arguments.length == 1) { - var _arguments$ = arguments[0], - c = _arguments$.c, - m = _arguments$.m, - y = _arguments$.y, - k = _arguments$.k; + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"]) _i["return"](); + } finally { + if (_d) throw _e; + } } - var R = 255 * (1 - c) * (1 - k); - var G = 255 * (1 - m) * (1 - k); - var B = 255 * (1 - y) * (1 - k); - - return { r: R, g: G, b: B }; -} - -var fromCMYK = { - CMYKtoRGB: CMYKtoRGB -}; - -function ReverseXyz(n) { - return Math.pow(n, 3) > 0.008856 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787; -} - -function ReverseRGB(n) { - return n > 0.0031308 ? 1.055 * Math.pow(n, 1 / 2.4) - 0.055 : 12.92 * n; -} + return _arr; + } -function XYZtoRGB(x, y, z) { - if (arguments.length == 1) { - var _arguments$ = arguments[0], - x = _arguments$.x, - y = _arguments$.y, - z = _arguments$.z; + return function (arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError("Invalid attempt to destructure non-iterable instance"); } - //X, Y and Z input refer to a D65/2° standard illuminant. - //sR, sG and sB (standard RGB) output range = 0 ÷ 255 + }; +}(); - var X = x / 100.0; - var Y = y / 100.0; - var Z = z / 100.0; - var R = X * 3.2406 + Y * -1.5372 + Z * -0.4986; - var G = X * -0.9689 + Y * 1.8758 + Z * 0.0415; - var B = X * 0.0557 + Y * -0.2040 + Z * 1.0570; - R = ReverseRGB(R); - G = ReverseRGB(G); - B = ReverseRGB(B); - var r = round(R * 255); - var g = round(G * 255); - var b = round(B * 255); - return { r: r, g: g, b: b }; -} -function LABtoXYZ(l, a, b) { - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - l = _arguments$2.l, - a = _arguments$2.a, - b = _arguments$2.b; - } - //Reference-X, Y and Z refer to specific illuminants and observers. - //Common reference values are available below in this same page. - var Y = (l + 16) / 116; - var X = a / 500 + Y; - var Z = Y - b / 200; - Y = ReverseXyz(Y); - X = ReverseXyz(X); - Z = ReverseXyz(Z); - var x = X * 95.047; - var y = Y * 100.000; - var z = Z * 108.883; - return { x: x, y: y, z: z }; -} +var toArray = function (arr) { + return Array.isArray(arr) ? arr : Array.from(arr); +}; +var toConsumableArray = function (arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + return arr2; + } else { + return Array.from(arr); + } +}; +var color_regexp = /(#(?:[\da-f]{3}){1,2}|#(?:[\da-f]{8})|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi; +var color_split = ','; -function LABtoRGB(l, a, b) { - if (arguments.length == 1) { - var _arguments$4 = arguments[0], - l = _arguments$4.l, - a = _arguments$4.a, - b = _arguments$4.b; +function matches(str) { + var matches = str.match(color_regexp); + var result = []; + + if (!matches) { + return result; } - return XYZtoRGB(LABtoXYZ(l, a, b)); -} -var fromLAB = { - XYZtoRGB: XYZtoRGB, - LABtoRGB: LABtoRGB, - LABtoXYZ: LABtoXYZ -}; + for (var i = 0, len = matches.length; i < len; i++) { -function HSVtoRGB(h, s, v) { + if (matches[i].indexOf('#') > -1 || matches[i].indexOf('rgb') > -1 || matches[i].indexOf('hsl') > -1) { + result.push({ color: matches[i] }); + } else { + var nameColor = ColorNames.getColorByName(matches[i]); - if (arguments.length == 1) { - var _arguments$ = arguments[0], - h = _arguments$.h, - s = _arguments$.s, - v = _arguments$.v; + if (nameColor) { + result.push({ color: matches[i], nameColor: nameColor }); + } + } } - var H = h; - var S = s; - var V = v; + var pos = { next: 0 }; + result.forEach(function (item) { + var startIndex = str.indexOf(item.color, pos.next); - if (H >= 360) { - H = 0; - } + item.startIndex = startIndex; + item.endIndex = startIndex + item.color.length; - var C = S * V; - var X = C * (1 - Math.abs(H / 60 % 2 - 1)); - var m = V - C; + pos.next = item.endIndex; + }); - var temp = []; + return result; +} - if (0 <= H && H < 60) { - temp = [C, X, 0]; - } else if (60 <= H && H < 120) { - temp = [X, C, 0]; - } else if (120 <= H && H < 180) { - temp = [0, C, X]; - } else if (180 <= H && H < 240) { - temp = [0, X, C]; - } else if (240 <= H && H < 300) { - temp = [X, 0, C]; - } else if (300 <= H && H < 360) { - temp = [C, 0, X]; - } +function convertMatches(str) { + var m = matches(str); - return { - r: round((temp[0] + m) * 255), - g: round((temp[1] + m) * 255), - b: round((temp[2] + m) * 255) - }; + m.forEach(function (it, index) { + str = str.replace(it.color, '@' + index); + }); + + return { str: str, matches: m }; } -function HSVtoHSL(h, s, v) { +function convertMatchesArray(str) { + var splitStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ','; - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - h = _arguments$2.h, - s = _arguments$2.s, - v = _arguments$2.v; - } + var ret = convertMatches(str); + return ret.str.split(splitStr).map(function (it, index) { + it = trim(it); - var rgb = HSVtoRGB(h, s, v); + if (ret.matches[index]) { + it = it.replace('@' + index, ret.matches[index].color); + } - return RGBtoHSL(rgb.r, rgb.g, rgb.b); + return it; + }); } -var fromHSV = { - HSVtoHSL: HSVtoHSL, - HSVtoRGB: HSVtoRGB -}; +function reverseMatches(str, matches) { + matches.forEach(function (it, index) { + str = str.replace('@' + index, it.color); + }); -function HUEtoRGB(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; + return str; } -function HSLtoHSV(h, s, l) { +function trim(str) { + return str.replace(/^\s+|\s+$/g, ''); +} - if (arguments.length == 1) { - var _arguments$ = arguments[0], - h = _arguments$.h, - s = _arguments$.s, - l = _arguments$.l; - } - var rgb = HSLtoRGB(h, s, l); +/** + * @method rgb + * + * parse string to rgb color + * + * color.parse("#FF0000") === { r : 255, g : 0, b : 0 } + * + * color.parse("rgb(255, 0, 0)") == { r : 255, g : 0, b :0 } + * color.parse(0xff0000) == { r : 255, g : 0, b : 0 } + * color.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 } + * + * @param {String} str color string + * @returns {Object} rgb object + */ +function parse(str) { + if (typeof str == 'string') { - return RGBtoHSV(rgb.r, rgb.g, rgb.b); -} + if (ColorNames.isColorName(str)) { + str = ColorNames.getColorByName(str); + } -function HSLtoRGB(h, s, l) { + if (str.indexOf("rgb(") > -1) { + var arr = str.replace("rgb(", "").replace(")", "").split(","); - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - h = _arguments$2.h, - s = _arguments$2.s, - l = _arguments$2.l; - } + for (var i = 0, len = arr.length; i < len; i++) { + arr[i] = parseInt(trim(arr[i]), 10); + } - var r, g, b; + var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: 1 }; - h /= 360; - s /= 100; - l /= 100; + obj = Object.assign(obj, RGBtoHSL(obj)); - if (s == 0) { - r = g = b = l; // achromatic - } else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = HUEtoRGB(p, q, h + 1 / 3); - g = HUEtoRGB(p, q, h); - b = HUEtoRGB(p, q, h - 1 / 3); - } + return obj; + } else if (str.indexOf("rgba(") > -1) { + var arr = str.replace("rgba(", "").replace(")", "").split(","); - return { r: round(r * 255), g: round(g * 255), b: round(b * 255) }; -} + for (var i = 0, len = arr.length; i < len; i++) { -var fromHSL = { - HUEtoRGB: HUEtoRGB, - HSLtoHSV: HSLtoHSV, - HSLtoRGB: HSLtoRGB -}; + if (len - 1 == i) { + arr[i] = parseFloat(trim(arr[i])); + } else { + arr[i] = parseInt(trim(arr[i]), 10); + } + } -function YCrCbtoRGB(y, cr, cb, bit) { + var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: arr[3] }; - if (arguments.length == 1) { - var _arguments$ = arguments[0], - y = _arguments$.y, - cr = _arguments$.cr, - cb = _arguments$.cb, - bit = _arguments$.bit; + obj = Object.assign(obj, RGBtoHSL(obj)); - bit = bit || 0; - } - var R = y + 1.402 * (cr - bit); - var G = y - 0.344 * (cb - bit) - 0.714 * (cr - bit); - var B = y + 1.772 * (cb - bit); + return obj; + } else if (str.indexOf("hsl(") > -1) { + var arr = str.replace("hsl(", "").replace(")", "").split(","); - return { r: Math.ceil(R), g: Math.ceil(G), b: Math.ceil(B) }; -} + for (var i = 0, len = arr.length; i < len; i++) { + arr[i] = parseFloat(trim(arr[i])); + } -var fromYCrCb = { - YCrCbtoRGB: YCrCbtoRGB -}; + var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: 1 }; -var color_names = { aliceblue: "rgb(240, 248, 255)", antiquewhite: "rgb(250, 235, 215)", aqua: "rgb(0, 255, 255)", aquamarine: "rgb(127, 255, 212)", azure: "rgb(240, 255, 255)", beige: "rgb(245, 245, 220)", bisque: "rgb(255, 228, 196)", black: "rgb(0, 0, 0)", blanchedalmond: "rgb(255, 235, 205)", blue: "rgb(0, 0, 255)", blueviolet: "rgb(138, 43, 226)", brown: "rgb(165, 42, 42)", burlywood: "rgb(222, 184, 135)", cadetblue: "rgb(95, 158, 160)", chartreuse: "rgb(127, 255, 0)", chocolate: "rgb(210, 105, 30)", coral: "rgb(255, 127, 80)", cornflowerblue: "rgb(100, 149, 237)", cornsilk: "rgb(255, 248, 220)", crimson: "rgb(237, 20, 61)", cyan: "rgb(0, 255, 255)", darkblue: "rgb(0, 0, 139)", darkcyan: "rgb(0, 139, 139)", darkgoldenrod: "rgb(184, 134, 11)", darkgray: "rgb(169, 169, 169)", darkgrey: "rgb(169, 169, 169)", darkgreen: "rgb(0, 100, 0)", darkkhaki: "rgb(189, 183, 107)", darkmagenta: "rgb(139, 0, 139)", darkolivegreen: "rgb(85, 107, 47)", darkorange: "rgb(255, 140, 0)", darkorchid: "rgb(153, 50, 204)", darkred: "rgb(139, 0, 0)", darksalmon: "rgb(233, 150, 122)", darkseagreen: "rgb(143, 188, 143)", darkslateblue: "rgb(72, 61, 139)", darkslategray: "rgb(47, 79, 79)", darkslategrey: "rgb(47, 79, 79)", darkturquoise: "rgb(0, 206, 209)", darkviolet: "rgb(148, 0, 211)", deeppink: "rgb(255, 20, 147)", deepskyblue: "rgb(0, 191, 255)", dimgray: "rgb(105, 105, 105)", dimgrey: "rgb(105, 105, 105)", dodgerblue: "rgb(30, 144, 255)", firebrick: "rgb(178, 34, 34)", floralwhite: "rgb(255, 250, 240)", forestgreen: "rgb(34, 139, 34)", fuchsia: "rgb(255, 0, 255)", gainsboro: "rgb(220, 220, 220)", ghostwhite: "rgb(248, 248, 255)", gold: "rgb(255, 215, 0)", goldenrod: "rgb(218, 165, 32)", gray: "rgb(128, 128, 128)", grey: "rgb(128, 128, 128)", green: "rgb(0, 128, 0)", greenyellow: "rgb(173, 255, 47)", honeydew: "rgb(240, 255, 240)", hotpink: "rgb(255, 105, 180)", indianred: "rgb(205, 92, 92)", indigo: "rgb(75, 0, 130)", ivory: "rgb(255, 255, 240)", khaki: "rgb(240, 230, 140)", lavender: "rgb(230, 230, 250)", lavenderblush: "rgb(255, 240, 245)", lawngreen: "rgb(124, 252, 0)", lemonchiffon: "rgb(255, 250, 205)", lightblue: "rgb(173, 216, 230)", lightcoral: "rgb(240, 128, 128)", lightcyan: "rgb(224, 255, 255)", lightgoldenrodyellow: "rgb(250, 250, 210)", lightgreen: "rgb(144, 238, 144)", lightgray: "rgb(211, 211, 211)", lightgrey: "rgb(211, 211, 211)", lightpink: "rgb(255, 182, 193)", lightsalmon: "rgb(255, 160, 122)", lightseagreen: "rgb(32, 178, 170)", lightskyblue: "rgb(135, 206, 250)", lightslategray: "rgb(119, 136, 153)", lightslategrey: "rgb(119, 136, 153)", lightsteelblue: "rgb(176, 196, 222)", lightyellow: "rgb(255, 255, 224)", lime: "rgb(0, 255, 0)", limegreen: "rgb(50, 205, 50)", linen: "rgb(250, 240, 230)", magenta: "rgb(255, 0, 255)", maroon: "rgb(128, 0, 0)", mediumaquamarine: "rgb(102, 205, 170)", mediumblue: "rgb(0, 0, 205)", mediumorchid: "rgb(186, 85, 211)", mediumpurple: "rgb(147, 112, 219)", mediumseagreen: "rgb(60, 179, 113)", mediumslateblue: "rgb(123, 104, 238)", mediumspringgreen: "rgb(0, 250, 154)", mediumturquoise: "rgb(72, 209, 204)", mediumvioletred: "rgb(199, 21, 133)", midnightblue: "rgb(25, 25, 112)", mintcream: "rgb(245, 255, 250)", mistyrose: "rgb(255, 228, 225)", moccasin: "rgb(255, 228, 181)", navajowhite: "rgb(255, 222, 173)", navy: "rgb(0, 0, 128)", oldlace: "rgb(253, 245, 230)", olive: "rgb(128, 128, 0)", olivedrab: "rgb(107, 142, 35)", orange: "rgb(255, 165, 0)", orangered: "rgb(255, 69, 0)", orchid: "rgb(218, 112, 214)", palegoldenrod: "rgb(238, 232, 170)", palegreen: "rgb(152, 251, 152)", paleturquoise: "rgb(175, 238, 238)", palevioletred: "rgb(219, 112, 147)", papayawhip: "rgb(255, 239, 213)", peachpuff: "rgb(255, 218, 185)", peru: "rgb(205, 133, 63)", pink: "rgb(255, 192, 203)", plum: "rgb(221, 160, 221)", powderblue: "rgb(176, 224, 230)", purple: "rgb(128, 0, 128)", rebeccapurple: "rgb(102, 51, 153)", red: "rgb(255, 0, 0)", rosybrown: "rgb(188, 143, 143)", royalblue: "rgb(65, 105, 225)", saddlebrown: "rgb(139, 69, 19)", salmon: "rgb(250, 128, 114)", sandybrown: "rgb(244, 164, 96)", seagreen: "rgb(46, 139, 87)", seashell: "rgb(255, 245, 238)", sienna: "rgb(160, 82, 45)", silver: "rgb(192, 192, 192)", skyblue: "rgb(135, 206, 235)", slateblue: "rgb(106, 90, 205)", slategray: "rgb(112, 128, 144)", slategrey: "rgb(112, 128, 144)", snow: "rgb(255, 250, 250)", springgreen: "rgb(0, 255, 127)", steelblue: "rgb(70, 130, 180)", tan: "rgb(210, 180, 140)", teal: "rgb(0, 128, 128)", thistle: "rgb(216, 191, 216)", tomato: "rgb(255, 99, 71)", turquoise: "rgb(64, 224, 208)", violet: "rgb(238, 130, 238)", wheat: "rgb(245, 222, 179)", white: "rgb(255, 255, 255)", whitesmoke: "rgb(245, 245, 245)", yellow: "rgb(255, 255, 0)", yellowgreen: "rgb(154, 205, 50)", transparent: "rgba(0, 0, 0, 0)" }; + obj = Object.assign(obj, HSLtoRGB(obj)); -function isColorName(name) { - return !!color_names[name]; -} + return obj; + } else if (str.indexOf("hsla(") > -1) { + var arr = str.replace("hsla(", "").replace(")", "").split(","); -function getColorByName(name) { - return color_names[name]; -} + for (var i = 0, len = arr.length; i < len; i++) { -var ColorNames = { - isColorName: isColorName, - getColorByName: getColorByName -}; + if (len - 1 == i) { + arr[i] = parseFloat(trim(arr[i])); + } else { + arr[i] = parseInt(trim(arr[i]), 10); + } + } -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; + var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: arr[3] }; -var createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } + obj = Object.assign(obj, HSLtoRGB(obj)); - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; -}(); + return obj; + } else if (str.indexOf("#") == 0) { + str = str.replace("#", ""); + var arr = []; + var a = 1; + if (str.length == 3) { + for (var i = 0, len = str.length; i < len; i++) { + var char = str.substr(i, 1); + arr.push(parseInt(char + char, 16)); + } + } else if (str.length === 8) { + for (var i = 0, len = str.length; i < len; i += 2) { + arr.push(parseInt(str.substr(i, 2), 16)); + } + a = arr.pop() / 255; + } else { + for (var i = 0, len = str.length; i < len; i += 2) { + arr.push(parseInt(str.substr(i, 2), 16)); + } + } + var obj = { type: 'hex', r: arr[0], g: arr[1], b: arr[2], a: a }; -var defineProperty = function (obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } + obj = Object.assign(obj, RGBtoHSL(obj)); - return obj; -}; + return obj; + } + } else if (typeof str == 'number') { + if (0x000000 <= str && str <= 0xffffff) { + var r = (str & 0xff0000) >> 16; + var g = (str & 0x00ff00) >> 8; + var b = (str & 0x0000ff) >> 0; -var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; + var obj = { type: 'hex', r: r, g: g, b: b, a: 1 }; + obj = Object.assign(obj, RGBtoHSL(obj)); + return obj; + } else if (0x00000000 <= str && str <= 0xffffffff) { + var _r = (str & 0xff000000) >> 24; + var _g = (str & 0x00ff0000) >> 16; + var _b = (str & 0x0000ff00) >> 8; + var _a = (str & 0x000000ff) / 255; - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } + var obj = { type: 'hex', r: _r, g: _g, b: _b, a: _a }; + obj = Object.assign(obj, RGBtoHSL(obj)); + + return obj; + } } - } - return target; -}; + return str; +} -var get = function get(object, property, receiver) { - if (object === null) object = Function.prototype; - var desc = Object.getOwnPropertyDescriptor(object, property); +function parseGradient(colors) { + if (typeof colors == 'string') { + colors = convertMatchesArray(colors); + } + + colors = colors.map(function (it) { + if (typeof it == 'string') { + var ret = convertMatches(it); + var arr = trim(ret.str).split(' '); + + if (arr[1]) { + if (arr[1].includes('%')) { + arr[1] = parseFloat(arr[1].replace(/%/, '')) / 100; + } else { + arr[1] = parseFloat(arr[1]); + } + } else { + arr[1] = '*'; + } + + arr[0] = reverseMatches(arr[0], ret.matches); + + return arr; + } else if (Array.isArray(it)) { + + if (!it[1]) { + it[1] = '*'; + } else if (typeof it[1] == 'string') { + if (it[1].includes('%')) { + it[1] = parseFloat(it[1].replace(/%/, '')) / 100; + } else { + it[1] = +it[1]; + } + } + + return [].concat(toConsumableArray(it)); + } + }); + + var count = colors.filter(function (it) { + return it[1] === '*'; + }).length; - if (desc === undefined) { - var parent = Object.getPrototypeOf(object); + if (count > 0) { + var sum = colors.filter(function (it) { + return it[1] != '*' && it[1] != 1; + }).map(function (it) { + return it[1]; + }).reduce(function (total, cur) { + return total + cur; + }, 0); - if (parent === null) { - return undefined; - } else { - return get(parent, property, receiver); + var dist = (1 - sum) / count; + colors.forEach(function (it, index) { + if (it[1] == '*' && index > 0) { + if (colors.length - 1 == index) { + // it[1] = 1 + } else { + it[1] = dist; + } + } + }); } - } else if ("value" in desc) { - return desc.value; - } else { - var getter = desc.get; - if (getter === undefined) { - return undefined; - } + return colors; +} - return getter.call(receiver); - } +var parser = { + matches: matches, + convertMatches: convertMatches, + convertMatchesArray: convertMatchesArray, + reverseMatches: reverseMatches, + parse: parse, + parseGradient: parseGradient, + trim: trim, + color_regexp: color_regexp, + color_split: color_split }; -var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } +function RGBtoHSV(r, g, b) { - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true + if (arguments.length == 1) { + var _arguments$ = arguments[0], + r = _arguments$.r, + g = _arguments$.g, + b = _arguments$.b; } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; -}; - - + var R1 = r / 255; + var G1 = g / 255; + var B1 = b / 255; + var MaxC = Math.max(R1, G1, B1); + var MinC = Math.min(R1, G1, B1); + var DeltaC = MaxC - MinC; + var H = 0; + if (DeltaC == 0) { + H = 0; + } else if (MaxC == R1) { + H = 60 * ((G1 - B1) / DeltaC % 6); + } else if (MaxC == G1) { + H = 60 * ((B1 - R1) / DeltaC + 2); + } else if (MaxC == B1) { + H = 60 * ((R1 - G1) / DeltaC + 4); + } + if (H < 0) { + H = 360 + H; + } + var S = 0; + if (MaxC == 0) S = 0;else S = DeltaC / MaxC; -var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } + var V = MaxC; - return call && (typeof call === "object" || typeof call === "function") ? call : self; -}; + return { h: H, s: S, v: V }; +} +function RGBtoCMYK(r, g, b) { + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + r = _arguments$2.r, + g = _arguments$2.g, + b = _arguments$2.b; + } + var R1 = r / 255; + var G1 = g / 255; + var B1 = b / 255; + var K = 1 - Math.max(R1, G1, B1); + var C = (1 - R1 - K) / (1 - K); + var M = (1 - G1 - K) / (1 - K); + var Y = (1 - B1 - K) / (1 - K); -var slicedToArray = function () { - function sliceIterator(arr, i) { - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; + return { c: C, m: M, y: Y, k: K }; +} - try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { - _arr.push(_s.value); +function RGBtoHSL(r, g, b) { - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i["return"]) _i["return"](); - } finally { - if (_d) throw _e; - } + if (arguments.length == 1) { + var _arguments$3 = arguments[0], + r = _arguments$3.r, + g = _arguments$3.g, + b = _arguments$3.b; } - return _arr; - } + r /= 255, g /= 255, b /= 255; + var max = Math.max(r, g, b), + min = Math.min(r, g, b); + var h, + s, + l = (max + min) / 2; - return function (arr, i) { - if (Array.isArray(arr)) { - return arr; - } else if (Symbol.iterator in Object(arr)) { - return sliceIterator(arr, i); + if (max == min) { + h = s = 0; // achromatic } else { - throw new TypeError("Invalid attempt to destructure non-iterable instance"); + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0);break; + case g: + h = (b - r) / d + 2;break; + case b: + h = (r - g) / d + 4;break; + } + h /= 6; } - }; -}(); + return { h: round(h * 360), s: round(s * 100), l: round(l * 100) }; +} + +function c(r, g, b) { + if (arguments.length == 1) { + var _arguments$4 = arguments[0], + r = _arguments$4.r, + g = _arguments$4.g, + b = _arguments$4.b; + } + return gray((r + g + b) / 3 > 90 ? 0 : 255); +} +function gray(gray) { + return { r: gray, g: gray, b: gray }; +} +function RGBtoSimpleGray(r, g, b) { + if (arguments.length == 1) { + var _arguments$5 = arguments[0], + r = _arguments$5.r, + g = _arguments$5.g, + b = _arguments$5.b; + } + return gray(Math.ceil((r + g + b) / 3)); +} +function RGBtoGray(r, g, b) { + if (arguments.length == 1) { + var _arguments$6 = arguments[0], + r = _arguments$6.r, + g = _arguments$6.g, + b = _arguments$6.b; + } + return gray(RGBtoYCrCb(r, g, b).y); +} +function brightness(r, g, b) { + return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722); +} -var toArray = function (arr) { - return Array.isArray(arr) ? arr : Array.from(arr); -}; -var toConsumableArray = function (arr) { - if (Array.isArray(arr)) { - for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; - return arr2; - } else { - return Array.from(arr); - } -}; -var color_regexp = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi; -var color_split = ','; -function matches(str) { - var matches = str.match(color_regexp); - var result = []; +function RGBtoYCrCb(r, g, b) { - if (!matches) { - return result; + if (arguments.length == 1) { + var _arguments$7 = arguments[0], + r = _arguments$7.r, + g = _arguments$7.g, + b = _arguments$7.b; } + var Y = brightness(r, g, b); + var Cb = 0.564 * (b - Y); + var Cr = 0.713 * (r - Y); - for (var i = 0, len = matches.length; i < len; i++) { - - if (matches[i].indexOf('#') > -1 || matches[i].indexOf('rgb') > -1 || matches[i].indexOf('hsl') > -1) { - result.push({ color: matches[i] }); - } else { - var nameColor = ColorNames.getColorByName(matches[i]); + return { y: Y, cr: Cr, cb: Cb }; +} - if (nameColor) { - result.push({ color: matches[i], nameColor: nameColor }); - } - } - } +function PivotRGB(n) { + var point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.04045; - var pos = { next: 0 }; - result.forEach(function (item) { - var startIndex = str.indexOf(item.color, pos.next); + return (n > point ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92) * 100; +} - item.startIndex = startIndex; - item.endIndex = startIndex + item.color.length; +function RGBtoXYZ(r, g, b) { + //sR, sG and sB (Standard RGB) input range = 0 ÷ 255 + //X, Y and Z output refer to a D65/2° standard illuminant. + if (arguments.length == 1) { + var _arguments$8 = arguments[0], + r = _arguments$8.r, + g = _arguments$8.g, + b = _arguments$8.b; + } - pos.next = item.endIndex; - }); + var R = r / 255; + var G = g / 255; + var B = b / 255; - return result; -} + R = PivotRGB(R); + G = PivotRGB(G); + B = PivotRGB(B); -function convertMatches(str) { - var m = matches(str); + var x = R * 0.4124 + G * 0.3576 + B * 0.1805; + var y = R * 0.2126 + G * 0.7152 + B * 0.0722; + var z = R * 0.0193 + G * 0.1192 + B * 0.9505; - m.forEach(function (it, index) { - str = str.replace(it.color, '@' + index); - }); + return { x: x, y: y, z: z }; +} - return { str: str, matches: m }; +function RGBtoLAB(r, g, b) { + if (arguments.length == 1) { + var _arguments$9 = arguments[0], + r = _arguments$9.r, + g = _arguments$9.g, + b = _arguments$9.b; + } + return XYZtoLAB(RGBtoXYZ(r, g, b)); } -function convertMatchesArray(str) { - var splitStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ','; +var fromRGB = { + RGBtoCMYK: RGBtoCMYK, + RGBtoGray: RGBtoGray, + RGBtoHSL: RGBtoHSL, + RGBtoHSV: RGBtoHSV, + RGBtoLAB: RGBtoLAB, + RGBtoSimpleGray: RGBtoSimpleGray, + RGBtoXYZ: RGBtoXYZ, + RGBtoYCrCb: RGBtoYCrCb, + c: c, + brightness: brightness, + gray: gray +}; - var ret = convertMatches(str); - return ret.str.split(splitStr).map(function (it, index) { - it = trim(it); +function CMYKtoRGB(c, m, y, k) { - if (ret.matches[index]) { - it = it.replace('@' + index, ret.matches[index].color); - } + if (arguments.length == 1) { + var _arguments$ = arguments[0], + c = _arguments$.c, + m = _arguments$.m, + y = _arguments$.y, + k = _arguments$.k; + } - return it; - }); + var R = 255 * (1 - c) * (1 - k); + var G = 255 * (1 - m) * (1 - k); + var B = 255 * (1 - y) * (1 - k); + + return { r: R, g: G, b: B }; } -function reverseMatches(str, matches) { - matches.forEach(function (it, index) { - str = str.replace('@' + index, it.color); - }); +var fromCMYK = { + CMYKtoRGB: CMYKtoRGB +}; - return str; +function ReverseXyz(n) { + return Math.pow(n, 3) > 0.008856 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787; } -function trim(str) { - return str.replace(/^\s+|\s+$/g, ''); +function ReverseRGB(n) { + return n > 0.0031308 ? 1.055 * Math.pow(n, 1 / 2.4) - 0.055 : 12.92 * n; } -/** - * @method rgb - * - * parse string to rgb color - * - * color.parse("#FF0000") === { r : 255, g : 0, b : 0 } - * - * color.parse("rgb(255, 0, 0)") == { r : 255, g : 0, b :0 } - * color.parse(0xff0000) == { r : 255, g : 0, b : 0 } - * color.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 } - * - * @param {String} str color string - * @returns {Object} rgb object - */ -function parse(str) { - if (typeof str == 'string') { - - if (ColorNames.isColorName(str)) { - str = ColorNames.getColorByName(str); - } - - if (str.indexOf("rgb(") > -1) { - var arr = str.replace("rgb(", "").replace(")", "").split(","); - - for (var i = 0, len = arr.length; i < len; i++) { - arr[i] = parseInt(trim(arr[i]), 10); - } - - var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: 1 }; - - obj = Object.assign(obj, RGBtoHSL(obj)); +function XYZtoRGB(x, y, z) { + if (arguments.length == 1) { + var _arguments$ = arguments[0], + x = _arguments$.x, + y = _arguments$.y, + z = _arguments$.z; + } + //X, Y and Z input refer to a D65/2° standard illuminant. + //sR, sG and sB (standard RGB) output range = 0 ÷ 255 - return obj; - } else if (str.indexOf("rgba(") > -1) { - var arr = str.replace("rgba(", "").replace(")", "").split(","); + var X = x / 100.0; + var Y = y / 100.0; + var Z = z / 100.0; - for (var i = 0, len = arr.length; i < len; i++) { + var R = X * 3.2406 + Y * -1.5372 + Z * -0.4986; + var G = X * -0.9689 + Y * 1.8758 + Z * 0.0415; + var B = X * 0.0557 + Y * -0.2040 + Z * 1.0570; - if (len - 1 == i) { - arr[i] = parseFloat(trim(arr[i])); - } else { - arr[i] = parseInt(trim(arr[i]), 10); - } - } + R = ReverseRGB(R); + G = ReverseRGB(G); + B = ReverseRGB(B); - var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: arr[3] }; + var r = round(R * 255); + var g = round(G * 255); + var b = round(B * 255); - obj = Object.assign(obj, RGBtoHSL(obj)); + return { r: r, g: g, b: b }; +} - return obj; - } else if (str.indexOf("hsl(") > -1) { - var arr = str.replace("hsl(", "").replace(")", "").split(","); +function LABtoXYZ(l, a, b) { + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + l = _arguments$2.l, + a = _arguments$2.a, + b = _arguments$2.b; + } + //Reference-X, Y and Z refer to specific illuminants and observers. + //Common reference values are available below in this same page. - for (var i = 0, len = arr.length; i < len; i++) { - arr[i] = parseFloat(trim(arr[i])); - } + var Y = (l + 16) / 116; + var X = a / 500 + Y; + var Z = Y - b / 200; - var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: 1 }; + Y = ReverseXyz(Y); + X = ReverseXyz(X); + Z = ReverseXyz(Z); - obj = Object.assign(obj, HSLtoRGB(obj)); + var x = X * 95.047; + var y = Y * 100.000; + var z = Z * 108.883; - return obj; - } else if (str.indexOf("hsla(") > -1) { - var arr = str.replace("hsla(", "").replace(")", "").split(","); + return { x: x, y: y, z: z }; +} - for (var i = 0, len = arr.length; i < len; i++) { - if (len - 1 == i) { - arr[i] = parseFloat(trim(arr[i])); - } else { - arr[i] = parseInt(trim(arr[i]), 10); - } - } - var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: arr[3] }; - obj = Object.assign(obj, HSLtoRGB(obj)); - return obj; - } else if (str.indexOf("#") == 0) { +function LABtoRGB(l, a, b) { + if (arguments.length == 1) { + var _arguments$4 = arguments[0], + l = _arguments$4.l, + a = _arguments$4.a, + b = _arguments$4.b; + } + return XYZtoRGB(LABtoXYZ(l, a, b)); +} - str = str.replace("#", ""); +var fromLAB = { + XYZtoRGB: XYZtoRGB, + LABtoRGB: LABtoRGB, + LABtoXYZ: LABtoXYZ +}; - var arr = []; - if (str.length == 3) { - for (var i = 0, len = str.length; i < len; i++) { - var char = str.substr(i, 1); - arr.push(parseInt(char + char, 16)); - } - } else { - for (var i = 0, len = str.length; i < len; i += 2) { - arr.push(parseInt(str.substr(i, 2), 16)); - } - } +function HSVtoRGB(h, s, v) { - var obj = { type: 'hex', r: arr[0], g: arr[1], b: arr[2], a: 1 }; + if (arguments.length == 1) { + var _arguments$ = arguments[0], + h = _arguments$.h, + s = _arguments$.s, + v = _arguments$.v; + } - obj = Object.assign(obj, RGBtoHSL(obj)); + var H = h; + var S = s; + var V = v; - return obj; - } - } else if (typeof str == 'number') { - if (0x000000 <= str && str <= 0xffffff) { - var r = (str & 0xff0000) >> 16; - var g = (str & 0x00ff00) >> 8; - var b = (str & 0x0000ff) >> 0; + if (H >= 360) { + H = 0; + } - var obj = { type: 'hex', r: r, g: g, b: b, a: 1 }; - obj = Object.assign(obj, RGBtoHSL(obj)); - return obj; - } else if (0x00000000 <= str && str <= 0xffffffff) { - var _r = (str & 0xff000000) >> 24; - var _g = (str & 0x00ff0000) >> 16; - var _b = (str & 0x0000ff00) >> 8; - var a = (str & 0x000000ff) / 255; + var C = S * V; + var X = C * (1 - Math.abs(H / 60 % 2 - 1)); + var m = V - C; - var obj = { type: 'hex', r: _r, g: _g, b: _b, a: a }; - obj = Object.assign(obj, RGBtoHSL(obj)); + var temp = []; - return obj; - } + if (0 <= H && H < 60) { + temp = [C, X, 0]; + } else if (60 <= H && H < 120) { + temp = [X, C, 0]; + } else if (120 <= H && H < 180) { + temp = [0, C, X]; + } else if (180 <= H && H < 240) { + temp = [0, X, C]; + } else if (240 <= H && H < 300) { + temp = [X, 0, C]; + } else if (300 <= H && H < 360) { + temp = [C, 0, X]; } - return str; + return { + r: round((temp[0] + m) * 255), + g: round((temp[1] + m) * 255), + b: round((temp[2] + m) * 255) + }; } -function parseGradient(colors) { - if (typeof colors == 'string') { - colors = convertMatchesArray(colors); - } - - colors = colors.map(function (it) { - if (typeof it == 'string') { - var ret = convertMatches(it); - var arr = trim(ret.str).split(' '); - - if (arr[1]) { - if (arr[1].includes('%')) { - arr[1] = parseFloat(arr[1].replace(/%/, '')) / 100; - } else { - arr[1] = parseFloat(arr[1]); - } - } else { - arr[1] = '*'; - } +function HSVtoHSL(h, s, v) { - arr[0] = reverseMatches(arr[0], ret.matches); + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + h = _arguments$2.h, + s = _arguments$2.s, + v = _arguments$2.v; + } - return arr; - } else if (Array.isArray(it)) { + var rgb = HSVtoRGB(h, s, v); - if (!it[1]) { - it[1] = '*'; - } else if (typeof it[1] == 'string') { - if (it[1].includes('%')) { - it[1] = parseFloat(it[1].replace(/%/, '')) / 100; - } else { - it[1] = +it[1]; - } - } + return RGBtoHSL(rgb.r, rgb.g, rgb.b); +} - return [].concat(toConsumableArray(it)); - } - }); +var fromHSV = { + HSVtoHSL: HSVtoHSL, + HSVtoRGB: HSVtoRGB +}; - var count = colors.filter(function (it) { - return it[1] === '*'; - }).length; +function YCrCbtoRGB(y, cr, cb, bit) { - if (count > 0) { - var sum = colors.filter(function (it) { - return it[1] != '*' && it[1] != 1; - }).map(function (it) { - return it[1]; - }).reduce(function (total, cur) { - return total + cur; - }, 0); + if (arguments.length == 1) { + var _arguments$ = arguments[0], + y = _arguments$.y, + cr = _arguments$.cr, + cb = _arguments$.cb, + bit = _arguments$.bit; - var dist = (1 - sum) / count; - colors.forEach(function (it, index) { - if (it[1] == '*' && index > 0) { - if (colors.length - 1 == index) { - // it[1] = 1 - } else { - it[1] = dist; - } - } - }); + bit = bit || 0; } + var R = y + 1.402 * (cr - bit); + var G = y - 0.344 * (cb - bit) - 0.714 * (cr - bit); + var B = y + 1.772 * (cb - bit); - return colors; + return { r: Math.ceil(R), g: Math.ceil(G), b: Math.ceil(B) }; } -var parser = { - matches: matches, - convertMatches: convertMatches, - convertMatchesArray: convertMatchesArray, - reverseMatches: reverseMatches, - parse: parse, - parseGradient: parseGradient, - trim: trim, - color_regexp: color_regexp, - color_split: color_split +var fromYCrCb = { + YCrCbtoRGB: YCrCbtoRGB }; function interpolateRGB(startColor, endColor) { @@ -5561,6 +5583,11 @@ var Dom = function () { return null; } + }, { + key: 'checked', + value: function checked() { + return this.el.checked; + } }, { key: 'removeClass', value: function removeClass(cls) { @@ -5599,11 +5626,14 @@ var Dom = function () { }, { key: 'html', value: function html(_html) { - - if (typeof _html == 'string') { - this.el.innerHTML = _html; - } else { - this.empty().append(_html); + try { + if (typeof _html == 'string') { + this.el.innerHTML = _html; + } else { + this.empty().append(_html); + } + } catch (e) { + console.log(_html); } return this; @@ -5613,11 +5643,23 @@ var Dom = function () { value: function find(selector) { return this.el.querySelector(selector); } + }, { + key: '$', + value: function $(selector) { + return new Dom(this.find(selector)); + } }, { key: 'findAll', value: function findAll(selector) { return this.el.querySelectorAll(selector); } + }, { + key: '$$', + value: function $$(selector) { + return [].concat(toConsumableArray(this.findAll(selector))).map(function (el) { + return new Dom(el); + }); + } }, { key: 'empty', value: function empty() { @@ -5699,6 +5741,11 @@ var Dom = function () { left: rect.left + Dom.getScrollLeft() }; } + }, { + key: 'rect', + value: function rect() { + return this.el.getBoundingClientRect(); + } }, { key: 'position', value: function position() { @@ -6060,9 +6107,9 @@ var ColorSetsList = function (_BaseModule) { }(BaseModule); var Event = { - addEvent: function addEvent(dom, eventName, callback) { + addEvent: function addEvent(dom, eventName, callback, options) { if (dom) { - dom.addEventListener(eventName, callback); + dom.addEventListener(eventName, callback, options); } }, removeEvent: function removeEvent(dom, eventName, callback) { @@ -6200,7 +6247,12 @@ var EventMachin = function () { // 데이타 로드 하고 this.load(); + + this.afterRender(); } + }, { + key: 'afterRender', + value: function afterRender() {} /** * 자식 컴포넌트로 사용될 객체 정의 @@ -6260,7 +6312,8 @@ var EventMachin = function () { if (instance) { instance.render(); - $el.replace(node, instance.$el.el); + var $parent = new Dom(node.parentNode); + $parent.replace(node, instance.$el.el); } }); } @@ -6480,10 +6533,10 @@ var EventMachin = function () { value: function checkEventType(e, eventObject) { var _this8 = this; - var onlyControl = e.ctrlKey ? eventObject.isControl : true; - var onlyShift = e.shiftKey ? eventObject.isShift : true; - var onlyAlt = e.altKey ? eventObject.isAlt : true; - var onlyMeta = e.metaKey ? eventObject.isMeta : true; + var onlyControl = eventObject.isControl ? e.ctrlKey : true; + var onlyShift = eventObject.isShift ? e.shiftKey : true; + var onlyAlt = eventObject.isAlt ? e.altKey : true; + var onlyMeta = eventObject.isMeta ? e.metaKey : true; var hasKeyCode = true; if (eventObject.codes.length) { @@ -6507,7 +6560,7 @@ var EventMachin = function () { if (eventObject.delegate) { return function (e) { - + e.xy = Event.posXY(e); if (_this9.checkEventType(e, eventObject)) { var delegateTarget = _this9.matchPath(e.target || e.srcElement, eventObject.delegate); @@ -6521,6 +6574,7 @@ var EventMachin = function () { }; } else { return function (e) { + e.xy = Event.posXY(e); if (_this9.checkEventType(e, eventObject)) { return callback(e); } @@ -6532,7 +6586,13 @@ var EventMachin = function () { value: function addEvent(eventObject, callback) { eventObject.callback = this.makeCallback(eventObject, callback); this.addBinding(eventObject); - Event.addEvent(eventObject.dom, eventObject.eventName, eventObject.callback); + + var options = true; + if (eventObject.eventName === 'touchstart') { + options = { passive: true }; + } + + Event.addEvent(eventObject.dom, eventObject.eventName, eventObject.callback, options); } }, { key: 'removeEventAll', @@ -6669,10 +6729,6 @@ var ColorManager = function (_BaseModule) { $store.alpha = isUndefined(colorObj.a) ? $store.alpha : colorObj.a; $store.format = colorObj.type != 'hsv' ? colorObj.type || $store.format : $store.format; - if ($store.format == 'hex' && $store.alpha < 1) { - $store.format = 'rgb'; - } - if (colorObj.type == 'hsl') { $store.hsl = Object.assign($store.hsl, colorObj); $store.rgb = Color$1.HSLtoRGB($store.hsl); @@ -6705,7 +6761,9 @@ var ColorManager = function (_BaseModule) { value: function toString($store, type) { type = type || $store.format; var colorObj = $store[type] || $store.rgb; - return Color$1.format(Object.assign({}, colorObj, { a: $store.alpha }), type); + return Color$1.format(_extends({}, colorObj, { + a: $store.alpha + }), type); } }, { key: '/toColor', @@ -7134,6 +7192,11 @@ var BaseColorPicker = function (_UIElement) { } } } + }, { + key: 'keyup.isAbsolute.escape $root', + value: function keyupIsAbsoluteEscape$root(e) { + this.hide(); + } }, { key: 'mouseover.isAbsolute $root', value: function mouseoverIsAbsolute$root(e) { @@ -7279,7 +7342,6 @@ var BaseBox = function (_UIElement) { var _this = possibleConstructorReturn(this, (BaseBox.__proto__ || Object.getPrototypeOf(BaseBox)).call(this, opt)); _this.source = 'base-box'; - // this.isDown = false; return _this; } @@ -7584,7 +7646,7 @@ var Opacity = function (_BaseSlider) { createClass(Opacity, [{ key: 'template', value: function template() { - return '\n
\n
\n
\n
\n
\n
\n '; + return '\n
\n
\n
\n
\n
\n
\n '; } }, { key: 'refresh', @@ -7977,7 +8039,8 @@ var ColorInformation = function (_UIElement) { 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
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '; + return (/*html*/'\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
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n ' + ); } }, { key: 'setCurrentFormat', @@ -7989,11 +8052,16 @@ var ColorInformation = function (_UIElement) { }, { key: 'initFormat', value: function initFormat() { + var _this2 = this; + var current_format = this.format || 'hex'; - this.$el.removeClass('hex'); - this.$el.removeClass('rgb'); - this.$el.removeClass('hsl'); + ['hex', 'rgb', 'hsl'].filter(function (it) { + return it !== current_format; + }).forEach(function (formatString) { + _this2.$el.removeClass(formatString); + }); + this.$el.addClass(current_format); } }, { @@ -8007,20 +8075,25 @@ var ColorInformation = function (_UIElement) { } else if (current_format == 'rgb') { next_format = 'hsl'; } else if (current_format == 'hsl') { - if (this.$store.alpha == 1) { - next_format = 'hex'; - } else { - next_format = 'rgb'; - } + next_format = 'hex'; } - this.$el.removeClass(current_format); - this.$el.addClass(next_format); this.format = next_format; + this.initFormat(); this.$store.dispatch('/changeFormat', this.format); this.$store.emit('lastUpdateColor'); } + }, { + key: 'goToFormat', + value: function goToFormat(to_format) { + this.format = to_format; + if (to_format === 'rgb' || to_format === 'hsl') { + this.initFormat(); + } + + this.$store.dispatch('/changeFormat', this.format); + } }, { key: 'getFormat', value: function getFormat() { @@ -8121,19 +8194,12 @@ var ColorInformation = function (_UIElement) { value: function input$hsl_a(e) { this.changeHslColor(); } - }, { - key: 'keydown $hexCode', - value: function keydown$hexCode(e) { - if (e.which < 65 || e.which > 70) { - return this.checkNumberKey(e); - } - } }, { key: 'keyup $hexCode', value: function keyup$hexCode(e) { var code = this.refs.$hexCode.val(); - if (code.charAt(0) == '#' && code.length == 7) { + if (code.charAt(0) == '#' && (code.length == 7 || code.length === 9)) { this.$store.dispatch('/changeColor', code, source$2); this.$store.emit('lastUpdateColor'); } @@ -8143,6 +8209,21 @@ var ColorInformation = function (_UIElement) { value: function click$formatChangeButton(e) { this.nextFormat(); } + }, { + key: 'click $el .information-item.hex .input-field .title', + value: function click$elInformationItemHexInputFieldTitle(e) { + this.goToFormat('hex'); + } + }, { + key: 'click $el .information-item.rgb .input-field .title', + value: function click$elInformationItemRgbInputFieldTitle(e) { + this.goToFormat('hsl'); + } + }, { + key: 'click $el .information-item.hsl .input-field .title', + value: function click$elInformationItemHslInputFieldTitle(e) { + this.goToFormat('rgb'); + } }, { key: 'setRGBInput', value: function setRGBInput() { @@ -9262,6 +9343,138 @@ var XDColorPicker = function (_BaseColorPicker) { return XDColorPicker; }(BaseColorPicker); +var source$8 = 'mini-control'; + +var ColorControl$12 = function (_UIElement) { + inherits(ColorControl, _UIElement); + + function ColorControl() { + classCallCheck(this, ColorControl); + return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments)); + } + + createClass(ColorControl, [{ + key: 'components', + value: function components() { + return { Hue: VerticalHue, Opacity: Opacity$2 }; + } + }, { + key: 'template', + value: function template() { + return (/*html*/'\n
\n
\n
\n
\n ' + ); + } + }, { + key: 'refresh', + value: function refresh() { + this.setColorUI(); + } + }, { + key: 'setColorUI', + value: function setColorUI() { + this.Hue.setColorUI(); + this.Opacity.setColorUI(); + } + }, { + key: '@changeColor', + value: function changeColor(sourceType) { + if (source$8 != sourceType) { + this.refresh(); + } + } + }, { + key: '@initColor', + value: function initColor() { + this.refresh(); + } + }]); + return ColorControl; +}(UIElement); + +var VSCodePicker = function (_BaseColorPicker) { + inherits(VSCodePicker, _BaseColorPicker); + + function VSCodePicker() { + classCallCheck(this, VSCodePicker); + return possibleConstructorReturn(this, (VSCodePicker.__proto__ || Object.getPrototypeOf(VSCodePicker)).apply(this, arguments)); + } + + createClass(VSCodePicker, [{ + key: 'template', + value: function template() { + return (/*html*/'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n ' + ); + } + }, { + key: 'components', + value: function components() { + return { + palette: ColorPalette, + control: ColorControl$12 + }; + } + }, { + key: 'initColorWithoutChangeEvent', + value: function initColorWithoutChangeEvent(color) { + console.log(color); + this.$store.dispatch('/initColor', color); + this.refresh(); + } + }, { + key: 'setBackgroundColor', + value: function setBackgroundColor() { + var color = this.$store.dispatch('/toColor'); + var rgb = this.$store.rgb; + var bValue = Color$1.brightness(rgb.r, rgb.g, rgb.b); + + this.refs.$colorview.css({ + "background-color": color, + 'color': bValue > 127 ? 'black' : 'white' + }); + this.refs.$colorview.html(color); + } + }, { + key: 'click $colorview', + value: function click$colorview(e) { + this.nextFormat(); + } + }, { + key: 'nextFormat', + value: function nextFormat() { + var current_format = this.$store.format || 'hex'; + + var next_format = 'hex'; + if (current_format == 'hex') { + next_format = 'rgb'; + } else if (current_format == 'rgb') { + next_format = 'hsl'; + } else if (current_format == 'hsl') { + next_format = 'hex'; + } + + this.$store.dispatch('/changeFormat', next_format); + this.$store.emit('lastUpdateColor'); + this.refresh(); + } + }, { + key: 'refresh', + value: function refresh() { + this.setBackgroundColor(); + } + }, { + key: '@changeColor', + value: function changeColor() { + this.refresh(); + } + }, { + key: '@initColor', + value: function initColor() { + this.refresh(); + } + }]); + return VSCodePicker; +}(BaseColorPicker); + var ColorPicker = { create: function create(opts) { switch (opts.type) { @@ -9273,6 +9486,8 @@ var ColorPicker = { return new RingColorPicker(opts); case 'mini': return new MiniColorPicker(opts); + case 'vscode': + return new VSCodePicker(opts); case 'mini-vertical': return new MiniColorPicker$2(opts); case 'sketch': @@ -9287,6 +9502,7 @@ var ColorPicker = { MacOSColorPicker: MacOSColorPicker, RingColorPicker: RingColorPicker, MiniColorPicker: MiniColorPicker, + VSCodePicker: VSCodePicker, MiniVerticalColorPicker: MiniColorPicker$2 }; diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css index ede0d40..04aecf1 100644 --- a/dist/codemirror-colorpicker.css +++ b/dist/codemirror-colorpicker.css @@ -93,46 +93,46 @@ margin: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } - .codemirror-colorpicker .colorpicker-body > .color { + .codemirror-colorpicker .colorpicker-body .color { position: relative; height: 120px; overflow: hidden; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation { + .codemirror-colorpicker .colorpicker-body .color > .saturation { position: relative; width: 100%; height: 100%; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value { position: relative; width: 100%; height: 100%; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value > .drag-pointer { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer { position: absolute; width: 10px; height: 10px; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } - .codemirror-colorpicker .colorpicker-body > .color > .saturation { + .codemirror-colorpicker .colorpicker-body .color > .saturation { background-color: rgba(204, 154, 129, 0); background-image: -webkit-gradient(linear, left top, right top, from(#FFF), to(rgba(204, 154, 129, 0))); background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0)); background-repeat: repeat-x; } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value { background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(rgba(204, 154, 129, 0))); background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0)); } - .codemirror-colorpicker .colorpicker-body > .color > .saturation > .value > .drag-pointer { + .codemirror-colorpicker .colorpicker-body .color > .saturation > .value > .drag-pointer { border: 1px solid #fff; -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); } - .codemirror-colorpicker .colorpicker-body > .control { + .codemirror-colorpicker .colorpicker-body .control { position: relative; padding: 10px 0px 10px 0px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - .codemirror-colorpicker .colorpicker-body > .control > .color, .codemirror-colorpicker .colorpicker-body > .control > .empty { + .codemirror-colorpicker .colorpicker-body .control > .color, .codemirror-colorpicker .colorpicker-body .control > .empty { position: absolute; left: 12px; top: 14px; @@ -141,33 +141,33 @@ border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; } - .codemirror-colorpicker .colorpicker-body > .control > .color { + .codemirror-colorpicker .colorpicker-body .control > .color { border: 1px solid rgba(0, 0, 0, 0.1); } - .codemirror-colorpicker .colorpicker-body > .control > .hue { + .codemirror-colorpicker .colorpicker-body .control > .hue { position: relative; padding: 6px 16px; margin: 0px 0px 0px 42px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .control > .hue > .hue-container { + .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container { position: relative; width: 100%; height: 10px; border-radius: 3px; } - .codemirror-colorpicker .colorpicker-body > .control > .opacity { + .codemirror-colorpicker .colorpicker-body .control > .opacity { position: relative; padding: 3px 16px; margin: 0px 0px 0px 42px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .control > .opacity > .opacity-container { + .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container { position: relative; width: 100%; height: 10px; border-radius: 3px; } - .codemirror-colorpicker .colorpicker-body > .control .drag-bar, .codemirror-colorpicker .colorpicker-body > .control .drag-bar2 { + .codemirror-colorpicker .colorpicker-body .control .drag-bar, .codemirror-colorpicker .colorpicker-body .control .drag-bar2 { position: absolute; cursor: pointer; top: 50%; @@ -177,12 +177,12 @@ width: 12px; height: 12px; border-radius: 50%; } - .codemirror-colorpicker .colorpicker-body > .control > .hue > .hue-container { + .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container { background: -webkit-gradient(linear, left top, right top, from(#ff0000), color-stop(17%, #ffff00), color-stop(33%, #00ff00), color-stop(50%, #00ffff), color-stop(67%, #0000ff), color-stop(83%, #ff00ff), to(#ff0000)); background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } - .codemirror-colorpicker .colorpicker-body > .control > .opacity > .opacity-container { + .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } - .codemirror-colorpicker .colorpicker-body > .control > .opacity > .opacity-container > .color-bar { + .codemirror-colorpicker .colorpicker-body .control > .opacity > .opacity-container > .color-bar { position: absolute; display: block; content: ""; @@ -190,20 +190,20 @@ right: 0px; bottom: 0px; top: 0px; } - .codemirror-colorpicker .colorpicker-body > .control > .empty { + .codemirror-colorpicker .colorpicker-body .control > .empty { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } - .codemirror-colorpicker .colorpicker-body > .control .drag-bar, - .codemirror-colorpicker .colorpicker-body > .control .drag-bar2 { + .codemirror-colorpicker .colorpicker-body .control .drag-bar, + .codemirror-colorpicker .colorpicker-body .control .drag-bar2 { border: 1px solid rgba(0, 0, 0, 0.05); -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2); background-color: #fefefe; } - .codemirror-colorpicker .colorpicker-body > .information { + .codemirror-colorpicker .colorpicker-body .information { /*border-top: 1px solid #e8e8e8;*/ position: relative; -webkit-box-sizing: padding-box; box-sizing: padding-box; } - .codemirror-colorpicker .colorpicker-body > .information > input { + .codemirror-colorpicker .colorpicker-body .information > input { position: absolute; font-size: 10px; height: 20px; @@ -215,27 +215,27 @@ -moz-user-select: text; -ms-user-select: text; user-select: text; } - .codemirror-colorpicker .colorpicker-body > .information > input[type=number] { + .codemirror-colorpicker .colorpicker-body .information > input[type=number] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - .codemirror-colorpicker .colorpicker-body > .information > input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body > .information > input[type=number]::-webkit-outer-spin-button { + .codemirror-colorpicker .colorpicker-body .information > input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body .information > input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } - .codemirror-colorpicker .colorpicker-body > .information.hex > .information-item.hex { + .codemirror-colorpicker .colorpicker-body .information.hex > .information-item.hex { display: -webkit-box; display: -ms-flexbox; display: flex; } - .codemirror-colorpicker .colorpicker-body > .information.rgb > .information-item.rgb { + .codemirror-colorpicker .colorpicker-body .information.rgb > .information-item.rgb { display: -webkit-box; display: -ms-flexbox; display: flex; } - .codemirror-colorpicker .colorpicker-body > .information.hsl > .information-item.hsl { + .codemirror-colorpicker .colorpicker-body .information.hsl > .information-item.hsl { display: -webkit-box; display: -ms-flexbox; display: flex; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item { + .codemirror-colorpicker .colorpicker-body .information > .information-item { display: none; position: relative; padding: 0px 5px; @@ -243,7 +243,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 40px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field { display: block; -webkit-box-flex: 1; -ms-flex: 1; @@ -252,12 +252,12 @@ -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field > .title { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field > .title { text-align: center; font-size: 12px; color: #a9a9a9; padding-top: 2px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input { text-align: center; width: 100%; padding: 3px; @@ -272,21 +272,21 @@ user-select: text; border: 1px solid #cbcbcb; border-radius: 2px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input[type=number] { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field input[type=number]::-webkit-outer-spin-button { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-inner-spin-button, .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field.hsl-l input[type=number], .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field.hsl-s input[type=number] { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-l input[type=number], .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field.hsl-s input[type=number] { padding-left: 1px; padding-right: 10px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-item > .input-field .postfix { + .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field .postfix { display: inline-block; position: absolute; - right: 4px; + right: 3px; top: 2px; height: 21px; line-height: 2; @@ -295,7 +295,7 @@ box-sizing: border-box; text-align: center; font-size: 11px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-change { + .codemirror-colorpicker .colorpicker-body .information > .information-change { position: absolute; display: block; width: 40px; @@ -306,38 +306,38 @@ -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 5px; } - .codemirror-colorpicker .colorpicker-body > .information > .information-change > .format-change-button { + .codemirror-colorpicker .colorpicker-body .information > .information-change > .format-change-button { -webkit-box-sizing: border-box; box-sizing: border-box; background: transparent; border: 0px; cursor: pointer; outline: none; } - .codemirror-colorpicker .colorpicker-body > .information > .title { + .codemirror-colorpicker .colorpicker-body .information > .title { color: #a3a3a3; } - .codemirror-colorpicker .colorpicker-body > .information > .input { + .codemirror-colorpicker .colorpicker-body .information > .input { color: #333; } - .codemirror-colorpicker .colorpicker-body > .colorsets { + .codemirror-colorpicker .colorpicker-body .colorsets { border-top: 1px solid #e2e2e2; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .menu { + .codemirror-colorpicker .colorpicker-body .colorsets > .menu { float: right; padding: 10px 5px; padding-right: 15px; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .menu button { + .codemirror-colorpicker .colorpicker-body .colorsets > .menu button { border: 0px; font-size: 14px; font-weight: 300; font-family: serif, sans-serif; outline: none; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list { margin-right: 30px; display: block; padding: 12px 0px 0px 12px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item { width: 13px; height: 13px; border-radius: 2px; @@ -351,10 +351,10 @@ box-sizing: border-box; cursor: pointer; vertical-align: middle; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item:hover { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item .empty { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item .empty { position: absolute; left: 0px; top: 0px; @@ -364,7 +364,7 @@ padding: 0px; margin: 0px; pointer-events: none; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .color-item .color-view { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item .color-view { position: absolute; left: 0px; top: 0px; @@ -376,7 +376,7 @@ border: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; box-sizing: border-box; } - .codemirror-colorpicker .colorpicker-body > .colorsets > .color-list .add-color-item { + .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .add-color-item { width: 13px; height: 13px; display: inline-block; @@ -390,7 +390,7 @@ font-family: serif,sans-serif; color: #8e8e8e; vertical-align: middle; } - .codemirror-colorpicker .colorpicker-body > .color-chooser { + .codemirror-colorpicker .colorpicker-body .color-chooser { position: absolute; left: 0px; right: 0px; @@ -401,17 +401,17 @@ -webkit-transition: opacity 0.05s ease-out; transition: opacity 0.05s ease-out; pointer-events: none; } - .codemirror-colorpicker .colorpicker-body > .color-chooser.open { + .codemirror-colorpicker .colorpicker-body .color-chooser.open { opacity: 1; pointer-events: all; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container { position: absolute; top: 120px; left: 0px; right: 0px; bottom: 0px; background-color: white; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-item-header { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header { position: absolute; top: 0px; left: 0px; @@ -424,7 +424,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-item-header .title { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; @@ -442,7 +442,7 @@ white-space: nowrap; color: #000; text-align: left; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-item-header .items { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; @@ -452,23 +452,23 @@ height: 100%; line-height: 2; cursor: pointer; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list { position: absolute; top: 34px; left: 0px; right: 0px; bottom: 0px; overflow: auto; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 3px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover { background-color: rgba(0, 0, 0, 0.05); } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; @@ -488,7 +488,7 @@ white-space: nowrap; color: #000; text-align: left; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; @@ -497,7 +497,7 @@ line-height: 1.6; cursor: pointer; pointer-events: none; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item { width: 13px; height: 13px; border-radius: 3px; @@ -511,7 +511,7 @@ box-sizing: border-box; cursor: pointer; vertical-align: middle; } - .codemirror-colorpicker .colorpicker-body > .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view { + .codemirror-colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view { width: 100%; height: 100%; padding: 0px; @@ -572,30 +572,44 @@ display: none; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.rgb { display: inherit; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.rgb .information-item.hsl { + display: none !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hex { display: inherit; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.hex .information-item.hsl { + display: none !important; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.rgb { + display: none !important; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information.hsl .information-item.hsl { + display: inherit; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; margin-right: 0px; } - .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title { - color: black; - font-size: 11px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field { + padding-left: 0px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child { + padding-right: 0px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field > .title { + color: black; + font-size: 11px; + cursor: pointer; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item > .input-field:last-child:not(:first-child) { padding-right: 0px; } - .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl { - display: none !important; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hex { - width: 70px; + width: 74px; padding-right: 0px; padding-left: 5px; } .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.rgb { - width: 144px; + width: 140px; + padding-left: 0px; + padding-right: 0px; } + .codemirror-colorpicker.sketch > .colorpicker-body > .information .information-item.hsl { + display: none; + width: 140px; padding-left: 0px; padding-right: 0px; } - .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .menu { - display: none; } .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list { margin-right: 0px; padding-right: 12px; } @@ -953,6 +967,78 @@ transform: translateX(-50%) translateY(-50%); } .codemirror-colorpicker.xd .information { margin-top: 5px; } + .codemirror-colorpicker.vscode { + width: 336px; + display: inline-block; + background-color: #333; + border: 1px solid #ececec; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0px; } + .codemirror-colorpicker.vscode .colorpicker-body { + border-radius: 0px; + display: inline-block; } + .codemirror-colorpicker.vscode .colorpicker-body .color-view { + height: 34px; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat; } + .codemirror-colorpicker.vscode .colorpicker-body .color-view .color-view-container { + line-height: 34px; + font-size: 14px; + text-align: center; + width: 100%; + height: 100%; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + text-shadow: 0 0 3px #535353; } + .codemirror-colorpicker.vscode .colorpicker-body .color-tool { + padding: 8px; } + .codemirror-colorpicker.vscode .color { + display: inline-block; + width: 240px; + height: 160px; + vertical-align: middle; } + .codemirror-colorpicker.vscode .control { + height: 160px; + vertical-align: middle; + display: inline-block; + padding: 0px 0px 0px 4px; } + .codemirror-colorpicker.vscode .control .hue, .codemirror-colorpicker.vscode .control .opacity { + margin: 0px; + padding: 0px; + width: 30px; + display: inline-block; + vertical-align: middle; + height: 100%; + position: relative; } + .codemirror-colorpicker.vscode .control .hue { + padding-left: 5px; + width: 35px; } + .codemirror-colorpicker.vscode .control .hue > .hue-container { + border-radius: 0px; + height: 100%; + background: -webkit-gradient(linear, left bottom, left top, from(#ff0000), color-stop(17%, #ffff00), color-stop(33%, #00ff00), color-stop(50%, #00ffff), color-stop(67%, #0000ff), color-stop(83%, #ff00ff), to(#ff0000)); + background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } + .codemirror-colorpicker.vscode .control .opacity > .opacity-container { + border-radius: 0px; + height: 100%; + width: 30px; } + .codemirror-colorpicker.vscode .control .drag-bar, .codemirror-colorpicker.vscode .control .drag-bar2 { + background-color: transparent; + height: 5px; + width: 33px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transform: translateY(-50%) translateX(-2px); + transform: translateY(-50%) translateX(-2px); + border: 1px solid white; + border-radius: 0px; + -webkit-box-shadow: 0 0 2px 0 black, inset 0 0 0 0 black; + box-shadow: 0 0 2px 0 black, inset 0 0 0 0 black; } .colorsets-contextmenu { position: fixed; diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js index c3f7a5a..a075c01 100644 --- a/dist/codemirror-colorpicker.js +++ b/dist/codemirror-colorpicker.js @@ -10,7 +10,7 @@ * convert color to format string * * // hex - * color.format({ r : 255, g : 255, b : 255 }, 'hex') // #FFFFFF + * color.format({ r : 255, g : 255, b : 255, a: 1 }, 'hex') // #FFFFFFFF * * // rgb * color.format({ r : 255, g : 255, b : 255 }, 'rgb') // rgba(255, 255, 255, 0.5); @@ -55,7 +55,14 @@ function hex(obj) { var b = obj.b.toString(16); if (obj.b < 16) b = "0" + b; - return '#' + r + g + b; + var alphaValue = ''; + if (obj.a < 1) { + var alpha = Math.floor(obj.a * 255); + var alphaValue = alpha.toString(16); + if (alpha < 16) alphaValue = "0" + alphaValue; + } + + return '#' + r + g + b + alphaValue; } function rgb(obj) { @@ -160,956 +167,971 @@ var math = { caculateAngle: caculateAngle }; -/** - * @method RGBtoHSV - * - * convert rgb to hsv - * - * color.RGBtoHSV(0, 0, 255) === { h : 240, s : 1, v : 1 } === '#FFFF00' - * - * @param {Number} R red color value - * @param {Number} G green color value - * @param {Number} B blue color value - * @return {Object} hsv color code - */ -function RGBtoHSV(r, g, b) { - - if (arguments.length == 1) { - var _arguments$ = arguments[0], - r = _arguments$.r, - g = _arguments$.g, - b = _arguments$.b; - } +var color_names = { aliceblue: "rgb(240, 248, 255)", antiquewhite: "rgb(250, 235, 215)", aqua: "rgb(0, 255, 255)", aquamarine: "rgb(127, 255, 212)", azure: "rgb(240, 255, 255)", beige: "rgb(245, 245, 220)", bisque: "rgb(255, 228, 196)", black: "rgb(0, 0, 0)", blanchedalmond: "rgb(255, 235, 205)", blue: "rgb(0, 0, 255)", blueviolet: "rgb(138, 43, 226)", brown: "rgb(165, 42, 42)", burlywood: "rgb(222, 184, 135)", cadetblue: "rgb(95, 158, 160)", chartreuse: "rgb(127, 255, 0)", chocolate: "rgb(210, 105, 30)", coral: "rgb(255, 127, 80)", cornflowerblue: "rgb(100, 149, 237)", cornsilk: "rgb(255, 248, 220)", crimson: "rgb(237, 20, 61)", cyan: "rgb(0, 255, 255)", darkblue: "rgb(0, 0, 139)", darkcyan: "rgb(0, 139, 139)", darkgoldenrod: "rgb(184, 134, 11)", darkgray: "rgb(169, 169, 169)", darkgrey: "rgb(169, 169, 169)", darkgreen: "rgb(0, 100, 0)", darkkhaki: "rgb(189, 183, 107)", darkmagenta: "rgb(139, 0, 139)", darkolivegreen: "rgb(85, 107, 47)", darkorange: "rgb(255, 140, 0)", darkorchid: "rgb(153, 50, 204)", darkred: "rgb(139, 0, 0)", darksalmon: "rgb(233, 150, 122)", darkseagreen: "rgb(143, 188, 143)", darkslateblue: "rgb(72, 61, 139)", darkslategray: "rgb(47, 79, 79)", darkslategrey: "rgb(47, 79, 79)", darkturquoise: "rgb(0, 206, 209)", darkviolet: "rgb(148, 0, 211)", deeppink: "rgb(255, 20, 147)", deepskyblue: "rgb(0, 191, 255)", dimgray: "rgb(105, 105, 105)", dimgrey: "rgb(105, 105, 105)", dodgerblue: "rgb(30, 144, 255)", firebrick: "rgb(178, 34, 34)", floralwhite: "rgb(255, 250, 240)", forestgreen: "rgb(34, 139, 34)", fuchsia: "rgb(255, 0, 255)", gainsboro: "rgb(220, 220, 220)", ghostwhite: "rgb(248, 248, 255)", gold: "rgb(255, 215, 0)", goldenrod: "rgb(218, 165, 32)", gray: "rgb(128, 128, 128)", grey: "rgb(128, 128, 128)", green: "rgb(0, 128, 0)", greenyellow: "rgb(173, 255, 47)", honeydew: "rgb(240, 255, 240)", hotpink: "rgb(255, 105, 180)", indianred: "rgb(205, 92, 92)", indigo: "rgb(75, 0, 130)", ivory: "rgb(255, 255, 240)", khaki: "rgb(240, 230, 140)", lavender: "rgb(230, 230, 250)", lavenderblush: "rgb(255, 240, 245)", lawngreen: "rgb(124, 252, 0)", lemonchiffon: "rgb(255, 250, 205)", lightblue: "rgb(173, 216, 230)", lightcoral: "rgb(240, 128, 128)", lightcyan: "rgb(224, 255, 255)", lightgoldenrodyellow: "rgb(250, 250, 210)", lightgreen: "rgb(144, 238, 144)", lightgray: "rgb(211, 211, 211)", lightgrey: "rgb(211, 211, 211)", lightpink: "rgb(255, 182, 193)", lightsalmon: "rgb(255, 160, 122)", lightseagreen: "rgb(32, 178, 170)", lightskyblue: "rgb(135, 206, 250)", lightslategray: "rgb(119, 136, 153)", lightslategrey: "rgb(119, 136, 153)", lightsteelblue: "rgb(176, 196, 222)", lightyellow: "rgb(255, 255, 224)", lime: "rgb(0, 255, 0)", limegreen: "rgb(50, 205, 50)", linen: "rgb(250, 240, 230)", magenta: "rgb(255, 0, 255)", maroon: "rgb(128, 0, 0)", mediumaquamarine: "rgb(102, 205, 170)", mediumblue: "rgb(0, 0, 205)", mediumorchid: "rgb(186, 85, 211)", mediumpurple: "rgb(147, 112, 219)", mediumseagreen: "rgb(60, 179, 113)", mediumslateblue: "rgb(123, 104, 238)", mediumspringgreen: "rgb(0, 250, 154)", mediumturquoise: "rgb(72, 209, 204)", mediumvioletred: "rgb(199, 21, 133)", midnightblue: "rgb(25, 25, 112)", mintcream: "rgb(245, 255, 250)", mistyrose: "rgb(255, 228, 225)", moccasin: "rgb(255, 228, 181)", navajowhite: "rgb(255, 222, 173)", navy: "rgb(0, 0, 128)", oldlace: "rgb(253, 245, 230)", olive: "rgb(128, 128, 0)", olivedrab: "rgb(107, 142, 35)", orange: "rgb(255, 165, 0)", orangered: "rgb(255, 69, 0)", orchid: "rgb(218, 112, 214)", palegoldenrod: "rgb(238, 232, 170)", palegreen: "rgb(152, 251, 152)", paleturquoise: "rgb(175, 238, 238)", palevioletred: "rgb(219, 112, 147)", papayawhip: "rgb(255, 239, 213)", peachpuff: "rgb(255, 218, 185)", peru: "rgb(205, 133, 63)", pink: "rgb(255, 192, 203)", plum: "rgb(221, 160, 221)", powderblue: "rgb(176, 224, 230)", purple: "rgb(128, 0, 128)", rebeccapurple: "rgb(102, 51, 153)", red: "rgb(255, 0, 0)", rosybrown: "rgb(188, 143, 143)", royalblue: "rgb(65, 105, 225)", saddlebrown: "rgb(139, 69, 19)", salmon: "rgb(250, 128, 114)", sandybrown: "rgb(244, 164, 96)", seagreen: "rgb(46, 139, 87)", seashell: "rgb(255, 245, 238)", sienna: "rgb(160, 82, 45)", silver: "rgb(192, 192, 192)", skyblue: "rgb(135, 206, 235)", slateblue: "rgb(106, 90, 205)", slategray: "rgb(112, 128, 144)", slategrey: "rgb(112, 128, 144)", snow: "rgb(255, 250, 250)", springgreen: "rgb(0, 255, 127)", steelblue: "rgb(70, 130, 180)", tan: "rgb(210, 180, 140)", teal: "rgb(0, 128, 128)", thistle: "rgb(216, 191, 216)", tomato: "rgb(255, 99, 71)", turquoise: "rgb(64, 224, 208)", violet: "rgb(238, 130, 238)", wheat: "rgb(245, 222, 179)", white: "rgb(255, 255, 255)", whitesmoke: "rgb(245, 245, 245)", yellow: "rgb(255, 255, 0)", yellowgreen: "rgb(154, 205, 50)", transparent: "rgba(0, 0, 0, 0)" }; - var R1 = r / 255; - var G1 = g / 255; - var B1 = b / 255; +function isColorName(name) { + return !!color_names[name]; +} - var MaxC = Math.max(R1, G1, B1); - var MinC = Math.min(R1, G1, B1); +function getColorByName(name) { + return color_names[name]; +} - var DeltaC = MaxC - MinC; +var ColorNames = { + isColorName: isColorName, + getColorByName: getColorByName +}; - var H = 0; +function HUEtoRGB(p, q, t) { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; +} - if (DeltaC == 0) { - H = 0; - } else if (MaxC == R1) { - H = 60 * ((G1 - B1) / DeltaC % 6); - } else if (MaxC == G1) { - H = 60 * ((B1 - R1) / DeltaC + 2); - } else if (MaxC == B1) { - H = 60 * ((R1 - G1) / DeltaC + 4); - } +function HSLtoHSV(h, s, l) { - if (H < 0) { - H = 360 + H; + if (arguments.length == 1) { + var _arguments$ = arguments[0], + h = _arguments$.h, + s = _arguments$.s, + l = _arguments$.l; } + var rgb = HSLtoRGB(h, s, l); - var S = 0; - - if (MaxC == 0) S = 0;else S = DeltaC / MaxC; - - var V = MaxC; - - return { h: H, s: S, v: V }; + return RGBtoHSV(rgb.r, rgb.g, rgb.b); } -function RGBtoCMYK(r, g, b) { +function HSLtoRGB(h, s, l) { if (arguments.length == 1) { var _arguments$2 = arguments[0], - r = _arguments$2.r, - g = _arguments$2.g, - b = _arguments$2.b; + h = _arguments$2.h, + s = _arguments$2.s, + l = _arguments$2.l; } - var R1 = r / 255; - var G1 = g / 255; - var B1 = b / 255; + var r, g, b; - var K = 1 - Math.max(R1, G1, B1); - var C = (1 - R1 - K) / (1 - K); - var M = (1 - G1 - K) / (1 - K); - var Y = (1 - B1 - K) / (1 - K); + h /= 360; + s /= 100; + l /= 100; - return { c: C, m: M, y: Y, k: K }; + if (s == 0) { + r = g = b = l; // achromatic + } else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = HUEtoRGB(p, q, h + 1 / 3); + g = HUEtoRGB(p, q, h); + b = HUEtoRGB(p, q, h - 1 / 3); + } + + return { r: round(r * 255), g: round(g * 255), b: round(b * 255) }; } -function RGBtoHSL(r, g, b) { +var fromHSL = { + HUEtoRGB: HUEtoRGB, + HSLtoHSV: HSLtoHSV, + HSLtoRGB: HSLtoRGB +}; - if (arguments.length == 1) { - var _arguments$3 = arguments[0], - r = _arguments$3.r, - g = _arguments$3.g, - b = _arguments$3.b; +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); } + } - r /= 255, g /= 255, b /= 255; - var max = Math.max(r, g, b), - min = Math.min(r, g, b); - var h, - s, - l = (max + min) / 2; + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); - if (max == min) { - h = s = 0; // achromatic - } else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0);break; - case g: - h = (b - r) / d + 2;break; - case b: - h = (r - g) / d + 4;break; - } - h /= 6; - } - return { h: round(h * 360), s: round(s * 100), l: round(l * 100) }; -} -function c(r, g, b) { - if (arguments.length == 1) { - var _arguments$4 = arguments[0], - r = _arguments$4.r, - g = _arguments$4.g, - b = _arguments$4.b; - } - return gray((r + g + b) / 3 > 90 ? 0 : 255); -} -function gray(gray) { - return { r: gray, g: gray, b: gray }; -} +var defineProperty = function (obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } -function RGBtoSimpleGray(r, g, b) { + return obj; +}; - if (arguments.length == 1) { - var _arguments$5 = arguments[0], - r = _arguments$5.r, - g = _arguments$5.g, - b = _arguments$5.b; +var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } } - return gray(Math.ceil((r + g + b) / 3)); -} + } -function RGBtoGray(r, g, b) { + return target; +}; - if (arguments.length == 1) { - var _arguments$6 = arguments[0], - r = _arguments$6.r, - g = _arguments$6.g, - b = _arguments$6.b; - } - return gray(RGBtoYCrCb(r, g, b).y); -} +var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); -function brightness(r, g, b) { - return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722); -} + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); -function RGBtoYCrCb(r, g, b) { + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; - if (arguments.length == 1) { - var _arguments$7 = arguments[0], - r = _arguments$7.r, - g = _arguments$7.g, - b = _arguments$7.b; + if (getter === undefined) { + return undefined; } - var Y = brightness(r, g, b); - var Cb = 0.564 * (b - Y); - var Cr = 0.713 * (r - Y); - return { y: Y, cr: Cr, cb: Cb }; -} + return getter.call(receiver); + } +}; -function PivotRGB(n) { - return (n > 0.04045 ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92) * 100; -} +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } -function RGBtoXYZ(r, g, b) { - //sR, sG and sB (Standard RGB) input range = 0 ÷ 255 - //X, Y and Z output refer to a D65/2° standard illuminant. - if (arguments.length == 1) { - var _arguments$8 = arguments[0], - r = _arguments$8.r, - g = _arguments$8.g, - b = _arguments$8.b; + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; - var R = r / 255; - var G = g / 255; - var B = b / 255; - R = PivotRGB(R); - G = PivotRGB(G); - B = PivotRGB(B); - var x = R * 0.4124 + G * 0.3576 + B * 0.1805; - var y = R * 0.2126 + G * 0.7152 + B * 0.0722; - var z = R * 0.0193 + G * 0.1192 + B * 0.9505; - return { x: x, y: y, z: z }; -} -function RGBtoLAB(r, g, b) { - if (arguments.length == 1) { - var _arguments$9 = arguments[0], - r = _arguments$9.r, - g = _arguments$9.g, - b = _arguments$9.b; - } - return XYZtoLAB(RGBtoXYZ(r, g, b)); -} -var fromRGB = { - RGBtoCMYK: RGBtoCMYK, - RGBtoGray: RGBtoGray, - RGBtoHSL: RGBtoHSL, - RGBtoHSV: RGBtoHSV, - RGBtoLAB: RGBtoLAB, - RGBtoSimpleGray: RGBtoSimpleGray, - RGBtoXYZ: RGBtoXYZ, - RGBtoYCrCb: RGBtoYCrCb, - c: c, - brightness: brightness, - gray: gray -}; -function CMYKtoRGB(c, m, y, k) { - if (arguments.length == 1) { - var _arguments$ = arguments[0], - c = _arguments$.c, - m = _arguments$.m, - y = _arguments$.y, - k = _arguments$.k; - } - var R = 255 * (1 - c) * (1 - k); - var G = 255 * (1 - m) * (1 - k); - var B = 255 * (1 - y) * (1 - k); - return { r: R, g: G, b: B }; -} -var fromCMYK = { - CMYKtoRGB: CMYKtoRGB +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; }; -function ReverseXyz(n) { - return Math.pow(n, 3) > 0.008856 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787; -} -function ReverseRGB(n) { - return n > 0.0031308 ? 1.055 * Math.pow(n, 1 / 2.4) - 0.055 : 12.92 * n; -} -function XYZtoRGB(x, y, z) { - if (arguments.length == 1) { - var _arguments$ = arguments[0], - x = _arguments$.x, - y = _arguments$.y, - z = _arguments$.z; - } - //X, Y and Z input refer to a D65/2° standard illuminant. - //sR, sG and sB (standard RGB) output range = 0 ÷ 255 - var X = x / 100.0; - var Y = y / 100.0; - var Z = z / 100.0; - var R = X * 3.2406 + Y * -1.5372 + Z * -0.4986; - var G = X * -0.9689 + Y * 1.8758 + Z * 0.0415; - var B = X * 0.0557 + Y * -0.2040 + Z * 1.0570; +var slicedToArray = function () { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; - R = ReverseRGB(R); - G = ReverseRGB(G); - B = ReverseRGB(B); + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); - var r = round(R * 255); - var g = round(G * 255); - var b = round(B * 255); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"]) _i["return"](); + } finally { + if (_d) throw _e; + } + } - return { r: r, g: g, b: b }; -} + return _arr; + } -function LABtoXYZ(l, a, b) { - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - l = _arguments$2.l, - a = _arguments$2.a, - b = _arguments$2.b; + return function (arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError("Invalid attempt to destructure non-iterable instance"); } - //Reference-X, Y and Z refer to specific illuminants and observers. - //Common reference values are available below in this same page. + }; +}(); - var Y = (l + 16) / 116; - var X = a / 500 + Y; - var Z = Y - b / 200; - Y = ReverseXyz(Y); - X = ReverseXyz(X); - Z = ReverseXyz(Z); - var x = X * 95.047; - var y = Y * 100.000; - var z = Z * 108.883; - return { x: x, y: y, z: z }; -} -function LABtoRGB(l, a, b) { - if (arguments.length == 1) { - var _arguments$4 = arguments[0], - l = _arguments$4.l, - a = _arguments$4.a, - b = _arguments$4.b; - } - return XYZtoRGB(LABtoXYZ(l, a, b)); -} -var fromLAB = { - XYZtoRGB: XYZtoRGB, - LABtoRGB: LABtoRGB, - LABtoXYZ: LABtoXYZ + +var toArray = function (arr) { + return Array.isArray(arr) ? arr : Array.from(arr); }; -/** - * @method HSVtoRGB - * - * convert hsv to rgb - * - * color.HSVtoRGB(0,0,1) === #FFFFF === { r : 255, g : 0, b : 0 } - * - * @param {Number} H hue color number (min : 0, max : 360) - * @param {Number} S Saturation number (min : 0, max : 1) - * @param {Number} V Value number (min : 0, max : 1 ) - * @returns {Object} - */ -function HSVtoRGB(h, s, v) { +var toConsumableArray = function (arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; - if (arguments.length == 1) { - var _arguments$ = arguments[0], - h = _arguments$.h, - s = _arguments$.s, - v = _arguments$.v; - } + return arr2; + } else { + return Array.from(arr); + } +}; - var H = h; - var S = s; - var V = v; +var color_regexp = /(#(?:[\da-f]{3}){1,2}|#(?:[\da-f]{8})|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi; +var color_split = ','; - if (H >= 360) { - H = 0; +function matches(str) { + var matches = str.match(color_regexp); + var result = []; + + if (!matches) { + return result; } - var C = S * V; - var X = C * (1 - Math.abs(H / 60 % 2 - 1)); - var m = V - C; + for (var i = 0, len = matches.length; i < len; i++) { - var temp = []; + if (matches[i].indexOf('#') > -1 || matches[i].indexOf('rgb') > -1 || matches[i].indexOf('hsl') > -1) { + result.push({ color: matches[i] }); + } else { + var nameColor = ColorNames.getColorByName(matches[i]); - if (0 <= H && H < 60) { - temp = [C, X, 0]; - } else if (60 <= H && H < 120) { - temp = [X, C, 0]; - } else if (120 <= H && H < 180) { - temp = [0, C, X]; - } else if (180 <= H && H < 240) { - temp = [0, X, C]; - } else if (240 <= H && H < 300) { - temp = [X, 0, C]; - } else if (300 <= H && H < 360) { - temp = [C, 0, X]; + if (nameColor) { + result.push({ color: matches[i], nameColor: nameColor }); + } + } } - return { - r: round((temp[0] + m) * 255), - g: round((temp[1] + m) * 255), - b: round((temp[2] + m) * 255) - }; -} - -function HSVtoHSL(h, s, v) { + var pos = { next: 0 }; + result.forEach(function (item) { + var startIndex = str.indexOf(item.color, pos.next); - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - h = _arguments$2.h, - s = _arguments$2.s, - v = _arguments$2.v; - } + item.startIndex = startIndex; + item.endIndex = startIndex + item.color.length; - var rgb = HSVtoRGB(h, s, v); + pos.next = item.endIndex; + }); - return RGBtoHSL(rgb.r, rgb.g, rgb.b); + return result; } -var fromHSV = { - HSVtoHSL: HSVtoHSL, - HSVtoRGB: HSVtoRGB -}; - -function HUEtoRGB(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; -} - -function HSLtoHSV(h, s, l) { - - if (arguments.length == 1) { - var _arguments$ = arguments[0], - h = _arguments$.h, - s = _arguments$.s, - l = _arguments$.l; - } - var rgb = HSLtoRGB(h, s, l); - - return RGBtoHSV(rgb.r, rgb.g, rgb.b); -} - -function HSLtoRGB(h, s, l) { - - if (arguments.length == 1) { - var _arguments$2 = arguments[0], - h = _arguments$2.h, - s = _arguments$2.s, - l = _arguments$2.l; - } - - var r, g, b; - - h /= 360; - s /= 100; - l /= 100; +function convertMatches(str) { + var m = matches(str); - if (s == 0) { - r = g = b = l; // achromatic - } else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = HUEtoRGB(p, q, h + 1 / 3); - g = HUEtoRGB(p, q, h); - b = HUEtoRGB(p, q, h - 1 / 3); - } + m.forEach(function (it, index) { + str = str.replace(it.color, '@' + index); + }); - return { r: round(r * 255), g: round(g * 255), b: round(b * 255) }; + return { str: str, matches: m }; } -var fromHSL = { - HUEtoRGB: HUEtoRGB, - HSLtoHSV: HSLtoHSV, - HSLtoRGB: HSLtoRGB -}; - -function YCrCbtoRGB(y, cr, cb, bit) { +function convertMatchesArray(str) { + var splitStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ','; - if (arguments.length == 1) { - var _arguments$ = arguments[0], - y = _arguments$.y, - cr = _arguments$.cr, - cb = _arguments$.cb, - bit = _arguments$.bit; + var ret = convertMatches(str); + return ret.str.split(splitStr).map(function (it, index) { + it = trim(it); - bit = bit || 0; - } - var R = y + 1.402 * (cr - bit); - var G = y - 0.344 * (cb - bit) - 0.714 * (cr - bit); - var B = y + 1.772 * (cb - bit); + if (ret.matches[index]) { + it = it.replace('@' + index, ret.matches[index].color); + } - return { r: Math.ceil(R), g: Math.ceil(G), b: Math.ceil(B) }; + return it; + }); } -var fromYCrCb = { - YCrCbtoRGB: YCrCbtoRGB -}; - -var color_names = { aliceblue: "rgb(240, 248, 255)", antiquewhite: "rgb(250, 235, 215)", aqua: "rgb(0, 255, 255)", aquamarine: "rgb(127, 255, 212)", azure: "rgb(240, 255, 255)", beige: "rgb(245, 245, 220)", bisque: "rgb(255, 228, 196)", black: "rgb(0, 0, 0)", blanchedalmond: "rgb(255, 235, 205)", blue: "rgb(0, 0, 255)", blueviolet: "rgb(138, 43, 226)", brown: "rgb(165, 42, 42)", burlywood: "rgb(222, 184, 135)", cadetblue: "rgb(95, 158, 160)", chartreuse: "rgb(127, 255, 0)", chocolate: "rgb(210, 105, 30)", coral: "rgb(255, 127, 80)", cornflowerblue: "rgb(100, 149, 237)", cornsilk: "rgb(255, 248, 220)", crimson: "rgb(237, 20, 61)", cyan: "rgb(0, 255, 255)", darkblue: "rgb(0, 0, 139)", darkcyan: "rgb(0, 139, 139)", darkgoldenrod: "rgb(184, 134, 11)", darkgray: "rgb(169, 169, 169)", darkgrey: "rgb(169, 169, 169)", darkgreen: "rgb(0, 100, 0)", darkkhaki: "rgb(189, 183, 107)", darkmagenta: "rgb(139, 0, 139)", darkolivegreen: "rgb(85, 107, 47)", darkorange: "rgb(255, 140, 0)", darkorchid: "rgb(153, 50, 204)", darkred: "rgb(139, 0, 0)", darksalmon: "rgb(233, 150, 122)", darkseagreen: "rgb(143, 188, 143)", darkslateblue: "rgb(72, 61, 139)", darkslategray: "rgb(47, 79, 79)", darkslategrey: "rgb(47, 79, 79)", darkturquoise: "rgb(0, 206, 209)", darkviolet: "rgb(148, 0, 211)", deeppink: "rgb(255, 20, 147)", deepskyblue: "rgb(0, 191, 255)", dimgray: "rgb(105, 105, 105)", dimgrey: "rgb(105, 105, 105)", dodgerblue: "rgb(30, 144, 255)", firebrick: "rgb(178, 34, 34)", floralwhite: "rgb(255, 250, 240)", forestgreen: "rgb(34, 139, 34)", fuchsia: "rgb(255, 0, 255)", gainsboro: "rgb(220, 220, 220)", ghostwhite: "rgb(248, 248, 255)", gold: "rgb(255, 215, 0)", goldenrod: "rgb(218, 165, 32)", gray: "rgb(128, 128, 128)", grey: "rgb(128, 128, 128)", green: "rgb(0, 128, 0)", greenyellow: "rgb(173, 255, 47)", honeydew: "rgb(240, 255, 240)", hotpink: "rgb(255, 105, 180)", indianred: "rgb(205, 92, 92)", indigo: "rgb(75, 0, 130)", ivory: "rgb(255, 255, 240)", khaki: "rgb(240, 230, 140)", lavender: "rgb(230, 230, 250)", lavenderblush: "rgb(255, 240, 245)", lawngreen: "rgb(124, 252, 0)", lemonchiffon: "rgb(255, 250, 205)", lightblue: "rgb(173, 216, 230)", lightcoral: "rgb(240, 128, 128)", lightcyan: "rgb(224, 255, 255)", lightgoldenrodyellow: "rgb(250, 250, 210)", lightgreen: "rgb(144, 238, 144)", lightgray: "rgb(211, 211, 211)", lightgrey: "rgb(211, 211, 211)", lightpink: "rgb(255, 182, 193)", lightsalmon: "rgb(255, 160, 122)", lightseagreen: "rgb(32, 178, 170)", lightskyblue: "rgb(135, 206, 250)", lightslategray: "rgb(119, 136, 153)", lightslategrey: "rgb(119, 136, 153)", lightsteelblue: "rgb(176, 196, 222)", lightyellow: "rgb(255, 255, 224)", lime: "rgb(0, 255, 0)", limegreen: "rgb(50, 205, 50)", linen: "rgb(250, 240, 230)", magenta: "rgb(255, 0, 255)", maroon: "rgb(128, 0, 0)", mediumaquamarine: "rgb(102, 205, 170)", mediumblue: "rgb(0, 0, 205)", mediumorchid: "rgb(186, 85, 211)", mediumpurple: "rgb(147, 112, 219)", mediumseagreen: "rgb(60, 179, 113)", mediumslateblue: "rgb(123, 104, 238)", mediumspringgreen: "rgb(0, 250, 154)", mediumturquoise: "rgb(72, 209, 204)", mediumvioletred: "rgb(199, 21, 133)", midnightblue: "rgb(25, 25, 112)", mintcream: "rgb(245, 255, 250)", mistyrose: "rgb(255, 228, 225)", moccasin: "rgb(255, 228, 181)", navajowhite: "rgb(255, 222, 173)", navy: "rgb(0, 0, 128)", oldlace: "rgb(253, 245, 230)", olive: "rgb(128, 128, 0)", olivedrab: "rgb(107, 142, 35)", orange: "rgb(255, 165, 0)", orangered: "rgb(255, 69, 0)", orchid: "rgb(218, 112, 214)", palegoldenrod: "rgb(238, 232, 170)", palegreen: "rgb(152, 251, 152)", paleturquoise: "rgb(175, 238, 238)", palevioletred: "rgb(219, 112, 147)", papayawhip: "rgb(255, 239, 213)", peachpuff: "rgb(255, 218, 185)", peru: "rgb(205, 133, 63)", pink: "rgb(255, 192, 203)", plum: "rgb(221, 160, 221)", powderblue: "rgb(176, 224, 230)", purple: "rgb(128, 0, 128)", rebeccapurple: "rgb(102, 51, 153)", red: "rgb(255, 0, 0)", rosybrown: "rgb(188, 143, 143)", royalblue: "rgb(65, 105, 225)", saddlebrown: "rgb(139, 69, 19)", salmon: "rgb(250, 128, 114)", sandybrown: "rgb(244, 164, 96)", seagreen: "rgb(46, 139, 87)", seashell: "rgb(255, 245, 238)", sienna: "rgb(160, 82, 45)", silver: "rgb(192, 192, 192)", skyblue: "rgb(135, 206, 235)", slateblue: "rgb(106, 90, 205)", slategray: "rgb(112, 128, 144)", slategrey: "rgb(112, 128, 144)", snow: "rgb(255, 250, 250)", springgreen: "rgb(0, 255, 127)", steelblue: "rgb(70, 130, 180)", tan: "rgb(210, 180, 140)", teal: "rgb(0, 128, 128)", thistle: "rgb(216, 191, 216)", tomato: "rgb(255, 99, 71)", turquoise: "rgb(64, 224, 208)", violet: "rgb(238, 130, 238)", wheat: "rgb(245, 222, 179)", white: "rgb(255, 255, 255)", whitesmoke: "rgb(245, 245, 245)", yellow: "rgb(255, 255, 0)", yellowgreen: "rgb(154, 205, 50)", transparent: "rgba(0, 0, 0, 0)" }; +function reverseMatches(str, matches) { + matches.forEach(function (it, index) { + str = str.replace('@' + index, it.color); + }); -function isColorName(name) { - return !!color_names[name]; + return str; } -function getColorByName(name) { - return color_names[name]; +function trim(str) { + return str.replace(/^\s+|\s+$/g, ''); } -var ColorNames = { - isColorName: isColorName, - getColorByName: getColorByName -}; +/** + * @method rgb + * + * parse string to rgb color + * + * color.parse("#FF0000") === { r : 255, g : 0, b : 0 } + * + * color.parse("rgb(255, 0, 0)") == { r : 255, g : 0, b :0 } + * color.parse(0xff0000) == { r : 255, g : 0, b : 0 } + * color.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 } + * + * @param {String} str color string + * @returns {Object} rgb object + */ +function parse(str) { + if (typeof str == 'string') { -var classCallCheck = function (instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } -}; + if (ColorNames.isColorName(str)) { + str = ColorNames.getColorByName(str); + } -var createClass = function () { - function defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } + if (str.indexOf("rgb(") > -1) { + var arr = str.replace("rgb(", "").replace(")", "").split(","); - return function (Constructor, protoProps, staticProps) { - if (protoProps) defineProperties(Constructor.prototype, protoProps); - if (staticProps) defineProperties(Constructor, staticProps); - return Constructor; - }; -}(); + for (var i = 0, len = arr.length; i < len; i++) { + arr[i] = parseInt(trim(arr[i]), 10); + } + var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: 1 }; + obj = Object.assign(obj, RGBtoHSL(obj)); + return obj; + } else if (str.indexOf("rgba(") > -1) { + var arr = str.replace("rgba(", "").replace(")", "").split(","); + for (var i = 0, len = arr.length; i < len; i++) { -var defineProperty = function (obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } + if (len - 1 == i) { + arr[i] = parseFloat(trim(arr[i])); + } else { + arr[i] = parseInt(trim(arr[i]), 10); + } + } - return obj; -}; + var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: arr[3] }; -var _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; + obj = Object.assign(obj, RGBtoHSL(obj)); - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } + return obj; + } else if (str.indexOf("hsl(") > -1) { + var arr = str.replace("hsl(", "").replace(")", "").split(","); - return target; -}; + for (var i = 0, len = arr.length; i < len; i++) { + arr[i] = parseFloat(trim(arr[i])); + } -var get = function get(object, property, receiver) { - if (object === null) object = Function.prototype; - var desc = Object.getOwnPropertyDescriptor(object, property); + var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: 1 }; - if (desc === undefined) { - var parent = Object.getPrototypeOf(object); + obj = Object.assign(obj, HSLtoRGB(obj)); - if (parent === null) { - return undefined; - } else { - return get(parent, property, receiver); - } - } else if ("value" in desc) { - return desc.value; - } else { - var getter = desc.get; + return obj; + } else if (str.indexOf("hsla(") > -1) { + var arr = str.replace("hsla(", "").replace(")", "").split(","); - if (getter === undefined) { - return undefined; - } + for (var i = 0, len = arr.length; i < len; i++) { - return getter.call(receiver); - } -}; + if (len - 1 == i) { + arr[i] = parseFloat(trim(arr[i])); + } else { + arr[i] = parseInt(trim(arr[i]), 10); + } + } -var inherits = function (subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); - } + var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: arr[3] }; - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - enumerable: false, - writable: true, - configurable: true - } - }); - if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; -}; + obj = Object.assign(obj, HSLtoRGB(obj)); + return obj; + } else if (str.indexOf("#") == 0) { + str = str.replace("#", ""); + var arr = []; + var a = 1; + if (str.length == 3) { + for (var i = 0, len = str.length; i < len; i++) { + var char = str.substr(i, 1); + arr.push(parseInt(char + char, 16)); + } + } else if (str.length === 8) { + for (var i = 0, len = str.length; i < len; i += 2) { + arr.push(parseInt(str.substr(i, 2), 16)); + } + a = arr.pop() / 255; + } else { + for (var i = 0, len = str.length; i < len; i += 2) { + arr.push(parseInt(str.substr(i, 2), 16)); + } + } + var obj = { type: 'hex', r: arr[0], g: arr[1], b: arr[2], a: a }; + obj = Object.assign(obj, RGBtoHSL(obj)); + return obj; + } + } else if (typeof str == 'number') { + if (0x000000 <= str && str <= 0xffffff) { + var r = (str & 0xff0000) >> 16; + var g = (str & 0x00ff00) >> 8; + var b = (str & 0x0000ff) >> 0; + var obj = { type: 'hex', r: r, g: g, b: b, a: 1 }; + obj = Object.assign(obj, RGBtoHSL(obj)); + return obj; + } else if (0x00000000 <= str && str <= 0xffffffff) { + var _r = (str & 0xff000000) >> 24; + var _g = (str & 0x00ff0000) >> 16; + var _b = (str & 0x0000ff00) >> 8; + var _a = (str & 0x000000ff) / 255; + var obj = { type: 'hex', r: _r, g: _g, b: _b, a: _a }; + obj = Object.assign(obj, RGBtoHSL(obj)); - -var possibleConstructorReturn = function (self, call) { - if (!self) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return call && (typeof call === "object" || typeof call === "function") ? call : self; -}; - - - - - -var slicedToArray = function () { - function sliceIterator(arr, i) { - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; - - try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { - _arr.push(_s.value); - - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i["return"]) _i["return"](); - } finally { - if (_d) throw _e; - } + return obj; + } } - return _arr; - } + return str; +} - return function (arr, i) { - if (Array.isArray(arr)) { - return arr; - } else if (Symbol.iterator in Object(arr)) { - return sliceIterator(arr, i); - } else { - throw new TypeError("Invalid attempt to destructure non-iterable instance"); +function parseGradient(colors) { + if (typeof colors == 'string') { + colors = convertMatchesArray(colors); } - }; -}(); + colors = colors.map(function (it) { + if (typeof it == 'string') { + var ret = convertMatches(it); + var arr = trim(ret.str).split(' '); + if (arr[1]) { + if (arr[1].includes('%')) { + arr[1] = parseFloat(arr[1].replace(/%/, '')) / 100; + } else { + arr[1] = parseFloat(arr[1]); + } + } else { + arr[1] = '*'; + } + arr[0] = reverseMatches(arr[0], ret.matches); + return arr; + } else if (Array.isArray(it)) { + if (!it[1]) { + it[1] = '*'; + } else if (typeof it[1] == 'string') { + if (it[1].includes('%')) { + it[1] = parseFloat(it[1].replace(/%/, '')) / 100; + } else { + it[1] = +it[1]; + } + } + return [].concat(toConsumableArray(it)); + } + }); + var count = colors.filter(function (it) { + return it[1] === '*'; + }).length; + if (count > 0) { + var sum = colors.filter(function (it) { + return it[1] != '*' && it[1] != 1; + }).map(function (it) { + return it[1]; + }).reduce(function (total, cur) { + return total + cur; + }, 0); + var dist = (1 - sum) / count; + colors.forEach(function (it, index) { + if (it[1] == '*' && index > 0) { + if (colors.length - 1 == index) { + // it[1] = 1 + } else { + it[1] = dist; + } + } + }); + } + return colors; +} -var toArray = function (arr) { - return Array.isArray(arr) ? arr : Array.from(arr); +var parser = { + matches: matches, + convertMatches: convertMatches, + convertMatchesArray: convertMatchesArray, + reverseMatches: reverseMatches, + parse: parse, + parseGradient: parseGradient, + trim: trim, + color_regexp: color_regexp, + color_split: color_split }; -var toConsumableArray = function (arr) { - if (Array.isArray(arr)) { - for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; +/** + * @method RGBtoHSV + * + * convert rgb to hsv + * + * color.RGBtoHSV(0, 0, 255) === { h : 240, s : 1, v : 1 } === '#FFFF00' + * + * @param {Number} R red color value + * @param {Number} G green color value + * @param {Number} B blue color value + * @return {Object} hsv color code + */ +function RGBtoHSV(r, g, b) { - return arr2; - } else { - return Array.from(arr); - } -}; + if (arguments.length == 1) { + var _arguments$ = arguments[0], + r = _arguments$.r, + g = _arguments$.g, + b = _arguments$.b; + } -var color_regexp = /(#(?:[\da-f]{3}){1,2}|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_\-]+))/gi; -var color_split = ','; + var R1 = r / 255; + var G1 = g / 255; + var B1 = b / 255; -function matches(str) { - var matches = str.match(color_regexp); - var result = []; + var MaxC = Math.max(R1, G1, B1); + var MinC = Math.min(R1, G1, B1); - if (!matches) { - return result; - } + var DeltaC = MaxC - MinC; - for (var i = 0, len = matches.length; i < len; i++) { + var H = 0; - if (matches[i].indexOf('#') > -1 || matches[i].indexOf('rgb') > -1 || matches[i].indexOf('hsl') > -1) { - result.push({ color: matches[i] }); - } else { - var nameColor = ColorNames.getColorByName(matches[i]); + if (DeltaC == 0) { + H = 0; + } else if (MaxC == R1) { + H = 60 * ((G1 - B1) / DeltaC % 6); + } else if (MaxC == G1) { + H = 60 * ((B1 - R1) / DeltaC + 2); + } else if (MaxC == B1) { + H = 60 * ((R1 - G1) / DeltaC + 4); + } - if (nameColor) { - result.push({ color: matches[i], nameColor: nameColor }); - } - } + if (H < 0) { + H = 360 + H; } - var pos = { next: 0 }; - result.forEach(function (item) { - var startIndex = str.indexOf(item.color, pos.next); + var S = 0; - item.startIndex = startIndex; - item.endIndex = startIndex + item.color.length; + if (MaxC == 0) S = 0;else S = DeltaC / MaxC; - pos.next = item.endIndex; - }); + var V = MaxC; - return result; + return { h: H, s: S, v: V }; } -function convertMatches(str) { - var m = matches(str); - - m.forEach(function (it, index) { - str = str.replace(it.color, '@' + index); - }); - - return { str: str, matches: m }; -} +function RGBtoCMYK(r, g, b) { -function convertMatchesArray(str) { - var splitStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ','; + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + r = _arguments$2.r, + g = _arguments$2.g, + b = _arguments$2.b; + } - var ret = convertMatches(str); - return ret.str.split(splitStr).map(function (it, index) { - it = trim(it); + var R1 = r / 255; + var G1 = g / 255; + var B1 = b / 255; - if (ret.matches[index]) { - it = it.replace('@' + index, ret.matches[index].color); - } + var K = 1 - Math.max(R1, G1, B1); + var C = (1 - R1 - K) / (1 - K); + var M = (1 - G1 - K) / (1 - K); + var Y = (1 - B1 - K) / (1 - K); - return it; - }); + return { c: C, m: M, y: Y, k: K }; } -function reverseMatches(str, matches) { - matches.forEach(function (it, index) { - str = str.replace('@' + index, it.color); - }); - - return str; -} +function RGBtoHSL(r, g, b) { -function trim(str) { - return str.replace(/^\s+|\s+$/g, ''); -} + if (arguments.length == 1) { + var _arguments$3 = arguments[0], + r = _arguments$3.r, + g = _arguments$3.g, + b = _arguments$3.b; + } -/** - * @method rgb - * - * parse string to rgb color - * - * color.parse("#FF0000") === { r : 255, g : 0, b : 0 } - * - * color.parse("rgb(255, 0, 0)") == { r : 255, g : 0, b :0 } - * color.parse(0xff0000) == { r : 255, g : 0, b : 0 } - * color.parse(0xff000000) == { r : 255, g : 0, b : 0, a: 0 } - * - * @param {String} str color string - * @returns {Object} rgb object - */ -function parse(str) { - if (typeof str == 'string') { + r /= 255, g /= 255, b /= 255; + var max = Math.max(r, g, b), + min = Math.min(r, g, b); + var h, + s, + l = (max + min) / 2; - if (ColorNames.isColorName(str)) { - str = ColorNames.getColorByName(str); + if (max == min) { + h = s = 0; // achromatic + } else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0);break; + case g: + h = (b - r) / d + 2;break; + case b: + h = (r - g) / d + 4;break; } + h /= 6; + } - if (str.indexOf("rgb(") > -1) { - var arr = str.replace("rgb(", "").replace(")", "").split(","); + return { h: round(h * 360), s: round(s * 100), l: round(l * 100) }; +} - for (var i = 0, len = arr.length; i < len; i++) { - arr[i] = parseInt(trim(arr[i]), 10); - } +function c(r, g, b) { - var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: 1 }; + if (arguments.length == 1) { + var _arguments$4 = arguments[0], + r = _arguments$4.r, + g = _arguments$4.g, + b = _arguments$4.b; + } + return gray((r + g + b) / 3 > 90 ? 0 : 255); +} - obj = Object.assign(obj, RGBtoHSL(obj)); +function gray(gray) { + return { r: gray, g: gray, b: gray }; +} - return obj; - } else if (str.indexOf("rgba(") > -1) { - var arr = str.replace("rgba(", "").replace(")", "").split(","); +function RGBtoSimpleGray(r, g, b) { - for (var i = 0, len = arr.length; i < len; i++) { + if (arguments.length == 1) { + var _arguments$5 = arguments[0], + r = _arguments$5.r, + g = _arguments$5.g, + b = _arguments$5.b; + } + return gray(Math.ceil((r + g + b) / 3)); +} - if (len - 1 == i) { - arr[i] = parseFloat(trim(arr[i])); - } else { - arr[i] = parseInt(trim(arr[i]), 10); - } - } +function RGBtoGray(r, g, b) { - var obj = { type: 'rgb', r: arr[0], g: arr[1], b: arr[2], a: arr[3] }; + if (arguments.length == 1) { + var _arguments$6 = arguments[0], + r = _arguments$6.r, + g = _arguments$6.g, + b = _arguments$6.b; + } + return gray(RGBtoYCrCb(r, g, b).y); +} - obj = Object.assign(obj, RGBtoHSL(obj)); +function brightness(r, g, b) { + return Math.ceil(r * 0.2126 + g * 0.7152 + b * 0.0722); +} - return obj; - } else if (str.indexOf("hsl(") > -1) { - var arr = str.replace("hsl(", "").replace(")", "").split(","); - for (var i = 0, len = arr.length; i < len; i++) { - arr[i] = parseFloat(trim(arr[i])); - } - var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: 1 }; - obj = Object.assign(obj, HSLtoRGB(obj)); - return obj; - } else if (str.indexOf("hsla(") > -1) { - var arr = str.replace("hsla(", "").replace(")", "").split(","); - for (var i = 0, len = arr.length; i < len; i++) { - if (len - 1 == i) { - arr[i] = parseFloat(trim(arr[i])); - } else { - arr[i] = parseInt(trim(arr[i]), 10); - } - } +function RGBtoYCrCb(r, g, b) { - var obj = { type: 'hsl', h: arr[0], s: arr[1], l: arr[2], a: arr[3] }; + if (arguments.length == 1) { + var _arguments$7 = arguments[0], + r = _arguments$7.r, + g = _arguments$7.g, + b = _arguments$7.b; + } + var Y = brightness(r, g, b); + var Cb = 0.564 * (b - Y); + var Cr = 0.713 * (r - Y); - obj = Object.assign(obj, HSLtoRGB(obj)); + return { y: Y, cr: Cr, cb: Cb }; +} - return obj; - } else if (str.indexOf("#") == 0) { +function PivotRGB(n) { + var point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.04045; - str = str.replace("#", ""); + return (n > point ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92) * 100; +} - var arr = []; - if (str.length == 3) { - for (var i = 0, len = str.length; i < len; i++) { - var char = str.substr(i, 1); - arr.push(parseInt(char + char, 16)); - } - } else { - for (var i = 0, len = str.length; i < len; i += 2) { - arr.push(parseInt(str.substr(i, 2), 16)); - } - } +function RGBtoXYZ(r, g, b) { + //sR, sG and sB (Standard RGB) input range = 0 ÷ 255 + //X, Y and Z output refer to a D65/2° standard illuminant. + if (arguments.length == 1) { + var _arguments$8 = arguments[0], + r = _arguments$8.r, + g = _arguments$8.g, + b = _arguments$8.b; + } - var obj = { type: 'hex', r: arr[0], g: arr[1], b: arr[2], a: 1 }; + var R = r / 255; + var G = g / 255; + var B = b / 255; - obj = Object.assign(obj, RGBtoHSL(obj)); + R = PivotRGB(R); + G = PivotRGB(G); + B = PivotRGB(B); - return obj; - } - } else if (typeof str == 'number') { - if (0x000000 <= str && str <= 0xffffff) { - var r = (str & 0xff0000) >> 16; - var g = (str & 0x00ff00) >> 8; - var b = (str & 0x0000ff) >> 0; + var x = R * 0.4124 + G * 0.3576 + B * 0.1805; + var y = R * 0.2126 + G * 0.7152 + B * 0.0722; + var z = R * 0.0193 + G * 0.1192 + B * 0.9505; - var obj = { type: 'hex', r: r, g: g, b: b, a: 1 }; - obj = Object.assign(obj, RGBtoHSL(obj)); - return obj; - } else if (0x00000000 <= str && str <= 0xffffffff) { - var _r = (str & 0xff000000) >> 24; - var _g = (str & 0x00ff0000) >> 16; - var _b = (str & 0x0000ff00) >> 8; - var a = (str & 0x000000ff) / 255; + return { x: x, y: y, z: z }; +} - var obj = { type: 'hex', r: _r, g: _g, b: _b, a: a }; - obj = Object.assign(obj, RGBtoHSL(obj)); +function RGBtoLAB(r, g, b) { + if (arguments.length == 1) { + var _arguments$9 = arguments[0], + r = _arguments$9.r, + g = _arguments$9.g, + b = _arguments$9.b; + } + return XYZtoLAB(RGBtoXYZ(r, g, b)); +} - return obj; - } +var fromRGB = { + RGBtoCMYK: RGBtoCMYK, + RGBtoGray: RGBtoGray, + RGBtoHSL: RGBtoHSL, + RGBtoHSV: RGBtoHSV, + RGBtoLAB: RGBtoLAB, + RGBtoSimpleGray: RGBtoSimpleGray, + RGBtoXYZ: RGBtoXYZ, + RGBtoYCrCb: RGBtoYCrCb, + c: c, + brightness: brightness, + gray: gray +}; + +function CMYKtoRGB(c, m, y, k) { + + if (arguments.length == 1) { + var _arguments$ = arguments[0], + c = _arguments$.c, + m = _arguments$.m, + y = _arguments$.y, + k = _arguments$.k; + } + + var R = 255 * (1 - c) * (1 - k); + var G = 255 * (1 - m) * (1 - k); + var B = 255 * (1 - y) * (1 - k); + + return { r: R, g: G, b: B }; +} + +var fromCMYK = { + CMYKtoRGB: CMYKtoRGB +}; + +function ReverseXyz(n) { + return Math.pow(n, 3) > 0.008856 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787; +} + +function ReverseRGB(n) { + return n > 0.0031308 ? 1.055 * Math.pow(n, 1 / 2.4) - 0.055 : 12.92 * n; +} + +function XYZtoRGB(x, y, z) { + if (arguments.length == 1) { + var _arguments$ = arguments[0], + x = _arguments$.x, + y = _arguments$.y, + z = _arguments$.z; + } + //X, Y and Z input refer to a D65/2° standard illuminant. + //sR, sG and sB (standard RGB) output range = 0 ÷ 255 + + var X = x / 100.0; + var Y = y / 100.0; + var Z = z / 100.0; + + var R = X * 3.2406 + Y * -1.5372 + Z * -0.4986; + var G = X * -0.9689 + Y * 1.8758 + Z * 0.0415; + var B = X * 0.0557 + Y * -0.2040 + Z * 1.0570; + + R = ReverseRGB(R); + G = ReverseRGB(G); + B = ReverseRGB(B); + + var r = round(R * 255); + var g = round(G * 255); + var b = round(B * 255); + + return { r: r, g: g, b: b }; +} + +function LABtoXYZ(l, a, b) { + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + l = _arguments$2.l, + a = _arguments$2.a, + b = _arguments$2.b; + } + //Reference-X, Y and Z refer to specific illuminants and observers. + //Common reference values are available below in this same page. + + var Y = (l + 16) / 116; + var X = a / 500 + Y; + var Z = Y - b / 200; + + Y = ReverseXyz(Y); + X = ReverseXyz(X); + Z = ReverseXyz(Z); + + var x = X * 95.047; + var y = Y * 100.000; + var z = Z * 108.883; + + return { x: x, y: y, z: z }; +} + + + + + +function LABtoRGB(l, a, b) { + if (arguments.length == 1) { + var _arguments$4 = arguments[0], + l = _arguments$4.l, + a = _arguments$4.a, + b = _arguments$4.b; + } + return XYZtoRGB(LABtoXYZ(l, a, b)); +} + +var fromLAB = { + XYZtoRGB: XYZtoRGB, + LABtoRGB: LABtoRGB, + LABtoXYZ: LABtoXYZ +}; + +/** + * @method HSVtoRGB + * + * convert hsv to rgb + * + * color.HSVtoRGB(0,0,1) === #FFFFF === { r : 255, g : 0, b : 0 } + * + * @param {Number} H hue color number (min : 0, max : 360) + * @param {Number} S Saturation number (min : 0, max : 1) + * @param {Number} V Value number (min : 0, max : 1 ) + * @returns {Object} + */ +function HSVtoRGB(h, s, v) { + + if (arguments.length == 1) { + var _arguments$ = arguments[0], + h = _arguments$.h, + s = _arguments$.s, + v = _arguments$.v; + } + + var H = h; + var S = s; + var V = v; + + if (H >= 360) { + H = 0; + } + + var C = S * V; + var X = C * (1 - Math.abs(H / 60 % 2 - 1)); + var m = V - C; + + var temp = []; + + if (0 <= H && H < 60) { + temp = [C, X, 0]; + } else if (60 <= H && H < 120) { + temp = [X, C, 0]; + } else if (120 <= H && H < 180) { + temp = [0, C, X]; + } else if (180 <= H && H < 240) { + temp = [0, X, C]; + } else if (240 <= H && H < 300) { + temp = [X, 0, C]; + } else if (300 <= H && H < 360) { + temp = [C, 0, X]; } - return str; + return { + r: round((temp[0] + m) * 255), + g: round((temp[1] + m) * 255), + b: round((temp[2] + m) * 255) + }; } -function parseGradient(colors) { - if (typeof colors == 'string') { - colors = convertMatchesArray(colors); - } - - colors = colors.map(function (it) { - if (typeof it == 'string') { - var ret = convertMatches(it); - var arr = trim(ret.str).split(' '); - - if (arr[1]) { - if (arr[1].includes('%')) { - arr[1] = parseFloat(arr[1].replace(/%/, '')) / 100; - } else { - arr[1] = parseFloat(arr[1]); - } - } else { - arr[1] = '*'; - } +function HSVtoHSL(h, s, v) { - arr[0] = reverseMatches(arr[0], ret.matches); + if (arguments.length == 1) { + var _arguments$2 = arguments[0], + h = _arguments$2.h, + s = _arguments$2.s, + v = _arguments$2.v; + } - return arr; - } else if (Array.isArray(it)) { + var rgb = HSVtoRGB(h, s, v); - if (!it[1]) { - it[1] = '*'; - } else if (typeof it[1] == 'string') { - if (it[1].includes('%')) { - it[1] = parseFloat(it[1].replace(/%/, '')) / 100; - } else { - it[1] = +it[1]; - } - } + return RGBtoHSL(rgb.r, rgb.g, rgb.b); +} - return [].concat(toConsumableArray(it)); - } - }); +var fromHSV = { + HSVtoHSL: HSVtoHSL, + HSVtoRGB: HSVtoRGB +}; - var count = colors.filter(function (it) { - return it[1] === '*'; - }).length; +function YCrCbtoRGB(y, cr, cb, bit) { - if (count > 0) { - var sum = colors.filter(function (it) { - return it[1] != '*' && it[1] != 1; - }).map(function (it) { - return it[1]; - }).reduce(function (total, cur) { - return total + cur; - }, 0); + if (arguments.length == 1) { + var _arguments$ = arguments[0], + y = _arguments$.y, + cr = _arguments$.cr, + cb = _arguments$.cb, + bit = _arguments$.bit; - var dist = (1 - sum) / count; - colors.forEach(function (it, index) { - if (it[1] == '*' && index > 0) { - if (colors.length - 1 == index) { - // it[1] = 1 - } else { - it[1] = dist; - } - } - }); + bit = bit || 0; } + var R = y + 1.402 * (cr - bit); + var G = y - 0.344 * (cb - bit) - 0.714 * (cr - bit); + var B = y + 1.772 * (cb - bit); - return colors; + return { r: Math.ceil(R), g: Math.ceil(G), b: Math.ceil(B) }; } -var parser = { - matches: matches, - convertMatches: convertMatches, - convertMatchesArray: convertMatchesArray, - reverseMatches: reverseMatches, - parse: parse, - parseGradient: parseGradient, - trim: trim, - color_regexp: color_regexp, - color_split: color_split +var fromYCrCb = { + YCrCbtoRGB: YCrCbtoRGB }; /** @@ -5694,6 +5716,11 @@ var Dom = function () { return null; } + }, { + key: 'checked', + value: function checked() { + return this.el.checked; + } }, { key: 'removeClass', value: function removeClass(cls) { @@ -5732,11 +5759,14 @@ var Dom = function () { }, { key: 'html', value: function html(_html) { - - if (typeof _html == 'string') { - this.el.innerHTML = _html; - } else { - this.empty().append(_html); + try { + if (typeof _html == 'string') { + this.el.innerHTML = _html; + } else { + this.empty().append(_html); + } + } catch (e) { + console.log(_html); } return this; @@ -5746,11 +5776,23 @@ var Dom = function () { value: function find(selector) { return this.el.querySelector(selector); } + }, { + key: '$', + value: function $(selector) { + return new Dom(this.find(selector)); + } }, { key: 'findAll', value: function findAll(selector) { return this.el.querySelectorAll(selector); } + }, { + key: '$$', + value: function $$(selector) { + return [].concat(toConsumableArray(this.findAll(selector))).map(function (el) { + return new Dom(el); + }); + } }, { key: 'empty', value: function empty() { @@ -5832,6 +5874,11 @@ var Dom = function () { left: rect.left + Dom.getScrollLeft() }; } + }, { + key: 'rect', + value: function rect() { + return this.el.getBoundingClientRect(); + } }, { key: 'position', value: function position() { @@ -6193,9 +6240,9 @@ var ColorSetsList = function (_BaseModule) { }(BaseModule); var Event = { - addEvent: function addEvent(dom, eventName, callback) { + addEvent: function addEvent(dom, eventName, callback, options) { if (dom) { - dom.addEventListener(eventName, callback); + dom.addEventListener(eventName, callback, options); } }, removeEvent: function removeEvent(dom, eventName, callback) { @@ -6333,7 +6380,12 @@ var EventMachin = function () { // 데이타 로드 하고 this.load(); + + this.afterRender(); } + }, { + key: 'afterRender', + value: function afterRender() {} /** * 자식 컴포넌트로 사용될 객체 정의 @@ -6393,7 +6445,8 @@ var EventMachin = function () { if (instance) { instance.render(); - $el.replace(node, instance.$el.el); + var $parent = new Dom(node.parentNode); + $parent.replace(node, instance.$el.el); } }); } @@ -6613,10 +6666,10 @@ var EventMachin = function () { value: function checkEventType(e, eventObject) { var _this8 = this; - var onlyControl = e.ctrlKey ? eventObject.isControl : true; - var onlyShift = e.shiftKey ? eventObject.isShift : true; - var onlyAlt = e.altKey ? eventObject.isAlt : true; - var onlyMeta = e.metaKey ? eventObject.isMeta : true; + var onlyControl = eventObject.isControl ? e.ctrlKey : true; + var onlyShift = eventObject.isShift ? e.shiftKey : true; + var onlyAlt = eventObject.isAlt ? e.altKey : true; + var onlyMeta = eventObject.isMeta ? e.metaKey : true; var hasKeyCode = true; if (eventObject.codes.length) { @@ -6640,7 +6693,7 @@ var EventMachin = function () { if (eventObject.delegate) { return function (e) { - + e.xy = Event.posXY(e); if (_this9.checkEventType(e, eventObject)) { var delegateTarget = _this9.matchPath(e.target || e.srcElement, eventObject.delegate); @@ -6654,6 +6707,7 @@ var EventMachin = function () { }; } else { return function (e) { + e.xy = Event.posXY(e); if (_this9.checkEventType(e, eventObject)) { return callback(e); } @@ -6665,7 +6719,13 @@ var EventMachin = function () { value: function addEvent(eventObject, callback) { eventObject.callback = this.makeCallback(eventObject, callback); this.addBinding(eventObject); - Event.addEvent(eventObject.dom, eventObject.eventName, eventObject.callback); + + var options = true; + if (eventObject.eventName === 'touchstart') { + options = { passive: true }; + } + + Event.addEvent(eventObject.dom, eventObject.eventName, eventObject.callback, options); } }, { key: 'removeEventAll', @@ -6802,10 +6862,6 @@ var ColorManager = function (_BaseModule) { $store.alpha = isUndefined(colorObj.a) ? $store.alpha : colorObj.a; $store.format = colorObj.type != 'hsv' ? colorObj.type || $store.format : $store.format; - if ($store.format == 'hex' && $store.alpha < 1) { - $store.format = 'rgb'; - } - if (colorObj.type == 'hsl') { $store.hsl = Object.assign($store.hsl, colorObj); $store.rgb = Color$1.HSLtoRGB($store.hsl); @@ -6838,7 +6894,9 @@ var ColorManager = function (_BaseModule) { value: function toString($store, type) { type = type || $store.format; var colorObj = $store[type] || $store.rgb; - return Color$1.format(Object.assign({}, colorObj, { a: $store.alpha }), type); + return Color$1.format(_extends({}, colorObj, { + a: $store.alpha + }), type); } }, { key: '/toColor', @@ -7267,6 +7325,11 @@ var BaseColorPicker = function (_UIElement) { } } } + }, { + key: 'keyup.isAbsolute.escape $root', + value: function keyupIsAbsoluteEscape$root(e) { + this.hide(); + } }, { key: 'mouseover.isAbsolute $root', value: function mouseoverIsAbsolute$root(e) { @@ -7716,7 +7779,7 @@ var Opacity = function (_BaseSlider) { createClass(Opacity, [{ key: 'template', value: function template() { - return '\n
\n
\n
\n
\n
\n
\n '; + return '\n
\n
\n
\n
\n
\n
\n '; } }, { key: 'refresh', @@ -8109,7 +8172,8 @@ var ColorInformation = function (_UIElement) { 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
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n '; + return (/*html*/'\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
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n
\n ' + ); } }, { key: 'setCurrentFormat', @@ -8121,11 +8185,16 @@ var ColorInformation = function (_UIElement) { }, { key: 'initFormat', value: function initFormat() { + var _this2 = this; + var current_format = this.format || 'hex'; - this.$el.removeClass('hex'); - this.$el.removeClass('rgb'); - this.$el.removeClass('hsl'); + ['hex', 'rgb', 'hsl'].filter(function (it) { + return it !== current_format; + }).forEach(function (formatString) { + _this2.$el.removeClass(formatString); + }); + this.$el.addClass(current_format); } }, { @@ -8139,20 +8208,25 @@ var ColorInformation = function (_UIElement) { } else if (current_format == 'rgb') { next_format = 'hsl'; } else if (current_format == 'hsl') { - if (this.$store.alpha == 1) { - next_format = 'hex'; - } else { - next_format = 'rgb'; - } + next_format = 'hex'; } - this.$el.removeClass(current_format); - this.$el.addClass(next_format); this.format = next_format; + this.initFormat(); this.$store.dispatch('/changeFormat', this.format); this.$store.emit('lastUpdateColor'); } + }, { + key: 'goToFormat', + value: function goToFormat(to_format) { + this.format = to_format; + if (to_format === 'rgb' || to_format === 'hsl') { + this.initFormat(); + } + + this.$store.dispatch('/changeFormat', this.format); + } }, { key: 'getFormat', value: function getFormat() { @@ -8253,19 +8327,12 @@ var ColorInformation = function (_UIElement) { value: function input$hsl_a(e) { this.changeHslColor(); } - }, { - key: 'keydown $hexCode', - value: function keydown$hexCode(e) { - if (e.which < 65 || e.which > 70) { - return this.checkNumberKey(e); - } - } }, { key: 'keyup $hexCode', value: function keyup$hexCode(e) { var code = this.refs.$hexCode.val(); - if (code.charAt(0) == '#' && code.length == 7) { + if (code.charAt(0) == '#' && (code.length == 7 || code.length === 9)) { this.$store.dispatch('/changeColor', code, source$2); this.$store.emit('lastUpdateColor'); } @@ -8275,6 +8342,21 @@ var ColorInformation = function (_UIElement) { value: function click$formatChangeButton(e) { this.nextFormat(); } + }, { + key: 'click $el .information-item.hex .input-field .title', + value: function click$elInformationItemHexInputFieldTitle(e) { + this.goToFormat('hex'); + } + }, { + key: 'click $el .information-item.rgb .input-field .title', + value: function click$elInformationItemRgbInputFieldTitle(e) { + this.goToFormat('hsl'); + } + }, { + key: 'click $el .information-item.hsl .input-field .title', + value: function click$elInformationItemHslInputFieldTitle(e) { + this.goToFormat('rgb'); + } }, { key: 'setRGBInput', value: function setRGBInput() { @@ -9395,6 +9477,138 @@ var XDColorPicker = function (_BaseColorPicker) { return XDColorPicker; }(BaseColorPicker); +var source$8 = 'mini-control'; + +var ColorControl$12 = function (_UIElement) { + inherits(ColorControl, _UIElement); + + function ColorControl() { + classCallCheck(this, ColorControl); + return possibleConstructorReturn(this, (ColorControl.__proto__ || Object.getPrototypeOf(ColorControl)).apply(this, arguments)); + } + + createClass(ColorControl, [{ + key: 'components', + value: function components() { + return { Hue: VerticalHue, Opacity: Opacity$2 }; + } + }, { + key: 'template', + value: function template() { + return (/*html*/'\n
\n
\n
\n
\n ' + ); + } + }, { + key: 'refresh', + value: function refresh() { + this.setColorUI(); + } + }, { + key: 'setColorUI', + value: function setColorUI() { + this.Hue.setColorUI(); + this.Opacity.setColorUI(); + } + }, { + key: '@changeColor', + value: function changeColor(sourceType) { + if (source$8 != sourceType) { + this.refresh(); + } + } + }, { + key: '@initColor', + value: function initColor() { + this.refresh(); + } + }]); + return ColorControl; +}(UIElement); + +var VSCodePicker = function (_BaseColorPicker) { + inherits(VSCodePicker, _BaseColorPicker); + + function VSCodePicker() { + classCallCheck(this, VSCodePicker); + return possibleConstructorReturn(this, (VSCodePicker.__proto__ || Object.getPrototypeOf(VSCodePicker)).apply(this, arguments)); + } + + createClass(VSCodePicker, [{ + key: 'template', + value: function template() { + return (/*html*/'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n ' + ); + } + }, { + key: 'components', + value: function components() { + return { + palette: ColorPalette, + control: ColorControl$12 + }; + } + }, { + key: 'initColorWithoutChangeEvent', + value: function initColorWithoutChangeEvent(color) { + console.log(color); + this.$store.dispatch('/initColor', color); + this.refresh(); + } + }, { + key: 'setBackgroundColor', + value: function setBackgroundColor() { + var color = this.$store.dispatch('/toColor'); + var rgb = this.$store.rgb; + var bValue = Color$1.brightness(rgb.r, rgb.g, rgb.b); + + this.refs.$colorview.css({ + "background-color": color, + 'color': bValue > 127 ? 'black' : 'white' + }); + this.refs.$colorview.html(color); + } + }, { + key: 'click $colorview', + value: function click$colorview(e) { + this.nextFormat(); + } + }, { + key: 'nextFormat', + value: function nextFormat() { + var current_format = this.$store.format || 'hex'; + + var next_format = 'hex'; + if (current_format == 'hex') { + next_format = 'rgb'; + } else if (current_format == 'rgb') { + next_format = 'hsl'; + } else if (current_format == 'hsl') { + next_format = 'hex'; + } + + this.$store.dispatch('/changeFormat', next_format); + this.$store.emit('lastUpdateColor'); + this.refresh(); + } + }, { + key: 'refresh', + value: function refresh() { + this.setBackgroundColor(); + } + }, { + key: '@changeColor', + value: function changeColor() { + this.refresh(); + } + }, { + key: '@initColor', + value: function initColor() { + this.refresh(); + } + }]); + return VSCodePicker; +}(BaseColorPicker); + var ColorPicker = { create: function create(opts) { switch (opts.type) { @@ -9406,6 +9620,8 @@ var ColorPicker = { return new RingColorPicker(opts); case 'mini': return new MiniColorPicker(opts); + case 'vscode': + return new VSCodePicker(opts); case 'mini-vertical': return new MiniColorPicker$2(opts); case 'sketch': @@ -9420,6 +9636,7 @@ var ColorPicker = { MacOSColorPicker: MacOSColorPicker, RingColorPicker: RingColorPicker, MiniColorPicker: MiniColorPicker, + VSCodePicker: VSCodePicker, MiniVerticalColorPicker: MiniColorPicker$2 }; diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js index b44347f..21050b2 100644 --- a/dist/codemirror-colorpicker.min.js +++ b/dist/codemirror-colorpicker.min.js @@ -1 +1 @@ -var CodeMirrorColorPicker=function(){"use strict";function h(t,e){var r=2>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};return n=Object.assign(n,u(n))}if(0<=t&&t<=4294967295){n={type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255};return n=Object.assign(n,u(n))}}return t}function Z(r){"string"==typeof r&&(r=Y(r));var t=(r=r.map(function(t){if("string"==typeof t){var e=X(t),r=q(e.str).split(" ");return r[1]?r[1].includes("%")?r[1]=parseFloat(r[1].replace(/%/,""))/100:r[1]=parseFloat(r[1]):r[1]="*",r[0]=W(r[0],e.matches),r}if(Array.isArray(t))return t[1]?"string"==typeof t[1]&&(t[1].includes("%")?t[1]=parseFloat(t[1].replace(/%/,""))/100:t[1]=+t[1]):t[1]="*",[].concat(N(t))})).filter(function(t){return"*"===t[1]}).length;if(0=r?255:0;if(i)0==t&&($r=0,$g=0,$b=0);else{var e=Math.round(t);$r=e,$g=e,$b=e}},{$C:n,$scale:r,$hasColor:i})}function kt(){var t=0>j,_[u+1]=f*U>>j,_[u+2]=v*U>>j,h-=g,f-=d,v-=p,g-=B.r,d-=B.g,p-=B.b,l=c+((l=i+n+1)>j,_[l+1]=f*U>>j,_[l+2]=v*U>>j,h-=g,f-=d,v-=p,g-=B.r,d-=B.g,p-=B.b,l=i+((l=o+T)255-e?255:0,$g=$g>255-e?255:0,$b=$b>255-e?255:0},{$C:e})},contrast:function(){var t=0>1),s=n[l];return n[l]=n[0],n[0]=s,n},createBitmap:Xt,createBlurMatrix:re,pack:function(n){return function(r,t){Gt(r.pixels.length,function(t,e){n(r.pixels,t,e,r.pixels[t],r.pixels[t+1],r.pixels[t+2],r.pixels[t+3])},function(){t(r)})}},packXY:ee,pixel:Jt,getBitmap:Yt,putBitmap:Wt,radian:function(t){return mt.CONSTANT.radian(t)},convolution:oe,parseParamNumber:qt,filter:ue,clamp:se,fillColor:ne,fillPixelColor:ie},"multi",he),U(Rt,"merge",fe),U(Rt,"matches",ae),U(Rt,"parseFilter",le),U(Rt,"partial",ve),Rt),Ht=Ft;function Lt(t){var e=1= 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 ")}(v),e=g,r={},n=0;n>2)},function(){r()},n.functionDumpCount,n.frameTimer,n.loopCount)}function zt(t,r,n,e){var i=4>2;n(t,e%r,Math.floor(e/r))},function(){e()},i.functionDumpCount,i.frameTimer,i.loopCount)}function Xt(t,e,r){return{pixels:new Uint8ClampedArray(t),width:e,height:r}}function Yt(t,e){return vt.getBitmap(t,e)}function Wt(t,e,r){return vt.putBitmap(t,e,r)}function qt(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}var Kt=/(([\w_\-]+)(\(([^\)]*)\))?)+/gi;function Zt(t,e,r){return function(t){var r={},e=t.map(function(n){var i=[];Object.keys(n.context).forEach(function(t,e){i[t]="n$"+jt+++t+"$"}),Object.keys(n.rootContext).forEach(function(t,e){i[t]="r$"+jt+++t+"$",r[i[t]]=n.rootContext[t]});var t=Object.keys(n.context).filter(function(t){return"number"!=typeof n.context[t]&&"string"!=typeof n.context[t]&&(!Array.isArray(n.context[t])||"number"!=typeof n.context[t][0]&&"string"!=typeof n.context[t][0])}).map(function(t,e){return[i[t],JSON.stringify(n.context[t])].join(" = ")}),o=n.callback.toString().split("{");return o.shift(),(o=(o=o.join("{")).split("}")).pop(),o=o.join("}"),Object.keys(i).forEach(function(r){var t=i[r];"number"==typeof n.context[r]||"string"==typeof n.context[r]?o=o.replace(new RegExp("\\"+r,"g"),n.context[r]):Array.isArray(n.context[r])&&("number"==typeof n.context[r][0]||"string"==typeof n.context[r][0])?n.context[r].forEach(function(t,e){o=o.replace(new RegExp("\\"+r+"\\["+e+"\\]","g"),t)}):o=o.replace(new RegExp("\\"+r,"g"),t)}),{preCallbackString:o,preContext:t}}),n=e.map(function(t,e){return t.preContext.length?"const "+t.preContext+";":""}).join("\n\n"),i=e.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 ");return o.$preCallbackString=i,o.$preContext=n,o.rootContextObject=r,o}([{callback:t,context:1t.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])}(n,t,r,r);for(var i=Xt(n.pixels.length,n.width,n.height),o=Xt(t.pixels.length,t.width,t.height),a=function(t,o,i,e,r){var a=Math.round(Math.sqrt(t.length)),l=Math.floor(a/2),n=r?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 r=Math.floor(e/a)-l,n=e%a-l;0!=t&&(u.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4]]"),c.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 1]]"),h.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 2]]"),f.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 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 + ("+n+")*(255-a); ";var v=new Function("$dp","$sp","$di","$sx","$sy","$t",s);return function(t,e,r,n,i){v(t,e,r,n,i,o)}}(f,g,n.width,n.height,v),l=t.pixels.length/4,s=0;s>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])}}(i,o,r,r),e(o)}}function ae(r){var e=Ge.convertMatches(r),t=e.str.match(Kt),n=[];if(!t)return n;n=t.map(function(t){return{filter:t,origin:Ge.reverseMatches(t,e.matches)}});var i={next:0};return n=n.map(function(t){var e=r.indexOf(t.origin,i.next);return t.startIndex=e,t.endIndex=e+t.origin.length,t.arr=le(t.origin),i.next=t.endIndex,t}).filter(function(t){return!!t.arr.length})}function le(t){var e=Ge.convertMatches(t),r=e.str.match(Kt);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 Ge.reverseMatches(t,e.matches)})),[i].concat(N(o)).map(Ge.trim)}function se(t){return Math.min(255,t)}function ue(t){return fe(ae(t).map(function(t){return t.arr}))}function ce(t){for(var e=0= "+(t=$e(ge(t)))+" ? 1.0 : 0.0;\n\n outColor = vec4(c, c, c, pixelColor.a);\n ")}var Re=L({},{blur:function(){return ye([1,1,1,1,1,1,1,1,1])},normal:function(){return ye([0,0,0,0,1,0,0,0,0])},emboss:function(){var t=0 "+r+") {\n outColor = vec4("+Ce(Ge.parse(e))+".rgb, pixelColor.a);\n } else {\n outColor = vec4("+n+".rgb, pixelColor.a);\n }\n ")},brightness:function(){return be("\n outColor = pixelColor + ("+$e(ge(0 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 be("\n vec2 st = pixelColor.st;\n st *= "+$e(ge(0e&&(t=ft(t,e)),t.map(function(t){return h(t,r)})},ImageToCanvas:function(t,e,r){var n=3=t){e=ze[n-1],r=ze[n];break}return e&&r?Ge.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):ze[0].rgb}},Ye=L({},Ut,Ft),We={Color:Ge,HueColor:Xe,ColorNames:D,ImageFilter:Ye,GL:Ve,Canvas:vt,ImageLoader:gt},qe=(Ge.color,0),Ke=[],Ze=(B(Je,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(t){for(var e=this,r=!1;!(r=e.hasClass(t));){if(!e.el.parentNode)return null;e=new Je(e.el.parentNode)}return r?e: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&&-1<(" "+this.el.className+" ").indexOf(" "+t+" ")}},{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+Je.getScrollTop(),left:t.left+Je.getScrollLeft()}}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"size",value:function(){return[this.width(),this.height()]}},{key:"width",value:function(){return this.el.offsetWidth||this.el.getBoundingClientRect().width}},{key:"contentWidth",value:function(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}},{key:"height",value:function(){return this.el.offsetHeight||this.el.getBoundingClientRect().height}},{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)return Ke[this.dataKey(t)]=e,this;if(1==arguments.length)return Ke[this.dataKey(t)];var r=Object.keys(Ke),n=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(n)}).map(function(t){return Ke[t]})}},{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?Je.getScrollTop():this.el.scrollTop}},{key:"scrollLeft",value:function(){return this.el===document.body?Je.getScrollLeft():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(t,e,r,n){var i=3"}},{key:"initialize",value:function(){}},{key:"initializeEvent",value:function(){var e=this;this.initializeEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].initializeEvent()})}},{key:"destroy",value:function(){var e=this;this.destroyEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].destroy()})}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(ar).forEach(this.parseEvent.bind(this))}},{key:"collectProps",value:function(){if(!this.collapsedProps){for(var t=this.__proto__,e=[];e.push.apply(e,N(Object.getOwnPropertyNames(t))),t=t.__proto__;);this.collapsedProps=e}return this.collapsedProps}},{key:"filterProps",value:function(e){return this.collectProps().filter(function(t){return t.match(e)})}},{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 Ze?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===sr.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=function(t){return Array.isArray(t)?t:Array.from(t)}(t),n=r[0],i=r[1],o=r.slice(2);i=this.getDefaultDomElement(i);var a=this.getDefaultEventObject(n);a.dom=i,a.delegate=o.join(" "),this.addEvent(a,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(e,t){var r=this,n=!e.ctrlKey||t.isControl,i=!e.shiftKey||t.isShift,o=!e.altKey||t.isAlt,a=!e.metaKey||t.isMeta,l=!0;t.codes.length&&(l=t.codes.includes(e.code.toLowerCase())||t.codes.includes(e.key.toLowerCase()));var s=!0;return t.checkMethodList.length&&(s=t.checkMethodList.every(function(t){return r[t].call(r,e)})),n&&o&&i&&a&&l&&s}},{key:"makeCallback",value:function(r,n){var i=this;return r.delegate?function(t){if(i.checkEventType(t,r)){var e=i.matchPath(t.target||t.srcElement,r.delegate);if(e)return t.delegateTarget=e,t.$delegateTarget=new Ze(e),n(t)}}:function(t){if(i.checkEventType(t,r))return n(t)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t),nr.addEvent(t.dom,t.eventName,t.callback)}},{key:"removeEventAll",value:function(){var e=this;this.getBindings().forEach(function(t){e.removeEvent(t)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,n=t.callback;nr.removeEvent(r,e,n)}}]),cr);function cr(){P(this,cr),this.state=new ir(this),this.refs={},this.childComponents=this.components()}var hr=/^@/,fr=(F(vr,ur),B(vr,[{key:"initializeStoreEvent",value:function(){var n=this;this.storeEvents={},this.filterProps(hr).forEach(function(t){var e=t.split("@");e.shift();var r=e.join("@");n.storeEvents[r]=n[t].bind(n),n.$store.on(r,n.storeEvents[r])})}},{key:"destoryStoreEvent",value:function(){var e=this;Object.keys(this.storeEvents).forEach(function(t){e.$store.off(t,e.storeEvents[t])})}}]),vr);function vr(t){P(this,vr);var e=H(this,(vr.__proto__||Object.getPrototypeOf(vr)).call(this,t));return e.opt=t||{},t&&t.$store&&(e.$store=t.$store),e.initialize(),e.initializeStoreEvent(),e}var gr=(F(dr,Qe),B(dr,[{key:"initialize",value:function(){j(dr.prototype.__proto__||Object.getPrototypeOf(dr.prototype),"initialize",this).call(this),this.$store.rgb={},this.$store.hsl={},this.$store.hsv={},this.$store.alpha=1,this.$store.format="hex"}},{key:"/changeFormat",value:function(t,e){t.format=e,t.emit("changeFormat")}},{key:"/initColor",value:function(t,e,r){t.dispatch("/changeColor",e,r,!0),t.emit("initColor")}},{key:"/changeColor",value:function(t,e,r,n){"string"==typeof(e=e||"#FF0000")&&(e=Ge.parse(e)),e.source=e.source||r,t.alpha=function(t){return void 0===t||null==t}(e.a)?t.alpha:e.a,t.format="hsv"!=e.type&&e.type||t.format,"hex"==t.format&&t.alpha<1&&(t.format="rgb"),"hsl"==e.type?(t.hsl=Object.assign(t.hsl,e),t.rgb=Ge.HSLtoRGB(t.hsl),t.hsv=Ge.HSLtoHSV(e)):"hex"==e.type?(t.rgb=Object.assign(t.rgb,e),t.hsl=Ge.RGBtoHSL(t.rgb),t.hsv=Ge.RGBtoHSV(e)):"rgb"==e.type?(t.rgb=Object.assign(t.rgb,e),t.hsl=Ge.RGBtoHSL(t.rgb),t.hsv=Ge.RGBtoHSV(e)):"hsv"==e.type&&(t.hsv=Object.assign(t.hsv,e),t.rgb=Ge.HSVtoRGB(t.hsv),t.hsl=Ge.HSVtoHSL(t.hsv)),n||t.emit("changeColor",e.source)}},{key:"/getHueColor",value:function(t){return Xe.checkHueColor(t.hsv.h/360)}},{key:"/toString",value:function(t,e){var r=t[e=e||t.format]||t.rgb;return Ge.format(Object.assign({},r,{a:t.alpha}),e)}},{key:"/toColor",value:function(t,e){return"rgb"==(e=e||t.format)?t.dispatch("/toRGB"):"hsl"==e?t.dispatch("/toHSL"):"hex"==e?t.dispatch("/toHEX"):t.dispatch("/toString",e)}},{key:"/toRGB",value:function(t){return t.dispatch("/toString","rgb")}},{key:"/toHSL",value:function(t){return t.dispatch("/toString","hsl")}},{key:"/toHEX",value:function(t){return t.dispatch("/toString","hex").toUpperCase()}}]),dr);function dr(){return P(this,dr),H(this,(dr.__proto__||Object.getPrototypeOf(dr)).apply(this,arguments))}var pr=(B(mr,[{key:"initialize",value:function(){this.initializeModule()}},{key:"initializeModule",value:function(){var e=this;this.modules.forEach(function(t){new t(e)})}},{key:"action",value:function(t,e){this.actions[t]={context:e,callback:e[t]}}},{key:"dispatch",value:function(t){var e=[].concat(Array.prototype.slice.call(arguments)),r=(t=e.shift(),this.actions[t]);if(r)return r.callback.apply(r.context,[this].concat(N(e)))}},{key:"module",value:function(t){}},{key:"on",value:function(t,e){this.callbacks.push({event:t,callback:e})}},{key:"off",value:function(e,r){0==arguments.length?this.callbacks=[]:1==arguments.length?this.callbacks=this.callbacks.filter(function(t){return t.event!=e}):2==arguments.length&&(this.callbacks=this.callbacks.filter(function(t){return t.event!=e&&t.callback!=r}))}},{key:"emit",value:function(){var e=[].concat(Array.prototype.slice.call(arguments)),r=e.shift();this.callbacks.filter(function(t){return t.event==r}).forEach(function(t){t&&"function"==typeof t.callback&&t.callback.apply(t,N(e))})}}]),mr);function mr(t){P(this,mr),this.callbacks=[],this.actions=[],this.modules=t.modules||[],this.initialize()}var yr=(F(br,fr),B(br,[{key:"initialize",value:function(){var t=this;this.$body=null,this.$root=null,this.$store=new pr({modules:[gr,er]}),this.callbackChange=function(){t.callbackColorValue()},this.callbackLastUpdate=function(){t.callbackLastUpdateColorValue()},this.colorpickerShowCallback=function(){},this.colorpickerHideCallback=function(){},this.colorpickerLastUpdateCallback=function(){},this.$body=new Ze(this.getContainer()),this.$root=new Ze("div","codemirror-colorpicker"),"inline"==this.opt.position&&this.$body.append(this.$root),this.opt.type&&this.$root.addClass(this.opt.type),this.opt.hideInformation&&this.$root.addClass("hide-information"),this.opt.hideColorsets&&this.$root.addClass("hide-colorsets"),this.$arrow=new Ze("div","arrow"),this.$root.append(this.$arrow),this.$store.dispatch("/setUserPalette",this.opt.colorSets),this.render(),this.$root.append(this.$el),this.initColorWithoutChangeEvent(this.opt.color),this.initializeEvent()}},{key:"initColorWithoutChangeEvent",value:function(t){this.$store.dispatch("/initColor",t)}},{key:"show",value:function(t,e,r,n,i){this.colorpickerShowCallback=r,this.colorpickerHideCallback=n,this.colorpickerLastUpdateCallback=i,this.$root.css(this.getInitalizePosition()).show(),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.outputFormat=t.outputFormat,this.hideDelay=+(void 0===t.hideDelay?2e3:t.hideDelay),0window.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:"isAbsolute",value:function(){return"inline"!==this.opt.position}},{key:"mouseup.isAbsolute document",value:function(t){this.__isMouseDown=!1,this.checkInHtml(t.target)||(0==this.checkColorPickerClass(t.target)?this.hide():this.__isMouseIn||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay)))}},{key:"mouseover.isAbsolute $root",value:function(t){clearTimeout(this.timerCloseColorPicker)}},{key:"mousemove.isAbsolute $root",value:function(t){clearTimeout(this.timerCloseColorPicker)}},{key:"mouseenter.isAbsolute $root",value:function(t){clearTimeout(this.timerCloseColorPicker),this.__isMouseIn=!0}},{key:"mouseleave.isAbsolute $root",value:function(t){this.__isMouseIn=!1,this.__isMouseDown||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay))}},{key:"mousedown.isAbsolute $root",value:function(t){this.__isMouseDown=!0}},{key:"setHideDelay",value:function(t){this.delayTime=t||0}},{key:"runHideDelay",value:function(){this.isColorPickerShow&&this.setHideDelay()}},{key:"callbackColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerShowCallback&&this.colorpickerShowCallback(t)}},{key:"callbackLastUpdateColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onLastUpdate&&this.opt.onLastUpdate.call(this,t),"function"==typeof this.colorpickerLastUpdateCallback&&this.colorpickerLastUpdateCallback(t)}},{key:"callbackHideColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onHide&&this.opt.onHide.call(this,t),"function"==typeof this.colorpickerHideCallback&&this.colorpickerHideCallback(t)}},{key:"getCurrentColor",value:function(){return this.$store.dispatch("/toColor",this.outputFormat)}},{key:"checkColorPickerClass",value:function(t){var e=new Ze(t).closest("codemirror-colorview"),r=new Ze(t).closest("codemirror-colorpicker"),n=new Ze(t).closest("CodeMirror");return t.nodeName,!!(r||e||n)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"initializeStoreEvent",value:function(){j(br.prototype.__proto__||Object.getPrototypeOf(br.prototype),"initializeStoreEvent",this).call(this),this.$store.on("changeColor",this.callbackChange),this.$store.on("lastUpdateColor",this.callbackLastUpdate),this.$store.on("changeFormat",this.callbackChange)}},{key:"destroy",value:function(){j(br.prototype.__proto__||Object.getPrototypeOf(br.prototype),"destroy",this).call(this),this.$store.off("changeColor",this.callbackChange),this.$store.off("lastUpdateColor",this.callbackLastUpdate),this.$store.off("changeFormat",this.callbackChange),this.callbackChange=void 0,this.callbackLastUpdate=void 0,this.colorpickerShowCallback=void 0,this.colorpickerHideCallback=void 0}}]),br);function br(t){P(this,br);var e=H(this,(br.__proto__||Object.getPrototypeOf(br)).call(this,t));return e.isColorPickerShow=!1,e.isShortCut=!1,e.hideDelay=+(void 0===e.opt.hideDeplay?2e3:e.opt.hideDelay),e.timerCloseColorPicker,e.autoHide=e.opt.autoHide||!0,e.outputFormat=e.opt.outputFormat,e.$checkColorPickerClass=e.checkColorPickerClass.bind(e),e}var kr=(F(Cr,fr),B(Cr,[{key:"refresh",value:function(){}},{key:"refreshColorUI",value:function(t){}},{key:"changeColor",value:function(t){this.$store.dispatch("/changeColor",Object.assign({source:this.source},t||{}))}},{key:"mouseup document",value:function(t){this.onDragEnd(t)}},{key:"mousemove document",value:function(t){this.onDragMove(t)}},{key:"mousedown $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"mousedown $container",value:function(t){this.isDown=!0,this.onDragStart(t)}},{key:"touchend document",value:function(t){this.onDragEnd(t)}},{key:"touchmove document",value:function(t){this.onDragMove(t)}},{key:"touchstart $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"touchstart $container",value:function(t){this.onDragStart(t)}},{key:"onDragStart",value:function(t){this.isDown=!0,this.refreshColorUI(t)}},{key:"onDragMove",value:function(t){this.isDown&&this.refreshColorUI(t)}},{key:"onDragEnd",value:function(t){this.isDown&&(this.$store.emit("lastUpdateColor"),this.isDown=!1)}},{key:"@changeColor",value:function(t){this.source!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Cr);function Cr(t){P(this,Cr);var e=H(this,(Cr.__proto__||Object.getPrototypeOf(Cr)).call(this,t));return e.source="base-box",e}var xr=(F(_r,kr),B(_r,[{key:"getMinMaxPosition",value:function(){var t=this.getMinPosition(),e=this.getMaxDist();return{min:t,max:t+e,width:e}}},{key:"getCurrent",value:function(t){return min+this.getMaxDist()*t}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().left}},{key:"getMaxDist",value:function(){return this.state.get("$container.width")}},{key:"getDist",value:function(t){var e=this.getMinMaxPosition(),r=e.min,n=e.max;return t=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first"),this.setMousePosition(this.getMaxDist()*((t||0)/this.maxValue))}}]),_r);function _r(t){P(this,_r);var e=H(this,(_r.__proto__||Object.getPrototypeOf(_r)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="base-slider",e}var wr=(F(Mr,xr),B(Mr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$container.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){j(Mr.prototype.__proto__||Object.getPrototypeOf(Mr.prototype),"refresh",this).call(this),this.setBackgroundColor()}},{key:"getDefaultValue",value:function(){return this.$store.hsv.v}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({type:"hsv",v:e/100*this.maxValue})}}]),Mr);function Mr(t){P(this,Mr);var e=H(this,(Mr.__proto__||Object.getPrototypeOf(Mr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="value-control",e}var Or=(F(Sr,xr),B(Sr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){j(Sr.prototype.__proto__||Object.getPrototypeOf(Sr.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=Ge.format(t,"rgb");t.a=1;var r=Ge.format(t,"rgb");this.setOpacityColorBarBackground(e,r)}},{key:"setOpacityColorBarBackground",value:function(t,e){this.refs.$colorbar.css("background","linear-gradient(to right, "+t+", "+e+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),Sr);function Sr(t){P(this,Sr);var e=H(this,(Sr.__proto__||Object.getPrototypeOf(Sr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="opacity-control",e}var Er=(F(Tr,fr),B(Tr,[{key:"components",value:function(){return{Value:wr,Opacity:Or}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Tr);function Tr(){return P(this,Tr),H(this,(Tr.__proto__||Object.getPrototypeOf(Tr)).apply(this,arguments))}var Ar=(F(Ir,fr),B(Ir,[{key:"template",value:function(){return'\n
\n \n
\n
\n
\n '}},{key:"refresh",value:function(t){this.setColorUI(t)}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.renderValue(),this.setHueColor(null,t)}},{key:"renderValue",value:function(){var t=1-this.$store.hsv.v;this.refs.$valuewheel.css({"background-color":"rgba(0, 0, 0, "+t+")"})}},{key:"renderWheel",value:function(t,e){this.width&&!t&&(t=this.width),this.height&&!e&&(e=this.height);var r=new Ze("canvas"),n=r.el.getContext("2d");r.el.width=t,r.el.height=e,r.css({width:t+"px",height:e+"px"});for(var i=n.getImageData(0,0,t,e),o=i.data,a=Math.floor(t/2),l=Math.floor(e/2),s=e\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
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n \n '}},{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.$store.alpha?"hex":"rgb"),this.$el.removeClass(t),this.$el.addClass(e),this.format=e,this.$store.dispatch("/changeFormat",this.format),this.$store.emit("lastUpdateColor")}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"checkNumberKey",value:function(t){var e=t.which,r=!1;return 37!=e&&39!=e&&8!=e&&46!=e&&9!=e||(r=!0),!(!r&&(e<48||57\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n \n '}},{key:"refresh",value:function(){this.load()}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"@toggleColorChooser",value:function(){this.toggle()}},{key:"load $colorsetsList",value:function(){return"\n
\n "+this.$store.dispatch("/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.$store.dispatch("/setCurrentColorSets",r),this.hide()}}},{key:"destroy",value:function(){j(Ur.prototype.__proto__||Object.getPrototypeOf(Ur.prototype),"destroy",this).call(this),this.hide()}}]),Ur);function Ur(){return P(this,Ur),H(this,(Ur.__proto__||Object.getPrototypeOf(Ur)).apply(this,arguments))}var jr=(F(Fr,fr),B(Fr,[{key:"template",value:function(){return'\n
\n
\n \n
\n
\n
\n '}},{key:"load $colorSetsColorList",value:function(){var t=this.$store.dispatch("/getCurrentColorSets");return'\n
\n '+this.$store.dispatch("/getCurrentColors").map(function(t,e){return'
\n
\n
\n
'}).join("")+" \n "+(t.edit?'
+
':"")+" \n
\n "}},{key:"refresh",value:function(){this.load()}},{key:"addColor",value:function(t){this.$store.dispatch("/addCurrentColor",t)}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"click $colorSetsChooseButton",value:function(t){this.$store.emit("toggleColorChooser")}},{key:"contextmenu $colorSetsColorList",value:function(t){if(t.preventDefault(),this.$store.dispatch("/getCurrentColorSets").edit){var e=new Ze(t.target).closest("color-item");if(e){var r=parseInt(e.attr("data-index"));this.$store.emit("showContextMenu",t,r)}else this.$store.emit("showContextMenu",t)}}},{key:"click $colorSetsColorList .add-color-item",value:function(t){this.addColor(this.$store.dispatch("/toColor"))}},{key:"click $colorSetsColorList .color-item",value:function(t){this.$store.dispatch("/changeColor",t.$delegateTarget.attr("data-color")),this.$store.emit("lastUpdateColor")}}]),Fr);function Fr(){return P(this,Fr),H(this,(Fr.__proto__||Object.getPrototypeOf(Fr)).apply(this,arguments))}var Hr=(F(Lr,fr),B(Lr,[{key:"template",value:function(){return'\n
    \n
  • Remove color
    • \n
  • Remove all to the right
    • \n
  • Clear palette
    • \n
\n '}},{key:"show",value:function(t,e){var r=nr.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.$store.dispatch("/removeCurrentColor",this.selectedColorIndex);break;case"remove-all-to-the-right":this.$store.dispatch("/removeCurrentColorToTheRight",this.selectedColorIndex);break;case"clear-palette":this.$store.dispatch("/clearPalette")}}},{key:"@showContextMenu",value:function(t,e){this.show(t,e)}},{key:"click $el .menu-item",value:function(t){t.preventDefault(),this.runCommand(t.$delegateTarget.attr("data-type")),this.hide()}}]),Lr);function Lr(){return P(this,Lr),H(this,(Lr.__proto__||Object.getPrototypeOf(Lr)).apply(this,arguments))}var Vr=(F(Nr,yr),B(Nr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorwheel:Ar,control:Er,information:Dr,currentColorSets:jr,colorSetsChooser:Rr,contextMenu:Hr}}}]),Nr);function Nr(){return P(this,Nr),H(this,(Nr.__proto__||Object.getPrototypeOf(Nr)).apply(this,arguments))}var Gr=(F(zr,xr),B(zr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),zr);function zr(t){P(this,zr);var e=H(this,(zr.__proto__||Object.getPrototypeOf(zr)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="hue-control",e}var Xr=(F(Yr,fr),B(Yr,[{key:"components",value:function(){return{Hue:Gr,Opacity:Or}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"chromedevtool-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Yr);function Yr(){return P(this,Yr),H(this,(Yr.__proto__||Object.getPrototypeOf(Yr)).apply(this,arguments))}var Wr="chromedevtool-palette",qr=(F(Kr,fr),B(Kr,[{key:"template",value:function(){return'\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"),n=t.x/e,i=(r-t.y)/r;this.$store.dispatch("/changeColor",{type:"hsv",s:n,v:i,source:Wr})}},{key:"setColorUI",value:function(){var t=this.state.get("$el.width")*this.$store.hsv.s,e=this.state.get("$el.height")*(1-this.$store.hsv.v);this.refs.$drag_pointer.css({left:t+"px",top:e+"px"}),this.drag_pointer_pos={x:t,y:e},this.setBackgroundColor(this.$store.dispatch("/getHueColor"))}},{key:"setMainColor",value:function(t){var e=this.$el.offset(),r=this.state.get("$el.contentWidth"),n=this.state.get("$el.contentHeight"),i=nr.pos(t).pageX-e.left,o=nr.pos(t).pageY-e.top;i<0?i=0:r\n
\n
\n
\n
\n
\n
\n \n '}},{key:"components",value:function(){return{palette:qr,control:Xr,information:Dr,currentColorSets:jr,colorSetsChooser:Rr,contextMenu:Hr}}}]),Jr);function Jr(){return P(this,Jr),H(this,(Jr.__proto__||Object.getPrototypeOf(Jr)).apply(this,arguments))}var Qr=(F(tn,fr),B(tn,[{key:"components",value:function(){return{Hue:Gr,Opacity:Or}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),tn);function tn(){return P(this,tn),H(this,(tn.__proto__||Object.getPrototypeOf(tn)).apply(this,arguments))}var en=(F(rn,yr),B(rn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:qr,control:Qr}}}]),rn);function rn(){return P(this,rn),H(this,(rn.__proto__||Object.getPrototypeOf(rn)).apply(this,arguments))}var nn=(F(on,xr),B(on,[{key:"getMaxDist",value:function(){return this.state.get("$container.height")}},{key:"setMousePosition",value:function(t){this.refs.$bar.css({top:t+"px"})}},{key:"getMousePosition",value:function(t){return nr.pos(t).pageY}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().top}},{key:"getCaculatedDist",value:function(t){var e=t?this.getMousePosition(t):this.getCurrent(this.getDefaultValue()/this.maxValue);return 100-this.getDist(e)}},{key:"setColorUI",value:function(t){(t=t||this.getDefaultValue())<=this.minValue?this.refs.$bar.addClass("first").removeClass("last"):t>=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first");var e=1-(t||0)/this.maxValue;this.setMousePosition(this.getMaxDist()*e)}}]),on);function on(t){P(this,on);var e=H(this,(on.__proto__||Object.getPrototypeOf(on)).call(this,t));return e.source="vertical-slider",e}var an=(F(ln,nn),B(ln,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),ln);function ln(t){P(this,ln);var e=H(this,(ln.__proto__||Object.getPrototypeOf(ln)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="vertical-hue-control",e}var sn=(F(un,nn),B(un,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){j(un.prototype.__proto__||Object.getPrototypeOf(un.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=Ge.format(t,"rgb");t.a=1;var r=Ge.format(t,"rgb");this.refs.$colorbar.css("background","linear-gradient(to top, "+e+", "+r+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),un);function un(t){P(this,un);var e=H(this,(un.__proto__||Object.getPrototypeOf(un)).call(this,t));return e.source="vertical-opacity-control",e}var cn=(F(hn,fr),B(hn,[{key:"components",value:function(){return{Hue:an,Opacity:sn}}},{key:"template",value:function(){return'
'}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),hn);function hn(){return P(this,hn),H(this,(hn.__proto__||Object.getPrototypeOf(hn)).apply(this,arguments))}var fn=(F(vn,yr),B(vn,[{key:"template",value:function(){return'\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:qr,control:cn}}}]),vn);function vn(){return P(this,vn),H(this,(vn.__proto__||Object.getPrototypeOf(vn)).apply(this,arguments))}var gn=(F(dn,fr),B(dn,[{key:"components",value:function(){return{Value:wr,Opacity:Or}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),dn);function dn(){return P(this,dn),H(this,(dn.__proto__||Object.getPrototypeOf(dn)).apply(this,arguments))}var pn=(F(mn,Ar),B(mn,[{key:"template",value:function(){return'\n
\n \n
\n
\n '}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.setHueColor(null,t)}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"setHueColor",value:function(t,e){if(this.state.get("$el.width")){var r=this.getRectangle(),n=r.minX,i=r.minY,o=r.radius,a=r.centerX,l=r.centerY,s=this.getCurrentXY(t,this.getDefaultValue(),o,a,l),u=b((h=s.x)-a,(f=s.y)-l),c=this.getCurrentXY(null,u,o-this.half_thinkness,a,l),h=c.x,f=c.y;this.refs.$drag_pointer.css({left:h-n+"px",top:f-i+"px"}),e||this.changeColor({type:"hsv",h:u})}}}]),mn);function mn(t){P(this,mn);var e=H(this,(mn.__proto__||Object.getPrototypeOf(mn)).call(this,t));return e.width=214,e.height=214,e.thinkness=16,e.half_thinkness=e.thinkness/2,e.source="colorring",e}var yn=(F(bn,yr),B(bn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorring:pn,palette:qr,control:gn,information:Dr,currentColorSets:jr,colorSetsChooser:Rr,contextMenu:Hr}}}]),bn);function bn(){return P(this,bn),H(this,(bn.__proto__||Object.getPrototypeOf(bn)).apply(this,arguments))}var kn=(F(Cn,fr),B(Cn,[{key:"components",value:function(){return{Hue:an,Opacity:sn}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(){this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Cn);function Cn(){return P(this,Cn),H(this,(Cn.__proto__||Object.getPrototypeOf(Cn)).apply(this,arguments))}var $n=(F(xn,yr),B(xn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:qr,control:kn,information:Dr,currentColorSets:jr,colorSetsChooser:Rr,contextMenu:Hr}}}]),xn);function xn(){return P(this,xn),H(this,(xn.__proto__||Object.getPrototypeOf(xn)).apply(this,arguments))}var _n={create:function(t){switch(t.type){case"macos":return new Vr(t);case"xd":return new $n(t);case"ring":return new yn(t);case"mini":return new en(t);case"mini-vertical":return new fn(t);case"sketch":case"palette":default:return new Zr(t)}},ColorPicker:Zr,ChromeDevToolColorPicker:Zr,MacOSColorPicker:Vr,RingColorPicker:yn,MiniColorPicker:en,MiniVerticalColorPicker:fn},wn="codemirror-colorview",Mn="codemirror-colorview-background",On=["comment","builtin"];function Sn(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 En(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 Tn(t,e){Sn(t,{origin:"setValue"})}function An(t,e){t.state.colorpicker.keyup(e)}function In(t,e){t.state.colorpicker.is_edit_mode()&&t.state.colorpicker.check_mousedown(e)}function Pn(t,e){Sn(t,{origin:"setValue"})}function Dn(t){t.state.colorpicker.close_color_picker()}function Bn(t){t.state.colorpicker.hide_delay_color_picker(t.state.colorpicker.opt.hideDelay||1e3)}var Rn=(B(Un,[{key:"init_event",value:function(){var e,r;this.cm.on("mousedown",In),this.cm.on("keyup",An),this.cm.on("change",Sn),this.cm.on("update",En),this.cm.on("refresh",Tn),this.cm.on("blur",Bn),this.onPasteCallback=(e=this.cm,r=Pn,function(t){r.call(this,e,t)}),this.onScrollEvent=function(r,n){var i=void 0;return function(t,e){i&&clearTimeout(i),i=setTimeout(function(){r(t,e)},n||300)}}(Dn,50),this.cm.getWrapperElement().addEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.on("scroll",this.onScrollEvent)}},{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",In),this.cm.off("keyup",An),this.cm.off("change",Sn),this.cm.off("blur",Bn),this.cm.getWrapperElement().removeEventListener("paste",this.onPasteCallback),this.is_edit_mode()&&this.cm.off("scroll",this.onScrollEvent)}},{key:"hasClass",value:function(t,e){return!!t.className&&-1<(" "+t.className+" ").indexOf(" "+e+" ")}},{key:"check_mousedown",value:function(t){this.hasClass(t.target,Mn)?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(-1<("#"+t).indexOf("#"+n.lineNo+":")){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=this,r=t.lineNo,n=t.ch,i=t.nameColor,o=t.color;if(this.colorpicker){var a=o,l=this.cm.charCoords({line:r,ch:n});this.colorpicker.show({left:l.left,top:l.bottom,isShortCut:t.isShortCut||!1,hideDelay:this.opt.hideDelay||2e3},i||o,function(t){e.cm.replaceRange(t,{line:r,ch:n},{line:r,ch:n+a.length},"*colorpicker"),e.cm.focus(),a=t})}}},{key:"close_color_picker",value:function(){this.colorpicker&&this.colorpicker.hide()}},{key:"hide_delay_color_picker",value:function(){this.colorpicker&&this.colorpicker.runHideDelay()}},{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>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};return n=Object.assign(n,U(n))}if(0<=t&&t<=4294967295){n={type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255};return n=Object.assign(n,U(n))}}return t}function D(r){"string"==typeof r&&(r=T(r));var t=(r=r.map(function(t){if("string"==typeof t){var e=E(t),r=I(e.str).split(" ");return r[1]?r[1].includes("%")?r[1]=parseFloat(r[1].replace(/%/,""))/100:r[1]=parseFloat(r[1]):r[1]="*",r[0]=A(r[0],e.matches),r}if(Array.isArray(t))return t[1]?"string"==typeof t[1]&&(t[1].includes("%")?t[1]=parseFloat(t[1].replace(/%/,""))/100:t[1]=+t[1]):t[1]="*",[].concat(O(t))})).filter(function(t){return"*"===t[1]}).length;if(0=r?255:0;if(i)0==t&&($r=0,$g=0,$b=0);else{var e=Math.round(t);$r=e,$g=e,$b=e}},{$C:n,$scale:r,$hasColor:i})}function Ct(){var t=0>R,$[l+1]=c*B>>R,$[l+2]=h*B>>R,u-=f,c-=v,h-=g,f-=P.r,v-=P.g,g-=P.b,o=s+((o=r+e+1)>R,$[o+1]=c*B>>R,$[o+2]=h*B>>R,u-=f,c-=v,h-=g,f-=P.r,v-=P.g,g-=P.b,o=r+((o=n+S)255-e?255:0,$g=$g>255-e?255:0,$b=$b>255-e?255:0},{$C:e})},contrast:function(){var t=0>1),s=n[l];return n[l]=n[0],n[0]=s,n},createBitmap:Yt,createBlurMatrix:ne,pack:function(n){return function(r,t){zt(r.pixels.length,function(t,e){n(r.pixels,t,e,r.pixels[t],r.pixels[t+1],r.pixels[t+2],r.pixels[t+3])},function(){t(r)})}},packXY:re,pixel:Qt,getBitmap:Wt,putBitmap:qt,radian:function(t){return mt.CONSTANT.radian(t)},convolution:ae,parseParamNumber:Kt,filter:ce,clamp:ue,fillColor:ie,fillPixelColor:oe},"multi",fe),k(Ut,"merge",ve),k(Ut,"matches",le),k(Ut,"parseFilter",se),k(Ut,"partial",ge),Ut),Lt=Ht;function Vt(t){var e=1= 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 ")}(v),e=g,r={},n=0;n>2)},function(){r()},n.functionDumpCount,n.frameTimer,n.loopCount)}function Xt(t,r,n,e){var i=4>2;n(t,e%r,Math.floor(e/r))},function(){e()},i.functionDumpCount,i.frameTimer,i.loopCount)}function Yt(t,e,r){return{pixels:new Uint8ClampedArray(t),width:e,height:r}}function Wt(t,e){return gt.getBitmap(t,e)}function qt(t,e,r){return gt.putBitmap(t,e,r)}function Kt(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}var Zt=/(([\w_\-]+)(\(([^\)]*)\))?)+/gi;function Jt(t,e,r){var a,n,i,o,l;return a={},n=[{callback:t,context:1t.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])}(n,t,r,r);for(var i=Yt(n.pixels.length,n.width,n.height),o=Yt(t.pixels.length,t.width,t.height),a=function(t,o,i,e){var a=Math.round(Math.sqrt(t.length)),l=Math.floor(a/2),r=e?1:0,n="let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ",s=[],u=[],c=[],h=[];t.forEach(function(t,e){var r=Math.floor(e/a)-l,n=e%a-l;0!=t&&(s.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4]]"),u.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 1]]"),c.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 2]]"),h.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 3]]"))}),n+="r = "+s.join(" + ")+"; g = "+u.join(" + ")+"; b = "+c.join(" + ")+"; a = "+h.join(" + ")+";",n+="$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + ("+r+")*(255-a); ";var f=new Function("$dp","$sp","$di","$sx","$sy","$t",n);return function(t,e,r,n,i){f(t,e,r,n,i,o)}}(h,v,n.width,(n.height,f)),l=t.pixels.length/4,s=0;s>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])}}(i,o,r,r),e(o)}}function le(r){var e=ze.convertMatches(r),t=e.str.match(Zt),n=[];if(!t)return n;n=t.map(function(t){return{filter:t,origin:ze.reverseMatches(t,e.matches)}});var i={next:0};return n=n.map(function(t){var e=r.indexOf(t.origin,i.next);return t.startIndex=e,t.endIndex=e+t.origin.length,t.arr=se(t.origin),i.next=t.endIndex,t}).filter(function(t){return!!t.arr.length})}function se(t){var e=ze.convertMatches(t),r=e.str.match(Zt);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 ze.reverseMatches(t,e.matches)})),[i].concat(O(o)).map(ze.trim)}function ue(t){return Math.min(255,t)}function ce(t){return ve(le(t).map(function(t){return t.arr}))}function he(t){for(var e=0=l)return e(n);o()}()},r)}o()}}function ve(t){return fe.apply(void 0,O(t))}function ge(n){for(var i=null,t=arguments.length,e=Array(1= "+(t=xe(de(t)))+" ? 1.0 : 0.0;\n\n outColor = vec4(c, c, c, pixelColor.a);\n ")}var Ue=_({},{blur:function(){return be([1,1,1,1,1,1,1,1,1])},normal:function(){return be([0,0,0,0,1,0,0,0,0])},emboss:function(){var t=0 "+r+") {\n outColor = vec4("+$e(ze.parse(e))+".rgb, pixelColor.a);\n } else {\n outColor = vec4("+n+".rgb, pixelColor.a);\n }\n ")},brightness:function(){return ke("\n outColor = pixelColor + ("+xe(de(0 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 ke("\n vec2 st = pixelColor.st;\n st *= "+xe(de(0e&&(t=ft(t,e)),t.map(function(t){return h(t,r)})},ImageToCanvas:function(t,e,r){var n=3=t){e=Xe[n-1],r=Xe[n];break}return e&&r?ze.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):Xe[0].rgb}},We=_({},Ft,Ht),qe={Color:ze,HueColor:Ye,ColorNames:f,ImageFilter:We,GL:Ne,Canvas:gt,ImageLoader:dt},Ke=(ze.color,0),Ze=[],Je=(y(Qe,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(t){for(var e=this,r=!1;!(r=e.hasClass(t));){if(!e.el.parentNode)return null;e=new Qe(e.el.parentNode)}return r?e:null}},{key:"checked",value:function(){return this.el.checked}},{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&&-1<(" "+this.el.className+" ").indexOf(" "+t+" ")}},{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(e){try{"string"==typeof e?this.el.innerHTML=e:this.empty().append(e)}catch(t){console.log(e)}return this}},{key:"find",value:function(t){return this.el.querySelector(t)}},{key:"$",value:function(t){return new Qe(this.find(t))}},{key:"findAll",value:function(t){return this.el.querySelectorAll(t)}},{key:"$$",value:function(t){return[].concat(O(this.findAll(t))).map(function(t){return new Qe(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+Qe.getScrollTop(),left:t.left+Qe.getScrollLeft()}}},{key:"rect",value:function(){return this.el.getBoundingClientRect()}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"size",value:function(){return[this.width(),this.height()]}},{key:"width",value:function(){return this.el.offsetWidth||this.el.getBoundingClientRect().width}},{key:"contentWidth",value:function(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}},{key:"height",value:function(){return this.el.offsetHeight||this.el.getBoundingClientRect().height}},{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)return Ze[this.dataKey(t)]=e,this;if(1==arguments.length)return Ze[this.dataKey(t)];var r=Object.keys(Ze),n=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(n)}).map(function(t){return Ze[t]})}},{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?Qe.getScrollTop():this.el.scrollTop}},{key:"scrollLeft",value:function(){return this.el===document.body?Qe.getScrollLeft():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(t,e,r,n){var i=3"}},{key:"initialize",value:function(){}},{key:"initializeEvent",value:function(){var e=this;this.initializeEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].initializeEvent()})}},{key:"destroy",value:function(){var e=this;this.destroyEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].destroy()})}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(lr).forEach(this.parseEvent.bind(this))}},{key:"collectProps",value:function(){if(!this.collapsedProps){for(var t=this.__proto__,e=[];e.push.apply(e,O(Object.getOwnPropertyNames(t))),t=t.__proto__;);this.collapsedProps=e}return this.collapsedProps}},{key:"filterProps",value:function(e){return this.collectProps().filter(function(t){return t.match(e)})}},{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 Je?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===ur.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(e,t){var r=this,n=!t.isControl||e.ctrlKey,i=!t.isShift||e.shiftKey,o=!t.isAlt||e.altKey,a=!t.isMeta||e.metaKey,l=!0;t.codes.length&&(l=t.codes.includes(e.code.toLowerCase())||t.codes.includes(e.key.toLowerCase()));var s=!0;return t.checkMethodList.length&&(s=t.checkMethodList.every(function(t){return r[t].call(r,e)})),n&&o&&i&&a&&l&&s}},{key:"makeCallback",value:function(r,n){var i=this;return r.delegate?function(t){if(t.xy=ir.posXY(t),i.checkEventType(t,r)){var e=i.matchPath(t.target||t.srcElement,r.delegate);if(e)return t.delegateTarget=e,t.$delegateTarget=new Je(e),n(t)}}:function(t){if(t.xy=ir.posXY(t),i.checkEventType(t,r))return n(t)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t);var r=!0;"touchstart"===t.eventName&&(r={passive:!0}),ir.addEvent(t.dom,t.eventName,t.callback,r)}},{key:"removeEventAll",value:function(){var e=this;this.getBindings().forEach(function(t){e.removeEvent(t)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,n=t.callback;ir.removeEvent(r,e,n)}}]),hr);function hr(){d(this,hr),this.state=new or(this),this.refs={},this.childComponents=this.components()}var fr=/^@/,vr=($(gr,cr),y(gr,[{key:"initializeStoreEvent",value:function(){var n=this;this.storeEvents={},this.filterProps(fr).forEach(function(t){var e=t.split("@");e.shift();var r=e.join("@");n.storeEvents[r]=n[t].bind(n),n.$store.on(r,n.storeEvents[r])})}},{key:"destoryStoreEvent",value:function(){var e=this;Object.keys(this.storeEvents).forEach(function(t){e.$store.off(t,e.storeEvents[t])})}}]),gr);function gr(t){d(this,gr);var e=x(this,(gr.__proto__||Object.getPrototypeOf(gr)).call(this,t));return e.opt=t||{},t&&t.$store&&(e.$store=t.$store),e.initialize(),e.initializeStoreEvent(),e}var dr=($(pr,tr),y(pr,[{key:"initialize",value:function(){C(pr.prototype.__proto__||Object.getPrototypeOf(pr.prototype),"initialize",this).call(this),this.$store.rgb={},this.$store.hsl={},this.$store.hsv={},this.$store.alpha=1,this.$store.format="hex"}},{key:"/changeFormat",value:function(t,e){t.format=e,t.emit("changeFormat")}},{key:"/initColor",value:function(t,e,r){t.dispatch("/changeColor",e,r,!0),t.emit("initColor")}},{key:"/changeColor",value:function(t,e,r,n){var i;"string"==typeof(e=e||"#FF0000")&&(e=ze.parse(e)),e.source=e.source||r,t.alpha=void 0===(i=e.a)||null==i?t.alpha:e.a,t.format="hsv"!=e.type&&e.type||t.format,"hsl"==e.type?(t.hsl=Object.assign(t.hsl,e),t.rgb=ze.HSLtoRGB(t.hsl),t.hsv=ze.HSLtoHSV(e)):"hex"==e.type||"rgb"==e.type?(t.rgb=Object.assign(t.rgb,e),t.hsl=ze.RGBtoHSL(t.rgb),t.hsv=ze.RGBtoHSV(e)):"hsv"==e.type&&(t.hsv=Object.assign(t.hsv,e),t.rgb=ze.HSVtoRGB(t.hsv),t.hsl=ze.HSVtoHSL(t.hsv)),n||t.emit("changeColor",e.source)}},{key:"/getHueColor",value:function(t){return Ye.checkHueColor(t.hsv.h/360)}},{key:"/toString",value:function(t,e){var r=t[e=e||t.format]||t.rgb;return ze.format(_({},r,{a:t.alpha}),e)}},{key:"/toColor",value:function(t,e){return"rgb"==(e=e||t.format)?t.dispatch("/toRGB"):"hsl"==e?t.dispatch("/toHSL"):"hex"==e?t.dispatch("/toHEX"):t.dispatch("/toString",e)}},{key:"/toRGB",value:function(t){return t.dispatch("/toString","rgb")}},{key:"/toHSL",value:function(t){return t.dispatch("/toString","hsl")}},{key:"/toHEX",value:function(t){return t.dispatch("/toString","hex").toUpperCase()}}]),pr);function pr(){return d(this,pr),x(this,(pr.__proto__||Object.getPrototypeOf(pr)).apply(this,arguments))}var yr=(y(mr,[{key:"initialize",value:function(){this.initializeModule()}},{key:"initializeModule",value:function(){var e=this;this.modules.forEach(function(t){new t(e)})}},{key:"action",value:function(t,e){this.actions[t]={context:e,callback:e[t]}}},{key:"dispatch",value:function(t){var e=[].concat(Array.prototype.slice.call(arguments)),r=(t=e.shift(),this.actions[t]);if(r)return r.callback.apply(r.context,[this].concat(O(e)))}},{key:"module",value:function(){}},{key:"on",value:function(t,e){this.callbacks.push({event:t,callback:e})}},{key:"off",value:function(e,r){0==arguments.length?this.callbacks=[]:1==arguments.length?this.callbacks=this.callbacks.filter(function(t){return t.event!=e}):2==arguments.length&&(this.callbacks=this.callbacks.filter(function(t){return t.event!=e&&t.callback!=r}))}},{key:"emit",value:function(){var e=[].concat(Array.prototype.slice.call(arguments)),r=e.shift();this.callbacks.filter(function(t){return t.event==r}).forEach(function(t){t&&"function"==typeof t.callback&&t.callback.apply(t,O(e))})}}]),mr);function mr(t){d(this,mr),this.callbacks=[],this.actions=[],this.modules=t.modules||[],this.initialize()}var br=($(kr,vr),y(kr,[{key:"initialize",value:function(){var t=this;this.$body=null,this.$root=null,this.$store=new yr({modules:[dr,rr]}),this.callbackChange=function(){t.callbackColorValue()},this.callbackLastUpdate=function(){t.callbackLastUpdateColorValue()},this.colorpickerShowCallback=function(){},this.colorpickerHideCallback=function(){},this.colorpickerLastUpdateCallback=function(){},this.$body=new Je(this.getContainer()),this.$root=new Je("div","codemirror-colorpicker"),"inline"==this.opt.position&&this.$body.append(this.$root),this.opt.type&&this.$root.addClass(this.opt.type),this.opt.hideInformation&&this.$root.addClass("hide-information"),this.opt.hideColorsets&&this.$root.addClass("hide-colorsets"),this.$arrow=new Je("div","arrow"),this.$root.append(this.$arrow),this.$store.dispatch("/setUserPalette",this.opt.colorSets),this.render(),this.$root.append(this.$el),this.initColorWithoutChangeEvent(this.opt.color),this.initializeEvent()}},{key:"initColorWithoutChangeEvent",value:function(t){this.$store.dispatch("/initColor",t)}},{key:"show",value:function(t,e,r,n,i){this.colorpickerShowCallback=r,this.colorpickerHideCallback=n,this.colorpickerLastUpdateCallback=i,this.$root.css(this.getInitalizePosition()).show(),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.outputFormat=t.outputFormat,this.hideDelay=+(void 0===t.hideDelay?2e3:t.hideDelay),0window.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:"isAbsolute",value:function(){return"inline"!==this.opt.position}},{key:"mouseup.isAbsolute document",value:function(t){this.__isMouseDown=!1,this.checkInHtml(t.target)||(0==this.checkColorPickerClass(t.target)?this.hide():this.__isMouseIn||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay)))}},{key:"keyup.isAbsolute.escape $root",value:function(){this.hide()}},{key:"mouseover.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker)}},{key:"mousemove.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker)}},{key:"mouseenter.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker),this.__isMouseIn=!0}},{key:"mouseleave.isAbsolute $root",value:function(){this.__isMouseIn=!1,this.__isMouseDown||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay))}},{key:"mousedown.isAbsolute $root",value:function(){this.__isMouseDown=!0}},{key:"setHideDelay",value:function(t){this.delayTime=t||0}},{key:"runHideDelay",value:function(){this.isColorPickerShow&&this.setHideDelay()}},{key:"callbackColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerShowCallback&&this.colorpickerShowCallback(t)}},{key:"callbackLastUpdateColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onLastUpdate&&this.opt.onLastUpdate.call(this,t),"function"==typeof this.colorpickerLastUpdateCallback&&this.colorpickerLastUpdateCallback(t)}},{key:"callbackHideColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onHide&&this.opt.onHide.call(this,t),"function"==typeof this.colorpickerHideCallback&&this.colorpickerHideCallback(t)}},{key:"getCurrentColor",value:function(){return this.$store.dispatch("/toColor",this.outputFormat)}},{key:"checkColorPickerClass",value:function(t){var e=new Je(t).closest("codemirror-colorview"),r=new Je(t).closest("codemirror-colorpicker"),n=new Je(t).closest("CodeMirror");return t.nodeName,!!(r||e||n)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"initializeStoreEvent",value:function(){C(kr.prototype.__proto__||Object.getPrototypeOf(kr.prototype),"initializeStoreEvent",this).call(this),this.$store.on("changeColor",this.callbackChange),this.$store.on("lastUpdateColor",this.callbackLastUpdate),this.$store.on("changeFormat",this.callbackChange)}},{key:"destroy",value:function(){C(kr.prototype.__proto__||Object.getPrototypeOf(kr.prototype),"destroy",this).call(this),this.$store.off("changeColor",this.callbackChange),this.$store.off("lastUpdateColor",this.callbackLastUpdate),this.$store.off("changeFormat",this.callbackChange),this.callbackChange=void 0,this.callbackLastUpdate=void 0,this.colorpickerShowCallback=void 0,this.colorpickerHideCallback=void 0}}]),kr);function kr(t){d(this,kr);var e=x(this,(kr.__proto__||Object.getPrototypeOf(kr)).call(this,t));return e.isColorPickerShow=!1,e.isShortCut=!1,e.hideDelay=+(void 0===e.opt.hideDeplay?2e3:e.opt.hideDelay),e.timerCloseColorPicker,e.autoHide=e.opt.autoHide||!0,e.outputFormat=e.opt.outputFormat,e.$checkColorPickerClass=e.checkColorPickerClass.bind(e),e}var Cr=($(xr,vr),y(xr,[{key:"refresh",value:function(){}},{key:"refreshColorUI",value:function(){}},{key:"changeColor",value:function(t){this.$store.dispatch("/changeColor",Object.assign({source:this.source},t||{}))}},{key:"mouseup document",value:function(t){this.onDragEnd(t)}},{key:"mousemove document",value:function(t){this.onDragMove(t)}},{key:"mousedown $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"mousedown $container",value:function(t){this.isDown=!0,this.onDragStart(t)}},{key:"touchend document",value:function(t){this.onDragEnd(t)}},{key:"touchmove document",value:function(t){this.onDragMove(t)}},{key:"touchstart $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"touchstart $container",value:function(t){this.onDragStart(t)}},{key:"onDragStart",value:function(t){this.isDown=!0,this.refreshColorUI(t)}},{key:"onDragMove",value:function(t){this.isDown&&this.refreshColorUI(t)}},{key:"onDragEnd",value:function(){this.isDown&&(this.$store.emit("lastUpdateColor"),this.isDown=!1)}},{key:"@changeColor",value:function(t){this.source!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),xr);function xr(t){d(this,xr);var e=x(this,(xr.__proto__||Object.getPrototypeOf(xr)).call(this,t));return e.source="base-box",e}var _r=($(wr,Cr),y(wr,[{key:"getMinMaxPosition",value:function(){var t=this.getMinPosition(),e=this.getMaxDist();return{min:t,max:t+e,width:e}}},{key:"getCurrent",value:function(t){return min+this.getMaxDist()*t}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().left}},{key:"getMaxDist",value:function(){return this.state.get("$container.width")}},{key:"getDist",value:function(t){var e=this.getMinMaxPosition(),r=e.min,n=e.max;return t=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first"),this.setMousePosition(this.getMaxDist()*((t||0)/this.maxValue))}}]),wr);function wr(t){d(this,wr);var e=x(this,(wr.__proto__||Object.getPrototypeOf(wr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="base-slider",e}var Or=($(Mr,_r),y(Mr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$container.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){C(Mr.prototype.__proto__||Object.getPrototypeOf(Mr.prototype),"refresh",this).call(this),this.setBackgroundColor()}},{key:"getDefaultValue",value:function(){return this.$store.hsv.v}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({type:"hsv",v:e/100*this.maxValue})}}]),Mr);function Mr(t){d(this,Mr);var e=x(this,(Mr.__proto__||Object.getPrototypeOf(Mr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="value-control",e}var Sr=($(Er,_r),y(Er,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){C(Er.prototype.__proto__||Object.getPrototypeOf(Er.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=ze.format(t,"rgb");t.a=1;var r=ze.format(t,"rgb");this.setOpacityColorBarBackground(e,r)}},{key:"setOpacityColorBarBackground",value:function(t,e){this.refs.$colorbar.css("background","linear-gradient(to right, "+t+", "+e+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),Er);function Er(t){d(this,Er);var e=x(this,(Er.__proto__||Object.getPrototypeOf(Er)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="opacity-control",e}var Tr=($(Ar,vr),y(Ar,[{key:"components",value:function(){return{Value:Or,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Ar);function Ar(){return d(this,Ar),x(this,(Ar.__proto__||Object.getPrototypeOf(Ar)).apply(this,arguments))}var Ir=($(Pr,vr),y(Pr,[{key:"template",value:function(){return'\n
\n \n
\n
\n
\n '}},{key:"refresh",value:function(t){this.setColorUI(t)}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.renderValue(),this.setHueColor(null,t)}},{key:"renderValue",value:function(){var t=1-this.$store.hsv.v;this.refs.$valuewheel.css({"background-color":"rgba(0, 0, 0, "+t+")"})}},{key:"renderWheel",value:function(t,e){this.width&&!t&&(t=this.width),this.height&&!e&&(e=this.height);var r=new Je("canvas"),n=r.el.getContext("2d");r.el.width=t,r.el.height=e,r.css({width:t+"px",height:e+"px"});for(var i=n.getImageData(0,0,t,e),o=i.data,a=Math.floor(t/2),l=Math.floor(e/2),s=e\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
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n \n '}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var e=this,r=this.format||"hex";["hex","rgb","hsl"].filter(function(t){return t!==r}).forEach(function(t){e.$el.removeClass(t)}),this.$el.addClass(r)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e="hex"),this.format=e,this.initFormat(),this.$store.dispatch("/changeFormat",this.format),this.$store.emit("lastUpdateColor")}},{key:"goToFormat",value:function(t){"rgb"!==(this.format=t)&&"hsl"!==t||this.initFormat(),this.$store.dispatch("/changeFormat",this.format)}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"checkNumberKey",value:function(t){var e=t.which,r=!1;return 37!=e&&39!=e&&8!=e&&46!=e&&9!=e||(r=!0),!(!r&&(e<48||57\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n \n '}},{key:"refresh",value:function(){this.load()}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"@toggleColorChooser",value:function(){this.toggle()}},{key:"load $colorsetsList",value:function(){return"\n
\n "+this.$store.dispatch("/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(){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.$store.dispatch("/setCurrentColorSets",r),this.hide()}}},{key:"destroy",value:function(){C(Fr.prototype.__proto__||Object.getPrototypeOf(Fr.prototype),"destroy",this).call(this),this.hide()}}]),Fr);function Fr(){return d(this,Fr),x(this,(Fr.__proto__||Object.getPrototypeOf(Fr)).apply(this,arguments))}var jr=($(Hr,vr),y(Hr,[{key:"template",value:function(){return'\n
\n
\n \n
\n
\n
\n '}},{key:"load $colorSetsColorList",value:function(){var t=this.$store.dispatch("/getCurrentColorSets");return'\n
\n '+this.$store.dispatch("/getCurrentColors").map(function(t,e){return'
\n
\n
\n
'}).join("")+" \n "+(t.edit?'
+
':"")+" \n
\n "}},{key:"refresh",value:function(){this.load()}},{key:"addColor",value:function(t){this.$store.dispatch("/addCurrentColor",t)}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"click $colorSetsChooseButton",value:function(){this.$store.emit("toggleColorChooser")}},{key:"contextmenu $colorSetsColorList",value:function(t){if(t.preventDefault(),this.$store.dispatch("/getCurrentColorSets").edit){var e=new Je(t.target).closest("color-item");if(e){var r=parseInt(e.attr("data-index"));this.$store.emit("showContextMenu",t,r)}else this.$store.emit("showContextMenu",t)}}},{key:"click $colorSetsColorList .add-color-item",value:function(){this.addColor(this.$store.dispatch("/toColor"))}},{key:"click $colorSetsColorList .color-item",value:function(t){this.$store.dispatch("/changeColor",t.$delegateTarget.attr("data-color")),this.$store.emit("lastUpdateColor")}}]),Hr);function Hr(){return d(this,Hr),x(this,(Hr.__proto__||Object.getPrototypeOf(Hr)).apply(this,arguments))}var Lr=($(Vr,vr),y(Vr,[{key:"template",value:function(){return'\n
    \n
  • Remove color
    • \n
  • Remove all to the right
    • \n
  • Clear palette
    • \n
\n '}},{key:"show",value:function(t,e){var r=ir.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.$store.dispatch("/removeCurrentColor",this.selectedColorIndex);break;case"remove-all-to-the-right":this.$store.dispatch("/removeCurrentColorToTheRight",this.selectedColorIndex);break;case"clear-palette":this.$store.dispatch("/clearPalette")}}},{key:"@showContextMenu",value:function(t,e){this.show(t,e)}},{key:"click $el .menu-item",value:function(t){t.preventDefault(),this.runCommand(t.$delegateTarget.attr("data-type")),this.hide()}}]),Vr);function Vr(){return d(this,Vr),x(this,(Vr.__proto__||Object.getPrototypeOf(Vr)).apply(this,arguments))}var Nr=($(Gr,br),y(Gr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorwheel:Ir,control:Tr,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Lr}}}]),Gr);function Gr(){return d(this,Gr),x(this,(Gr.__proto__||Object.getPrototypeOf(Gr)).apply(this,arguments))}var zr=($(Xr,_r),y(Xr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),Xr);function Xr(t){d(this,Xr);var e=x(this,(Xr.__proto__||Object.getPrototypeOf(Xr)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="hue-control",e}var Yr=($(Wr,vr),y(Wr,[{key:"components",value:function(){return{Hue:zr,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"chromedevtool-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Wr);function Wr(){return d(this,Wr),x(this,(Wr.__proto__||Object.getPrototypeOf(Wr)).apply(this,arguments))}var qr="chromedevtool-palette",Kr=($(Zr,vr),y(Zr,[{key:"template",value:function(){return'\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"),n=t.x/e,i=(r-t.y)/r;this.$store.dispatch("/changeColor",{type:"hsv",s:n,v:i,source:qr})}},{key:"setColorUI",value:function(){var t=this.state.get("$el.width")*this.$store.hsv.s,e=this.state.get("$el.height")*(1-this.$store.hsv.v);this.refs.$drag_pointer.css({left:t+"px",top:e+"px"}),this.drag_pointer_pos={x:t,y:e},this.setBackgroundColor(this.$store.dispatch("/getHueColor"))}},{key:"setMainColor",value:function(t){var e=this.$el.offset(),r=this.state.get("$el.contentWidth"),n=this.state.get("$el.contentHeight"),i=ir.pos(t).pageX-e.left,o=ir.pos(t).pageY-e.top;i<0?i=0:r\n
\n
\n
\n
\n
\n
\n \n '}},{key:"components",value:function(){return{palette:Kr,control:Yr,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Lr}}}]),Qr);function Qr(){return d(this,Qr),x(this,(Qr.__proto__||Object.getPrototypeOf(Qr)).apply(this,arguments))}var tn=($(en,vr),y(en,[{key:"components",value:function(){return{Hue:zr,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),en);function en(){return d(this,en),x(this,(en.__proto__||Object.getPrototypeOf(en)).apply(this,arguments))}var rn=($(nn,br),y(nn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:tn}}}]),nn);function nn(){return d(this,nn),x(this,(nn.__proto__||Object.getPrototypeOf(nn)).apply(this,arguments))}var on=($(an,_r),y(an,[{key:"getMaxDist",value:function(){return this.state.get("$container.height")}},{key:"setMousePosition",value:function(t){this.refs.$bar.css({top:t+"px"})}},{key:"getMousePosition",value:function(t){return ir.pos(t).pageY}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().top}},{key:"getCaculatedDist",value:function(t){var e=t?this.getMousePosition(t):this.getCurrent(this.getDefaultValue()/this.maxValue);return 100-this.getDist(e)}},{key:"setColorUI",value:function(t){(t=t||this.getDefaultValue())<=this.minValue?this.refs.$bar.addClass("first").removeClass("last"):t>=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first");var e=1-(t||0)/this.maxValue;this.setMousePosition(this.getMaxDist()*e)}}]),an);function an(t){d(this,an);var e=x(this,(an.__proto__||Object.getPrototypeOf(an)).call(this,t));return e.source="vertical-slider",e}var ln=($(sn,on),y(sn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),sn);function sn(t){d(this,sn);var e=x(this,(sn.__proto__||Object.getPrototypeOf(sn)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="vertical-hue-control",e}var un=($(cn,on),y(cn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){C(cn.prototype.__proto__||Object.getPrototypeOf(cn.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=ze.format(t,"rgb");t.a=1;var r=ze.format(t,"rgb");this.refs.$colorbar.css("background","linear-gradient(to top, "+e+", "+r+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),cn);function cn(t){d(this,cn);var e=x(this,(cn.__proto__||Object.getPrototypeOf(cn)).call(this,t));return e.source="vertical-opacity-control",e}var hn=($(fn,vr),y(fn,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'
'}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),fn);function fn(){return d(this,fn),x(this,(fn.__proto__||Object.getPrototypeOf(fn)).apply(this,arguments))}var vn=($(gn,br),y(gn,[{key:"template",value:function(){return'\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:hn}}}]),gn);function gn(){return d(this,gn),x(this,(gn.__proto__||Object.getPrototypeOf(gn)).apply(this,arguments))}var dn=($(pn,vr),y(pn,[{key:"components",value:function(){return{Value:Or,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),pn);function pn(){return d(this,pn),x(this,(pn.__proto__||Object.getPrototypeOf(pn)).apply(this,arguments))}var yn=($(mn,Ir),y(mn,[{key:"template",value:function(){return'\n
\n \n
\n
\n '}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.setHueColor(null,t)}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"setHueColor",value:function(t,e){if(this.state.get("$el.width")){var r=this.getRectangle(),n=r.minX,i=r.minY,o=r.radius,a=r.centerX,l=r.centerY,s=this.getCurrentXY(t,this.getDefaultValue(),o,a,l),u=b((h=s.x)-a,(f=s.y)-l),c=this.getCurrentXY(null,u,o-this.half_thinkness,a,l),h=c.x,f=c.y;this.refs.$drag_pointer.css({left:h-n+"px",top:f-i+"px"}),e||this.changeColor({type:"hsv",h:u})}}}]),mn);function mn(t){d(this,mn);var e=x(this,(mn.__proto__||Object.getPrototypeOf(mn)).call(this,t));return e.width=214,e.height=214,e.thinkness=16,e.half_thinkness=e.thinkness/2,e.source="colorring",e}var bn=($(kn,br),y(kn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorring:yn,palette:Kr,control:dn,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Lr}}}]),kn);function kn(){return d(this,kn),x(this,(kn.__proto__||Object.getPrototypeOf(kn)).apply(this,arguments))}var Cn=($($n,vr),y($n,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(){this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),$n);function $n(){return d(this,$n),x(this,($n.__proto__||Object.getPrototypeOf($n)).apply(this,arguments))}var xn=($(_n,br),y(_n,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:Cn,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Lr}}}]),_n);function _n(){return d(this,_n),x(this,(_n.__proto__||Object.getPrototypeOf(_n)).apply(this,arguments))}var wn=($(On,vr),y(On,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),On);function On(){return d(this,On),x(this,(On.__proto__||Object.getPrototypeOf(On)).apply(this,arguments))}var Mn=($(Sn,br),y(Sn,[{key:"template",value:function(){return"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n "}},{key:"components",value:function(){return{palette:Kr,control:wn}}},{key:"initColorWithoutChangeEvent",value:function(t){console.log(t),this.$store.dispatch("/initColor",t),this.refresh()}},{key:"setBackgroundColor",value:function(){var t=this.$store.dispatch("/toColor"),e=this.$store.rgb,r=ze.brightness(e.r,e.g,e.b);this.refs.$colorview.css({"background-color":t,color:127Mini Style

Mini Vertical Style

+ +
+

VSCode Style

+
+