extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/draw/Matrix.js

@@ -0,0 +1,183 @@
+/**
+ * @private
+ */
+Ext.define('Ext.draw.Matrix', {
+
+    /* Begin Definitions */
+
+    requires: ['Ext.draw.Draw'],
+
+    /* End Definitions */
+
+    constructor: function(a, b, c, d, e, f) {
+        if (a != null) {
+            this.matrix = [[a, c, e], [b, d, f], [0, 0, 1]];
+        }
+        else {
+            this.matrix = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
+        }
+    },
+
+    add: function(a, b, c, d, e, f) {
+        var me = this,
+            out = [[], [], []],
+            matrix = [[a, c, e], [b, d, f], [0, 0, 1]],
+            x,
+            y,
+            z,
+            res;
+
+        for (x = 0; x < 3; x++) {
+            for (y = 0; y < 3; y++) {
+                res = 0;
+                for (z = 0; z < 3; z++) {
+                    res += me.matrix[x][z] * matrix[z][y];
+                }
+                out[x][y] = res;
+            }
+        }
+        me.matrix = out;
+    },
+
+    prepend: function(a, b, c, d, e, f) {
+        var me = this,
+            out = [[], [], []],
+            matrix = [[a, c, e], [b, d, f], [0, 0, 1]],
+            x,
+            y,
+            z,
+            res;
+
+        for (x = 0; x < 3; x++) {
+            for (y = 0; y < 3; y++) {
+                res = 0;
+                for (z = 0; z < 3; z++) {
+                    res += matrix[x][z] * me.matrix[z][y];
+                }
+                out[x][y] = res;
+            }
+        }
+        me.matrix = out;
+    },
+
+    invert: function() {
+        var matrix = this.matrix,
+            a = matrix[0][0],
+            b = matrix[1][0],
+            c = matrix[0][1],
+            d = matrix[1][1],
+            e = matrix[0][2],
+            f = matrix[1][2],
+            x = a * d - b * c;
+        return new Ext.draw.Matrix(d / x, -b / x, -c / x, a / x, (c * f - d * e) / x, (b * e - a * f) / x);
+    },
+
+    clone: function() {
+        var matrix = this.matrix,
+            a = matrix[0][0],
+            b = matrix[1][0],
+            c = matrix[0][1],
+            d = matrix[1][1],
+            e = matrix[0][2],
+            f = matrix[1][2];
+        return new Ext.draw.Matrix(a, b, c, d, e, f);
+    },
+
+    translate: function(x, y) {
+        this.prepend(1, 0, 0, 1, x, y);
+    },
+
+    scale: function(x, y, cx, cy) {
+        var me = this;
+        if (y == null) {
+            y = x;
+        }
+        me.add(1, 0, 0, 1, cx, cy);
+        me.add(x, 0, 0, y, 0, 0);
+        me.add(1, 0, 0, 1, -cx, -cy);
+    },
+
+    rotate: function(a, x, y) {
+        a = Ext.draw.Draw.rad(a);
+        var me = this,
+            cos = +Math.cos(a).toFixed(9),
+            sin = +Math.sin(a).toFixed(9);
+        me.add(cos, sin, -sin, cos, x, y);
+        me.add(1, 0, 0, 1, -x, -y);
+    },
+
+    x: function(x, y) {
+        var matrix = this.matrix;
+        return x * matrix[0][0] + y * matrix[0][1] + matrix[0][2];
+    },
+
+    y: function(x, y) {
+        var matrix = this.matrix;
+        return x * matrix[1][0] + y * matrix[1][1] + matrix[1][2];
+    },
+
+    get: function(i, j) {
+        return + this.matrix[i][j].toFixed(4);
+    },
+
+    toString: function() {
+        var me = this;
+        return [me.get(0, 0), me.get(0, 1), me.get(1, 0), me.get(1, 1), 0, 0].join();
+    },
+
+    toSvg: function() {
+        var me = this;
+        return "matrix(" + [me.get(0, 0), me.get(1, 0), me.get(0, 1), me.get(1, 1), me.get(0, 2), me.get(1, 2)].join() + ")";
+    },
+
+    toFilter: function(dx, dy) {
+        var me = this;
+        dx = dx || 0;
+        dy = dy || 0;
+        return "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', filterType='bilinear', M11=" + me.get(0, 0) +
+            ", M12=" + me.get(0, 1) + ", M21=" + me.get(1, 0) + ", M22=" + me.get(1, 1) +
+            ", Dx=" + (me.get(0, 2) + dx) + ", Dy=" + (me.get(1, 2) + dy) + ")";
+    },
+
+    offset: function() {
+        var matrix = this.matrix;
+        return [(matrix[0][2] || 0).toFixed(4), (matrix[1][2] || 0).toFixed(4)];
+    },
+
+    // Split matrix into Translate Scale, Shear, and Rotate
+    split: function () {
+        function norm(a) {
+            return a[0] * a[0] + a[1] * a[1];
+        }
+        function normalize(a) {
+            var mag = Math.sqrt(norm(a));
+            a[0] /= mag;
+            a[1] /= mag;
+        }
+        var matrix = this.matrix,
+            out = {
+                translateX: matrix[0][2],
+                translateY: matrix[1][2]
+            },
+            row;
+
+        // scale and shear
+        row = [[matrix[0][0], matrix[0][1]], [matrix[1][1], matrix[1][1]]];
+        out.scaleX = Math.sqrt(norm(row[0]));
+        normalize(row[0]);
+
+        out.shear = row[0][0] * row[1][0] + row[0][1] * row[1][1];
+        row[1] = [row[1][0] - row[0][0] * out.shear, row[1][1] - row[0][1] * out.shear];
+
+        out.scaleY = Math.sqrt(norm(row[1]));
+        normalize(row[1]);
+        out.shear /= out.scaleY;
+
+        // rotation
+        out.rotate = Math.asin(-row[0][1]);
+
+        out.isSimple = !+out.shear.toFixed(9) && (out.scaleX.toFixed(9) == out.scaleY.toFixed(9) || !out.rotate);
+
+        return out;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/draw/Sprite.js

@@ -0,0 +1,554 @@
+/**
+ * A Sprite is an object rendered in a Drawing surface.
+ *
+ * # Translation
+ *
+ * For translate, the configuration object contains x and y attributes that indicate where to
+ * translate the object. For example:
+ *
+ *     sprite.setAttributes({
+ *       translate: {
+ *        x: 10,
+ *        y: 10
+ *       }
+ *     }, true);
+ *
+ *
+ * # Rotation
+ *
+ * For rotation, the configuration object contains x and y attributes for the center of the rotation (which are optional),
+ * and a `degrees` attribute that specifies the rotation in degrees. For example:
+ *
+ *     sprite.setAttributes({
+ *       rotate: {
+ *        degrees: 90
+ *       }
+ *     }, true);
+ *
+ * That example will create a 90 degrees rotation using the centroid of the Sprite as center of rotation, whereas:
+ *
+ *     sprite.setAttributes({
+ *       rotate: {
+ *        x: 0,
+ *        y: 0,
+ *        degrees: 90
+ *       }
+ *     }, true);
+ *
+ * will create a rotation around the `(0, 0)` axis.
+ *
+ *
+ * # Scaling
+ *
+ * For scaling, the configuration object contains x and y attributes for the x-axis and y-axis scaling. For example:
+ *
+ *     sprite.setAttributes({
+ *       scale: {
+ *        x: 10,
+ *        y: 3
+ *       }
+ *     }, true);
+ *
+ * You can also specify the center of scaling by adding `cx` and `cy` as properties:
+ *
+ *     sprite.setAttributes({
+ *       scale: {
+ *        cx: 0,
+ *        cy: 0,
+ *        x: 10,
+ *        y: 3
+ *       }
+ *     }, true);
+ *
+ * That last example will scale a sprite taking as centers of scaling the `(0, 0)` coordinate.
+ *
+ *
+ * # Creating and adding a Sprite to a Surface
+ *
+ * Sprites can be created with a reference to a {@link Ext.draw.Surface}
+ *
+ *     var drawComponent = Ext.create('Ext.draw.Component', options here...);
+ *
+ *     var sprite = Ext.create('Ext.draw.Sprite', {
+ *         type: 'circle',
+ *         fill: '#ff0',
+ *         surface: drawComponent.surface,
+ *         radius: 5
+ *     });
+ *
+ * Sprites can also be added to the surface as a configuration object:
+ *
+ *     var sprite = drawComponent.surface.add({
+ *         type: 'circle',
+ *         fill: '#ff0',
+ *         radius: 5
+ *     });
+ *
+ * In order to properly apply properties and render the sprite we have to
+ * `show` the sprite setting the option `redraw` to `true`:
+ *
+ *     sprite.show(true);
+ *
+ * The constructor configuration object of the Sprite can also be used and passed into the {@link Ext.draw.Surface}
+ * add method to append a new sprite to the canvas. For example:
+ *
+ *     drawComponent.surface.add({
+ *         type: 'circle',
+ *         fill: '#ffc',
+ *         radius: 100,
+ *         x: 100,
+ *         y: 100
+ *     });
+ */
+Ext.define('Ext.draw.Sprite', {
+
+    /* Begin Definitions */
+
+    mixins: {
+        observable: 'Ext.util.Observable',
+        animate: 'Ext.util.Animate'
+    },
+
+    requires: ['Ext.draw.SpriteDD'],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {String} type The type of the sprite. Possible options are 'circle', 'path', 'rect', 'text', 'square', 'image'
+     */
+
+    /**
+     * @cfg {Number} width Used in rectangle sprites, the width of the rectangle
+     */
+
+    /**
+     * @cfg {Number} height Used in rectangle sprites, the height of the rectangle
+     */
+
+    /**
+     * @cfg {Number} size Used in square sprites, the dimension of the square
+     */
+
+    /**
+     * @cfg {Number} radius Used in circle sprites, the radius of the circle
+     */
+
+    /**
+     * @cfg {Number} x The position along the x-axis
+     */
+
+    /**
+     * @cfg {Number} y The position along the y-axis
+     */
+
+    /**
+     * @cfg {String} path Used in path sprites, the path of the sprite written in SVG-like path syntax.
+     */
+
+    /**
+     * @cfg {Number} opacity The opacity of the sprite. A number between 0 and 1.
+     */
+
+    /**
+     * @cfg {String} fill The fill color
+     */
+
+    /**
+     * @cfg {String} stroke The stroke color
+     */
+
+    /**
+     * @cfg {Number} stroke-width The width of the stroke
+     */
+
+    /**
+     * @cfg {String} font Used with text type sprites. The full font description. Uses the same syntax as the CSS font parameter
+     */
+
+    /**
+     * @cfg {String} text Used with text type sprites. The text itself
+     */
+
+    /**
+     * @cfg {String/String[]} group The group that this sprite belongs to, or an array of groups. Only relevant when added to a
+     * {@link Ext.draw.Surface}
+     */
+
+    /**
+     * @cfg {Boolean} draggable True to make the sprite draggable.
+     */
+
+    dirty: false,
+    dirtyHidden: false,
+    dirtyTransform: false,
+    dirtyPath: true,
+    dirtyFont: true,
+    zIndexDirty: true,
+
+    /**
+     * @property {Boolean} isSprite
+     * `true` in this class to identify an object as an instantiated Sprite, or subclass thereof.
+     */
+    isSprite: true,
+    zIndex: 0,
+    fontProperties: [
+        'font',
+        'font-size',
+        'font-weight',
+        'font-style',
+        'font-family',
+        'text-anchor',
+        'text'
+    ],
+    pathProperties: [
+        'x',
+        'y',
+        'd',
+        'path',
+        'height',
+        'width',
+        'radius',
+        'r',
+        'rx',
+        'ry',
+        'cx',
+        'cy'
+    ],
+    constructor: function(config) {
+        var me = this;
+        config = Ext.merge({}, config || {});
+        me.id = Ext.id(null, 'ext-sprite-');
+        me.transformations = [];
+        Ext.copyTo(this, config, 'surface,group,type,draggable');
+        //attribute bucket
+        me.bbox = {};
+        me.attr = {
+            zIndex: 0,
+            translation: {
+                x: null,
+                y: null
+            },
+            rotation: {
+                degrees: null,
+                x: null,
+                y: null
+            },
+            scaling: {
+                x: null,
+                y: null,
+                cx: null,
+                cy: null
+            }
+        };
+        //delete not bucket attributes
+        delete config.surface;
+        delete config.group;
+        delete config.type;
+        delete config.draggable;
+        me.setAttributes(config);
+        me.addEvents(
+            /**
+             * @event
+             * Fires before the sprite is destroyed. Return false from an event handler to stop the destroy.
+             * @param {Ext.draw.Sprite} this
+             */
+            'beforedestroy',
+            /**
+             * @event
+             * Fires after the sprite is destroyed.
+             * @param {Ext.draw.Sprite} this
+             */
+            'destroy',
+            /**
+             * @event
+             * Fires after the sprite markup is rendered.
+             * @param {Ext.draw.Sprite} this
+             */
+            'render',
+            /**
+             * @event
+             * @inheritdoc Ext.dom.Element#mousedown
+             */
+            'mousedown',
+            /**
+             * @event
+             * @inheritdoc Ext.dom.Element#mouseup
+             */
+            'mouseup',
+            /**
+             * @event
+             * @inheritdoc Ext.dom.Element#mouseover
+             */
+            'mouseover',
+            /**
+             * @event
+             * @inheritdoc Ext.dom.Element#mouseout
+             */
+            'mouseout',
+            /**
+             * @event
+             * @inheritdoc Ext.dom.Element#mousemove
+             */
+            'mousemove',
+            /**
+             * @event
+             * @inheritdoc Ext.dom.Element#click
+             */
+            'click'
+        );
+        me.mixins.observable.constructor.apply(this, arguments);
+    },
+
+    /**
+     * @property {Ext.dd.DragSource} dd
+     * If this Sprite is configured {@link #draggable}, this property will contain
+     * an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.
+     *
+     * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
+     * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
+     */
+
+    initDraggable: function() {
+        var me = this;
+        me.draggable = true;
+        //create element if it doesn't exist.
+        if (!me.el) {
+            me.surface.createSpriteElement(me);
+        }
+        me.dd = new Ext.draw.SpriteDD(me, Ext.isBoolean(me.draggable) ? null : me.draggable);
+        me.on('beforedestroy', me.dd.destroy, me.dd);
+    },
+
+    /**
+     * Change the attributes of the sprite.
+     * @param {Object} attrs attributes to be changed on the sprite.
+     * @param {Boolean} redraw Flag to immediatly draw the change.
+     * @return {Ext.draw.Sprite} this
+     */
+    setAttributes: function(attrs, redraw) {
+        var me = this,
+            fontProps = me.fontProperties,
+            fontPropsLength = fontProps.length,
+            pathProps = me.pathProperties,
+            pathPropsLength = pathProps.length,
+            hasSurface = !!me.surface,
+            custom = hasSurface && me.surface.customAttributes || {},
+            spriteAttrs = me.attr,
+            dirtyBBox = false,
+            attr, i, newTranslation, translation, newRotate, rotation, newScaling, scaling;
+
+        attrs = Ext.apply({}, attrs);
+        for (attr in custom) {
+            if (attrs.hasOwnProperty(attr) && typeof custom[attr] == "function") {
+                Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr])));
+            }
+        }
+
+        // Flag a change in hidden
+        if (!!attrs.hidden !== !!spriteAttrs.hidden) {
+            me.dirtyHidden = true;
+        }
+
+        // Flag path change
+        for (i = 0; i < pathPropsLength; i++) {
+            attr = pathProps[i];
+            if (attr in attrs && attrs[attr] !== spriteAttrs[attr]) {
+                me.dirtyPath = true;
+                dirtyBBox = true;
+                break;
+            }
+        }
+
+        // Flag zIndex change
+        if ('zIndex' in attrs) {
+            me.zIndexDirty = true;
+        }
+
+        // Flag font/text change
+        if ('text' in attrs) {
+            me.dirtyFont = true;
+            dirtyBBox = true;
+        }
+
+        for (i = 0; i < fontPropsLength; i++) {
+            attr = fontProps[i];
+            if (attr in attrs && attrs[attr] !== spriteAttrs[attr]) {
+                me.dirtyFont = true;
+                dirtyBBox = true;
+                break;
+            }
+        }
+
+        newTranslation = attrs.translation || attrs.translate;
+        delete attrs.translate;
+        delete attrs.translation;
+        translation = spriteAttrs.translation;
+        if (newTranslation) {
+            if (('x' in newTranslation && newTranslation.x !== translation.x) ||
+                ('y' in newTranslation && newTranslation.y !== translation.y)) {
+                me.dirtyTransform = true;
+                translation.x = newTranslation.x;
+                translation.y = newTranslation.y;
+            }
+        }
+
+        newRotate = attrs.rotation || attrs.rotate;
+        rotation = spriteAttrs.rotation;
+        delete attrs.rotate;
+        delete attrs.rotation;
+        if (newRotate) {
+            if (('x' in newRotate && newRotate.x !== rotation.x) ||
+                ('y' in newRotate && newRotate.y !== rotation.y) ||
+                ('degrees' in newRotate && newRotate.degrees !== rotation.degrees)) {
+                me.dirtyTransform = true;
+                rotation.x = newRotate.x;
+                rotation.y = newRotate.y;
+                rotation.degrees = newRotate.degrees;
+            }
+        }
+
+        newScaling = attrs.scaling || attrs.scale;
+        scaling = spriteAttrs.scaling;
+        delete attrs.scale;
+        delete attrs.scaling;
+        if (newScaling) {
+            if (('x' in newScaling && newScaling.x !== scaling.x) ||
+                ('y' in newScaling && newScaling.y !== scaling.y) ||
+                ('cx' in newScaling && newScaling.cx !== scaling.cx) ||
+                ('cy' in newScaling && newScaling.cy !== scaling.cy)) {
+                me.dirtyTransform = true;
+                scaling.x = newScaling.x;
+                scaling.y = newScaling.y;
+                scaling.cx = newScaling.cx;
+                scaling.cy = newScaling.cy;
+            }
+        }
+
+        // If the bbox is changed, then the bbox based transforms should be invalidated.
+        if (!me.dirtyTransform && dirtyBBox) {
+            if (spriteAttrs.scaling.x === null ||
+                spriteAttrs.scaling.y === null ||
+                spriteAttrs.rotation.y === null ||
+                spriteAttrs.rotation.y === null) {
+                me.dirtyTransform = true;
+            }
+        }
+        
+        Ext.apply(spriteAttrs, attrs);
+        me.dirty = true;
+
+        if (redraw === true && hasSurface) {
+            me.redraw();
+        }
+        return this;
+    },
+
+    /**
+     * Retrieves the bounding box of the sprite.
+     * This will be returned as an object with x, y, width, and height properties.
+     * @return {Object} bbox
+     */
+    getBBox: function() {
+        return this.surface.getBBox(this);
+    },
+
+    setText: function(text) {
+        return this.surface.setText(this, text);
+    },
+
+    /**
+     * Hides the sprite.
+     * @param {Boolean} redraw Flag to immediatly draw the change.
+     * @return {Ext.draw.Sprite} this
+     */
+    hide: function(redraw) {
+        this.setAttributes({
+            hidden: true
+        }, redraw);
+        return this;
+    },
+
+    /**
+     * Shows the sprite.
+     * @param {Boolean} redraw Flag to immediatly draw the change.
+     * @return {Ext.draw.Sprite} this
+     */
+    show: function(redraw) {
+        this.setAttributes({
+            hidden: false
+        }, redraw);
+        return this;
+    },
+
+    /**
+     * Removes the sprite.
+     * @return {Boolean} True if sprite was successfully removed.
+     * False when there was no surface to remove it from.
+     */
+    remove: function() {
+        if (this.surface) {
+            this.surface.remove(this);
+            return true;
+        }
+        return false;
+    },
+
+    onRemove: function() {
+        this.surface.onRemove(this);
+    },
+
+    /**
+     * Removes the sprite and clears all listeners.
+     */
+    destroy: function() {
+        var me = this;
+        if (me.fireEvent('beforedestroy', me) !== false) {
+            me.remove();
+            me.surface.onDestroy(me);
+            me.clearListeners();
+            me.fireEvent('destroy');
+        }
+    },
+
+    /**
+     * Redraws the sprite.
+     * @return {Ext.draw.Sprite} this
+     */
+    redraw: function() {
+        this.surface.renderItem(this);
+        return this;
+    },
+
+    /**
+     * Wrapper for setting style properties, also takes single object parameter of multiple styles.
+     * @param {String/Object} property The style property to be set, or an object of multiple styles.
+     * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
+     * @return {Ext.draw.Sprite} this
+     */
+    setStyle: function() {
+        this.el.setStyle.apply(this.el, arguments);
+        return this;
+    },
+
+    /**
+     * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.  Note this method
+     * is severly limited in VML.
+     * @param {String/String[]} className The CSS class to add, or an array of classes
+     * @return {Ext.draw.Sprite} this
+     */
+    addCls: function(obj) {
+        this.surface.addCls(this, obj);
+        return this;
+    },
+
+    /**
+     * Removes one or more CSS classes from the element.
+     * @param {String/String[]} className The CSS class to remove, or an array of classes.  Note this method
+     * is severly limited in VML.
+     * @return {Ext.draw.Sprite} this
+     */
+    removeCls: function(obj) {
+        this.surface.removeCls(this, obj);
+        return this;
+    }
+});