add extjs 6.0.1 sources

[extjs.git] / extjs / packages / charts / src / chart / interactions / Rotate.js

/**\r
 * @class Ext.chart.interactions.Rotate\r
 * @extends Ext.chart.interactions.Abstract\r
 *\r
 * The Rotate interaction allows the user to rotate a polar chart about its central point.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.Container', {\r
 *         renderTo: Ext.getBody(),\r
 *         width: 600,\r
 *         height: 400,\r
 *         layout: 'fit',\r
 *         items: {\r
 *             xtype: 'polar',\r
 *             interactions: 'rotate',\r
 *             colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e"],\r
 *             store: {\r
 *                 fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\r
 *                 data: [\r
 *                     {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},\r
 *                     {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},\r
 *                     {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},\r
 *                     {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},\r
 *                     {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}\r
 *                 ]\r
 *             },\r
 *             series: {\r
 *                 type: 'pie',\r
 *                 label: {\r
 *                     field: 'name',\r
 *                     display: 'rotate'\r
 *                 },\r
 *                 xField: 'data3',\r
 *                 donut: 30\r
 *             }\r
 *         }\r
 *     });\r
 */\r
Ext.define('Ext.chart.interactions.Rotate', {\r
    extend: 'Ext.chart.interactions.Abstract',\r
\r
    type: 'rotate',\r
\r
    alias: 'interaction.rotate',\r
\r
    /**\r
     * @event rotate\r
     * Fires on every tick of the rotation\r
     * @param {Ext.chart.interactions.Rotate} this This interaction.\r
     * @param {Number} angle The new current rotation angle.\r
     */\r
\r
    /**\r
     * @event rotationEnd\r
     * Fires after a user finishes the rotation\r
     * @param {Ext.chart.interactions.Rotate} this This interaction.\r
     * @param {Number} angle The new current rotation angle.\r
     */\r
\r
    config: {\r
        /**\r
         * @cfg {String} gesture\r
         * Defines the gesture type that will be used to rotate the chart. Currently only\r
         * supports `pinch` for two-finger rotation and `drag` for single-finger rotation.\r
         * @private\r
         */\r
        gesture: 'rotate',\r
\r
        gestures: {\r
            rotate: 'onRotate',\r
            rotateend: 'onRotate',\r
            dragstart: 'onGestureStart',\r
            drag: 'onGesture',\r
            dragend: 'onGestureEnd'\r
        },\r
\r
        /**\r
         * @cfg {Number} rotation\r
         * Saves the current rotation of the series. Accepts negative values and values > 360 ( / 180 * Math.PI)\r
         * @private\r
         */\r
        rotation: 0\r
    },\r
\r
    oldRotations: null,\r
\r
    getAngle: function(e) {\r
        var me = this,\r
            chart = me.getChart(),\r
            xy = chart.getEventXY(e),\r
            center = chart.getCenter();\r
\r
        return Math.atan2(\r
            xy[1] - center[1],\r
            xy[0] - center[0]\r
        );\r
    },\r
\r
    getRadius: function (e) {\r
        return this.getChart().getRadius();\r
    },\r
\r
    getEventRadius: function(e) {\r
        var me = this,\r
            chart = me.getChart(),\r
            xy = chart.getEventXY(e),\r
            center = chart.getCenter(),\r
            dx = xy[0] - center[0],\r
            dy = xy[1] - center[1];\r
\r
        return Math.sqrt(dx * dx + dy * dy);\r
    },\r
\r
    onGestureStart: function(e) {\r
        var me = this,\r
            radius = me.getRadius(e),\r
            eventRadius = me.getEventRadius(e);\r
\r
        if (radius >= eventRadius) {\r
            me.lockEvents('drag');\r
            me.angle = me.getAngle(e);\r
            me.oldRotations = {};\r
            return false;\r
        }\r
    },\r
\r
    onGesture: function(e) {\r
        var me = this,\r
            angle = me.getAngle(e) - me.angle;\r
\r
        if (me.getLocks().drag === me) {\r
            me.doRotateTo(angle, true);\r
            return false;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doRotateTo: function(angle, relative, animate) {\r
        var me = this,\r
            chart = me.getChart(),\r
            axes = chart.getAxes(),\r
            series = chart.getSeries(),\r
            oldRotations = me.oldRotations,\r
            axis, seriesItem, oldRotation,\r
            i, ln;\r
\r
        if (!animate) {\r
            chart.suspendAnimation();\r
        }\r
\r
        for (i = 0, ln = axes.length; i < ln; i++) {\r
            axis = axes[i];\r
            oldRotation = oldRotations[axis.getId()] || (oldRotations[axis.getId()] = axis.getRotation());\r
            axis.setRotation( angle + (relative ? oldRotation : 0) );\r
        }\r
\r
        for (i = 0, ln = series.length; i < ln; i++) {\r
            seriesItem = series[i];\r
            oldRotation = oldRotations[seriesItem.getId()] || (oldRotations[seriesItem.getId()] = seriesItem.getRotation());\r
            seriesItem.setRotation( angle + (relative ? oldRotation : 0) );\r
        }\r
\r
        me.setRotation(angle + (relative ? oldRotation : 0));\r
\r
        me.fireEvent('rotate', me, me.getRotation());\r
\r
        me.sync();\r
        if (!animate) {\r
            chart.resumeAnimation();\r
        }\r
    },\r
\r
    /**\r
     * Rotates a polar chart about its center point to the specified angle.\r
     * @param {Number} angle The angle to rotate to.\r
     * @param {Boolean} [relative=false] Whether the rotation is relative to the current angle or not.\r
     * @param {Boolean} [animate=false] Whether to animate the rotation or not.\r
     */\r
    rotateTo: function (angle, relative, animate) {\r
        this.doRotateTo(angle, relative, animate);\r
        this.oldRotations = {};\r
    },\r
\r
    onGestureEnd: function(e) {\r
        var me = this;\r
        if (me.getLocks().drag === me) {\r
            me.onGesture(e);\r
            me.unlockEvents('drag');\r
\r
            me.fireEvent('rotationEnd', me, me.getRotation());\r
\r
            return false;\r
        }\r
    },\r
\r
    onRotate: function(e) {\r
\r
    }\r
});\r