pinch.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _common = require("../util/common");
  5. var _helper = require("./helper");
  6. var _base = _interopRequireDefault(require("./base"));
  7. var _chart = _interopRequireDefault(require("../chart/chart"));
  8. var FilterPlugin = _interopRequireWildcard(require("../plugin/filter"));
  9. var _updateScale = _interopRequireDefault(require("./mixin/update-scale"));
  10. function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
  11. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
  12. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  13. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  14. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  15. var Pinch = /*#__PURE__*/function (_Interaction) {
  16. _inheritsLoose(Pinch, _Interaction);
  17. var _proto = Pinch.prototype;
  18. _proto.getDefaultCfg = function getDefaultCfg() {
  19. var defaultCfg = _Interaction.prototype.getDefaultCfg.call(this);
  20. return (0, _common.mix)({}, defaultCfg, {
  21. startEvent: 'pinchstart',
  22. processEvent: 'pinch',
  23. endEvent: 'pinchend',
  24. resetEvent: 'touchend',
  25. pressThreshold: 9,
  26. // Minimal movement that is allowed while pressing
  27. pressTime: 251,
  28. // Minimal press time in ms
  29. mode: 'x',
  30. currentPinchScaling: null,
  31. originValues: null,
  32. minScale: null,
  33. maxScale: null,
  34. limitRange: {},
  35. sensitivity: 1,
  36. _pinchCumulativeDelta: 0,
  37. _timestamp: 0
  38. });
  39. };
  40. function Pinch(cfg, chart) {
  41. var _this;
  42. _this = _Interaction.call(this, cfg, chart) || this;
  43. var self = _assertThisInitialized(_this);
  44. var hammer = self.hammer;
  45. hammer.get('pinch').set({
  46. // open pinch recognizer
  47. enable: true
  48. });
  49. chart.registerPlugins([FilterPlugin, {
  50. changeData: function changeData() {
  51. self.limitRange = {};
  52. self.originTicks = null;
  53. },
  54. clear: function clear() {
  55. self.limitRange = {};
  56. self.originTicks = null;
  57. }
  58. }]);
  59. (0, _common.mix)(self, _updateScale["default"]);
  60. return _this;
  61. }
  62. _proto.start = function start() {
  63. if (this.pressed) return;
  64. this.currentPinchScaling = 1;
  65. };
  66. _proto.process = function process(e) {
  67. if (this.pressed) return;
  68. this._handlePinch(e);
  69. };
  70. _proto.end = function end(e) {
  71. if (this.pressed) return;
  72. this._handlePinch(e);
  73. this.currentPinchScaling = null; // reset
  74. this.pinchCumulativeDelta = 0;
  75. };
  76. _proto._handlePinch = function _handlePinch(e) {
  77. var currentPinchScaling = this.currentPinchScaling;
  78. var diff = 1 / currentPinchScaling * e.scale;
  79. var rect = e.target.getBoundingClientRect();
  80. var offsetX = e.center.x - rect.left;
  81. var offsetY = e.center.y - rect.top;
  82. var center = {
  83. x: offsetX,
  84. y: offsetY
  85. }; // fingers position difference
  86. var x = Math.abs(e.pointers[0].clientX - e.pointers[1].clientX);
  87. var y = Math.abs(e.pointers[0].clientY - e.pointers[1].clientY); // diagonal fingers will change both (xy) axes
  88. var p = x / y;
  89. var xy;
  90. if (p > 0.3 && p < 1.7) {
  91. xy = 'xy';
  92. } else if (x > y) {
  93. xy = 'x';
  94. } else {
  95. xy = 'y';
  96. }
  97. var lastTimestamp = this._timestamp;
  98. var now = +new Date();
  99. if (now - lastTimestamp > 16) {
  100. this._doZoom(diff, center, xy);
  101. this._timestamp = now;
  102. } // Keep track of overall scale
  103. this.currentPinchScaling = e.scale;
  104. };
  105. _proto._doZoom = function _doZoom(diff, center, whichAxes) {
  106. var self = this;
  107. var mode = self.mode,
  108. chart = self.chart,
  109. limitRange = self.limitRange; // Which axe should be modified when figers were used.
  110. var _whichAxes;
  111. if (mode === 'xy' && whichAxes !== undefined) {
  112. // based on fingers positions
  113. _whichAxes = whichAxes;
  114. } else {
  115. _whichAxes = 'xy';
  116. }
  117. var data = chart.get('data');
  118. if ((0, _common.directionEnabled)(mode, 'x') && (0, _common.directionEnabled)(_whichAxes, 'x')) {
  119. // x
  120. var xScale = chart.getXScale();
  121. var xField = xScale.field;
  122. if (!limitRange[xField]) {
  123. limitRange[xField] = (0, _helper.getLimitRange)(data, xScale);
  124. }
  125. if (xScale.isCategory) {
  126. // 横轴为分类类型
  127. self._zoomCatScale(xScale, diff, center);
  128. } else if (xScale.isLinear) {
  129. self._zoomLinearScale(xScale, diff, center, 'x');
  130. }
  131. this.xRange = (0, _helper.getFieldRange)(xScale, limitRange[xField], xScale.type);
  132. }
  133. if ((0, _common.directionEnabled)(mode, 'y') && (0, _common.directionEnabled)(_whichAxes, 'y')) {
  134. // y
  135. var yScales = chart.getYScales();
  136. (0, _common.each)(yScales, function (yScale) {
  137. var yField = yScale.field;
  138. if (!limitRange[yField]) {
  139. limitRange[yField] = (0, _helper.getLimitRange)(data, yScale);
  140. }
  141. yScale.isLinear && self._zoomLinearScale(yScale, diff, center, 'y');
  142. });
  143. var scale = yScales[0];
  144. this.yRange = (0, _helper.getFieldRange)(scale, limitRange[scale.field], scale.type);
  145. }
  146. chart.repaint();
  147. };
  148. _proto._zoomLinearScale = function _zoomLinearScale(scale, zoom, center, flag) {
  149. var chart = this.chart;
  150. var min = scale.min,
  151. max = scale.max,
  152. field = scale.field;
  153. var valueRange = max - min;
  154. var limitRange = this.limitRange;
  155. var originRange = limitRange[field].max - limitRange[field].min;
  156. var coord = chart.get('coord');
  157. var newDiff = valueRange * (zoom - 1);
  158. if (this.minScale && zoom < 1) {
  159. // zoom in
  160. var maxRange = originRange / this.minScale;
  161. newDiff = Math.max(valueRange - maxRange, newDiff);
  162. }
  163. if (this.maxScale && zoom >= 1) {
  164. // zoom out
  165. var minRange = originRange / this.maxScale;
  166. newDiff = Math.min(valueRange - minRange, newDiff);
  167. }
  168. var offsetPoint = coord.invertPoint(center);
  169. var percent = flag === 'x' ? offsetPoint.x : offsetPoint.y;
  170. var minDelta = newDiff * percent;
  171. var maxDelta = newDiff * (1 - percent);
  172. var newMax = max - maxDelta;
  173. var newMin = min + minDelta;
  174. this.updateLinearScale(field, newMin, newMax);
  175. } // 针对分类类型
  176. ;
  177. _proto._zoomCatScale = function _zoomCatScale(scale, zoom, center) {
  178. var pinchCumulativeDelta = this._pinchCumulativeDelta;
  179. var sensitivity = this.sensitivity;
  180. pinchCumulativeDelta = zoom > 1 ? pinchCumulativeDelta + 1 : pinchCumulativeDelta - 1;
  181. this._pinchCumulativeDelta = pinchCumulativeDelta;
  182. var field = scale.field,
  183. values = scale.values;
  184. var chart = this.chart;
  185. var coord = chart.get('coord');
  186. if (!this.originTicks) {
  187. this.originTicks = scale.ticks;
  188. }
  189. var originValues = this.limitRange[field];
  190. var originValuesLen = originValues.length;
  191. var minScale = this.minScale || 1;
  192. var maxScale = this.maxScale || 5;
  193. var minCount = parseInt(originValuesLen / maxScale);
  194. var maxCount = parseInt(originValuesLen / minScale);
  195. var currentLen = values.length;
  196. if (pinchCumulativeDelta > 0 && currentLen <= minCount) {
  197. return null;
  198. }
  199. if (pinchCumulativeDelta < 0 && currentLen >= maxCount) {
  200. return null;
  201. }
  202. var lastLabelIndex = originValuesLen - 1;
  203. var firstValue = values[0];
  204. var lastValue = values[currentLen - 1];
  205. var minIndex = originValues.indexOf(firstValue);
  206. var maxIndex = originValues.indexOf(lastValue);
  207. var chartCenter = (coord.start.x + coord.end.x) / 2;
  208. var centerPointer = center.x;
  209. if (Math.abs(pinchCumulativeDelta) > sensitivity) {
  210. var deltaCount = Math.max(1, parseInt(currentLen * Math.abs(zoom - 1)));
  211. if (pinchCumulativeDelta < 0) {
  212. if (centerPointer >= chartCenter) {
  213. if (minIndex <= 0) {
  214. maxIndex = Math.min(lastLabelIndex, maxIndex + deltaCount);
  215. } else {
  216. minIndex = Math.max(0, minIndex - deltaCount);
  217. }
  218. } else if (centerPointer < chartCenter) {
  219. if (maxIndex >= lastLabelIndex) {
  220. minIndex = Math.max(0, minIndex - deltaCount);
  221. } else {
  222. maxIndex = Math.min(lastLabelIndex, maxIndex + deltaCount);
  223. }
  224. }
  225. this._pinchCumulativeDelta = 0;
  226. } else if (pinchCumulativeDelta > 0) {
  227. if (centerPointer >= chartCenter) {
  228. minIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + deltaCount) : minIndex;
  229. } else if (centerPointer < chartCenter) {
  230. maxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - deltaCount) : maxIndex;
  231. }
  232. this._pinchCumulativeDelta = 0;
  233. }
  234. var newValues = originValues.slice(minIndex, maxIndex + 1);
  235. this.updateCatScale(field, newValues, this.originTicks, originValues, minIndex, maxIndex);
  236. }
  237. };
  238. return Pinch;
  239. }(_base["default"]);
  240. _chart["default"].registerInteraction('pinch', Pinch);
  241. var _default = Pinch;
  242. exports["default"] = _default;