"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.transition = exports.transitionShape = exports.animate = exports.onAnimatesFinished = exports.onAnimateFinished = exports.parseAnimationOption = void 0; var tslib_1 = require("tslib"); /* global Keyframe */ var util_1 = require("@antv/util"); var util_2 = require("../util"); function isStandardAnimationOption(option) { if (typeof option === 'boolean') return false; return 'enter' in option && 'update' in option && 'exit' in option; } function parseAnimationOption(option) { // option is false => all animation is false // option is { enter: {}, update: {}, exit: {}, ...baseOption } => // { enter: { ...enter, ...baseOption }, update: { ...update, ...baseOption }, exit: { ...exit, ...baseOption } } // option is { enter: {}, update: {}, exit: {} } => option if (!option) return { enter: false, update: false, exit: false }; var keys = ['enter', 'update', 'exit']; var baseOption = Object.fromEntries(Object.entries(option).filter(function (_a) { var _b = tslib_1.__read(_a, 1), k = _b[0]; return !keys.includes(k); })); return Object.fromEntries(keys.map(function (k) { if (isStandardAnimationOption(option)) { if (option[k] === false) return [k, false]; return [k, tslib_1.__assign(tslib_1.__assign({}, option[k]), baseOption)]; } return [k, baseOption]; })); } exports.parseAnimationOption = parseAnimationOption; function onAnimateFinished(animation, callback) { if (!animation) callback(); else animation.finished.then(callback); } exports.onAnimateFinished = onAnimateFinished; function onAnimatesFinished(animations, callback) { if (animations.length === 0) callback(); else Promise.all(animations.map(function (a) { return a === null || a === void 0 ? void 0 : a.finished; })).then(callback); } exports.onAnimatesFinished = onAnimatesFinished; function attr(target, value) { if ('update' in target) target.update(value); else target.attr(value); } function animate(target, keyframes, options) { if (keyframes.length === 0) return null; if (!options) { var state = keyframes.slice(-1)[0]; attr(target, { style: state }); return null; } return target.animate(keyframes, options); } exports.animate = animate; /** * transition source shape to target shape * @param source * @param target * @param options * @param after destroy or hide source shape after transition */ function transitionShape(source, target, options, after) { if (after === void 0) { after = 'destroy'; } var afterTransition = function () { if (after === 'destroy') source.destroy(); else if (after === 'hide') (0, util_2.hide)(source); if (target.isVisible()) (0, util_2.show)(target); }; if (!options) { afterTransition(); return [null]; } var _a = options.duration, duration = _a === void 0 ? 0 : _a, _b = options.delay, delay = _b === void 0 ? 0 : _b; var middle = Math.ceil(+duration / 2); var offset = +duration / 4; var getPosition = function (shape) { if (shape.nodeName === 'circle') { var _a = tslib_1.__read(shape.getLocalPosition(), 2), cx = _a[0], cy = _a[1]; var r = shape.attr('r'); return [cx - r, cy - r]; } return shape.getLocalPosition(); }; var _c = tslib_1.__read(getPosition(source), 2), sx = _c[0], sy = _c[1]; var _d = tslib_1.__read(getPosition(target), 2), ex = _d[0], ey = _d[1]; var _e = tslib_1.__read([(sx + ex) / 2 - sx, (sy + ey) / 2 - sy], 2), mx = _e[0], my = _e[1]; var sourceAnimation = source.animate([ { opacity: 1, transform: 'translate(0, 0)' }, { opacity: 0, transform: "translate(".concat(mx, ", ").concat(my, ")") }, ], tslib_1.__assign(tslib_1.__assign({ fill: 'both' }, options), { duration: delay + middle + offset })); var targetAnimation = target.animate([ { opacity: 0, transform: "translate(".concat(-mx, ", ").concat(-my, ")"), offset: 0.01 }, { opacity: 1, transform: 'translate(0, 0)' }, ], tslib_1.__assign(tslib_1.__assign({ fill: 'both' }, options), { duration: middle + offset, delay: delay + middle - offset })); onAnimateFinished(targetAnimation, afterTransition); return [sourceAnimation, targetAnimation]; } exports.transitionShape = transitionShape; /** * execute transition animation on element * @description in the current stage, only support the following properties: * x, y, width, height, opacity, fill, stroke, lineWidth, radius * @param target element to be animated * @param state target properties or element * @param options transition options * @param animate whether to animate * @returns transition instance */ function transition(target, state, options) { var from = {}; var to = {}; Object.entries(state).forEach(function (_a) { var _b = tslib_1.__read(_a, 2), key = _b[0], tarStyle = _b[1]; if (!(0, util_1.isNil)(tarStyle)) { // 关闭 CSS 解析后,attr / getAttribute 只能获取到用户显式传入的属性,此时可以 // 获取解析值,如果仍获取不到(例如 x/y),则使用 0 作为默认值 var currStyle = target.style[key] || target.parsedStyle[key] || 0; // x/y if (currStyle !== tarStyle) { from[key] = currStyle; to[key] = tarStyle; } } }); if (!options) { attr(target, to); return null; } return animate(target, [from, to], tslib_1.__assign({ fill: 'both' }, options)); } exports.transition = transition; //# sourceMappingURL=utils.js.map