label.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { each, isNil, getEllipsisText, pick } from '@antv/util';
  2. import { ellipsisString, strLen } from './text';
  3. var ELLIPSIS_CODE = '\u2026';
  4. var ELLIPSIS_CODE_LENGTH = 2; // 省略号的长度
  5. /** 大数据量阈值 */
  6. var OPTIMIZE_THRESHOLD = 400;
  7. /**
  8. * 针对大数据量做优化的 getMaxLabelWidth,做法不是直接去比较每一个 label 的最大宽度
  9. * 而是先通过比较每个 label 每个的字符串的长度,这里区分了下中英文字符
  10. * 最终是去字符串最“长”的那个 label 的宽度。
  11. * @param labels
  12. */
  13. function getMaxLabelWidthOptimized(labels) {
  14. var texts = labels.map(function (label) {
  15. var text = label.attr('text');
  16. return isNil(text) ? '' : "" + text;
  17. });
  18. var maxLen = 0;
  19. var maxIdx = 0;
  20. for (var i = 0; i < texts.length; i += 1) {
  21. var len = 0;
  22. for (var j = 0; j <= texts[i].length; j += 1) {
  23. var code = texts[i].charCodeAt(j);
  24. if (code >= 19968 && code <= 40869) {
  25. len += 2;
  26. }
  27. else {
  28. len += 1;
  29. }
  30. }
  31. if (len > maxLen) {
  32. maxLen = len;
  33. maxIdx = i;
  34. }
  35. }
  36. return labels[maxIdx].getBBox().width;
  37. }
  38. /** 获取最长的 label */
  39. export function getMaxLabelWidth(labels) {
  40. if (labels.length > OPTIMIZE_THRESHOLD) {
  41. return getMaxLabelWidthOptimized(labels);
  42. }
  43. var max = 0;
  44. each(labels, function (label) {
  45. var bbox = label.getBBox();
  46. var width = bbox.width;
  47. if (max < width) {
  48. max = width;
  49. }
  50. });
  51. return max;
  52. }
  53. /** 获取label长度 */
  54. export function getLabelLength(isVertical, label) {
  55. var bbox = label.getCanvasBBox();
  56. return isVertical ? bbox.width : bbox.height;
  57. }
  58. /* label长度是否超过约束值 */
  59. export function testLabel(label, limitLength) {
  60. return label.getBBox().width < limitLength;
  61. }
  62. /** 处理 text shape 的自动省略 */
  63. export function ellipsisLabel(isVertical, label, limitLength, position) {
  64. var _a;
  65. if (position === void 0) { position = 'tail'; }
  66. var text = (_a = label.attr('text')) !== null && _a !== void 0 ? _a : ''; // 避免出现null、undefined
  67. if (position === 'tail') {
  68. // component 里的缩略处理做得很糟糕,文字长度测算完全不准确
  69. // 这里暂时只对 tail 做处理
  70. var font = pick(label.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
  71. var ellipsisText = getEllipsisText(text, limitLength, font, '…');
  72. if (text !== ellipsisText) {
  73. label.attr('text', ellipsisText);
  74. label.set('tip', text);
  75. return true;
  76. }
  77. label.set('tip', null);
  78. return false;
  79. }
  80. var labelLength = getLabelLength(isVertical, label);
  81. var codeLength = strLen(text);
  82. var ellipsisFlag = false;
  83. if (limitLength < labelLength) {
  84. var reserveLength = Math.floor((limitLength / labelLength) * codeLength) - ELLIPSIS_CODE_LENGTH; // 计算出来的应该保存的长度
  85. var newText = void 0;
  86. if (reserveLength >= 0) {
  87. newText = ellipsisString(text, reserveLength, position);
  88. }
  89. else {
  90. newText = ELLIPSIS_CODE;
  91. }
  92. if (newText) {
  93. label.attr('text', newText);
  94. ellipsisFlag = true;
  95. }
  96. }
  97. if (ellipsisFlag) {
  98. label.set('tip', text);
  99. }
  100. else {
  101. label.set('tip', null);
  102. }
  103. return ellipsisFlag;
  104. }
  105. //# sourceMappingURL=label.js.map