add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / colorpick / SelectorModel.js

/**\r
 * View Model that holds the "selectedColor" of the color picker container.\r
 */\r
Ext.define('Ext.ux.colorpick.SelectorModel', {\r
    extend : 'Ext.app.ViewModel',\r
    alias  : 'viewmodel.colorpick-selectormodel',\r
\r
    requires: [\r
        'Ext.ux.colorpick.ColorUtils'\r
    ],\r
\r
    data: {\r
        selectedColor: {\r
            r : 255,  // red\r
            g : 255,  // green\r
            b : 255,  // blue\r
            h : 0,    // hue,\r
            s : 1,    // saturation\r
            v : 1,    // value\r
            a : 1     // alpha (opacity)\r
        },\r
        previousColor: {\r
            r : 0,    // red\r
            g : 0,    // green\r
            b : 0,    // blue\r
            h : 0,    // hue,\r
            s : 1,    // saturation\r
            v : 1,    // value\r
            a : 1     // alpha (opacity)\r
        }\r
    },\r
\r
    formulas: {\r
        // Hexadecimal representation of the color\r
        hex: {\r
            get: function (get) {\r
                var r = get('selectedColor.r').toString(16),\r
                    g = get('selectedColor.g').toString(16),\r
                    b = get('selectedColor.b').toString(16),\r
                    result;\r
\r
                result = Ext.ux.colorpick.ColorUtils.rgb2hex(r, g, b);\r
                return '#' + result;\r
            },\r
\r
            set: function (hex) {\r
                var rgb = Ext.ux.colorpick.ColorUtils.hex2rgb(hex);\r
                this.changeRGB(rgb);\r
            }\r
        },\r
\r
        // "R" in "RGB"\r
        red: {\r
            get: function(get) {\r
                return get('selectedColor.r');\r
            },\r
\r
            set: function(r) {\r
                this.changeRGB({ r: r });\r
            }\r
        },\r
\r
        // "G" in "RGB"\r
        green: {\r
            get: function(get) {\r
                return get('selectedColor.g');\r
            },\r
\r
            set: function(g) {\r
                this.changeRGB({ g: g });\r
            }\r
        },\r
\r
        // "B" in "RGB"\r
        blue: {\r
            get: function(get) {\r
                return get('selectedColor.b');\r
            },\r
\r
            set: function(b) {\r
                this.changeRGB({ b: b });\r
            }\r
        },\r
\r
        // "H" in HSV\r
        hue: {\r
            get: function(get) {\r
                return get('selectedColor.h') * 360;\r
            },\r
\r
            set: function(hue) {\r
                this.changeHSV({ h: hue / 360 });\r
            }\r
        },\r
\r
        // "S" in HSV\r
        saturation: {\r
            get : function(get) {\r
                return get('selectedColor.s') * 100;\r
            },\r
\r
            set: function(saturation) {\r
                this.changeHSV({ s: saturation / 100 });\r
            }\r
        },\r
\r
        // "V" in HSV\r
        value: {\r
            get: function(get) {\r
                var v = get('selectedColor.v');\r
                return v * 100;\r
            },\r
\r
            set: function(value) {\r
                this.changeHSV({ v: value / 100 });\r
            }\r
        },\r
\r
        alpha: {\r
            get: function(data) {\r
                var a = data('selectedColor.a');\r
                return a * 100;\r
            },\r
\r
            set: function(alpha) {\r
                this.set('selectedColor', Ext.applyIf({\r
                    a: alpha / 100\r
                }, this.data.selectedColor));\r
            }\r
        }\r
    }, // formulas\r
\r
    changeHSV: function (hsv) {\r
        Ext.applyIf(hsv, this.data.selectedColor);\r
\r
        var rgb = Ext.ux.colorpick.ColorUtils.hsv2rgb(hsv.h, hsv.s, hsv.v);\r
\r
        hsv.r = rgb.r;\r
        hsv.g = rgb.g;\r
        hsv.b = rgb.b;\r
\r
        this.set('selectedColor', hsv);\r
    },\r
\r
    changeRGB: function (rgb) {\r
        Ext.applyIf(rgb, this.data.selectedColor);\r
\r
        var hsv = Ext.ux.colorpick.ColorUtils.rgb2hsv(rgb.r, rgb.g, rgb.b);\r
\r
        rgb.h = hsv.h;\r
        rgb.s = hsv.s;\r
        rgb.v = hsv.v;\r
\r
        this.set('selectedColor', rgb);\r
    }\r
});\r