add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / fx / Manager.js

/**\r
 * @class Ext.fx.Manager\r
 * Animation Manager which keeps track of all current animations and manages them on a frame by frame basis.\r
 * @private\r
 * @singleton\r
 */\r
\r
Ext.define('Ext.fx.Manager', {\r
\r
    /* Begin Definitions */\r
\r
    singleton: true,\r
\r
    requires: [\r
        'Ext.util.MixedCollection',\r
        'Ext.util.TaskRunner',\r
        'Ext.fx.target.Element',\r
        'Ext.fx.target.ElementCSS',\r
        'Ext.fx.target.CompositeElement',\r
        'Ext.fx.target.CompositeElementCSS',\r
        'Ext.fx.target.Sprite',\r
        'Ext.fx.target.CompositeSprite',\r
        'Ext.fx.target.Component'\r
    ],\r
\r
    mixins: {\r
        queue: 'Ext.fx.Queue'\r
    },\r
\r
    /* End Definitions */\r
\r
    /**\r
     * @private\r
     */\r
    constructor: function() {\r
        var me = this;\r
        me.items = new Ext.util.MixedCollection();\r
        me.targetArr = {};\r
        me.mixins.queue.constructor.call(me);\r
        \r
        // Do not use fireIdleEvent: false. Each tick of the TaskRunner needs to fire the idleEvent\r
        // in case an animation callback/listener adds a listener.\r
        me.taskRunner = new Ext.util.TaskRunner();\r
    },\r
\r
    /**\r
     * @cfg {Number} interval Default interval in miliseconds to calculate each frame.  Defaults to 16ms (~60fps)\r
     */\r
    interval: 16,\r
\r
    /**\r
     * @cfg {Boolean} forceJS Force the use of JavaScript-based animation instead of CSS3 animation, even when CSS3\r
     * animation is supported by the browser. This defaults to true currently, as CSS3 animation support is still\r
     * considered experimental at this time, and if used should be thouroughly tested across all targeted browsers.\r
     * @protected\r
     */\r
    forceJS: true,\r
\r
    /**\r
     * @private\r
     * Target Factory\r
     */\r
    createTarget: function(target) {\r
        var me = this,\r
            useCSS3 = !me.forceJS && Ext.supports.Transitions,\r
            targetObj;\r
\r
        me.useCSS3 = useCSS3;\r
\r
        if (target) {\r
            // dom element, string or fly\r
            if (target.tagName || Ext.isString(target) || target.isFly) {\r
                target = Ext.get(target);\r
                targetObj = new Ext.fx.target['Element' + (useCSS3 ? 'CSS' : '')](target);\r
            }\r
            // Element\r
            else if (target.dom) {\r
                targetObj = new Ext.fx.target['Element' + (useCSS3 ? 'CSS' : '')](target);\r
            }\r
            // Element Composite\r
            else if (target.isComposite) {\r
                targetObj = new Ext.fx.target['CompositeElement' + (useCSS3 ? 'CSS' : '')](target);\r
            }\r
            // Draw Sprite\r
            else if (target.isSprite) {\r
                targetObj = new Ext.fx.target.Sprite(target);\r
            }\r
            // Draw Sprite Composite\r
            else if (target.isCompositeSprite) {\r
                targetObj = new Ext.fx.target.CompositeSprite(target);\r
            }\r
            // Component\r
            else if (target.isComponent) {\r
                targetObj = new Ext.fx.target.Component(target);\r
            }\r
            else if (target.isAnimTarget) {\r
                return target;\r
            }\r
            else {\r
                return null;\r
            }\r
            me.targets.add(targetObj);\r
            return targetObj;\r
        }\r
        else {\r
            return null;\r
        }\r
    },\r
\r
    /**\r
     * Add an Anim to the manager. This is done automatically when an Anim instance is created.\r
     * @param {Ext.fx.Anim} anim\r
     */\r
    addAnim: function(anim) {\r
        var me = this,\r
            items = me.items,\r
            task = me.task;\r
\r
        // Make sure we use the anim's id, not the anim target's id here. The anim id will be unique on\r
        // each call to addAnim. `anim.target` is the DOM element being targeted, and since multiple animations\r
        // can target a single DOM node concurrently, the target id cannot be assumned to be unique.\r
        items.add(anim.id, anim);\r
        //Ext.log('+     added anim ', anim.id, ', target: ', anim.target.getId(), ', duration: ', anim.duration);\r
\r
        // Start the timer if not already running\r
        if (!task && items.length) {\r
            task = me.task = {\r
                run: me.runner,\r
                interval: me.interval,\r
                scope: me\r
            };\r
            //Ext.log('--->> Starting task');\r
            me.taskRunner.start(task);\r
        }\r
    },\r
\r
    /**\r
     * Remove an Anim from the manager. This is done automatically when an Anim ends.\r
     * @param {Ext.fx.Anim} anim\r
     */\r
    removeAnim: function(anim) {\r
        var me = this,\r
            items = me.items,\r
            task = me.task;\r
                \r
        items.removeAtKey(anim.id);\r
        //Ext.log('    X removed anim ', anim.id, ', target: ', anim.target.getId(), ', frames: ', anim.frameCount, ', item count: ', items.length);\r
        \r
        // Stop the timer if there are no more managed Anims\r
        if (task && !items.length) {\r
            //Ext.log('[]--- Stopping task');\r
            me.taskRunner.stop(task);\r
            delete me.task;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Runner function being called each frame\r
     */\r
    runner: function() {\r
        var me = this,\r
            items = me.items.getRange(),\r
            i = 0,\r
            len = items.length,\r
            anim;\r
\r
        //Ext.log('      executing anim runner task with ', len, ' items');\r
        me.targetArr = {};\r
\r
        // Single timestamp for all animations this interval\r
        me.timestamp = new Date();\r
        \r
        // Loop to start any new animations first before looping to\r
        // execute running animations (which will also include all animations\r
        // started in this loop). This is a subtle difference from simply\r
        // iterating in one loop and starting then running each animation,\r
        // but separating the loops is necessary to ensure that all new animations\r
        // actually kick off prior to existing ones regardless of array order.\r
        // Otherwise in edge cases when there is excess latency in overall\r
        // performance, allowing existing animations to run before new ones can\r
        // lead to dropped frames and subtle race conditions when they are\r
        // interdependent, which is often the case with certain Element fx.\r
        for (; i < len; i++) {\r
            anim = items[i];\r
            \r
            if (anim.isReady()) {\r
                //Ext.log('      starting anim ', anim.id, ', target: ', anim.target.id);\r
                me.startAnim(anim);\r
            }\r
        }\r
        \r
        for (i = 0; i < len; i++) {\r
            anim = items[i];\r
            \r
            if (anim.isRunning()) {\r
                //Ext.log('      running anim ', anim.target.id);\r
                me.runAnim(anim);\r
            }\r
            //<debug>\r
            //else if (!me.useCSS3) {\r
                // When using CSS3 transitions the animations get paused since they are not\r
                // needed once the transition is handed over to the browser, so we can\r
                // ignore this case. However if we are doing JS animations and something is\r
                // paused here it's possibly unintentional.\r
                //Ext.log(' (i)  anim ', anim.id, ' is active but not running...');\r
            //}\r
            //</debug>\r
        }\r
\r
        // Apply all the pending changes to their targets\r
        me.applyPendingAttrs();\r
        \r
        // Avoid retaining target references after we are finished with anims\r
        me.targetArr = null;\r
    },\r
\r
    /**\r
     * @private\r
     * Start the individual animation (initialization)\r
     */\r
    startAnim: function(anim) {\r
        anim.start(this.timestamp);\r
    },\r
\r
    /**\r
     * @private\r
     * Run the individual animation for this frame\r
     */\r
    runAnim: function(anim, forceEnd) {\r
        if (!anim) {\r
            return;\r
        }\r
        var me = this,\r
            useCSS3 = me.useCSS3 && anim.target.type === 'element',\r
            elapsedTime = me.timestamp - anim.startTime,\r
            lastFrame = (elapsedTime >= anim.duration),\r
            target, o;\r
            \r
        if (forceEnd) {\r
            elapsedTime = anim.duration;\r
            lastFrame = true;\r
        }\r
\r
        target = this.collectTargetData(anim, elapsedTime, useCSS3, lastFrame);\r
        \r
        // For CSS3 animation, we need to immediately set the first frame's attributes without any transition\r
        // to get a good initial state, then add the transition properties and set the final attributes.\r
        if (useCSS3) {\r
            //Ext.log(' (i)  using CSS3 transitions');\r
            \r
            // Flush the collected attributes, without transition\r
            anim.target.setAttr(target.anims[anim.id].attributes, true);\r
\r
            // Add the end frame data\r
            me.collectTargetData(anim, anim.duration, useCSS3, lastFrame);\r
\r
            // Pause the animation so runAnim doesn't keep getting called\r
            anim.paused = true;\r
\r
            target = anim.target.target;\r
            // We only want to attach an event on the last element in a composite\r
            if (anim.target.isComposite) {\r
                target = anim.target.target.last();\r
            }\r
\r
            // Listen for the transitionend event\r
            o = {};\r
            o[Ext.supports.CSS3TransitionEnd] = anim.lastFrame;\r
            o.scope = anim;\r
            o.single = true;\r
            target.on(o);\r
        }\r
        return target;\r
    },\r
    \r
    jumpToEnd: function(anim) {\r
        var me = this,\r
            target, clear;\r
\r
        // We may not be in the middle of a tick, where targetAttr is cleared,\r
        // so if we don't have it, poke it in here while we jump to the end state\r
        if (!me.targetArr) {\r
            me.targetArr = {};\r
            clear = true;\r
        }\r
\r
        target = me.runAnim(anim, true);\r
        me.applyAnimAttrs(target, target.anims[anim.id]);\r
        if (clear) {\r
            me.targetArr = null;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Collect target attributes for the given Anim object at the given timestamp\r
     * @param {Ext.fx.Anim} anim The Anim instance\r
     * @param {Number} timestamp Time after the anim's start time\r
     * @param {Boolean} [useCSS3=false] True if using CSS3-based animation, else false\r
     * @param {Boolean} [isLastFrame=false] True if this is the last frame of animation to be run, else false\r
     * @return {Object} The animation target wrapper object containing the passed animation along with the\r
     * new attributes to set on the target's element in the next animation frame.\r
     */\r
    collectTargetData: function(anim, elapsedTime, useCSS3, isLastFrame) {\r
        var targetId = anim.target.getId(),\r
            target = this.targetArr[targetId];\r
        \r
        if (!target) {\r
            // Create a thin wrapper around the target so that we can create a link between the\r
            // target element and its associated animations. This is important later when applying\r
            // attributes to the target so that each animation can be independently run with its own\r
            // duration and stopped at any point without affecting other animations for the same target.\r
            target = this.targetArr[targetId] = {\r
                id: targetId,\r
                el: anim.target,\r
                anims: {}\r
            };\r
        }\r
\r
        // This is a wrapper for the animation so that we can also save state along with it,\r
        // including the current elapsed time and lastFrame status. Even though this method only\r
        // adds a single anim object per call, each target element could have multiple animations\r
        // associated with it, which is why the anim is added to the target's `anims` hash by id.\r
        target.anims[anim.id] = {\r
            id: anim.id,\r
            anim: anim,\r
            elapsed: elapsedTime,\r
            isLastFrame: isLastFrame,\r
            // This is the object that gets applied to the target element below in applyPendingAttrs():\r
            attributes: [{\r
                duration: anim.duration,\r
                easing: (useCSS3 && anim.reverse) ? anim.easingFn.reverse().toCSS3() : anim.easing,\r
                // This is where the magic happens. The anim calculates what its new attributes should\r
                // be based on the current frame and returns those as a hash of values.\r
                attrs: anim.runAnim(elapsedTime)\r
            }]\r
        };\r
        \r
        return target;\r
    },\r
    \r
    // Duplicating this code for performance reasons. We only want to apply the anims\r
    // to a single animation because we're hitting the end. It may be out of sequence from\r
    // the runner timer.\r
    applyAnimAttrs: function(target, animWrap) {\r
        var anim = animWrap.anim;\r
        if (animWrap.attributes && anim.isRunning()) {\r
            target.el.setAttr(animWrap.attributes, false, animWrap.isLastFrame);\r
                            \r
            // If this particular anim is at the last frame end it\r
            if (animWrap.isLastFrame) {\r
                anim.lastFrame();\r
            }\r
        }\r
    },\r
    \r
    /**\r
     * @private\r
     * Apply all pending attribute changes to their targets\r
     */\r
    applyPendingAttrs: function() {\r
        var targetArr = this.targetArr,\r
            target, targetId, animWrap, anim, animId;\r
        \r
        // Loop through each target\r
        for (targetId in targetArr) {\r
            if (targetArr.hasOwnProperty(targetId)) {\r
                target = targetArr[targetId];\r
                \r
                // Each target could have multiple associated animations, so iterate those\r
                for (animId in target.anims) {\r
                    if (target.anims.hasOwnProperty(animId)) {\r
                        animWrap = target.anims[animId];\r
                        anim = animWrap.anim;\r
                        \r
                        // If the animation has valid attributes, set them on the target\r
                        if (animWrap.attributes && anim.isRunning()) {\r
                            //Ext.log('  >   applying attributes for anim ', animWrap.id, ', target: ', target.id, ', elapsed: ', animWrap.elapsed);\r
                            target.el.setAttr(animWrap.attributes, false, animWrap.isLastFrame);\r
                            \r
                            // If this particular anim is at the last frame end it\r
                            if (animWrap.isLastFrame) {\r
                                //Ext.log('      running last frame for ', animWrap.id, ', target: ', targetId);\r
                                anim.lastFrame();\r
                            }\r
                        }\r
                    }\r
                }\r
            }\r
        }\r
    }\r
});\r