@visactor/vrender-components
Version:
components library for dp visualization
72 lines (67 loc) • 3.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.GroupTransition = void 0;
const vrender_core_1 = require("@visactor/vrender-core"), vrender_animate_1 = require("@visactor/vrender-animate"), vutils_1 = require("@visactor/vutils"), util_1 = require("../../util");
class GroupTransition extends vrender_animate_1.ACustomAnimate {
constructor() {
super(...arguments), this.mode = vrender_core_1.AnimateMode.NORMAL;
}
onBind() {
const currentInnerView = this.target.getInnerView(), prevInnerView = this.target.getPrevInnerView();
prevInnerView && (this._newElementAttrMap = {}, (0, util_1.traverseGroup)(currentInnerView, (el => {
var _a, _b, _c, _d, _e, _f;
if ("group" !== el.type && el.id) {
const oldEl = prevInnerView[el.id];
if (oldEl) {
if (!(0, vutils_1.isEqual)(el.attribute, oldEl.attribute)) {
const newProps = (0, vutils_1.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 = (0, vutils_1.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 = (0,
vutils_1.interpolateString)(from, to)(ratio), !0)
}).to(attrs, duration, easing) : node.animate().to(attrs, duration, easing);
}));
}
onUpdate(end, ratio, out) {}
}
exports.GroupTransition = GroupTransition;
//# sourceMappingURL=group-transition.js.map