context.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _array = require("../../util/array");
  5. var _const = require("../../chart/const");
  6. var autoCat = require('@antv/scale/lib/auto/cat'); // 判断新老values是否相等,这里只要判断前后是否相等即可
  7. function isValuesEqual(values, newValues) {
  8. if (values.length !== newValues.length) {
  9. return false;
  10. }
  11. var lastIndex = values.length - 1;
  12. return values[0] === newValues[0] && values[lastIndex] === newValues[lastIndex];
  13. } // 不同交互之间共享的上下文
  14. var defaultRange = [0, 1];
  15. var Context = /*#__PURE__*/function () {
  16. // 最开始的原始值
  17. // 当前显示的范围
  18. // 缩放最小的点数
  19. // 最小的缩放比例, 默认通过minCount计算
  20. // minScale = 0.01;
  21. // 交互开始时,ticks个数,主要为了每次缩放后,更新ticks个数
  22. // lastTickCount;
  23. function Context(chart) {
  24. this.chart = null;
  25. this.values = null;
  26. this.range = defaultRange;
  27. this.startRange = defaultRange;
  28. this.minCount = 10;
  29. this.chart = chart;
  30. this._initEvent(chart);
  31. }
  32. var _proto = Context.prototype;
  33. _proto._initEvent = function _initEvent(chart) {
  34. var _this = this;
  35. // 在整体初始化后还需要设置一些初始状态
  36. chart.on(_const.EVENT_AFTER_INIT, function () {
  37. // 初始化value值
  38. var scale = _this.getPinchScale(); // 记录原始全量数据
  39. var values = [].concat(scale.values);
  40. _this.values = values; // 最小的缩放比例
  41. if (!_this.minScale) {
  42. _this.minScale = _this.minCount / values.length;
  43. } // 初始化的时候有设置range,则初始化成默认比例
  44. if (_this.range !== defaultRange) {
  45. _this.updateRange(_this.range);
  46. _this.updateTicks();
  47. }
  48. });
  49. chart.on(_const.EVENT_AFTER_DATA_CHANGE, function () {
  50. _this.updateRange(_this.range);
  51. });
  52. } // 缩放的主轴scale
  53. ;
  54. _proto.getPinchScale = function getPinchScale() {
  55. var chart = this.chart; // 默认缩放x轴
  56. var scale = chart.getXScale();
  57. return scale;
  58. } // 跟随轴的scale
  59. ;
  60. _proto.getFollowScale = function getFollowScale() {
  61. var chart = this.chart; // 默认缩放x轴
  62. var scales = chart.getYScales() || [];
  63. return scales[0];
  64. };
  65. _proto.start = function start() {
  66. var range = this.range;
  67. var scale = this.getPinchScale();
  68. var start = range[0],
  69. end = range[1]; // 记录交互起始的范围
  70. this.startRange = [start, end]; // 记录开始时的ticks个数
  71. this.lastTickCount = scale.tickCount;
  72. };
  73. _proto.doZoom = function doZoom(leftScale, rightScale, zoom) {
  74. var range = this.startRange,
  75. minScale = this.minScale;
  76. var start = range[0],
  77. end = range[1];
  78. var zoomOffset = 1 - zoom;
  79. var rangeLen = end - start;
  80. var rangeOffset = rangeLen * zoomOffset;
  81. var leftOffset = rangeOffset * leftScale;
  82. var rightOffset = rangeOffset * rightScale;
  83. var newStart = Math.max(0, start - leftOffset);
  84. var newEnd = Math.min(1, end + rightOffset);
  85. var newRange = [newStart, newEnd]; // 如果已经到了最小比例,则不能再继续再放大
  86. if (newEnd - newStart < minScale) {
  87. return;
  88. }
  89. this.updateRange(newRange);
  90. };
  91. _proto.doMove = function doMove(ratio) {
  92. // 不管是0, 还是其他,都不用处理
  93. if (!ratio) return;
  94. var range = this.startRange;
  95. var start = range[0],
  96. end = range[1];
  97. var rangeLen = end - start;
  98. var rangeOffset = rangeLen * ratio;
  99. var newStart = start - rangeOffset;
  100. var newEnd = end - rangeOffset; // 处理边界值
  101. var newRange;
  102. if (newStart < 0) {
  103. newRange = [0, rangeLen];
  104. } else if (newEnd > 1) {
  105. newRange = [1 - rangeLen, 1];
  106. } else {
  107. newRange = [newStart, newEnd];
  108. }
  109. this.updateRange(newRange);
  110. };
  111. _proto.updateRange = function updateRange(range) {
  112. var values = this.values; // 0, 1 的范围之间
  113. var start = range[0],
  114. end = range[1]; // start 不能小于0
  115. start = Math.max(0, start); // end 不能大于1
  116. end = Math.min(1, end); // 设置当前的范围
  117. this.range = [start, end];
  118. var len = values.length;
  119. var valueStart = start * len;
  120. var valueEnd = end * len; // 从原始数据里截取需要显示的数据
  121. var newValues = values.slice(valueStart, valueEnd);
  122. this.repaint(newValues);
  123. };
  124. _proto.repaint = function repaint(newValues) {
  125. var chart = this.chart;
  126. var scale = this.getPinchScale();
  127. var currentValues = scale.values,
  128. ticks = scale.ticks; // 如果新数组和当前显示的数组相同,则不更新
  129. if (isValuesEqual(currentValues, newValues)) {
  130. return;
  131. } // 更新主轴values
  132. this.updateScale(scale, {
  133. ticks: ticks,
  134. values: newValues
  135. });
  136. this.updateFollowScale(scale, newValues);
  137. chart.repaint();
  138. };
  139. _proto.updateFollowScale = function updateFollowScale(pinchScale, pinchValues) {
  140. var chart = this.chart;
  141. var followScale = this.getFollowScale();
  142. var pinchField = pinchScale.field,
  143. pinchScaleType = pinchScale.type;
  144. var followField = followScale.field; // 根据主轴的value值,找到所有从轴的value值
  145. var values = []; // 转成map,让查找性能更高
  146. var pinchValueMap = {};
  147. pinchValues.forEach(function (item) {
  148. pinchValueMap[item] = true;
  149. });
  150. var data = chart.get('data');
  151. data.forEach(function (item) {
  152. if (pinchScaleType === 'timeCat') {
  153. var value = pinchScale._toTimeStamp(item[pinchField]);
  154. if (pinchValueMap[value]) {
  155. values.push(item[followField]);
  156. }
  157. }
  158. });
  159. var _getRange = (0, _array.getRange)(values),
  160. min = _getRange.min,
  161. max = _getRange.max;
  162. this.updateScale(followScale, {
  163. min: min,
  164. max: max,
  165. nice: true
  166. });
  167. };
  168. _proto.updateScale = function updateScale(scale, cfg) {
  169. if (!scale) {
  170. return;
  171. }
  172. scale.change(cfg);
  173. } // 上一次的tick个数
  174. ;
  175. _proto.updateTicks = function updateTicks() {
  176. var chart = this.chart,
  177. lastTickCount = this.lastTickCount,
  178. values = this.values;
  179. var scale = this.getPinchScale();
  180. var currentValues = scale.values,
  181. tickCount = scale.tickCount,
  182. isRounding = scale.isRounding; // 根据当前数据的比例,和定义的tickCount计算应该需要多少个ticks
  183. var newTickCount = Math.round(tickCount * values.length / currentValues.length); // 如果个数没有变化,则不更新
  184. if (newTickCount === lastTickCount) {
  185. return;
  186. }
  187. var cat = autoCat({
  188. maxCount: newTickCount,
  189. data: values,
  190. isRounding: isRounding
  191. });
  192. var ticks = cat.ticks;
  193. this.updateScale(scale, {
  194. ticks: ticks,
  195. values: currentValues
  196. }); // 更新完后,需要重新绘制一次
  197. chart.repaint();
  198. };
  199. return Context;
  200. }();
  201. var _default = Context;
  202. exports["default"] = _default;