init repo

OfficeWeb/3rdparty/touch/src/chart/interactions/Abstract.js

@@ -0,0 +1,230 @@
+/**
+ * @class Ext.chart.interactions.Abstract
+ *
+ * Defines a common abstract parent class for all interactions.
+ *
+ */
+Ext.define('Ext.chart.interactions.Abstract', {
+
+    xtype: 'interaction',
+
+    mixins: {
+        observable: "Ext.mixin.Observable"
+    },
+
+    config: {
+        /**
+         * @cfg {String} gesture
+         * Specifies which gesture type should be used for starting the interaction.
+         */
+        gesture: 'tap',
+
+        /**
+         * @cfg {Ext.chart.AbstractChart} chart The chart that the interaction is bound.
+         */
+        chart: null,
+
+        /**
+         * @cfg {Boolean} enabled 'true' if the interaction is enabled.
+         */
+        enabled: true
+    },
+
+    /**
+     * Android device is emerging too many events so if we re-render every frame it will take for-ever to finish a frame.
+     * This throttle technique will limit the timespan between two frames.
+     */
+    throttleGap: 0,
+
+    stopAnimationBeforeSync: false,
+
+    constructor: function (config) {
+        var me = this;
+        me.initConfig(config);
+        Ext.ComponentManager.register(this);
+    },
+
+    /**
+     * @protected
+     * A method to be implemented by subclasses where all event attachment should occur.
+     */
+    initialize: Ext.emptyFn,
+
+    updateChart: function (newChart, oldChart) {
+        var me = this, gestures = me.getGestures();
+        if (oldChart === newChart) {
+            return;
+        }
+        if (oldChart) {
+            me.removeChartListener(oldChart);
+        }
+        if (newChart) {
+            me.addChartListener();
+        }
+    },
+
+    getGestures: function () {
+        var gestures = {};
+        gestures[this.getGesture()] = this.onGesture;
+        return gestures;
+    },
+
+    /**
+     * @protected
+     * Placeholder method.
+     */
+    onGesture: Ext.emptyFn,
+
+    /**
+     * @protected Find and return a single series item corresponding to the given event,
+     * or null if no matching item is found.
+     * @param {Event} e
+     * @return {Object} the item object or null if none found.
+     */
+    getItemForEvent: function (e) {
+        var me = this,
+            chart = me.getChart(),
+            chartXY = chart.getEventXY(e);
+        return chart.getItemForPoint(chartXY[0], chartXY[1]);
+    },
+
+    /**
+     * @protected Find and return all series items corresponding to the given event.
+     * @param {Event} e
+     * @return {Array} array of matching item objects
+     */
+    getItemsForEvent: function (e) {
+        var me = this,
+            chart = me.getChart(),
+            chartXY = chart.getEventXY(e);
+        return chart.getItemsForPoint(chartXY[0], chartXY[1]);
+    },
+
+    /**
+     * @private
+     */
+    addChartListener: function () {
+        var me = this,
+            chart = me.getChart(),
+            gestures = me.getGestures(),
+            gesture, fn;
+        me.listeners = me.listeners || {};
+
+        function insertGesture(name, fn) {
+            chart.on(
+                name,
+                // wrap the handler so it does not fire if the event is locked by another interaction
+                me.listeners[name] = function (e) {
+                    var locks = me.getLocks();
+                    if (!(name in locks) || locks[name] === me) {
+                        if (e && e.stopPropagation) {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }
+                        return (Ext.isFunction(fn) ? fn : me[fn]).apply(this, arguments);
+                    }
+                },
+                me
+            );
+        }
+
+        for (gesture in gestures) {
+            insertGesture(gesture, gestures[gesture]);
+        }
+    },
+
+    removeChartListener: function (chart) {
+        var me = this,
+            gestures = me.getGestures(),
+            gesture, fn;
+
+        function removeGesture(name) {
+            chart.un(name, me.listeners[name]);
+            delete me.listeners[name];
+        }
+
+        for (gesture in gestures) {
+            removeGesture(gesture);
+        }
+    },
+
+    lockEvents: function () {
+        var me = this,
+            locks = me.getLocks(),
+            args = Array.prototype.slice.call(arguments),
+            i = args.length;
+        while (i--) {
+            locks[args[i]] = me;
+        }
+    },
+
+    unlockEvents: function () {
+        var locks = this.getLocks(),
+            args = Array.prototype.slice.call(arguments),
+            i = args.length;
+        while (i--) {
+            delete locks[args[i]];
+        }
+    },
+
+    getLocks: function () {
+        var chart = this.getChart();
+        return chart.lockedEvents || (chart.lockedEvents = {});
+    },
+
+    isMultiTouch: function () {
+        return !(Ext.os.is.MultiTouch === false || (Ext.os.is.Android3 || Ext.os.is.Android2) || Ext.os.is.Desktop);
+    },
+
+    initializeDefaults: Ext.emptyFn,
+
+    doSync: function () {
+        var chart = this.getChart();
+        if (this.syncTimer) {
+            clearTimeout(this.syncTimer);
+            this.syncTimer = null;
+        }
+        if (this.stopAnimationBeforeSync) {
+            chart.resizing = true;
+        }
+        chart.redraw();
+        if (this.stopAnimationBeforeSync) {
+            chart.resizing = false;
+        }
+        this.syncThrottle = +new Date() + this.throttleGap;
+    },
+
+    sync: function () {
+        var me = this;
+        if (me.throttleGap && Ext.frameStartTime < me.syncThrottle) {
+            if (me.syncTimer) {
+                return;
+            }
+            me.syncTimer = setTimeout(function () {
+                me.doSync();
+            }, me.throttleGap);
+        } else {
+            me.doSync();
+        }
+    },
+
+    getItemId: function () {
+        return this.getId();
+    },
+
+    isXType: function (xtype) {
+        return xtype === 'interaction';
+    },
+
+    destroy: function () {
+        Ext.ComponentManager.unregister(this);
+        this.listeners = [];
+        this.callSuper();
+    }
+}, function () {
+    if (Ext.os.is.Android2) {
+        this.prototype.throttleGap = 20;
+    } else if (Ext.os.is.Android4) {
+        this.prototype.throttleGap = 40;
+    }
+});

OfficeWeb/3rdparty/touch/src/chart/interactions/CrossZoom.js

@@ -0,0 +1,372 @@
+/**
+ * @class Ext.chart.interactions.CrossZoom
+ * @extends Ext.chart.interactions.Abstract
+ *
+ * The CrossZoom interaction allows the user to zoom in on a selected area of the chart.
+ *
+ *     @example preview
+ *     var lineChart = new Ext.chart.CartesianChart({
+ *         interactions: [{
+ *             type: 'crosszoom'
+ *         }],
+ *         animate: true,
+ *         store: {
+ *           fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+ *           data: [
+ *               {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
+ *               {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
+ *               {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
+ *               {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
+ *               {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
+ *           ]
+ *         },
+ *         axes: [{
+ *             type: 'numeric',
+ *             position: 'left',
+ *             fields: ['data1'],
+ *             title: {
+ *                 text: 'Sample Values',
+ *                 fontSize: 15
+ *             },
+ *             grid: true,
+ *             minimum: 0
+ *         }, {
+ *             type: 'category',
+ *             position: 'bottom',
+ *             fields: ['name'],
+ *             title: {
+ *                 text: 'Sample Values',
+ *                 fontSize: 15
+ *             }
+ *         }],
+ *         series: [{
+ *             type: 'line',
+ *             highlight: {
+ *                 size: 7,
+ *                 radius: 7
+ *             },
+ *             style: {
+ *                 stroke: 'rgb(143,203,203)'
+ *             },
+ *             xField: 'name',
+ *             yField: 'data1',
+ *             marker: {
+ *                 type: 'path',
+ *                 path: ['M', -2, 0, 0, 2, 2, 0, 0, -2, 'Z'],
+ *                 stroke: 'blue',
+ *                 lineWidth: 0
+ *             }
+ *         }, {
+ *             type: 'line',
+ *             highlight: {
+ *                 size: 7,
+ *                 radius: 7
+ *             },
+ *             fill: true,
+ *             xField: 'name',
+ *             yField: 'data3',
+ *             marker: {
+ *                 type: 'circle',
+ *                 radius: 4,
+ *                 lineWidth: 0
+ *             }
+ *         }]
+ *     });
+ *     Ext.Viewport.setLayout('fit');
+ *     Ext.Viewport.add(lineChart);
+ */
+Ext.define('Ext.chart.interactions.CrossZoom', {
+
+    extend: 'Ext.chart.interactions.Abstract',
+
+    type: 'crosszoom',
+    alias: 'interaction.crosszoom',
+
+    config: {
+        /**
+         * @cfg {Object/Array} axes
+         * Specifies which axes should be made navigable. The config value can take the following formats:
+         *
+         * - An Object whose keys correspond to the {@link Ext.chart.axis.Axis#position position} of each
+         *   axis that should be made navigable. Each key's value can either be an Object with further
+         *   configuration options for each axis or simply `true` for a default set of options.
+         *       {
+         *           type: 'crosszoom',
+         *           axes: {
+         *               left: {
+         *                   maxZoom: 5,
+         *                   allowPan: false
+         *               },
+         *               bottom: true
+         *           }
+         *       }
+         *
+         *   If using the full Object form, the following options can be specified for each axis:
+         *
+         *   - minZoom (Number) A minimum zoom level for the axis. Defaults to `1` which is its natural size.
+         *   - maxZoom (Number) A maximum zoom level for the axis. Defaults to `10`.
+         *   - startZoom (Number) A starting zoom level for the axis. Defaults to `1`.
+         *   - allowZoom (Boolean) Whether zooming is allowed for the axis. Defaults to `true`.
+         *   - allowPan (Boolean) Whether panning is allowed for the axis. Defaults to `true`.
+         *   - startPan (Boolean) A starting panning offset for the axis. Defaults to `0`.
+         *
+         * - An Array of strings, each one corresponding to the {@link Ext.chart.axis.Axis#position position}
+         *   of an axis that should be made navigable. The default options will be used for each named axis.
+         *
+         *       {
+         *           type: 'crosszoom',
+         *           axes: ['left', 'bottom']
+         *       }
+         *
+         * If the `axes` config is not specified, it will default to making all axes navigable with the
+         * default axis options.
+         */
+        axes: true,
+
+        gesture: 'drag',
+
+        undoButton: {}
+    },
+
+    stopAnimationBeforeSync: false,
+
+    constructor: function () {
+        this.callSuper(arguments);
+        this.zoomHistory = [];
+    },
+
+    applyAxes: function (axesConfig) {
+        var result = {};
+        if (axesConfig === true) {
+            return {
+                top: {},
+                right: {},
+                bottom: {},
+                left: {}
+            };
+        } else if (Ext.isArray(axesConfig)) {
+            // array of axis names - translate to full object form
+            result = {};
+            Ext.each(axesConfig, function (axis) {
+                result[axis] = {};
+            });
+        } else if (Ext.isObject(axesConfig)) {
+            Ext.iterate(axesConfig, function (key, val) {
+                // axis name with `true` value -> translate to object
+                if (val === true) {
+                    result[key] = {};
+                } else if (val !== false) {
+                    result[key] = val;
+                }
+            });
+        }
+        return result;
+    },
+
+    applyUndoButton: function (button, oldButton) {
+        var me = this;
+        if (button) {
+            if (oldButton) {
+                oldButton.destroy();
+            }
+            return Ext.create('Ext.Button', Ext.apply({
+                cls: [],
+                iconCls: 'refresh',
+                text: 'Undo Zoom',
+                iconMask: true,
+                disabled: true,
+                handler: function () {
+                    me.undoZoom();
+                }
+            }, button));
+        } else if (oldButton) {
+            oldButton.destroy();
+        }
+    },
+
+    getGestures: function () {
+        var me = this,
+            gestures = {};
+        gestures[me.getGesture()] = 'onGesture';
+        gestures[me.getGesture() + 'start'] = 'onGestureStart';
+        gestures[me.getGesture() + 'end'] = 'onGestureEnd';
+        gestures.doubletap = 'onDoubleTap';
+        return gestures;
+    },
+
+    getSurface: function () {
+        return this.getChart() && this.getChart().getSurface("overlay");
+    },
+
+    onGestureStart: function (e) {
+        var me = this,
+            chart = me.getChart(),
+            region = chart.getInnerRegion(),
+            xy = chart.element.getXY(),
+            x = e.pageX - xy[0],
+            y = e.pageY - xy[1],
+            surface = this.getSurface();
+        if (region[0] < x && x < region[0] + region[2] && region[1] < y && y < region[1] + region[3]) {
+            me.lockEvents(me.getGesture());
+            me.startX = x;
+            me.startY = y;
+            me.selectionRect = surface.add({
+                type: 'rect',
+                globalAlpha: 0.3,
+                fillStyle: 'rgba(80,80,140,0.3)',
+                strokeStyle: 'rgba(80,80,140,1)',
+                lineWidth: 2,
+                x: x,
+                y: y,
+                width: 0,
+                height: 0,
+                zIndex: 1000
+            });
+        }
+    },
+
+    onGesture: function (e) {
+        var me = this;
+        if (me.getLocks()[me.getGesture()] === me) {
+            var chart = me.getChart(),
+                surface = me.getSurface(),
+                region = chart.getInnerRegion(),
+                xy = chart.element.getXY(),
+                x = e.pageX - xy[0],
+                y = e.pageY - xy[1];
+            if (x < region[0]) {
+                x = region[0];
+            } else if (x > region[0] + region[2]) {
+                x = region[0] + region[2];
+            }
+
+            if (y < region[1]) {
+                y = region[1];
+            } else if (y > region[1] + region[3]) {
+                y = region[1] + region[3];
+            }
+            me.selectionRect.setAttributes({
+                width: x - me.startX,
+                height: y - me.startY
+            });
+            if (Math.abs(me.startX - x) < 11 || Math.abs(me.startY - y) < 11) {
+                me.selectionRect.setAttributes({globalAlpha: 0.3});
+            } else {
+                me.selectionRect.setAttributes({globalAlpha: 1});
+            }
+            surface.renderFrame();
+        }
+    },
+
+    onGestureEnd: function (e) {
+        var me = this;
+        if (me.getLocks()[me.getGesture()] === me) {
+            var chart = me.getChart(),
+                surface = me.getSurface(),
+                region = chart.getInnerRegion(),
+                selectionRect = me.selectionRect,
+                xy = chart.element.getXY(),
+                x = e.pageX - xy[0],
+                y = e.pageY - xy[1];
+            if (x < region[0]) {
+                x = region[0];
+            } else if (x > region[0] + region[2]) {
+                x = region[0] + region[2];
+            }
+
+            if (y < region[1]) {
+                y = region[1];
+            } else if (y > region[1] + region[3]) {
+                y = region[1] + region[3];
+            }
+
+            if (Math.abs(me.startX - x) < 11 || Math.abs(me.startY - y) < 11) {
+                surface.remove(me.selectionRect);
+            } else {
+                me.zoomBy([
+                    (Math.min(me.startX, x) - region[0]) / region[2],
+                    1 - (Math.max(me.startY, y) - region[1]) / region[3],
+                    (Math.max(me.startX, x) - region[0]) / region[2],
+                    1 - (Math.min(me.startY, y) - region[1]) / region[3]
+                ]);
+
+                selectionRect.setAttributes({
+                    x: Math.min(me.startX, x),
+                    y: Math.min(me.startY, y),
+                    width: Math.abs(me.startX - x),
+                    height: Math.abs(me.startY - y)
+                });
+
+                selectionRect.fx.setConfig(chart.getAnimate() || {duration: 0});
+                selectionRect.setAttributes({
+                    globalAlpha: 0,
+                    x: region[0],
+                    y: region[1],
+                    width: region[2],
+                    height: region[3]
+                });
+                chart.suspendThicknessChanged();
+                selectionRect.fx.on('animationend', function () {
+                    chart.resumeThicknessChanged();
+                    surface.remove(me.selectionRect);
+                });
+            }
+
+            this.selectionRect = null;
+            surface.renderFrame();
+            me.sync();
+            me.unlockEvents(me.getGesture());
+        }
+    },
+
+    zoomBy: function (region) {
+        var me = this,
+            axisConfigs = me.getAxes(),
+            axes = me.getChart().getAxes(),
+            config,
+            zoomMap = {};
+
+        for (var i = 0; i < axes.length; i++) {
+            var axis = axes[i];
+            config = axisConfigs[axis.getPosition()];
+            if (config && config.allowZoom !== false) {
+                var isSide = axis.isSide(),
+                    oldRange = axis.getVisibleRange();
+                zoomMap[axis.getId()] = oldRange.slice(0);
+                if (!isSide) {
+                    axis.setVisibleRange([
+                        (oldRange[1] - oldRange[0]) * region[0] + oldRange[0],
+                        (oldRange[1] - oldRange[0]) * region[2] + oldRange[0]
+                    ]);
+                } else {
+                    axis.setVisibleRange([
+                        (oldRange[1] - oldRange[0]) * region[1] + oldRange[0],
+                        (oldRange[1] - oldRange[0]) * region[3] + oldRange[0]
+                    ]);
+                }
+            }
+        }
+
+        me.zoomHistory.push(zoomMap);
+        me.getUndoButton().setDisabled(false);
+    },
+
+    undoZoom: function () {
+        var zoomMap = this.zoomHistory.pop(),
+            axes = this.getChart().getAxes();
+        if (zoomMap) {
+            for (var i = 0; i < axes.length; i++) {
+                var axis = axes[i];
+                if (zoomMap[axis.getId()]) {
+                    axis.setVisibleRange(zoomMap[axis.getId()]);
+                }
+            }
+        }
+        this.getUndoButton().setDisabled(this.zoomHistory.length === 0);
+        this.sync();
+    },
+
+    onDoubleTap: function (e) {
+        this.undoZoom();
+    }
+});

OfficeWeb/3rdparty/touch/src/chart/interactions/ItemHighlight.js

@@ -0,0 +1,37 @@
+/**
+ * @class Ext.chart.interactions.ItemHighlight
+ * @extends Ext.chart.interactions.Abstract
+ * 
+ * The ItemHighlight interaction allows the user to highlight series items in the chart.
+ */
+Ext.define('Ext.chart.interactions.ItemHighlight', {
+
+    extend: 'Ext.chart.interactions.Abstract',
+
+    type: 'itemhighlight',
+    alias: 'interaction.itemhighlight',
+
+    config: {
+        /**
+         * @cfg {String} gesture
+         * Defines the gesture type that should trigger item highlighting.
+         */
+        gesture: 'tap'
+    },
+
+    getGestures: function () {
+        var gestures = {};
+        gestures.itemtap = 'onGesture';
+        gestures.tap = 'onFailedGesture';
+        return gestures;
+    },
+
+    onGesture: function (series, item, e) {
+        e.highlightItem = item;
+    },
+
+    onFailedGesture: function (e) {
+        this.getChart().setHighlightItem(e.highlightItem || null);
+        this.sync();
+    }
+});

OfficeWeb/3rdparty/touch/src/chart/interactions/ItemInfo.js

@@ -0,0 +1,106 @@
+/**
+ * The ItemInfo interaction allows displaying detailed information about a series data
+ * point in a popup panel.
+ *
+ * To attach this interaction to a chart, include an entry in the chart's
+ * {@link Ext.chart.AbstractChart#interactions interactions} config with the `iteminfo` type:
+ *
+ *     new Ext.chart.AbstractChart({
+ *         renderTo: Ext.getBody(),
+ *         width: 800,
+ *         height: 600,
+ *         store: store1,
+ *         axes: [ ...some axes options... ],
+ *         series: [ ...some series options... ],
+ *         interactions: [{
+ *             type: 'iteminfo',
+ *             listeners: {
+ *                 show: function(me, item, panel) {
+ *                     panel.setHtml('Stock Price: $' + item.record.get('price'));
+ *                 }
+ *             }
+ *         }]
+ *     });
+ */
+Ext.define('Ext.chart.interactions.ItemInfo', {
+
+    extend: 'Ext.chart.interactions.Abstract',
+
+    type: 'iteminfo',
+    alias: 'interaction.iteminfo',
+
+    /**
+     * @event show
+     * Fires when the info panel is shown.
+     * @param {Ext.chart.interactions.ItemInfo} this The interaction instance
+     * @param {Object} item The item whose info is being displayed
+     * @param {Ext.Panel} panel The panel for displaying the info
+     */
+
+    config: {
+        /**
+         * @cfg {String} gesture
+         * Defines the gesture type that should trigger the item info panel to be displayed.
+         */
+        gesture: 'itemtap',
+
+        /**
+         * @cfg {Object} panel
+         * An optional set of configuration overrides for the {@link Ext.Panel} that gets
+         * displayed. This object will be merged with the default panel configuration.
+         */
+        panel: {
+            modal: true,
+            centered: true,
+            width: 250,
+            height: 300,
+            styleHtmlContent: true,
+            scrollable: 'vertical',
+            hideOnMaskTap: true,
+            fullscreen: false,
+            hidden: true,
+            zIndex: 30,
+            items: [
+                {
+                    docked: 'top',
+                    xtype: 'toolbar',
+                    title: 'Item Detail'
+                }
+            ]
+        }
+    },
+
+    applyPanel: function (panel, oldPanel) {
+        return Ext.factory(panel, 'Ext.Panel', oldPanel);
+    },
+
+    updatePanel: function (panel, oldPanel) {
+        if (panel) {
+            panel.on('hide', "reset", this);
+        }
+        if (oldPanel) {
+            oldPanel.un('hide', "reset", this);
+        }
+    },
+
+    onGesture: function (series, item) {
+        var me = this,
+            panel = me.getPanel();
+        me.item = item;
+        me.fireEvent('show', me, item, panel);
+        Ext.Viewport.add(panel);
+        panel.show('pop');
+        series.setAttributesForItem(item, { highlighted: true });
+        me.sync();
+    },
+
+    reset: function () {
+        var me = this,
+            item = me.item;
+        if (item) {
+            item.series.setAttributesForItem(item, { highlighted: false });
+            delete me.item;
+            me.sync();
+        }
+    }
+});

OfficeWeb/3rdparty/touch/src/chart/interactions/PanZoom.js

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

OfficeWeb/3rdparty/touch/src/chart/interactions/Rotate.js

@@ -0,0 +1,101 @@
+/**
+ * @class Ext.chart.interactions.Rotate
+ * @extends Ext.chart.interactions.Abstract
+ * 
+ * The Rotate interaction allows the user to rotate a polar chart about its central point.
+ *
+ *     @example preview
+ *     var chart = new Ext.chart.PolarChart({
+ *         animate: true,
+ *         interactions: ['rotate'],
+ *         colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e"],
+ *         store: {
+ *           fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+ *           data: [
+ *               {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
+ *               {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
+ *               {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
+ *               {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
+ *               {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
+ *           ]
+ *         },
+ *         series: [{
+ *             type: 'pie',
+ *             labelField: 'name',
+ *             xField: 'data3',
+ *             donut: 30
+ *         }]
+ *     });
+ *     Ext.Viewport.setLayout('fit');
+ *     Ext.Viewport.add(chart);
+ */
+Ext.define('Ext.chart.interactions.Rotate', {
+
+    extend: 'Ext.chart.interactions.Abstract',
+
+    type: 'rotate',
+
+    alias: 'interaction.rotate',
+
+    config: {
+        /**
+         * @cfg {String} gesture
+         * Defines the gesture type that will be used to rotate the chart. Currently only
+         * supports `pinch` for two-finger rotation and `drag` for single-finger rotation.
+         */
+        gesture: 'rotate'
+    },
+
+    oldRotations: null,
+
+    getGestures: function () {
+        var gestures = {};
+        gestures.rotate = 'onRotate';
+        gestures.rotateend = 'onRotate';
+        gestures.dragstart = 'onGestureStart';
+        gestures.drag = 'onGesture';
+        gestures.dragend = 'onGesture';
+        return gestures;
+    },
+
+    getAngle: function (e) {
+        var me = this,
+            chart = me.getChart(),
+            xy = chart.getEventXY(e),
+            center = chart.getCenter();
+        return Math.atan2(xy[1] - center[1],
+            xy[0] - center[0]);
+    },
+
+    onGestureStart: function (e) {
+        this.angle = this.getAngle(e);
+        this.oldRotations = {};
+    },
+
+    onGesture: function (e) {
+        var me = this,
+            chart = me.getChart(),
+            angle = this.getAngle(e) - this.angle,
+            axes = chart.getAxes(), axis,
+            series = chart.getSeries(), seriesItem,
+            center = chart.getCenter(),
+            oldRotations = this.oldRotations,
+            oldRotation, i, ln;
+        for (i = 0, ln = axes.length; i < ln; i++) {
+            axis = axes[i];
+            oldRotation = oldRotations[axis.getId()] || (oldRotations[axis.getId()] = axis.getRotation());
+            axis.setRotation(angle + oldRotation);
+        }
+
+        for (i = 0, ln = series.length; i < ln; i++) {
+            seriesItem = series[i];
+            oldRotation = oldRotations[seriesItem.getId()] || (oldRotations[seriesItem.getId()] = seriesItem.getRotation());
+            seriesItem.setRotation(angle + oldRotation);
+        }
+        me.sync();
+    },
+
+    onRotate: function (e) {
+
+    }
+});

OfficeWeb/3rdparty/touch/src/chart/interactions/RotatePie3D.js

@@ -0,0 +1,22 @@
+/**
+ * @class Ext.chart.interactions.RotatePie3D
+ * @extends Ext.chart.interactions.Rotate
+ *
+ * A special version of the Rotate interaction used by Pie3D Chart.
+ */
+Ext.define('Ext.chart.interactions.RotatePie3D', {
+
+    extend: 'Ext.chart.interactions.Rotate',
+
+    type: 'rotatePie3d',
+
+    alias: 'interaction.rotatePie3d',
+
+    getAngle: function (e) {
+        var me = this,
+            chart = me.getChart(),
+            xy = chart.element.getXY(),
+            region = chart.getMainRegion();
+        return Math.atan2(e.pageY - xy[1] - region[3] * 0.5, e.pageX - xy[0] - region[2] * 0.5);
+    }
+});