@alicloud/cloud-charts/lib/common/ellipsisLabel.js


"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.calcTextWidth = calcTextWidth;
exports["default"] = ellipsisLabel;
exports.getAngleByMatrix = getAngleByMatrix;
exports.getMatrixByAngle = getMatrixByAngle;
exports.isOverlap = isOverlap;
exports.near = void 0;
var _matrixUtil = require("@antv/matrix-util");
var _common = require("../common/common");
var _themes = _interopRequireDefault(require("../themes"));
var identityMatrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
function getMatrixByAngle(point, angle, matrix) {
  if (matrix === void 0) {
    matrix = identityMatrix;
  }
  if (!angle) {
    // 角度为 0 或者 null 时返回 null
    return null;
  }
  var m = _matrixUtil.ext.transform(matrix, [['t', -point.x, -point.y], ['r', angle], ['t', point.x, point.y]]);
  return m;
}

/**
 * 判断两个数值 是否接近
 * - 解决精度问题（由于无法确定精度上限，根据具体场景可传入 精度 参数）
 */
var near = exports.near = function near(x, y, e) {
  if (e === void 0) {
    e = Math.pow(Number.EPSILON, 0.5);
  }
  return [x, y].includes(Infinity) ? Math.abs(x) === Math.abs(y) : Math.abs(x - y) < e;
};

// 从矩阵获取旋转的角度
function getAngleByMatrix(matrix) {
  var xVector = [1, 0, 0];
  var out = [0, 0, 0];
  _matrixUtil.vec3.transformMat3(out, xVector, matrix);
  return Math.atan2(out[1], out[0]);
}

// 文本是否旋转
function isRotate(label) {
  var matrix = label.attr('matrix');
  return matrix && matrix[0] !== 1; // 仅在这个场景下判定
}
function getRotateAngle(label) {
  var angle = isRotate(label) ? getAngleByMatrix(label.attr('matrix')) : 0;
  return angle % 360;
}

// 是否重叠
function isOverlap(isVertical, first, second, minGap) {
  var overlap = false;
  var angle = getRotateAngle(first);
  var distance = isVertical ? Math.abs(second.attr('y') - first.attr('y')) : Math.abs(second.attr('x') - first.attr('x'));
  var prevBBox = (isVertical ? second.attr('y') > first.attr('y') : second.attr('x') > first.attr('x')) ? first.getBBox() : second.getBBox();
  var firstBBox = first.getBBox();
  var secondBBox = second.getBBox();

  // 最大重叠尺寸
  var overlapMaxGap = 0;
  if (isVertical) {
    var ratio = Math.abs(Math.cos(angle));
    if (near(ratio, 0, Math.PI / 180)) {
      overlap = prevBBox.width + minGap > distance;
    } else {
      overlap = prevBBox.height / ratio + minGap > distance;
    }
  } else {
    var _ratio = Math.abs(Math.sin(angle));
    if (near(_ratio, 0, Math.PI / 180)) {
      overlapMaxGap = Math.max(firstBBox.width / 2 + secondBBox.width / 2 - distance, overlapMaxGap);
      // console.log(firstBBox, secondBBox, distance)
      overlap = prevBBox.width + minGap > distance;
    } else {
      overlap = prevBBox.height / _ratio + minGap > distance;
    }
  }
  return {
    isOverlap: overlap,
    maxGap: overlapMaxGap
  };
}

/**
 * 计算省略后的文本
 * @param text 原文本
 * @param maxWidth 最大宽度
 * @param font 字体样式
 * @param ellipsisText 省略文本
 * @param ellipsisType 省略方式，头/中间/尾
 */
function ellipsisLabel(text, maxWidth, font, ellipsisText, ellipsisType, hasCustom) {
  if (ellipsisText === void 0) {
    ellipsisText = '...';
  }
  if (ellipsisType === void 0) {
    ellipsisType = 'middle';
  }
  if (hasCustom === void 0) {
    hasCustom = false;
  }
  var str = typeof text !== 'string' ? text.toString() : text;
  var PLACEHOLDER_WIDTH = calcTextWidth(ellipsisText, font);
  if (PLACEHOLDER_WIDTH >= maxWidth) {
    return ellipsisText;
  }
  if (calcTextWidth(str, font) <= maxWidth) {
    return text;
  }
  var leftWidth = maxWidth - PLACEHOLDER_WIDTH;
  var length = str.length;
  var adjustEllipsisType = _themes["default"]['widgets-global-axis-label-ellipsisType'];
  // 在包含中文且用户没有自定义省略方式的情况下，默认使用尾省略
  if (hasCustom) {
    adjustEllipsisType = ellipsisType;
  } else if (!hasCustom && (0, _common.containsChinese)(text.toString())) {
    adjustEllipsisType = 'tail';
  }
  // 页面统一省略方式
  // themes.setTheme(
  //   {
  //     'widgets-global-axis-label-ellipsisType': adjustEllipsisType,
  //   },
  //   false,
  // );

  if (adjustEllipsisType === 'tail') {
    var leftStr = '';
    for (var index = 1; index <= length; index++) {
      var currentStr = str.slice(0, index);
      if (calcTextWidth(currentStr, font) >= leftWidth) {
        break;
      }
      leftStr = currentStr;
    }
    return "" + leftStr + ellipsisText;
  } else if (adjustEllipsisType === 'head') {
    var _leftStr = '';
    for (var _index = length - 1; _index >= 0; _index--) {
      var _currentStr = str.slice(_index, length);
      if (calcTextWidth(_currentStr, font) >= leftWidth) {
        break;
      }
      _leftStr = _currentStr;
    }
    return "" + ellipsisText + _leftStr;
  } else {
    var left = '';
    var right = '';
    for (var _index2 = 1; _index2 < Math.floor(length / 2); _index2++) {
      var currentLeft = str.slice(0, _index2);
      var currentRight = str.slice(length - _index2, length);
      if (calcTextWidth("" + currentLeft + currentRight, font) >= leftWidth) {
        break;
      }
      left = currentLeft;
      right = currentRight;
    }
    return "" + left + ellipsisText + right;
  }
}
var ctx = null;
function calcTextWidth(text, font) {
  var _ref = font || {},
    _ref$fontSize = _ref.fontSize,
    fontSize = _ref$fontSize === void 0 ? (0, _common.pxToNumber)(_themes["default"]['widgets-font-size-1']) : _ref$fontSize,
    _ref$fontFamily = _ref.fontFamily,
    fontFamily = _ref$fontFamily === void 0 ? _themes["default"]['widgets-font-family-txd-m-number'] : _ref$fontFamily,
    _ref$fontWeight = _ref.fontWeight,
    fontWeight = _ref$fontWeight === void 0 ? 'normal' : _ref$fontWeight,
    _ref$fontStyle = _ref.fontStyle,
    fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
    _ref$fontVariant = _ref.fontVariant,
    fontVariant = _ref$fontVariant === void 0 ? 'normal' : _ref$fontVariant;
  if (!ctx) {
    ctx = document.createElement('canvas').getContext('2d');
  }
  ctx.font = [fontStyle, fontVariant, fontWeight, fontSize + "px", fontFamily].join(' ');
  return ctx.measureText(text).width;
}