line.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. import { __assign, __extends } from "tslib";
  2. import { vec2 } from '@antv/matrix-util';
  3. import { each, isFunction, isNil, isNumberEqual, isObject } from '@antv/util';
  4. import AxisBase from './base';
  5. import * as OverlapUtil from './overlap';
  6. var Line = /** @class */ (function (_super) {
  7. __extends(Line, _super);
  8. function Line() {
  9. return _super !== null && _super.apply(this, arguments) || this;
  10. }
  11. Line.prototype.getDefaultCfg = function () {
  12. var cfg = _super.prototype.getDefaultCfg.call(this);
  13. return __assign(__assign({}, cfg), { type: 'line', locationType: 'region',
  14. /**
  15. * 起始点, x, y
  16. * @type {object}
  17. */
  18. start: null,
  19. /**
  20. * 结束点, x, y
  21. * @type {object}
  22. */
  23. end: null });
  24. };
  25. // 获取坐标轴线的 path
  26. Line.prototype.getLinePath = function () {
  27. var start = this.get('start');
  28. var end = this.get('end');
  29. var path = [];
  30. path.push(['M', start.x, start.y]);
  31. path.push(['L', end.x, end.y]);
  32. return path;
  33. };
  34. // 重新计算 layout bbox,考虑到 line 不显示
  35. Line.prototype.getInnerLayoutBBox = function () {
  36. var start = this.get('start');
  37. var end = this.get('end');
  38. var bbox = _super.prototype.getInnerLayoutBBox.call(this);
  39. var minX = Math.min(start.x, end.x, bbox.x);
  40. var minY = Math.min(start.y, end.y, bbox.y);
  41. var maxX = Math.max(start.x, end.x, bbox.maxX);
  42. var maxY = Math.max(start.y, end.y, bbox.maxY);
  43. return {
  44. x: minX,
  45. y: minY,
  46. minX: minX,
  47. minY: minY,
  48. maxX: maxX,
  49. maxY: maxY,
  50. width: maxX - minX,
  51. height: maxY - minY,
  52. };
  53. };
  54. Line.prototype.isVertical = function () {
  55. var start = this.get('start');
  56. var end = this.get('end');
  57. return isNumberEqual(start.x, end.x);
  58. };
  59. Line.prototype.isHorizontal = function () {
  60. var start = this.get('start');
  61. var end = this.get('end');
  62. return isNumberEqual(start.y, end.y);
  63. };
  64. Line.prototype.getTickPoint = function (tickValue) {
  65. var self = this;
  66. var start = self.get('start');
  67. var end = self.get('end');
  68. var regionX = end.x - start.x;
  69. var regionY = end.y - start.y;
  70. return {
  71. x: start.x + regionX * tickValue,
  72. y: start.y + regionY * tickValue,
  73. };
  74. };
  75. // 直线坐标轴下任一点的向量方向都相同
  76. Line.prototype.getSideVector = function (offset) {
  77. var axisVector = this.getAxisVector();
  78. var normal = vec2.normalize([0, 0], axisVector);
  79. var factor = this.get('verticalFactor');
  80. var verticalVector = [normal[1], normal[0] * -1]; // 垂直方向,逆时针方向
  81. return vec2.scale([0, 0], verticalVector, offset * factor);
  82. };
  83. // 获取坐标轴的向量
  84. Line.prototype.getAxisVector = function () {
  85. var start = this.get('start');
  86. var end = this.get('end');
  87. return [end.x - start.x, end.y - start.y];
  88. };
  89. Line.prototype.processOverlap = function (labelGroup) {
  90. var _this = this;
  91. var isVertical = this.isVertical();
  92. var isHorizontal = this.isHorizontal();
  93. // 非垂直,或者非水平时不处理遮挡问题
  94. if (!isVertical && !isHorizontal) {
  95. return;
  96. }
  97. var labelCfg = this.get('label');
  98. var titleCfg = this.get('title');
  99. var verticalLimitLength = this.get('verticalLimitLength');
  100. var labelOffset = labelCfg.offset;
  101. var limitLength = verticalLimitLength;
  102. var titleHeight = 0;
  103. var titleSpacing = 0;
  104. if (titleCfg) {
  105. titleHeight = titleCfg.style.fontSize;
  106. titleSpacing = titleCfg.spacing;
  107. }
  108. if (limitLength) {
  109. limitLength = limitLength - labelOffset - titleSpacing - titleHeight;
  110. }
  111. var overlapOrder = this.get('overlapOrder');
  112. each(overlapOrder, function (name) {
  113. if (labelCfg[name] && _this.canProcessOverlap(name)) {
  114. _this.autoProcessOverlap(name, labelCfg[name], labelGroup, limitLength);
  115. }
  116. });
  117. if (titleCfg) {
  118. if (isNil(titleCfg.offset)) {
  119. // 调整 title 的 offset
  120. var bbox = labelGroup.getCanvasBBox();
  121. var length_1 = isVertical ? bbox.width : bbox.height;
  122. // 如果用户没有设置 offset,则自动计算
  123. titleCfg.offset = labelOffset + length_1 + titleSpacing + titleHeight / 2;
  124. }
  125. }
  126. };
  127. /**
  128. * 是否可以执行某一 overlap
  129. * @param name
  130. */
  131. Line.prototype.canProcessOverlap = function (name) {
  132. var labelCfg = this.get('label');
  133. // 对 autoRotate,如果配置了旋转角度,直接进行固定角度旋转
  134. if (name === 'autoRotate') {
  135. return isNil(labelCfg.rotate);
  136. }
  137. // 默认所有 overlap 都可执行
  138. return true;
  139. };
  140. Line.prototype.autoProcessOverlap = function (name, value, labelGroup, limitLength) {
  141. var _this = this;
  142. var isVertical = this.isVertical();
  143. var hasAdjusted = false;
  144. var util = OverlapUtil[name];
  145. if (value === true) {
  146. var labelCfg = this.get('label');
  147. // true 形式的配置:使用 overlap 默认的的处理方法进行处理
  148. hasAdjusted = util.getDefault()(isVertical, labelGroup, limitLength);
  149. }
  150. else if (isFunction(value)) {
  151. // 回调函数形式的配置: 用户可以传入回调函数
  152. hasAdjusted = value(isVertical, labelGroup, limitLength);
  153. }
  154. else if (isObject(value)) {
  155. // object 形式的配置方式:包括 处理方法 type, 和可选参数配置 cfg
  156. var overlapCfg = value;
  157. if (util[overlapCfg.type]) {
  158. hasAdjusted = util[overlapCfg.type](isVertical, labelGroup, limitLength, overlapCfg.cfg);
  159. }
  160. }
  161. else if (util[value]) {
  162. // 字符串类型的配置:按照名称执行 overlap 处理方法
  163. hasAdjusted = util[value](isVertical, labelGroup, limitLength);
  164. }
  165. if (name === 'autoRotate') {
  166. // 文本旋转后,文本的对齐方式可能就不合适了
  167. if (hasAdjusted) {
  168. var labels = labelGroup.getChildren();
  169. var verticalFactor_1 = this.get('verticalFactor');
  170. each(labels, function (label) {
  171. var textAlign = label.attr('textAlign');
  172. if (textAlign === 'center') {
  173. // 居中的文本需要调整旋转度
  174. var newAlign = verticalFactor_1 > 0 ? 'end' : 'start';
  175. label.attr('textAlign', newAlign);
  176. }
  177. });
  178. }
  179. }
  180. else if (name === 'autoHide') {
  181. var children = labelGroup.getChildren().slice(0); // 复制数组,删除时不会出错
  182. each(children, function (label) {
  183. if (!label.get('visible')) {
  184. if (_this.get('isRegister')) {
  185. // 已经注册过了,则删除
  186. _this.unregisterElement(label);
  187. }
  188. label.remove(); // 防止 label 数量太多,所以统一删除
  189. }
  190. });
  191. }
  192. };
  193. return Line;
  194. }(AxisBase));
  195. export default Line;
  196. //# sourceMappingURL=line.js.map