scaleInX.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.ScaleInX = void 0;
  4. const coordinate_1 = require("../utils/coordinate");
  5. const utils_1 = require("./utils");
  6. /**
  7. * Scale mark from nothing to desired shape in x direction.
  8. */
  9. const ScaleInX = (options) => {
  10. // Small enough to hide or show very small part of mark,
  11. // but bigger enough to not cause bug.
  12. const ZERO = 0.0001;
  13. return (from, to, value, coordinate, defaults) => {
  14. const [shape] = from;
  15. const { height } = shape.getBoundingClientRect();
  16. const { transform: prefix = '', fillOpacity = 1, strokeOpacity = 1, opacity = 1, } = shape.style;
  17. const [transformOrigin, transform] = (0, coordinate_1.isTranspose)(coordinate)
  18. ? [[0, height], `scale(1, ${ZERO})`] // left-bottom corner
  19. : [[0, 0], `scale(${ZERO}, 1)`]; // left-top corner
  20. // Using a short fadeIn transition to hide element with scale(0.001)
  21. // which is still visible.
  22. const keyframes = [
  23. {
  24. transform: `${prefix} ${transform}`.trimStart(),
  25. fillOpacity: 0,
  26. strokeOpacity: 0,
  27. opacity: 0,
  28. },
  29. {
  30. transform: `${prefix} ${transform}`.trimStart(),
  31. fillOpacity,
  32. strokeOpacity,
  33. opacity,
  34. offset: 0.01,
  35. },
  36. {
  37. transform: `${prefix} scale(1, 1)`.trimStart(),
  38. fillOpacity,
  39. strokeOpacity,
  40. opacity,
  41. },
  42. ];
  43. // Change transform origin for correct transform.
  44. shape.setOrigin(transformOrigin);
  45. const animation = shape.animate(keyframes, (0, utils_1.effectTiming)(defaults, value, options));
  46. // Reset transform origin to eliminate side effect for following animations.
  47. animation.finished.then(() => shape.setOrigin(0, 0));
  48. return animation;
  49. };
  50. };
  51. exports.ScaleInX = ScaleInX;
  52. //# sourceMappingURL=scaleInX.js.map