roundedArrow.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.genRoundedArrow = void 0;
  6. exports.getArrowToken = getArrowToken;
  7. var _cssinjs = require("@ant-design/cssinjs");
  8. function getArrowToken(token) {
  9. const {
  10. sizePopupArrow,
  11. borderRadiusXS,
  12. borderRadiusOuter
  13. } = token;
  14. const unitWidth = sizePopupArrow / 2;
  15. const ax = 0;
  16. const ay = unitWidth;
  17. const bx = borderRadiusOuter * 1 / Math.sqrt(2);
  18. const by = unitWidth - borderRadiusOuter * (1 - 1 / Math.sqrt(2));
  19. const cx = unitWidth - borderRadiusXS * (1 / Math.sqrt(2));
  20. const cy = borderRadiusOuter * (Math.sqrt(2) - 1) + borderRadiusXS * (1 / Math.sqrt(2));
  21. const dx = 2 * unitWidth - cx;
  22. const dy = cy;
  23. const ex = 2 * unitWidth - bx;
  24. const ey = by;
  25. const fx = 2 * unitWidth - ax;
  26. const fy = ay;
  27. const shadowWidth = unitWidth * Math.sqrt(2) + borderRadiusOuter * (Math.sqrt(2) - 2);
  28. const polygonOffset = borderRadiusOuter * (Math.sqrt(2) - 1);
  29. const arrowPolygon = `polygon(${polygonOffset}px 100%, 50% ${polygonOffset}px, ${2 * unitWidth - polygonOffset}px 100%, ${polygonOffset}px 100%)`;
  30. const arrowPath = `path('M ${ax} ${ay} A ${borderRadiusOuter} ${borderRadiusOuter} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${borderRadiusXS} ${borderRadiusXS} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${borderRadiusOuter} ${borderRadiusOuter} 0 0 0 ${fx} ${fy} Z')`;
  31. return {
  32. arrowShadowWidth: shadowWidth,
  33. arrowPath,
  34. arrowPolygon
  35. };
  36. }
  37. const genRoundedArrow = (token, bgColor, boxShadow) => {
  38. const {
  39. sizePopupArrow,
  40. arrowPolygon,
  41. arrowPath,
  42. arrowShadowWidth,
  43. borderRadiusXS,
  44. calc
  45. } = token;
  46. return {
  47. pointerEvents: 'none',
  48. width: sizePopupArrow,
  49. height: sizePopupArrow,
  50. overflow: 'hidden',
  51. '&::before': {
  52. position: 'absolute',
  53. bottom: 0,
  54. insetInlineStart: 0,
  55. width: sizePopupArrow,
  56. height: calc(sizePopupArrow).div(2).equal(),
  57. background: bgColor,
  58. clipPath: {
  59. _multi_value_: true,
  60. value: [arrowPolygon, arrowPath]
  61. },
  62. content: '""'
  63. },
  64. '&::after': {
  65. content: '""',
  66. position: 'absolute',
  67. width: arrowShadowWidth,
  68. height: arrowShadowWidth,
  69. bottom: 0,
  70. insetInline: 0,
  71. margin: 'auto',
  72. borderRadius: {
  73. _skip_check_: true,
  74. value: `0 0 ${(0, _cssinjs.unit)(borderRadiusXS)} 0`
  75. },
  76. transform: 'translateY(50%) rotate(-135deg)',
  77. boxShadow,
  78. zIndex: 0,
  79. background: 'transparent'
  80. }
  81. };
  82. };
  83. exports.genRoundedArrow = genRoundedArrow;