src/util/animation.ts

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/


import Element, { ElementProps } from 'zrender/src/Element';
import { ZREasing } from './types';
import { AnimationEasing } from 'zrender/src/animation/easing';

interface AnimationWrapStorage {
    el: Element;
    target: ElementProps;
    duration: number;
    delay: number;
    easing: AnimationEasing
}
type AnimationWrapDoneCallback = () => void;

/**
 * Animate multiple elements with a single done-callback.
 *
 * @example
 *  animation
 *      .createWrap()
 *      .add(el1, {x: 10, y: 10})
 *      .add(el2, {shape: {width: 500}, style: {fill: 'red'}}, 400)
 *      .done(function () { // done })
 *      .start('cubicOut');
 */
class AnimationWrap {

    private _storage = [] as AnimationWrapStorage[];
    private _elExistsMap: { [elId: string]: boolean } = {};
    private _finishedCallback: AnimationWrapDoneCallback;

    /**
     * Caution: a el can only be added once, otherwise 'done'
     * might not be called. This method checks this (by el.id),
     * suppresses adding and returns false when existing el found.
     *
     * @return Whether adding succeeded.
     */
    add(
        el: Element,
        target: ElementProps,
        duration?: number,
        delay?: number,
        easing?: ZREasing
    ): boolean {
        if (this._elExistsMap[el.id]) {
            return false;
        }
        this._elExistsMap[el.id] = true;

        this._storage.push({
            el: el,
            target: target,
            duration: duration,
            delay: delay,
            easing: easing
        });

        return true;
    }

    /**
     * Only execute when animation done/aborted.
     */
    finished(callback: AnimationWrapDoneCallback): AnimationWrap {
        this._finishedCallback = callback;
        return this;
    }

    /**
     * Will stop exist animation firstly.
     */
    start(): AnimationWrap {
        let count = this._storage.length;

        const checkTerminate = () => {
            count--;
            if (count <= 0) { // Guard.
                this._storage.length = 0;
                this._elExistsMap = {};
                this._finishedCallback && this._finishedCallback();
            }
        };

        for (let i = 0, len = this._storage.length; i < len; i++) {
            const item = this._storage[i];
            item.el.animateTo(item.target, {
                duration: item.duration,
                delay: item.delay,
                easing: item.easing,
                setToFinal: true,
                done: checkTerminate,
                aborted: checkTerminate
            });
        }

        return this;
    }
}

export function createWrap(): AnimationWrap {
    return new AnimationWrap();
}