line.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import { __read, __spreadArray } from "tslib";
  2. import { get, memoize } from '@antv/util';
  3. import { transition } from '../../../animation';
  4. import { degToRad, keyframeInterpolate, omit, renderExtDo, scaleToPixel, subStyleProps, } from '../../../util';
  5. import { CLASS_NAMES } from '../constant';
  6. import { getLineAngle, getLineTangentVector } from './utils';
  7. export var getLinearValuePos = memoize(function (value, attr) {
  8. var _a = __read(attr.startPos, 2), sx = _a[0], sy = _a[1], _b = __read(attr.endPos, 2), ex = _b[0], ey = _b[1];
  9. var _c = __read([ex - sx, ey - sy], 2), dx = _c[0], dy = _c[1];
  10. return [sx + dx * value, sy + dy * value];
  11. }, function (value, attr) { return __spreadArray(__spreadArray([value], __read(attr.startPos), false), __read(attr.endPos), false).join(); });
  12. export var getArcValuePos = memoize(function (value, attr) {
  13. var radius = attr.radius, _a = __read(attr.center, 2), cx = _a[0], cy = _a[1];
  14. var angle = degToRad(getLineAngle(value, attr));
  15. return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)];
  16. }, function (value, attr) {
  17. var startAngle = attr.startAngle, endAngle = attr.endAngle, radius = attr.radius, center = attr.center;
  18. return __spreadArray([value, startAngle, endAngle, radius], __read(center), false).join();
  19. });
  20. export function getValuePos(value, attr) {
  21. if (attr.type === 'linear')
  22. return getLinearValuePos(value, attr);
  23. return getArcValuePos(value, attr);
  24. }
  25. export function isAxisHorizontal(attr) {
  26. return getLineTangentVector(0, attr)[1] === 0;
  27. }
  28. export function isAxisVertical(attr) {
  29. return getLineTangentVector(0, attr)[0] === 0;
  30. }
  31. function isCircle(startAngle, endAngle) {
  32. return endAngle - startAngle === 360;
  33. }
  34. function getArcPath(startAngle, endAngle, cx, cy, radius) {
  35. var diffAngle = endAngle - startAngle;
  36. var _a = __read([radius, radius], 2), rx = _a[0], ry = _a[1];
  37. var _b = __read([degToRad(startAngle), degToRad(endAngle)], 2), startAngleRadians = _b[0], endAngleRadians = _b[1];
  38. var getPosByAngle = function (angle) { return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]; };
  39. var _c = __read(getPosByAngle(startAngleRadians), 2), x1 = _c[0], y1 = _c[1];
  40. var _d = __read(getPosByAngle(endAngleRadians), 2), x2 = _d[0], y2 = _d[1];
  41. if (isCircle(startAngle, endAngle)) {
  42. var middleAngleRadians = (endAngleRadians + startAngleRadians) / 2;
  43. var _e = __read(getPosByAngle(middleAngleRadians), 2), xm = _e[0], ym = _e[1];
  44. return [
  45. ['M', x1, y1],
  46. ['A', rx, ry, 0, 1, 0, xm, ym],
  47. ['A', rx, ry, 0, 1, 0, x2, y2],
  48. ];
  49. }
  50. // 大小弧
  51. var large = diffAngle > 180 ? 1 : 0;
  52. // 1-顺时针 0-逆时针
  53. var sweep = startAngle > endAngle ? 0 : 1;
  54. var isClosePath = false;
  55. return isClosePath
  56. ? "M".concat(cx, ",").concat(cy, ",L").concat(x1, ",").concat(y1, ",A").concat(rx, ",").concat(ry, ",0,").concat(large, ",").concat(sweep, ",").concat(x2, ",").concat(y2, ",L").concat(cx, ",").concat(cy)
  57. : "M".concat(x1, ",").concat(y1, ",A").concat(rx, ",").concat(ry, ",0,").concat(large, ",").concat(sweep, ",").concat(x2, ",").concat(y2);
  58. }
  59. function getArcAttr(arc) {
  60. var _a = arc.attributes, startAngle = _a.startAngle, endAngle = _a.endAngle, center = _a.center, radius = _a.radius;
  61. return __spreadArray(__spreadArray([startAngle, endAngle], __read(center), false), [radius], false);
  62. }
  63. function renderArc(container, attr, style, animate) {
  64. var startAngle = attr.startAngle, endAngle = attr.endAngle, center = attr.center, radius = attr.radius;
  65. return container
  66. .selectAll(CLASS_NAMES.line.class)
  67. .data([{ path: getArcPath.apply(void 0, __spreadArray(__spreadArray([startAngle, endAngle], __read(center), false), [radius], false)) }], function (d, i) { return i; })
  68. .join(function (enter) {
  69. return enter
  70. .append('path')
  71. .attr('className', CLASS_NAMES.line.name)
  72. .styles(attr)
  73. .styles({ path: function (d) { return d.path; } });
  74. }, function (update) {
  75. return update
  76. .transition(function () {
  77. var _this = this;
  78. var animation = keyframeInterpolate(this, getArcAttr(this), __spreadArray(__spreadArray([startAngle, endAngle], __read(center), false), [radius], false), animate.update);
  79. if (animation) {
  80. var layout = function () {
  81. var data = get(_this.attributes, '__keyframe_data__');
  82. _this.style.path = getArcPath.apply(void 0, __spreadArray([], __read(data), false));
  83. };
  84. animation.onframe = layout;
  85. animation.onfinish = layout;
  86. }
  87. return animation;
  88. })
  89. .styles(attr);
  90. }, function (exit) { return exit.remove(); })
  91. .styles(style)
  92. .transitions();
  93. }
  94. function renderTruncation(container, _a) {
  95. var truncRange = _a.truncRange, truncShape = _a.truncShape, lineExtension = _a.lineExtension;
  96. // TODO
  97. }
  98. function extendLine(startPos, endPos, range) {
  99. if (range === void 0) { range = [0, 0]; }
  100. var _a = __read([startPos, endPos, range], 3), _b = __read(_a[0], 2), x1 = _b[0], y1 = _b[1], _c = __read(_a[1], 2), x2 = _c[0], y2 = _c[1], _d = __read(_a[2], 2), l1 = _d[0], l2 = _d[1];
  101. var _e = __read([x2 - x1, y2 - y1], 2), x = _e[0], y = _e[1];
  102. var L = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  103. var _f = __read([-l1 / L, l2 / L], 2), s1 = _f[0], s2 = _f[1];
  104. return [s1 * x, s1 * y, s2 * x, s2 * y];
  105. }
  106. function getLinePath(points) {
  107. var _a = __read(points, 2), _b = __read(_a[0], 2), x1 = _b[0], y1 = _b[1], _c = __read(_a[1], 2), x2 = _c[0], y2 = _c[1];
  108. return { x1: x1, y1: y1, x2: x2, y2: y2 };
  109. }
  110. function renderLinear(container, attr, style, animate) {
  111. var showTrunc = attr.showTrunc, startPos = attr.startPos, endPos = attr.endPos, truncRange = attr.truncRange, lineExtension = attr.lineExtension;
  112. var _a = __read([startPos, endPos], 2), _b = __read(_a[0], 2), x1 = _b[0], y1 = _b[1], _c = __read(_a[1], 2), x2 = _c[0], y2 = _c[1];
  113. var _d = __read(lineExtension ? extendLine(startPos, endPos, lineExtension) : new Array(4).fill(0), 4), ox1 = _d[0], oy1 = _d[1], ox2 = _d[2], oy2 = _d[3];
  114. var renderLine = function (data) {
  115. return container
  116. .selectAll(CLASS_NAMES.line.class)
  117. .data(data, function (d, i) { return i; })
  118. .join(function (enter) {
  119. return enter
  120. .append('line')
  121. .attr('className', function (d) { return "".concat(CLASS_NAMES.line.name, " ").concat(d.className); })
  122. .styles(style)
  123. .transition(function (d) {
  124. return transition(this, getLinePath(d.line), false);
  125. });
  126. }, function (update) {
  127. return update.styles(style).transition(function (_a) {
  128. var line = _a.line;
  129. return transition(this, getLinePath(line), animate.update);
  130. });
  131. }, function (exit) { return exit.remove(); })
  132. .transitions();
  133. };
  134. if (!showTrunc || !truncRange) {
  135. return renderLine([
  136. {
  137. line: [
  138. [x1 + ox1, y1 + oy1],
  139. [x2 + ox2, y2 + oy2],
  140. ],
  141. className: CLASS_NAMES.line.name,
  142. },
  143. ]);
  144. }
  145. var _e = __read(truncRange, 2), r1 = _e[0], r2 = _e[1];
  146. var dx = x2 - x1;
  147. var dy = y2 - y1;
  148. var _f = __read([x1 + dx * r1, y1 + dy * r1], 2), x3 = _f[0], y3 = _f[1];
  149. var _g = __read([x1 + dx * r2, y1 + dy * r2], 2), x4 = _g[0], y4 = _g[1];
  150. var animation = renderLine([
  151. {
  152. line: [
  153. [x1 + ox1, y1 + oy1],
  154. [x3, y3],
  155. ],
  156. className: CLASS_NAMES.lineFirst.name,
  157. },
  158. {
  159. line: [
  160. [x4, y4],
  161. [x2 + ox2, y2 + oy2],
  162. ],
  163. className: CLASS_NAMES.lineSecond.name,
  164. },
  165. ]);
  166. renderTruncation(container, attr);
  167. return animation;
  168. }
  169. function renderAxisArrow(container, type, attr, style) {
  170. var showArrow = attr.showArrow, showTrunc = attr.showTrunc, lineArrow = attr.lineArrow, lineArrowOffset = attr.lineArrowOffset, lineArrowSize = attr.lineArrowSize;
  171. var shapeToAddArrow;
  172. if (type === 'arc')
  173. shapeToAddArrow = container.select(CLASS_NAMES.line.class);
  174. else if (showTrunc)
  175. shapeToAddArrow = container.select(CLASS_NAMES.lineSecond.class);
  176. else
  177. shapeToAddArrow = container.select(CLASS_NAMES.line.class);
  178. if (!showArrow || !lineArrow || (attr.type === 'arc' && isCircle(attr.startAngle, attr.endAngle))) {
  179. var node = shapeToAddArrow.node();
  180. if (node)
  181. node.style.markerEnd = undefined;
  182. return;
  183. }
  184. var arrow = renderExtDo(lineArrow);
  185. arrow.attr(style);
  186. scaleToPixel(arrow, lineArrowSize, true);
  187. shapeToAddArrow.style('markerEnd', arrow).style('markerEndOffset', -lineArrowOffset);
  188. }
  189. export function renderAxisLine(container, attr, animate) {
  190. var type = attr.type;
  191. var animation;
  192. var style = subStyleProps(attr, 'line');
  193. if (type === 'linear')
  194. animation = renderLinear(container, attr, omit(style, 'arrow'), animate);
  195. else
  196. animation = renderArc(container, attr, omit(style, 'arrow'), animate);
  197. renderAxisArrow(container, type, attr, style);
  198. return animation;
  199. }
  200. //# sourceMappingURL=line.js.map