extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/chart/LegendItem.js

@@ -1,217 +0,0 @@
-/**
- * @class Ext.chart.LegendItem
- * A single item of a legend (marker plus label)
- */
-Ext.define('Ext.chart.LegendItem', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.draw.CompositeSprite',
-
-    requires: ['Ext.chart.Shape'],
-
-    /* End Definitions */
-
-    // Position of the item, relative to the upper-left corner of the legend box
-    x: 0,
-    y: 0,
-    zIndex: 500,
-
-    // checks to make sure that a unit size follows the bold keyword in the font style value
-    boldRe: /bold\s\d{1,}.*/i,
-
-    constructor: function(config) {
-        this.callParent(arguments);
-        this.createLegend(config);
-    },
-
-    /**
-     * Creates all the individual sprites for this legend item
-     */
-    createLegend: function(config) {
-        var me = this,
-            index = config.yFieldIndex,
-            series = me.series,
-            seriesType = series.type,
-            idx = me.yFieldIndex,
-            legend = me.legend,
-            surface = me.surface,
-            refX = legend.x + me.x,
-            refY = legend.y + me.y,
-            bbox, z = me.zIndex,
-            markerConfig, label, mask,
-            radius, toggle = false,
-            seriesStyle = Ext.apply(series.seriesStyle, series.style);
-
-        function getSeriesProp(name) {
-            var val = series[name];
-            return (Ext.isArray(val) ? val[idx] : val);
-        }
-        
-        label = me.add('label', surface.add({
-            type: 'text',
-            x: 20,
-            y: 0,
-            zIndex: (z || 0) + 2,
-            fill: legend.labelColor,
-            font: legend.labelFont,
-            text: getSeriesProp('title') || getSeriesProp('yField'),
-            style: {
-                'cursor': 'pointer'
-            }
-        }));
-
-        // Line series - display as short line with optional marker in the middle
-        if (seriesType === 'line' || seriesType === 'scatter') {
-            if(seriesType === 'line') {
-                me.add('line', surface.add({
-                    type: 'path',
-                    path: 'M0.5,0.5L16.5,0.5',
-                    zIndex: (z || 0) + 2,
-                    "stroke-width": series.lineWidth,
-                    "stroke-linejoin": "round",
-                    "stroke-dasharray": series.dash,
-                    stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
-                    style: {
-                        cursor: 'pointer'
-                    }
-                }));
-            }
-            if (series.showMarkers || seriesType === 'scatter') {
-                markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
-                    fill: series.getLegendColor(index)
-                });
-                me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
-                    fill: markerConfig.fill,
-                    x: 8.5,
-                    y: 0.5,
-                    zIndex: (z || 0) + 2,
-                    radius: markerConfig.radius || markerConfig.size,
-                    style: {
-                        cursor: 'pointer'
-                    }
-                }));
-            }
-        }
-        // All other series types - display as filled box
-        else {
-            me.add('box', surface.add({
-                type: 'rect',
-                zIndex: (z || 0) + 2,
-                x: 0,
-                y: 0,
-                width: 12,
-                height: 12,
-                fill: series.getLegendColor(index),
-                style: {
-                    cursor: 'pointer'
-                }
-            }));
-        }
-        
-        me.setAttributes({
-            hidden: false
-        }, true);
-        
-        bbox = me.getBBox();
-        
-        mask = me.add('mask', surface.add({
-            type: 'rect',
-            x: bbox.x,
-            y: bbox.y,
-            width: bbox.width || 20,
-            height: bbox.height || 20,
-            zIndex: (z || 0) + 1,
-            fill: me.legend.boxFill,
-            style: {
-                'cursor': 'pointer'
-            }
-        }));
-
-        //add toggle listener
-        me.on('mouseover', function() {
-            label.setStyle({
-                'font-weight': 'bold'
-            });
-            mask.setStyle({
-                'cursor': 'pointer'
-            });
-            series._index = index;
-            series.highlightItem();
-        }, me);
-
-        me.on('mouseout', function() {
-            label.setStyle({
-                'font-weight': legend.labelFont && me.boldRe.test(legend.labelFont) ? 'bold' : 'normal'
-            });
-            series._index = index;
-            series.unHighlightItem();
-        }, me);
-        
-        if (!series.visibleInLegend(index)) {
-            toggle = true;
-            label.setAttributes({
-               opacity: 0.5
-            }, true);
-        }
-
-        me.on('mousedown', function() {
-            if (!toggle) {
-                series.hideAll(index);
-                label.setAttributes({
-                    opacity: 0.5
-                }, true);
-            } else {
-                series.showAll(index);
-                label.setAttributes({
-                    opacity: 1
-                }, true);
-            }
-            toggle = !toggle;
-        }, me);
-        me.updatePosition({x:0, y:0}); //Relative to 0,0 at first so that the bbox is calculated correctly
-    },
-
-    /**
-     * Update the positions of all this item's sprites to match the root position
-     * of the legend box.
-     * @param {Object} relativeTo (optional) If specified, this object's 'x' and 'y' values will be used
-     *                 as the reference point for the relative positioning. Defaults to the Legend.
-     */
-    updatePosition: function(relativeTo) {
-        var me = this,
-            items = me.items,
-            ln = items.length,
-            i = 0,
-            item;
-        if (!relativeTo) {
-            relativeTo = me.legend;
-        }
-        for (; i < ln; i++) {
-            item = items[i];
-            switch (item.type) {
-                case 'text':
-                    item.setAttributes({
-                        x: 20 + relativeTo.x + me.x,
-                        y: relativeTo.y + me.y
-                    }, true);
-                    break;
-                case 'rect':
-                    item.setAttributes({
-                        translate: {
-                            x: relativeTo.x + me.x,
-                            y: relativeTo.y + me.y - 6
-                        }
-                    }, true);
-                    break;
-                default:
-                    item.setAttributes({
-                        translate: {
-                            x: relativeTo.x + me.x,
-                            y: relativeTo.y + me.y
-                        }
-                    }, true);
-            }
-        }
-    }
-});

data/app/assets/javascripts/src/chart/Mask.js

@@ -1,230 +0,0 @@
-/**
- * Defines a mask for a chart's series.
- * The 'chart' member must be set prior to rendering.
- *
- * A Mask can be used to select a certain region in a chart.
- * When enabled, the `select` event will be triggered when a
- * region is selected by the mask, allowing the user to perform
- * other tasks like zooming on that region, etc.
- *
- * In order to use the mask one has to set the Chart `mask` option to
- * `true`, `vertical` or `horizontal`. Then a possible configuration for the
- * listener could be:
- *
- *     items: {
- *         xtype: 'chart',
- *         animate: true,
- *         store: store1,
- *         mask: 'horizontal',
- *         listeners: {
- *             select: {
- *                 fn: function(me, selection) {
- *                     me.setZoom(selection);
- *                     me.mask.hide();
- *                 }
- *             }
- *         }
- *     }
- *
- * In this example we zoom the chart to that particular region. You can also get
- * a handle to a mask instance from the chart object. The `chart.mask` element is a
- * `Ext.Panel`.
- * 
- */
-Ext.define('Ext.chart.Mask', {
-    requires: [
-        'Ext.chart.MaskLayer'
-    ],
-    
-    /**
-     * @cfg {Boolean/String} mask
-     * Enables selecting a region on chart. True to enable any selection,
-     * 'horizontal' or 'vertical' to restrict the selection to X or Y axis.
-     *
-     * The mask in itself will do nothing but fire 'select' event.
-     * See {@link Ext.chart.Mask} for example.
-     */
-
-    /**
-     * Creates new Mask.
-     * @param {Object} [config] Config object.
-     */
-    constructor: function(config) {
-        var me = this,
-            resizeHandler;
-
-        me.addEvents('select');
-
-        if (config) {
-            Ext.apply(me, config);
-        }
-        if (me.enableMask) {
-            me.on('afterrender', function() {
-                //create a mask layer component
-                var comp = new Ext.chart.MaskLayer({
-                    renderTo: me.el,
-                    hidden: true
-                });
-                comp.el.on({
-                    'mousemove': function(e) {
-                        me.onMouseMove(e);
-                    },
-                    'mouseup': function(e) {
-                        me.resized(e);
-                    }
-                });
-                //create a resize handler for the component
-                resizeHandler = new Ext.resizer.Resizer({
-                    el: comp.el,
-                    handles: 'all',
-                    pinned: true
-                });
-                resizeHandler.on({
-                    'resize': function(e) {
-                        me.resized(e);    
-                    }    
-                });
-                comp.initDraggable();
-                me.maskType = me.mask;
-                me.mask = comp;
-                me.maskSprite = me.surface.add({
-                    type: 'path',
-                    path: ['M', 0, 0],
-                    zIndex: 1001,
-                    opacity: 0.7,
-                    hidden: true,
-                    stroke: '#444'
-                });
-            }, me, { single: true });
-        }
-    },
-    
-    resized: function(e) {
-        var me = this,
-            bbox = me.bbox || me.chartBBox,
-            x = bbox.x,
-            y = bbox.y,
-            width = bbox.width,
-            height = bbox.height,
-            box = me.mask.getBox(true),
-            max = Math.max,
-            min = Math.min,
-            staticX = box.x - x,
-            staticY = box.y - y;
-        
-        staticX = max(staticX, x);
-        staticY = max(staticY, y);
-        staticX = min(staticX, width);
-        staticY = min(staticY, height);
-        box.x = staticX;
-        box.y = staticY;
-        me.fireEvent('select', me, box);
-    },
-
-    onMouseUp: function(e) {
-        var me = this,
-            bbox = me.bbox || me.chartBBox,
-            sel = me.maskSelection;
-        me.maskMouseDown = false;
-        me.mouseDown = false;
-        if (me.mouseMoved) {
-            me.onMouseMove(e);
-            me.mouseMoved = false;
-            me.fireEvent('select', me, {
-                x: sel.x - bbox.x,
-                y: sel.y - bbox.y,
-                width: sel.width,
-                height: sel.height
-            });
-        }
-    },
-
-    onMouseDown: function(e) {
-        var me = this;
-        me.mouseDown = true;
-        me.mouseMoved = false;
-        me.maskMouseDown = {
-            x: e.getPageX() - me.el.getX(),
-            y: e.getPageY() - me.el.getY()
-        };
-    },
-
-    onMouseMove: function(e) {
-        var me = this,
-            mask = me.maskType,
-            bbox = me.bbox || me.chartBBox,
-            x = bbox.x,
-            y = bbox.y,
-            math = Math,
-            floor = math.floor,
-            abs = math.abs,
-            min = math.min,
-            max = math.max,
-            height = floor(y + bbox.height),
-            width = floor(x + bbox.width),
-            posX = e.getPageX(),
-            posY = e.getPageY(),
-            staticX = posX - me.el.getX(),
-            staticY = posY - me.el.getY(),
-            maskMouseDown = me.maskMouseDown,
-            path;
-        
-        me.mouseMoved = me.mouseDown;
-        staticX = max(staticX, x);
-        staticY = max(staticY, y);
-        staticX = min(staticX, width);
-        staticY = min(staticY, height);
-        if (maskMouseDown && me.mouseDown) {
-            if (mask == 'horizontal') {
-                staticY = y;
-                maskMouseDown.y = height;
-                posY = me.el.getY() + bbox.height + me.insetPadding;
-            }
-            else if (mask == 'vertical') {
-                staticX = x;
-                maskMouseDown.x = width;
-            }
-            width = maskMouseDown.x - staticX;
-            height = maskMouseDown.y - staticY;
-            path = ['M', staticX, staticY, 'l', width, 0, 0, height, -width, 0, 'z'];
-            me.maskSelection = {
-                x: width > 0 ? staticX : staticX + width,
-                y: height > 0 ? staticY : staticY + height,
-                width: abs(width),
-                height: abs(height)
-            };
-            me.mask.updateBox(me.maskSelection);
-            me.mask.show();
-            me.maskSprite.setAttributes({
-                hidden: true    
-            }, true);
-        }
-        else {
-            if (mask == 'horizontal') {
-                path = ['M', staticX, y, 'L', staticX, height];
-            }
-            else if (mask == 'vertical') {
-                path = ['M', x, staticY, 'L', width, staticY];
-            }
-            else {
-                path = ['M', staticX, y, 'L', staticX, height, 'M', x, staticY, 'L', width, staticY];
-            }
-            me.maskSprite.setAttributes({
-                path: path,
-                fill: me.maskMouseDown ? me.maskSprite.stroke : false,
-                'stroke-width': mask === true ? 1 : 3,
-                hidden: false
-            }, true);
-        }
-    },
-
-    onMouseLeave: function(e) {
-        var me = this;
-        me.mouseMoved = false;
-        me.mouseDown = false;
-        me.maskMouseDown = false;
-        me.mask.hide();
-        me.maskSprite.hide(true);
-    }
-});
-    

data/app/assets/javascripts/src/chart/MaskLayer.js

@@ -1,48 +0,0 @@
-/**
- * @private
- */
-Ext.define('Ext.chart.MaskLayer', {
-    extend: 'Ext.Component',
-    
-    constructor: function(config) {
-        config = Ext.apply(config || {}, {
-            style: 'position:absolute;background-color:#888;cursor:move;opacity:0.6;border:1px solid #222;'
-        });
-        this.callParent([config]);    
-    },
-    
-    initComponent: function() {
-        var me = this;
-        me.callParent(arguments);
-        me.addEvents(
-            'mousedown',
-            'mouseup',
-            'mousemove',
-            'mouseenter',
-            'mouseleave'
-        );
-    },
-
-    initDraggable: function() {
-        this.callParent(arguments);
-        this.dd.onStart = function (e) {
-            var me = this,
-                comp = me.comp;
-    
-            // Cache the start [X, Y] array
-            this.startPosition = comp.getPosition(true);
-    
-            // If client Component has a ghost method to show a lightweight version of itself
-            // then use that as a drag proxy unless configured to liveDrag.
-            if (comp.ghost && !comp.liveDrag) {
-                 me.proxy = comp.ghost();
-                 me.dragTarget = me.proxy.header.el;
-            }
-    
-            // Set the constrainTo Region before we start dragging.
-            if (me.constrain || me.constrainDelegate) {
-                me.constrainTo = me.calculateConstrainRegion();
-            }
-        };
-    }
-});