add extjs 6.0.1 sources

[extjs.git] / extjs / packages / charts / src / draw / gradient / Radial.js

/**\r
 * Radial gradient.\r
 *\r
 *     @example\r
 *     Ext.create({\r
 *        xtype: 'draw', \r
 *        renderTo: document.body,\r
 *        width: 600,\r
 *        height: 400,\r
 *        sprites: [{\r
 *            type: 'circle',\r
 *            cx: 100,\r
 *            cy: 100,\r
 *            r: 100,\r
 *            fillStyle: {\r
 *                type: 'radial',\r
 *                start: {\r
 *                    x: 0,\r
 *                    y: 0,\r
 *                    r: 0\r
 *                },\r
 *                end: {\r
 *                    x: 0,\r
 *                    y: 0,\r
 *                    r: 1\r
 *                },\r
 *                stops: [{\r
 *                    offset: 0,\r
 *                    color: '#90BCC9'\r
 *                }, {\r
 *                    offset: 1,\r
 *                    color: '#1F6D91'\r
 *                }]\r
 *            }\r
 *        }]\r
 *     });\r
 */\r
Ext.define('Ext.draw.gradient.Radial', {\r
    extend: 'Ext.draw.gradient.Gradient',\r
    type: 'radial',\r
    config: {\r
        /**\r
         * @cfg {Object} start The starting circle of the gradient.\r
         */\r
        start: {\r
            x: 0,\r
            y: 0,\r
            r: 0\r
        },\r
        /**\r
         * @cfg {Object} end The ending circle of the gradient.\r
         */\r
        end: {\r
            x: 0,\r
            y: 0,\r
            r: 1\r
        }\r
    },\r
\r
    applyStart: function (newStart, oldStart) {\r
        if (!oldStart) {\r
            return newStart;\r
        }\r
        var circle = {\r
            x: oldStart.x,\r
            y: oldStart.y,\r
            r: oldStart.r\r
        };\r
\r
        if ('x' in newStart) {\r
            circle.x = newStart.x;\r
        } else if ('centerX' in newStart) {\r
            circle.x = newStart.centerX;\r
        }\r
\r
        if ('y' in newStart) {\r
            circle.y = newStart.y;\r
        } else if ('centerY' in newStart) {\r
            circle.y = newStart.centerY;\r
        }\r
\r
        if ('r' in newStart) {\r
            circle.r = newStart.r;\r
        } else if ('radius' in newStart) {\r
            circle.r = newStart.radius;\r
        }\r
        return circle;\r
    },\r
\r
    applyEnd: function (newEnd, oldEnd) {\r
        if (!oldEnd) {\r
            return newEnd;\r
        }\r
        var circle = {\r
            x: oldEnd.x,\r
            y: oldEnd.y,\r
            r: oldEnd.r\r
        };\r
\r
        if ('x' in newEnd) {\r
            circle.x = newEnd.x;\r
        } else if ('centerX' in newEnd) {\r
            circle.x = newEnd.centerX;\r
        }\r
\r
        if ('y' in newEnd) {\r
            circle.y = newEnd.y;\r
        } else if ('centerY' in newEnd) {\r
            circle.y = newEnd.centerY;\r
        }\r
\r
        if ('r' in newEnd) {\r
            circle.r = newEnd.r;\r
        } else if ('radius' in newEnd) {\r
            circle.r = newEnd.radius;\r
        }\r
        return circle;\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     */\r
    generateGradient: function (ctx, bbox) {\r
        var start = this.getStart(),\r
            end = this.getEnd(),\r
            w = bbox.width * 0.5,\r
            h = bbox.height * 0.5,\r
            x = bbox.x + w,\r
            y = bbox.y + h,\r
            gradient = ctx.createRadialGradient(\r
                x + start.x * w, y + start.y * h, start.r * Math.max(w, h),\r
                x + end.x * w, y + end.y * h, end.r * Math.max(w, h)\r
            ),\r
            stops = this.getStops(),\r
            ln = stops.length,\r
            i;\r
\r
        for (i = 0; i < ln; i++) {\r
            gradient.addColorStop(stops[i].offset, stops[i].color);\r
        }\r
        return gradient;\r
    }\r
});