add extjs 6.0.1 sources

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

/**\r
 * The PanZoom interaction allows the user to navigate the data for one or more chart\r
 * axes by panning and/or zooming. Navigation can be limited to particular axes. Zooming is\r
 * performed by pinching on the chart or axis area; panning is performed by single-touch dragging.\r
 *\r
 * For devices which do not support multiple-touch events, zooming can not be done via pinch gestures; in this case the\r
 * interaction will allow the user to perform both zooming and panning using the same single-touch drag gesture.\r
 * {@link #modeToggleButton} provides a button to indicate and toggle between two modes.\r
 *\r
 *     @example\r
 *     Ext.create({\r
 *         renderTo: document.body,\r
 *         xtype: 'cartesian',\r
 *         width: 600,\r
 *         height: 400,\r
 *         insetPadding: 40,            \r
 *         interactions: [{\r
 *             type: 'panzoom',\r
 *             zoomOnPanGesture: true\r
 *         }],\r
 *         store: {\r
 *             fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\r
 *             data: [{\r
 *                 'name': 'metric one',\r
 *                 'data1': 10,\r
 *                 'data2': 12,\r
 *                 'data3': 14,\r
 *                 'data4': 8,\r
 *                 'data5': 13\r
 *             }, {\r
 *                 'name': 'metric two',\r
 *                 'data1': 7,\r
 *                 'data2': 8,\r
 *                 'data3': 16,\r
 *                 'data4': 10,\r
 *                 'data5': 3\r
 *             }, {\r
 *                 'name': 'metric three',\r
 *                 'data1': 5,\r
 *                 'data2': 2,\r
 *                 'data3': 14,\r
 *                 'data4': 12,\r
 *                 'data5': 7\r
 *             }, {\r
 *                 'name': 'metric four',\r
 *                 'data1': 2,\r
 *                 'data2': 14,\r
 *                 'data3': 6,\r
 *                 'data4': 1,\r
 *                 'data5': 23\r
 *             }, {\r
 *                 'name': 'metric five',\r
 *                 'data1': 27,\r
 *                 'data2': 38,\r
 *                 'data3': 36,\r
 *                 'data4': 13,\r
 *                 'data5': 33\r
 *             }]\r
 *         },\r
 *         axes: [{\r
 *             type: 'numeric',\r
 *             position: 'left',\r
 *             fields: ['data1'],\r
 *             title: {\r
 *                 text: 'Sample Values',\r
 *                 fontSize: 15\r
 *             },\r
 *             grid: true,\r
 *             minimum: 0\r
 *         }, {\r
 *             type: 'category',\r
 *             position: 'bottom',\r
 *             fields: ['name'],\r
 *             title: {\r
 *                 text: 'Sample Values',\r
 *                 fontSize: 15\r
 *             }\r
 *         }],\r
 *         series: [{\r
 *             type: 'line',\r
 *             highlight: {\r
 *                 size: 7,\r
 *                 radius: 7\r
 *             },\r
 *             style: {\r
 *                 stroke: 'rgb(143,203,203)'\r
 *             },\r
 *             xField: 'name',\r
 *             yField: 'data1',\r
 *             marker: {\r
 *                 type: 'path',\r
 *                 path: ['M', - 2, 0, 0, 2, 2, 0, 0, - 2, 'Z'],\r
 *                 stroke: 'blue',\r
 *                 lineWidth: 0\r
 *             }\r
 *         }, {\r
 *             type: 'line',\r
 *             highlight: {\r
 *                 size: 7,\r
 *                 radius: 7\r
 *             },\r
 *             fill: true,\r
 *             xField: 'name',\r
 *             yField: 'data3',\r
 *             marker: {\r
 *                 type: 'circle',\r
 *                 radius: 4,\r
 *                 lineWidth: 0\r
 *             }\r
 *         }]\r
 *     });\r
 * \r
 * The configuration object for the `panzoom` interaction type should specify which axes\r
 * will be made navigable via the `axes` config. See the {@link #axes} config documentation\r
 * for details on the allowed formats. If the `axes` config is not specified, it will default\r
 * to making all axes navigable with the default axis options.\r
 *\r
 */\r
Ext.define('Ext.chart.interactions.PanZoom', {\r
\r
    extend: 'Ext.chart.interactions.Abstract',\r
\r
    type: 'panzoom',\r
    alias: 'interaction.panzoom',\r
    requires: [\r
        'Ext.draw.Animator'\r
    ],\r
\r
    config: {\r
\r
        /**\r
         * @cfg {Object/Array} axes\r
         * Specifies which axes should be made navigable. The config value can take the following formats:\r
         *\r
         * - An Object with keys corresponding to the {@link Ext.chart.axis.Axis#position position} of each\r
         *   axis that should be made navigable. Each key's value can either be an Object with further\r
         *   configuration options for each axis or simply `true` for a default set of options.\r
         *\r
         *       {\r
         *           type: 'panzoom',\r
         *           axes: {\r
         *               left: {\r
         *                   maxZoom: 5,\r
         *                   allowPan: false\r
         *               },\r
         *               bottom: true\r
         *           }\r
         *       }\r
         *\r
         *   If using the full Object form, the following options can be specified for each axis:\r
         *\r
         *   - minZoom (Number) A minimum zoom level for the axis. Defaults to `1` which is its natural size.\r
         *   - maxZoom (Number) A maximum zoom level for the axis. Defaults to `10`.\r
         *   - startZoom (Number) A starting zoom level for the axis. Defaults to `1`.\r
         *   - allowZoom (Boolean) Whether zooming is allowed for the axis. Defaults to `true`.\r
         *   - allowPan (Boolean) Whether panning is allowed for the axis. Defaults to `true`.\r
         *   - startPan (Boolean) A starting panning offset for the axis. Defaults to `0`.\r
         *\r
         * - An Array of strings, each one corresponding to the {@link Ext.chart.axis.Axis#position position}\r
         *   of an axis that should be made navigable. The default options will be used for each named axis.\r
         *\r
         *       {\r
         *           type: 'panzoom',\r
         *           axes: ['left', 'bottom']\r
         *       }\r
         *\r
         * If the `axes` config is not specified, it will default to making all axes navigable with the\r
         * default axis options.\r
         */\r
        axes: {\r
            top: {},\r
            right: {},\r
            bottom: {},\r
            left: {}\r
        },\r
\r
        minZoom: null,\r
\r
        maxZoom: null,\r
\r
        /**\r
         * @cfg {Boolean} showOverflowArrows\r
         * If `true`, arrows will be conditionally shown at either end of each axis to indicate that the\r
         * axis is overflowing and can therefore be panned in that direction. Set this to `false` to\r
         * prevent the arrows from being displayed.\r
         */\r
        showOverflowArrows: true,\r
\r
        /**\r
         * @cfg {Object} overflowArrowOptions\r
         * A set of optional overrides for the overflow arrow sprites' options. Only relevant when\r
         * {@link #showOverflowArrows} is `true`.\r
         */\r
\r
        /**\r
         * @cfg {String} panGesture\r
         * Defines the gesture that initiates panning.\r
         * @private\r
         */\r
        panGesture: 'drag',\r
\r
        /**\r
         * @cfg {String} zoomGesture\r
         * Defines the gesture that initiates zooming.\r
         * @private\r
         */\r
        zoomGesture: 'pinch',\r
\r
        /**\r
         * @cfg {Boolean} zoomOnPanGesture\r
         * If `true`, the pan gesture will zoom the chart. Ignored on touch devices.\r
         */\r
        zoomOnPanGesture: false,\r
\r
        modeToggleButton: {\r
            xtype: 'segmentedbutton',\r
            width: 200,\r
            defaults: { ui: 'default-toolbar' },\r
            cls: Ext.baseCSSPrefix + 'panzoom-toggle',\r
            items: [{\r
                text: 'Pan'\r
            }, {\r
                text: 'Zoom'\r
            }]\r
        },\r
\r
        hideLabelInGesture: false // Ext.os.is.Android\r
    },\r
\r
    stopAnimationBeforeSync: true,\r
\r
    applyAxes: function (axesConfig, oldAxesConfig) {\r
        return Ext.merge(oldAxesConfig || {}, axesConfig);\r
    },\r
\r
    applyZoomOnPanGesture: function (zoomOnPanGesture) {\r
        this.getChart();\r
        if (this.isMultiTouch()) {\r
            return false;\r
        }\r
        return zoomOnPanGesture;\r
    },\r
\r
    updateZoomOnPanGesture: function (zoomOnPanGesture) {\r
        var button = this.getModeToggleButton();\r
        if (!this.isMultiTouch()) {\r
            button.show();\r
            button.setValue(zoomOnPanGesture ? 1 : 0);\r
        } else {\r
            button.hide();\r
        }\r
    },\r
\r
    toggleMode: function () {\r
        var me = this;\r
        if (!me.isMultiTouch()) {\r
            me.setZoomOnPanGesture(!me.getZoomOnPanGesture());\r
        }\r
    },\r
\r
    applyModeToggleButton: function (button, oldButton) {\r
        var me = this,\r
            result = Ext.factory(button, 'Ext.button.Segmented', oldButton);\r
\r
        if (!result && oldButton) {\r
            oldButton.destroy();\r
        }\r
        if (result && !oldButton) {\r
            result.addListener('toggle', function (segmentedButton) {\r
                me.setZoomOnPanGesture(segmentedButton.getValue() === 1);\r
            });\r
        }\r
        return result;\r
    },\r
\r
    getGestures: function () {\r
        var me = this,\r
            gestures = {},\r
            pan = me.getPanGesture(),\r
            zoom = me.getZoomGesture(),\r
            isTouch = Ext.supports.Touch;\r
\r
        gestures[zoom] = 'onZoomGestureMove';\r
        gestures[zoom + 'start'] = 'onZoomGestureStart';\r
        gestures[zoom + 'end'] = 'onZoomGestureEnd';\r
        gestures[pan] = 'onPanGestureMove';\r
        gestures[pan + 'start'] = 'onPanGestureStart';\r
        gestures[pan + 'end'] = 'onPanGestureEnd';\r
        gestures.doubletap = 'onDoubleTap';\r
        return gestures;\r
    },\r
\r
    onDoubleTap: function (e) {\r
        var me = this,\r
            chart = me.getChart(),\r
            axes = chart.getAxes(),\r
            axis, i, ln;\r
\r
        for (i = 0, ln = axes.length; i < ln; i++) {\r
            axis = axes[i];\r
            axis.setVisibleRange([0, 1]);\r
        }\r
        chart.redraw();\r
    },\r
\r
    onPanGestureStart: function (e) {\r
        if (!e || !e.touches || e.touches.length < 2) { //Limit drags to single touch\r
            var me = this,\r
                rect = me.getChart().getInnerRect(),\r
                xy = me.getChart().element.getXY();\r
            me.startX = e.getX() - xy[0] - rect[0];\r
            me.startY = e.getY() - xy[1] - rect[1];\r
            me.oldVisibleRanges = null;\r
            me.hideLabels();\r
            me.getChart().suspendThicknessChanged();\r
            me.lockEvents(me.getPanGesture());\r
            return false;\r
        }\r
    },\r
\r
    onPanGestureMove: function (e) {\r
        var me = this;\r
        if (me.getLocks()[me.getPanGesture()] === me) { // Limit drags to single touch.\r
            var rect = me.getChart().getInnerRect(),\r
                xy = me.getChart().element.getXY();\r
            if (me.getZoomOnPanGesture()) {\r
                me.transformAxesBy(me.getZoomableAxes(e), 0, 0, (e.getX() - xy[0] - rect[0]) / me.startX, me.startY / (e.getY() - xy[1] - rect[1]));\r
            } else {\r
                me.transformAxesBy(me.getPannableAxes(e), e.getX() - xy[0] - rect[0] - me.startX, e.getY() - xy[1] - rect[1] - me.startY, 1, 1);\r
            }\r
            me.sync();\r
            return false;\r
        }\r
    },\r
\r
    onPanGestureEnd: function (e) {\r
        var me = this,\r
            pan = me.getPanGesture();\r
\r
        if (me.getLocks()[pan] === me) {\r
            me.getChart().resumeThicknessChanged();\r
            me.showLabels();\r
            me.sync();\r
            me.unlockEvents(pan);\r
            return false;\r
        }\r
    },\r
\r
    onZoomGestureStart: function (e) {\r
        if (e.touches && e.touches.length === 2) {\r
            var me = this,\r
                xy = me.getChart().element.getXY(),\r
                rect = me.getChart().getInnerRect(),\r
                x = xy[0] + rect[0],\r
                y = xy[1] + rect[1],\r
                newPoints = [e.touches[0].point.x - x, e.touches[0].point.y - y, e.touches[1].point.x - x, e.touches[1].point.y - y],\r
                xDistance = Math.max(44, Math.abs(newPoints[2] - newPoints[0])),\r
                yDistance = Math.max(44, Math.abs(newPoints[3] - newPoints[1]));\r
            me.getChart().suspendThicknessChanged();\r
            me.lastZoomDistances = [xDistance, yDistance];\r
            me.lastPoints = newPoints;\r
            me.oldVisibleRanges = null;\r
            me.hideLabels();\r
            me.lockEvents(me.getZoomGesture());\r
            return false;\r
        }\r
    },\r
\r
    onZoomGestureMove: function (e) {\r
        var me = this;\r
        if (me.getLocks()[me.getZoomGesture()] === me) {\r
            var rect = me.getChart().getInnerRect(),\r
                xy = me.getChart().element.getXY(),\r
                x = xy[0] + rect[0],\r
                y = xy[1] + rect[1],\r
                abs = Math.abs,\r
                lastPoints = me.lastPoints,\r
                newPoints = [e.touches[0].point.x - x, e.touches[0].point.y - y, e.touches[1].point.x - x, e.touches[1].point.y - y],\r
                xDistance = Math.max(44, abs(newPoints[2] - newPoints[0])),\r
                yDistance = Math.max(44, abs(newPoints[3] - newPoints[1])),\r
                lastDistances = this.lastZoomDistances || [xDistance, yDistance],\r
                zoomX = xDistance / lastDistances[0],\r
                zoomY = yDistance / lastDistances[1];\r
\r
            me.transformAxesBy(me.getZoomableAxes(e),\r
                rect[2] * (zoomX - 1) / 2 + newPoints[2] - lastPoints[2] * zoomX,\r
                rect[3] * (zoomY - 1) / 2 + newPoints[3] - lastPoints[3] * zoomY,\r
                zoomX,\r
                zoomY);\r
            me.sync();\r
            return false;\r
        }\r
    },\r
\r
    onZoomGestureEnd: function (e) {\r
        var me = this,\r
            zoom = me.getZoomGesture();\r
\r
        if (me.getLocks()[zoom] === me) {\r
            me.getChart().resumeThicknessChanged();\r
            me.showLabels();\r
            me.sync();\r
            me.unlockEvents(zoom);\r
            return false;\r
        }\r
    },\r
\r
    hideLabels: function () {\r
        if (this.getHideLabelInGesture()) {\r
            this.eachInteractiveAxes(function (axis) {\r
                axis.hideLabels();\r
            });\r
        }\r
    },\r
\r
    showLabels: function () {\r
        if (this.getHideLabelInGesture()) {\r
            this.eachInteractiveAxes(function (axis) {\r
                axis.showLabels();\r
            });\r
        }\r
    },\r
\r
    isEventOnAxis: function (e, axis) {\r
        // TODO: right now this uses the current event position but really we want to only\r
        // use the gesture's start event. Pinch does not give that to us though.\r
        var rect = axis.getSurface().getRect();\r
        return rect[0] <= e.getX() && e.getX() <= rect[0] + rect[2] && rect[1] <= e.getY() && e.getY() <= rect[1] + rect[3];\r
    },\r
\r
    getPannableAxes: function (e) {\r
        var me = this,\r
            axisConfigs = me.getAxes(),\r
            axes = me.getChart().getAxes(),\r
            i, ln = axes.length,\r
            result = [], isEventOnAxis = false,\r
            config;\r
\r
        if (e) {\r
            for (i = 0; i < ln; i++) {\r
                if (this.isEventOnAxis(e, axes[i])) {\r
                    isEventOnAxis = true;\r
                    break;\r
                }\r
            }\r
        }\r
\r
        for (i = 0; i < ln; i++) {\r
            config = axisConfigs[axes[i].getPosition()];\r
            if (config && config.allowPan !== false && (!isEventOnAxis || this.isEventOnAxis(e, axes[i]))) {\r
                result.push(axes[i]);\r
            }\r
        }\r
        return result;\r
    },\r
\r
    getZoomableAxes: function (e) {\r
        var me = this,\r
            axisConfigs = me.getAxes(),\r
            axes = me.getChart().getAxes(),\r
            result = [],\r
            i, ln = axes.length, axis,\r
            isEventOnAxis = false, config;\r
\r
        if (e) {\r
            for (i = 0; i < ln; i++) {\r
                if (this.isEventOnAxis(e, axes[i])) {\r
                    isEventOnAxis = true;\r
                    break;\r
                }\r
            }\r
        }\r
\r
        for (i = 0; i < ln; i++) {\r
            axis = axes[i];\r
            config = axisConfigs[axis.getPosition()];\r
            if (config && config.allowZoom !== false && (!isEventOnAxis || this.isEventOnAxis(e, axis))) {\r
                result.push(axis);\r
            }\r
        }\r
        return result;\r
    },\r
\r
    eachInteractiveAxes: function (fn) {\r
        var me = this,\r
            axisConfigs = me.getAxes(),\r
            axes = me.getChart().getAxes();\r
        for (var i = 0; i < axes.length; i++) {\r
            if (axisConfigs[axes[i].getPosition()]) {\r
                if (false === fn.call(this, axes[i])) {\r
                    return;\r
                }\r
            }\r
        }\r
    },\r
\r
    transformAxesBy: function (axes, panX, panY, sx, sy) {\r
        var rect = this.getChart().getInnerRect(),\r
            axesCfg = this.getAxes(), axisCfg,\r
            oldVisibleRanges = this.oldVisibleRanges,\r
            result = false;\r
\r
        if (!oldVisibleRanges) {\r
            this.oldVisibleRanges = oldVisibleRanges = {};\r
            this.eachInteractiveAxes(function (axis) {\r
                oldVisibleRanges[axis.getId()] = axis.getVisibleRange();\r
            });\r
        }\r
\r
        if (!rect) {\r
            return;\r
        }\r
\r
        for (var i = 0; i < axes.length; i++) {\r
            axisCfg = axesCfg[axes[i].getPosition()];\r
            result = this.transformAxisBy(axes[i], oldVisibleRanges[axes[i].getId()], panX, panY, sx, sy, this.minZoom || axisCfg.minZoom, this.maxZoom || axisCfg.maxZoom) || result;\r
        }\r
        return result;\r
    },\r
\r
    transformAxisBy: function (axis, oldVisibleRange, panX, panY, sx, sy, minZoom, maxZoom) {\r
        var me = this,\r
            visibleLength = oldVisibleRange[1] - oldVisibleRange[0],\r
            visibleRange = axis.getVisibleRange(),\r
            actualMinZoom =  minZoom || me.getMinZoom() || axis.config.minZoom,\r
            actualMaxZoom =  maxZoom || me.getMaxZoom() || axis.config.maxZoom,\r
            rect = me.getChart().getInnerRect(),\r
            left, right;\r
        if (!rect) {\r
            return;\r
        }\r
\r
        var isSide = axis.isSide(),\r
            length = isSide ? rect[3] : rect[2],\r
            pan = isSide ? -panY : panX;\r
        visibleLength /= isSide ? sy : sx;\r
        if (visibleLength < 0) {\r
            visibleLength = -visibleLength;\r
        }\r
\r
        if (visibleLength * actualMinZoom > 1) {\r
            visibleLength = 1;\r
        }\r
\r
        if (visibleLength * actualMaxZoom < 1) {\r
            visibleLength = 1 / actualMaxZoom;\r
        }\r
        left = oldVisibleRange[0];\r
        right = oldVisibleRange[1];\r
\r
        visibleRange = visibleRange[1] - visibleRange[0];\r
        if (visibleLength === visibleRange && visibleRange === 1) {\r
            return;\r
        }\r
        axis.setVisibleRange([\r
            (oldVisibleRange[0] + oldVisibleRange[1] - visibleLength) * 0.5 - pan / length * visibleLength,\r
            (oldVisibleRange[0] + oldVisibleRange[1] + visibleLength) * 0.5 - pan / length * visibleLength\r
        ]);\r
        return (Math.abs(left - axis.getVisibleRange()[0]) > 1e-10 || Math.abs(right - axis.getVisibleRange()[1]) > 1e-10);\r
    },\r
\r
    destroy: function () {\r
        this.setModeToggleButton(null);\r
        this.callParent();\r
    }\r
\r
});\r