goodteditor-ui 1.0.70 → 1.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.70",
+    "version": "1.0.71",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/ColorPicker/Alpha.vue

@@ -21,9 +21,8 @@
 }
 </style>
 <script>
-import mixin from './mixin';
+import { createAlphaSquare, createLinearGradient } from './utils';
 export default {
-    mixins: [mixin],
     props: {
         color: {
             type: String,
@@ -66,7 +65,7 @@ export default {
             const width = this.width;
             const height = this.height;
             const size = this.alphaSize;
-            const canvasSquare = this.createAlphaSquare(size);
+            const canvasSquare = createAlphaSquare(size);
 
             const ctx = canvas.getContext('2d');
             canvas.width = width;
@@ -75,7 +74,7 @@ export default {
             ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat');
             ctx.fillRect(0, 0, width, height);
 
-            this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
+            createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color);
         },
         renderSlide() {
             this.slideAlphaStyle = {

package/src/components/ui/ColorPicker/Colors.vue

@@ -62,9 +62,8 @@
 }
 </style>
 <script>
-import mixin from './mixin';
+import { createAlphaSquare } from './utils';
 export default {
-    mixins: [mixin],
     props: {
         color: {
             type: String,
@@ -87,7 +86,7 @@ export default {
         };
     },
     created() {
-        this.imgAlphaBase64 = this.createAlphaSquare(4).toDataURL();
+        this.imgAlphaBase64 = createAlphaSquare(4).toDataURL();
     },
     destroyed() {
         this.setColorsHistory(this.color);

package/src/components/ui/ColorPicker/Preview.vue

@@ -2,9 +2,8 @@
     <canvas />
 </template>
 <script>
-import mixin from './mixin';
+import { createAlphaSquare } from './utils';
 export default {
-    mixins: [mixin],
     props: {
         color: {
             type: String,
@@ -38,7 +37,7 @@ export default {
             const width = this.width;
             const height = this.height;
             const size = this.alphaSize;
-            const canvasSquare = this.createAlphaSquare(size);
+            const canvasSquare = createAlphaSquare(size);
 
             const ctx = canvas.getContext('2d');
             canvas.width = width;

package/src/components/ui/ColorPicker/Saturation.vue

@@ -22,9 +22,8 @@
 }
 </style>
 <script>
-import mixin from './mixin';
+import { createLinearGradient } from './utils';
 export default {
-    mixins: [mixin],
     props: {
         color: {
             type: String,
@@ -62,8 +61,8 @@ export default {
             ctx.fillStyle = this.color;
             ctx.fillRect(0, 0, size, size);
 
-            this.createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
-            this.createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
+            createLinearGradient('l', ctx, size, size, '#FFFFFF', 'rgba(255,255,255,0)');
+            createLinearGradient('p', ctx, size, size, 'rgba(0,0,0,0)', '#000000');
         },
         renderSlide() {
             this.slideSaturationStyle = {

package/src/components/ui/ColorPicker/utils.js

@@ -0,0 +1,170 @@
+export const MODEL_MODE = {
+    HEX: 'hex',
+    RGBA: 'rgba'
+};
+
+export const isValidColorString = (value) => {
+    return CSS.supports('color', value);
+}
+
+const hex2Dec = (val) => {
+    const value = parseInt(val, 16);
+    if (Number.isNaN(value)) {
+        throw new Error(`${val} is not a valid HEX number`);
+    }
+    return value;
+};
+
+const checkRgbaColorChannelRange = (c) => {
+    if (c < 0 || c > 255) {
+        throw new Error(`${c} is not a valid RGBa color channel value range`);
+    }
+};
+
+const checkRgbaAlphaChannelRange = (c) => {
+    if (c < 0 || c > 1) {
+        throw new Error(`${c} is not a valid RGBa alpha channel value range`);
+    }
+};
+
+const checkRgbaChannelsRange = (rgba) => {
+    ['r', 'g', 'b'].forEach((c) => checkRgbaColorChannelRange(rgba[c]));
+    checkRgbaAlphaChannelRange(rgba['a']);
+};
+
+export const rgb2hex = ({ r, g, b, a }, toUpper) => {
+    const change = val => ('0' + Number(val).toString(16)).slice(-2);
+    const color = `#${change(r)}${change(g)}${change(b)}${a < 1 ? change(Math.round(a * 255)) : ''}`;
+    return toUpper ? color.toUpperCase() : color;
+};
+
+export const hex2rgb = (hex) => {
+    hex = hex.slice(1);
+    if (hex.length === 3) {
+        hex = hex.split('').map((v) => v.padEnd(2, v)).join('');
+    } else if (hex.length < 6) {
+        hex = hex.padEnd(6, '0');
+    }
+    hex = hex.padEnd(8, 'ff');
+    const [r, g, b, a] = [0, 2, 4, 6].map((i) => hex2Dec(hex.slice(i, i + 2)));
+    return {
+        r,
+        g,
+        b,
+        a: (a / 255).toFixed(2)
+    };
+};
+
+export const rgb2rgba = (rgba) => {
+    if (typeof rgba === 'string') {
+        const error = new Error(`${rgba} is not a valid RGBa`);
+        rgba = /rgba?\((.*?)\)/.exec(rgba);
+        if (rgba === null) {
+            throw error;
+        }
+        rgba = rgba[1].split(',').map(Number);
+        if (rgba.length < 3 || rgba.some((v) => Number.isNaN(v))) {
+            throw error;
+        }
+        return {
+            r: rgba[0],
+            g: rgba[1],
+            b: rgba[2],
+            a: rgba[3] ?? 1
+        };
+    } else {
+        return rgba;
+    }
+};
+
+export const rgb2hsv = ({ r, g, b }) => {
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    let h = 0;
+    if (max === min) {
+        h = 0;
+    } else if (max === r) {
+        if (g >= b) {
+            h = (60 * (g - b)) / delta;
+        } else {
+            h = (60 * (g - b)) / delta + 360;
+        }
+    } else if (max === g) {
+        h = (60 * (b - r)) / delta + 120;
+    } else if (max === b) {
+        h = (60 * (r - g)) / delta + 240;
+    }
+    h = Math.floor(h);
+    let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2));
+    let v = parseFloat(max.toFixed(2));
+    return { h, s, v };
+};
+
+const normalizeRgbaChannels = (rgba) => {
+    rgba = { ...rgba };
+    ['r', 'g', 'b'].forEach((c) => { rgba[c] = Math.min(Math.max(rgba[c], 0), 255) });
+    rgba['a'] = Math.min(Math.max(rgba['a'], 0), 1);
+    return rgba;
+};
+
+export const setColorValue = (color) => {
+    let rgba;
+    let modelMode = MODEL_MODE.RGBA;
+    if (/#/.test(color)) {
+        rgba = hex2rgb(color);
+        modelMode = MODEL_MODE.HEX;
+    } else if (/rgb/.test(color)) {
+        rgba = rgb2rgba(color);
+    } else if (typeof color === 'string') {
+        rgba = rgb2rgba(`rgba(${color})`);
+    } else if (color instanceof Object) {
+        rgba = color;
+    } else {
+        throw new Error('Invalid color value');
+    }
+
+    rgba = normalizeRgbaChannels(rgba);
+    const { r, g, b, a } = rgba;
+    const { h, s, v } = rgb2hsv(rgba);
+    return {
+        r,
+        g,
+        b,
+        a: a === undefined ? 1 : a,
+        h,
+        s,
+        v,
+        modelMode
+    };
+};
+
+export const createAlphaSquare = (size) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const doubleSize = size * 2;
+    canvas.width = doubleSize;
+    canvas.height = doubleSize;
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, doubleSize, doubleSize);
+    ctx.fillStyle = '#ccd5db';
+    ctx.fillRect(0, 0, size, size);
+    ctx.fillRect(size, size, size, size);
+
+    return canvas;
+};
+
+export const createLinearGradient = (direction, ctx, width, height, color1, color2) => {
+    const isL = direction === 'l';
+    const gradient = ctx.createLinearGradient(0, 0, isL ? width : 0, isL ? 0 : height);
+    gradient.addColorStop(0.01, color1);
+    gradient.addColorStop(0.99, color2);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+};
+
+export default {};

package/src/components/ui/ColorPicker.vue

@@ -40,14 +40,14 @@
                         class="input input-small text-xsmall flex-grow"
                         type="text"
                         :value="modelRgba"
-                        @change="e => inputRgba(e.target.value)"
-                        v-if="modelMode == modelModes.RGBA"
+                        @input="({ target }) => inputRgba(target.value)"
+                        v-if="modelMode === modelModes.RGBA"
                     />
                     <input
                         class="input input-small text-xsmall flex-grow"
                         type="text"
                         :value="modelHex"
-                        @change="e => inputHex(e.target.value)"
+                        @input="({ target }) => inputHex(target.value)"
                         v-else
                     />
                     <div class="btn btn-outline btn-small mar-left-2" @click="toggleModelMode">
@@ -78,69 +78,78 @@
     canvas {
         display: block;
     }
+
     input {
         min-width: 0;
     }
+
     .btn {
         min-height: 0;
         width: 2.25em;
         padding: 0;
     }
+
     .text-upper {
         text-transform: uppercase;
     }
 }
 </style>
 <script>
-import mixin from './ColorPicker/mixin';
+import { MODEL_MODE, setColorValue, rgb2hex, isValidColorString } from './ColorPicker/utils';
+import { Key } from './utils/Helpers';
 import CpSaturation from './ColorPicker/Saturation.vue';
 import CpHue from './ColorPicker/Hue.vue';
 import CpAlpha from './ColorPicker/Alpha.vue';
 import CpPreview from './ColorPicker/Preview.vue';
 import CpColors from './ColorPicker/Colors.vue';
 
-let MODEL_MODE = {
-    HEX: 'h',
-    RGBA: 'r',
+export const DefaultChannelValues = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1,
+    h: 0,
+    s: 0,
+    v: 0
 };
+
 export default {
     components: {
         CpSaturation,
         CpHue,
         CpAlpha,
         CpPreview,
-        CpColors,
+        CpColors
     },
-    mixins: [mixin],
     props: {
         /**
          * @model
          */
         value: {
             type: String,
-            default: '#000000',
+            default: '#000000'
         },
         /**
          * Default colors palette
          */
         colorsDefault: {
             type: Array,
-            default: () => [],
+            default: () => []
         },
         /**
          * LocalStorage key for saving used colors
          */
         colorsHistoryKey: {
             type: String,
-            default: '',
+            default: ''
         },
         /**
          * Show submit button
          */
         showSubmit: {
             type: Boolean,
-            default: false,
-        },
+            default: false
+        }
     },
     data() {
         return {
@@ -151,19 +160,13 @@ export default {
             modelHex: '',
             modelMode: MODEL_MODE.RGBA,
             modelModes: MODEL_MODE,
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 1,
-            h: 0,
-            s: 0,
-            v: 0,
+            ...DefaultChannelValues
         };
     },
     computed: {
         nextModelMode() {
             let { HEX, RGBA } = MODEL_MODE;
-            return this.modelMode == HEX ? RGBA : HEX;
+            return (this.modelMode === HEX ? RGBA : HEX)[0];
         },
         totalWidth() {
             return this.hueHeight + (this.hueWidth + 4) * 2;
@@ -176,14 +179,14 @@ export default {
                 r: this.r,
                 g: this.g,
                 b: this.b,
-                a: this.a,
+                a: this.a
             };
         },
         hsv() {
             return {
                 h: this.h,
                 s: this.s,
-                v: this.v,
+                v: this.v
             };
         },
         rgbString() {
@@ -196,19 +199,35 @@ export default {
             return `rgba(${this.rgbaStringShort})`;
         },
         hexString() {
-            return this.rgb2hex(this.rgba, true);
+            return rgb2hex(this.rgba, true);
         },
         previewRgbaString() {
             return this.rgbaString;
-        },
+        }
     },
     watch: {
         value: {
-            handler(v) {
-                Object.assign(this, this.setColorValue(this.value));
+            handler(input, prevInput) {
+                // fallback color value
+                let channels;
+                try {
+                    if (isValidColorString(input) === false) {
+                        throw new Error('Invalid color value');
+                    };
+                    const { modelMode, ...channelsOnly } = setColorValue(input);
+                    if (prevInput == null) {
+                        this.modelMode = modelMode;
+                    }
+                    channels = channelsOnly;
+                } catch(e) {
+                    console.error(e);
+                    channels = { ...DefaultChannelValues }
+                }
+
+                Object.assign(this, channels);
                 this.setText();
             },
-            immediate: true,
+            immediate: true
         },
         rgba() {
             /**
@@ -218,19 +237,21 @@ export default {
             this.$emit('changeColor', {
                 rgba: this.rgba,
                 hsv: this.hsv,
-                hex: this.modelHex,
+                hex: this.modelHex
             });
             /**
              * Triggers when the color changes
              * @property {Number} rgbaString color rgba string
              */
             this.$emit('input', this.rgbaString);
-        },
+        }
+    },
+    created() {
+        document.addEventListener('keydown', this.onDocKeydown);
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.onDocKeydown);
     },
-    /*created() {
-        Object.assign(this, this.setColorValue(this.value));
-        this.setText();
-    },*/
     methods: {
         submit() {
             /**
@@ -241,27 +262,28 @@ export default {
                 rgba: this.rgba,
                 hsv: this.hsv,
                 hex: this.modelHex,
+                mode: this.modelMode
             });
         },
         toggleModelMode() {
             let { HEX, RGBA } = MODEL_MODE;
-            this.modelMode = this.modelMode == HEX ? RGBA : HEX;
+            this.modelMode = this.modelMode === HEX ? RGBA : HEX;
         },
         selectSaturation(color) {
-            const { r, g, b, h, s, v } = this.setColorValue(color);
+            const { r, g, b, h, s, v } = setColorValue(color);
             Object.assign(this, { r, g, b, h, s, v });
             this.setText();
         },
         changeSaturation(color) {
-            //const { r, g, b } = this.setColorValue(color);
+            //const { r, g, b } = setColorValue(color);
             //const { a } = this;
             //this.previewRgbaString = `rgba(${r},${g},${b},${a})`;
-            const { r, g, b, h, s, v } = this.setColorValue(color);
+            const { r, g, b, h, s, v } = setColorValue(color);
             Object.assign(this, { r, g, b, h, s, v });
             this.setText();
         },
         selectHue(color) {
-            const { r, g, b, h, s, v } = this.setColorValue(color);
+            const { r, g, b, h, s, v } = setColorValue(color);
             Object.assign(this, { r, g, b, h, s, v });
             this.setText();
             this.$nextTick(() => {
@@ -274,7 +296,7 @@ export default {
             this.setText();
         },
         inputHex(color) {
-            const { r, g, b, a, h, s, v } = this.setColorValue(color);
+            const { r, g, b, a, h, s, v } = setColorValue(color);
             Object.assign(this, { r, g, b, a, h, s, v });
             this.modelHex = color;
             this.modelRgba = this.rgbaStringShort;
@@ -285,7 +307,7 @@ export default {
             });
         },
         inputRgba(color) {
-            const { r, g, b, a, h, s, v } = this.setColorValue(color);
+            const { r, g, b, a, h, s, v } = setColorValue(color);
             Object.assign(this, { r, g, b, a, h, s, v });
             this.modelHex = this.hexString;
             this.modelRgba = color;
@@ -300,7 +322,7 @@ export default {
             this.modelRgba = this.rgbaStringShort;
         },
         selectColor(color) {
-            const { r, g, b, a, h, s, v } = this.setColorValue(color);
+            const { r, g, b, a, h, s, v } = setColorValue(color);
             Object.assign(this, { r, g, b, a, h, s, v });
             this.setText();
             this.$nextTick(() => {
@@ -309,6 +331,18 @@ export default {
                 this.$refs.hue.renderSlide();
             });
         },
-    },
+        onDocKeydown(e) {
+            if (e.key === Key.ESC) {
+                e.stopImmediatePropagation();
+                this.$emit('close');
+                return;
+            }
+            if (e.key === Key.ENTER) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                this.submit();
+            }
+        }
+    }
 };
 </script>

package/src/components/ui/InputColorPicker.vue

@@ -8,7 +8,7 @@
     >
         <div class="ui-input-color-picker-wrapper d-flex flex-v-center w-100">
             <div style="flex: 1 0 0">
-                <!-- 
+                <!--
                 @slot Custom input slot
                 @binding {String} id    input id attribute value
                 @binding {String} value    input value
@@ -26,7 +26,7 @@
                     />
                 </slot>
             </div>
-            <!-- 
+            <!--
             @slot Icon slot
             @binding {String} value     current value
             @binding {Function} toggle  function that toggles the color picker
@@ -34,12 +34,12 @@
             <slot name="icon" v-bind="{ value, toggle: togglePopover }">
                 <div
                     class="ui-input-color-picker-icon-preview mar-left-2 cursor-pointer"
-                    :style="{ background: value }"
+                    :style="{ ...(isValid && { background: value }) }"
                     @click="togglePopover"
                 ></div>
             </slot>
         </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+        <ui-popover v-if="popoverShow" :show.sync="popoverShow" v-bind="popoverOptions">
             <color-picker
                 class="ui-input-color-picker-cp pull-left"
                 v-bind="{
@@ -47,7 +47,9 @@
                     colorsDefault,
                     showSubmit: true,
                 }"
-                @submit="onSubmit"
+                @close="onColorPickerClose"
+                @submit="onColorPickerSubmit"
+                @valid="emitValid"
             ></color-picker>
         </ui-popover>
     </div>
@@ -55,15 +57,20 @@
 <style lang="less" scoped>
 .ui-input-color-picker {
     display: inline-flex;
+    /* unset default FormComponent mixin */
+    pointer-events: unset !important;
+
     &-wrapper {
         display: flex;
     }
+
     &-icon-preview {
         width: 1em;
         height: 1em;
         border: 1px solid var(--color-border);
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAAA3NCSVQICAjb4U/gAAAABlBMVEXM1dv///9zs4+jAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJljYD/AgIx+MCAjAHyDCLzvUxo8AAAAAElFTkSuQmCC');
     }
+
     &-input {
         border: none;
         margin: 0;
@@ -72,12 +79,18 @@
         color: inherit;
         background: transparent;
         outline: none;
+
+        &::placeholder {
+            color: inherit;
+        }
     }
 }
 </style>
 <script>
+import { MODEL_MODE, isValidColorString } from './ColorPicker/utils';
 import ColorPicker from './ColorPicker.vue';
 import UiPopover from './Popover.vue';
+import { Key } from './utils/Helpers';
 import FormComponent from './utils/FormComponent';
 import WithPopover from './utils/WithPopover';
 
@@ -90,7 +103,7 @@ export default {
          */
         editable: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Default colors palette
@@ -99,53 +112,110 @@ export default {
             type: Array,
             default() {
                 return [];
-            },
-        },
+            }
+        }
     },
     data() {
         return {
+            isValid: false,
             inputBinds: {
                 placeholder: this.placeholder,
                 readonly: this.readonly || !this.editable,
+                disabled: this.disabled
             },
             inputEvents: {
+                input: this.onInputInput,
                 change: this.onInputChange,
                 focus: this.onInputFocus,
                 blur: this.onInputBlur,
-            },
+                keydown: this.onInputKeydownLocal
+            }
         };
     },
+    created() {
+        this.validateInput(this.value);
+    },
     methods: {
-        changeColor(val) {
+        inputColor(val) {
             /**
              * Input event
              * @property {String} color
              */
             this.$emit('input', val);
+        },
+        changeColor(val) {
             /**
              * Change event
              * @property {String} color
              */
             this.$emit('change', val);
         },
+        emitValid(isValid) {
+            this.$emit('valid', isValid);
+        },
+        validateInput(value) {
+            const isValid = value === '' ? true : isValidColorString(value);
+            this.isValid = isValid;
+            this.emitValid(isValid);
+        },
+        // EVENT HANDLERS
         onRootFocus(e) {
+            if (this.disabled) {
+                return;
+            }
             let input = this.getInputRef();
             input && input.focus();
         },
         onInputChange(e) {
-            this.changeColor(e.target.value);
+            const { value } = e.target;
+            this.validateInput(value);
+            this.changeColor(value);
+        },
+        onInputInput(e) {
+            const { value } = e.target;
+            this.validateInput(value);
+            this.inputColor(e.target.value);
         },
         onInputFocus(e) {
+            if (this.disabled) {
+                return;
+            }
             this.rootHasFocus = true;
         },
         onInputBlur(e) {
             this.rootHasFocus = false;
         },
-        onSubmit({ rgba }) {
-            let { r, g, b, a } = rgba;
-            this.changeColor(`rgba(${r}, ${g}, ${b}, ${a})`);
-            this.popoverShow = false;
+        onColorPickerSubmit({ mode, ...profiles }) {
+            if (this.readonly || this.disabled) {
+                return;
+            }
+            const value = profiles[mode];
+            let colorString;
+            if (mode === MODEL_MODE.RGBA) {
+                let { r, g, b, a } = value;
+                colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
+            }
+            if (mode === MODEL_MODE.HEX) {
+                colorString = value;
+            }
+            this.changeColor(colorString);
+            this.inputColor(colorString);
+            this.onColorPickerClose();
         },
-    },
+        onInputKeydownLocal(e) {
+            if (e.key === Key.ESC) {
+                if (this.popoverShow) {
+                    e.stopImmediatePropagation();
+                    this.onColorPickerClose();
+                    return;
+                }
+                this.onInputKeydown(e);
+            }
+        },
+        onColorPickerClose() {
+            this.popoverShow = false;
+            this.getInputRef().focus();
+        }
+    }
 };
 </script>

package/src/components/ui/utils/FormComponent.js

@@ -1,3 +1,5 @@
+import { Key } from '../utils/Helpers';
+
 const r = () =>
     Math.random()
         .toString(36)
@@ -103,5 +105,14 @@ export default {
             }
             this.rootHasFocus = false;
         },
+        onInputKeydown(e) {
+            if (e.key === Key.ESC && this.rootHasFocus) {
+                e.stopPropagation();
+                const el = this.getInputRef();
+                if (el != null) {
+                    el.blur()
+                }
+            }
+        }
     },
 };

package/src/components/ui/ColorPicker/mixin.js

@@ -1,105 +0,0 @@
-export default {
-    methods: {
-        setColorValue(color) {
-            let rgba = { r: 0, g: 0, b: 0, a: 1 };
-            if (/#/.test(color)) {
-                rgba = this.hex2rgb(color);
-            } else if (/rgb/.test(color)) {
-                rgba = this.rgb2rgba(color);
-            } else if (typeof color === 'string') {
-                rgba = this.rgb2rgba(`rgba(${color})`);
-            } else if (Object.prototype.toString.call(color) === '[object Object]') {
-                rgba = color;
-            }
-            let fix = c => (c < 0 ? 0 : c > 255 ? 255 : c);
-            ['r', 'g', 'b'].forEach(c => (rgba[c] = fix(rgba[c])));
-            const { r, g, b, a } = rgba;
-            const { h, s, v } = this.rgb2hsv(rgba);
-            return {
-                r,
-                g,
-                b,
-                a: a === undefined ? 1 : a,
-                h,
-                s,
-                v,
-            };
-        },
-        createAlphaSquare(size) {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            const doubleSize = size * 2;
-            canvas.width = doubleSize;
-            canvas.height = doubleSize;
-
-            ctx.fillStyle = '#ffffff';
-            ctx.fillRect(0, 0, doubleSize, doubleSize);
-            ctx.fillStyle = '#ccd5db';
-            ctx.fillRect(0, 0, size, size);
-            ctx.fillRect(size, size, size, size);
-
-            return canvas;
-        },
-        createLinearGradient(direction, ctx, width, height, color1, color2) {
-            const isL = direction === 'l';
-            const gradient = ctx.createLinearGradient(0, 0, isL ? width : 0, isL ? 0 : height);
-            gradient.addColorStop(0.01, color1);
-            gradient.addColorStop(0.99, color2);
-            ctx.fillStyle = gradient;
-            ctx.fillRect(0, 0, width, height);
-        },
-        rgb2hex({ r, g, b }, toUpper) {
-            const change = val => ('0' + Number(val).toString(16)).slice(-2);
-            const color = `#${change(r)}${change(g)}${change(b)}`;
-            return toUpper ? color.toUpperCase() : color;
-        },
-        hex2rgb(hex) {
-            hex = hex.slice(1);
-            const change = val => parseInt(val, 16) || 0;
-            return {
-                r: change(hex.slice(0, 2)),
-                g: change(hex.slice(2, 4)),
-                b: change(hex.slice(4, 6)),
-            };
-        },
-        rgb2rgba(rgba) {
-            if (typeof rgba === 'string') {
-                rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',');
-                return {
-                    r: Number(rgba[0]) || 0,
-                    g: Number(rgba[1]) || 0,
-                    b: Number(rgba[2]) || 0,
-                    a: Number(rgba[3] ? rgba[3] : 1),
-                };
-            } else {
-                return rgba;
-            }
-        },
-        rgb2hsv({ r, g, b }) {
-            r = r / 255;
-            g = g / 255;
-            b = b / 255;
-            const max = Math.max(r, g, b);
-            const min = Math.min(r, g, b);
-            const delta = max - min;
-            let h = 0;
-            if (max === min) {
-                h = 0;
-            } else if (max === r) {
-                if (g >= b) {
-                    h = (60 * (g - b)) / delta;
-                } else {
-                    h = (60 * (g - b)) / delta + 360;
-                }
-            } else if (max === g) {
-                h = (60 * (b - r)) / delta + 120;
-            } else if (max === b) {
-                h = (60 * (r - g)) / delta + 240;
-            }
-            h = Math.floor(h);
-            let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2));
-            let v = parseFloat(max.toFixed(2));
-            return { h, s, v };
-        },
-    },
-};