@visactor/vrender-components/es/axis/animate/group-transition.js

components library for dp visualization

import { AnimateMode } from "@visactor/vrender-core";

import { ACustomAnimate } from "@visactor/vrender-animate";

import { cloneDeep, interpolateString, isEqual, isValidNumber } from "@visactor/vutils";

import { traverseGroup } from "../../util";

export class GroupTransition extends ACustomAnimate {
    constructor() {
        super(...arguments), this.mode = AnimateMode.NORMAL;
    }
    onBind() {
        const currentInnerView = this.target.getInnerView(), prevInnerView = this.target.getPrevInnerView();
        prevInnerView && (this._newElementAttrMap = {}, traverseGroup(currentInnerView, (el => {
            var _a, _b, _c, _d, _e, _f;
            if ("group" !== el.type && el.id) {
                const oldEl = prevInnerView[el.id];
                if (oldEl) {
                    if (!isEqual(el.attribute, oldEl.attribute)) {
                        const newProps = cloneDeep(el.attribute);
                        this._newElementAttrMap[el.id] = {
                            state: "update",
                            node: el,
                            attrs: Object.assign(Object.assign({}, newProps), {
                                opacity: null !== (_a = newProps.opacity) && void 0 !== _a ? _a : 1,
                                fillOpacity: null !== (_b = newProps.fillOpacity) && void 0 !== _b ? _b : 1,
                                strokeOpacity: null !== (_c = newProps.strokeOpacity) && void 0 !== _c ? _c : 1
                            })
                        }, el.setAttributes(oldEl.attribute);
                    }
                } else {
                    const finalOpacityAttrs = {
                        opacity: null !== (_d = el.attribute.opacity) && void 0 !== _d ? _d : 1,
                        fillOpacity: null !== (_e = el.attribute.fillOpacity) && void 0 !== _e ? _e : 1,
                        strokeOpacity: null !== (_f = el.attribute.strokeOpacity) && void 0 !== _f ? _f : 1
                    };
                    this._newElementAttrMap[el.id] = {
                        state: "enter",
                        node: el,
                        attrs: finalOpacityAttrs
                    }, el.setAttributes({
                        opacity: 0,
                        fillOpacity: 0,
                        strokeOpacity: 0
                    });
                }
            }
        })));
    }
    onStart() {
        let duration = this.duration, easing = this.easing;
        this._newElementAttrMap && Object.keys(this._newElementAttrMap).forEach((id => {
            var _a;
            const {node: node, attrs: attrs, state: state} = this._newElementAttrMap[id];
            if ("enter" === state) {
                const {enter: enter = {}} = null !== (_a = this.params) && void 0 !== _a ? _a : {};
                duration = isValidNumber(enter.duration) ? enter.duration : duration, easing = enter.easing ? enter.easing : easing;
            }
            "path" === node.type ? node.animate({
                interpolate: (key, ratio, from, to, nextAttributes) => "path" === key && (nextAttributes.path = interpolateString(from, to)(ratio), 
                !0)
            }).to(attrs, duration, easing) : node.animate().to(attrs, duration, easing);
        }));
    }
    onUpdate(end, ratio, out) {}
}
//# sourceMappingURL=group-transition.js.map