@visactor/vrender-animate/es/state/animation-state.js

This module provides a graph-based animation system for VRender.

import { AnimationTransitionRegistry } from "./animation-states-registry";

import { AnimateExecutor } from "../executor/animate-executor";

import { isArray } from "@visactor/vutils";

export const AnimationStates = {
    APPEAR: "appear",
    DISAPPEAR: "disappear",
    UPDATE: "update",
    HIGHLIGHT: "highlight",
    UNHIGHLIGHT: "unhighlight",
    SELECT: "select",
    UNSELECT: "unselect",
    HOVER: "hover",
    UNHOVER: "unhover",
    ACTIVE: "active",
    INACTIVE: "inactive"
};

export class AnimationStateStore {
    constructor(graphic) {
        this.graphic = graphic;
    }
    registerState(state) {
        this.states || (this.states = new Map), this.states.set(state.name, state);
    }
    clearStates() {
        var _a;
        null === (_a = this.states) || void 0 === _a || _a.clear();
    }
}

export class AnimationStateManager {
    constructor(graphic) {
        this.stateList = null, this.graphic = graphic;
    }
    applyState(nextState, animationConfig, callback) {
        const registry = AnimationTransitionRegistry.getInstance(), shouldStopState = [], shouldApplyState = [];
        if (this.stateList && this.stateList.length ? nextState.forEach(((state, index) => {
            const result = {
                allowTransition: !0,
                stopOriginalTransition: !0
            };
            this.stateList.forEach((currState => {
                const _result = registry.isTransitionAllowed(currState.state, state, this.graphic);
                result.allowTransition = result.allowTransition && _result.allowTransition;
            })), result.allowTransition && (shouldApplyState.push({
                state: state,
                animationConfig: isArray(animationConfig[index]) ? animationConfig[index].map((item => item.animation)) : animationConfig[index].animation,
                executor: new AnimateExecutor(this.graphic)
            }), this.stateList.forEach((currState => {
                registry.isTransitionAllowed(currState.state, state, this.graphic).stopOriginalTransition && shouldStopState.push(currState);
            })));
        })) : nextState.forEach(((state, index) => {
            shouldApplyState.push({
                state: state,
                animationConfig: isArray(animationConfig[index]) ? animationConfig[index].map((item => item.animation)) : animationConfig[index].animation,
                executor: new AnimateExecutor(this.graphic)
            });
        })), shouldStopState.forEach((state => {
            state.executor.stop();
        })), shouldApplyState.length) {
            shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig);
            for (let i = 0; i < shouldApplyState.length; i++) {
                const nextState = shouldApplyState[i + 1], currentState = shouldApplyState[i];
                currentState.executor.onEnd((() => {
                    nextState && nextState.executor.execute(nextState.animationConfig), this.stateList = this.stateList.filter((state => state !== currentState)), 
                    i === shouldApplyState.length - 1 && callback && callback(!1);
                }));
            }
        } else callback && callback(!0);
        this.stateList ? this.stateList = this.stateList.filter((state => !shouldStopState.includes(state))) : this.stateList = [], 
        this.stateList.push(...shouldApplyState);
    }
    applyAppearState(animationConfig, callback) {
        this.applyState([ AnimationStates.APPEAR ], [ {
            name: AnimationStates.APPEAR,
            animation: animationConfig
        } ], callback);
    }
    applyDisappearState(animationConfig, callback) {
        this.applyState([ AnimationStates.DISAPPEAR ], [ {
            name: AnimationStates.DISAPPEAR,
            animation: animationConfig
        } ], callback);
    }
    applyUpdateState(animationConfig, callback) {
        this.applyState([ AnimationStates.UPDATE ], [ {
            name: AnimationStates.UPDATE,
            animation: animationConfig
        } ], callback);
    }
    applyHighlightState(animationConfig, callback) {
        this.applyState([ AnimationStates.HIGHLIGHT ], [ {
            name: AnimationStates.HIGHLIGHT,
            animation: animationConfig
        } ], callback);
    }
    applyUnhighlightState(animationConfig, callback) {
        this.applyState([ AnimationStates.UNHIGHLIGHT ], [ {
            name: AnimationStates.UNHIGHLIGHT,
            animation: animationConfig
        } ], callback);
    }
    stopState(state, type) {
        var _a;
        const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find((stateInfo => stateInfo.state === state));
        stateInfo && stateInfo.executor.stop(type);
    }
    clearState() {
        var _a;
        null === (_a = this.stateList) || void 0 === _a || _a.forEach((state => {
            state.executor.stop();
        })), this.stateList = null;
    }
    reApplyState(state) {
        var _a;
        const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find((stateInfo => stateInfo.state === state));
        stateInfo && (stateInfo.executor.stop(), stateInfo.executor.execute(stateInfo.animationConfig));
    }
}
//# sourceMappingURL=animation-state.js.map