API Docs for:
Show:

File: yui3-gallery/src/gallery-node-transform2d/js/node-transform2d.js

/**
 * @module gallery-node-transform2d
 */
(function (Y) {
    'use strict';
    
    var _CSSMatrix2d = Y.CSSMatrix2d,
        _Node = Y.Node,
        
        _merge = Y.merge;
    
    Y.mix(_Node.prototype, {
        /**
         * Helper method to get the node's current 2d transfom matrix.
         * @method getMatrix
         * @for Node
         * @return {CSSMatrix2d}
         */
        getMatrix: function () {
            return new _CSSMatrix2d().setMatrixValue(this.getStyle('transform'));
        },
        /**
         * Transforms the node by the inverse of the nodes current 2d transform
         * matrix.
         * @method inverseTransform
         * @chainable
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        inverseTransform: function (transitionConfig, callbackFunction) {
            var me = this;
                
            try {
                return me.transform(me.getMatrix().inverse(), transitionConfig, callbackFunction);
            } catch (exception) {
                if (callbackFunction) {
                    callbackFunction();
                }
                
                return me;
            }
        },
        /**
         * Transforms the node by multiplying the nodes current 2d transform
         * matrix with another matrix.
         * @method multiplyMatrix
         * @chainable
         * @param {CSSMatrix2d} matrix The matrix to multiply.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        multiplyMatrix: function (matrix, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().multiply(matrix), transitionConfig, callbackFunction);
        },
        /**
         * Rotates the node clockwise.
         * @method rotate
         * @chainable
         * @param {Number} angle The angle specified in degrees.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        rotate: function (angle, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().rotate(angle), transitionConfig, callbackFunction);
        },
        /**
         * Rotates the node clockwise.
         * @method rotateRad
         * @chainable
         * @param {Number} angle The angle specified in radians.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        rotateRad: function (angle, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().rotateRad(angle), transitionConfig, callbackFunction);
        },
        /**
         * Scales the node horizontally and vertically.
         * @method scale
         * @chainable
         * @param {Number} scaleFactor The horizontal and vertical scale factor.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        scale: function (scaleFactor, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().scale(scaleFactor), transitionConfig, callbackFunction);
        },
        /**
         * Scales the node horizontally and vertically.
         * @method scaleXY
         * @chainable
         * @param {Number} scaleFactorX The horizontal scale factor.
         * @param {Number} scaleFactorY The vertical scale factor.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        scaleXY: function (scaleFactorX, scaleFactorY, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().scale(scaleFactorX, scaleFactorY), transitionConfig, callbackFunction);
        },
        /**
         * Skews the node horizontally.
         * @method skewX
         * @chainable
         * @param {Number} angle The horizontal skew angle specified in degrees.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        skewX: function (angle, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().skewX(angle), transitionConfig, callbackFunction);
        },
        /**
         * Skews the node horizontally.
         * @method skewXRad
         * @chainable
         * @param {Number} angle The horizontal skew angle specified in radians.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        skewXRad: function (angle, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().skewXRad(angle), transitionConfig, callbackFunction);
        },
        /**
         * Skews the node vertically.
         * @method skewY
         * @chainable
         * @param {Number} angle The vertical skew angle specified in degrees.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        skewY: function (angle, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().skewY(angle), transitionConfig, callbackFunction);
        },
        /**
         * Skews the node vertically.
         * @method skewYRad
         * @chainable
         * @param {Number} angle The vertical skew angle specified in radians.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        skewYRad: function (angle, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().skewYRad(angle), transitionConfig, callbackFunction);
        },
        /**
         * Transforms the node by the given matrix.
         * @method transform
         * @chainable
         * @param {CSSMatrix2d} matrix The 2d transform matrix.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        transform: function (matrix, transitionConfig, callbackFunction) {
            var me = this;
            
            matrix = matrix.toString();
            
            if (transitionConfig && me.transition) {
                return me.transition(_merge(transitionConfig, {
                    transform: matrix
                }), callbackFunction);
            }

            me.setStyle('transform', matrix);
            
            if (callbackFunction) {
                callbackFunction();
            }

            return me;
        },
        /**
         * Translates the node horizontally and vertically.
         * @method translate
         * @chainable
         * @param {Number} x The amount to translate horizontally.
         * @param {Number} y The amount to translate vertically.
         * @param {Object} transitionConfig Optional.  If defined, and if the
         * transition module is available, a transition will be used to
         * transform the node.  This object is passed along to the transition
         * method.
         * @param {Function} callbackFunction Optional.  Whether or not
         * transition is used, the callback function, if defined, will get
         * called when the transform is complete.
         */
        translate: function (x, y, transitionConfig, callbackFunction) {
            return this.transform(this.getMatrix().translate(x, y), transitionConfig, callbackFunction);
        }
    });
}(Y));