@antv/g2/lib/animation/scaleInX.js

the Grammar of Graphics in Javascript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScaleInX = void 0;
const coordinate_1 = require("../utils/coordinate");
/**
 * Scale mark from nothing to desired shape in x direction.
 */
const ScaleInX = (options, context) => {
    // Small enough to hide or show very small part of mark,
    // but bigger enough to not cause bug.
    const ZERO = 0.0001;
    const { coordinate } = context;
    return (from, _, defaults) => {
        const [shape] = from;
        const { height } = shape.getBoundingClientRect();
        const { transform: prefix = '', fillOpacity = 1, strokeOpacity = 1, opacity = 1, } = shape.style;
        const [transformOrigin, transform] = (0, coordinate_1.isTranspose)(coordinate)
            ? [[0, height], `scale(1, ${ZERO})`] // left-bottom corner
            : [[0, 0], `scale(${ZERO}, 1)`]; // left-top corner
        // Using a short fadeIn transition to hide element with scale(0.001)
        // which is still visible.
        const keyframes = [
            {
                transform: `${prefix} ${transform}`.trimStart(),
                fillOpacity: 0,
                strokeOpacity: 0,
                opacity: 0,
            },
            {
                transform: `${prefix} ${transform}`.trimStart(),
                fillOpacity,
                strokeOpacity,
                opacity,
                offset: 0.01,
            },
            {
                transform: `${prefix} scale(1, 1)`.trimStart(),
                fillOpacity,
                strokeOpacity,
                opacity,
            },
        ];
        // Change transform origin for correct transform.
        shape.setOrigin(transformOrigin);
        const animation = shape.animate(keyframes, Object.assign(Object.assign({}, defaults), options));
        // Reset transform origin to eliminate side effect for following animations.
        animation.finished.then(() => shape.setOrigin(0, 0));
        return animation;
    };
};
exports.ScaleInX = ScaleInX;
//# sourceMappingURL=scaleInX.js.map