| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- "use strict";
- exports.__esModule = true;
- exports["default"] = void 0;
- var _common = require("../util/common");
- var _helper = require("./helper");
- var _base = _interopRequireDefault(require("./base"));
- var _chart = _interopRequireDefault(require("../chart/chart"));
- var FilterPlugin = _interopRequireWildcard(require("../plugin/filter"));
- var _updateScale = _interopRequireDefault(require("./mixin/update-scale"));
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
- 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; }
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
- function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
- var Pinch = /*#__PURE__*/function (_Interaction) {
- _inheritsLoose(Pinch, _Interaction);
- var _proto = Pinch.prototype;
- _proto.getDefaultCfg = function getDefaultCfg() {
- var defaultCfg = _Interaction.prototype.getDefaultCfg.call(this);
- return (0, _common.mix)({}, defaultCfg, {
- startEvent: 'pinchstart',
- processEvent: 'pinch',
- endEvent: 'pinchend',
- resetEvent: 'touchend',
- pressThreshold: 9,
- // Minimal movement that is allowed while pressing
- pressTime: 251,
- // Minimal press time in ms
- mode: 'x',
- currentPinchScaling: null,
- originValues: null,
- minScale: null,
- maxScale: null,
- limitRange: {},
- sensitivity: 1,
- _pinchCumulativeDelta: 0,
- _timestamp: 0
- });
- };
- function Pinch(cfg, chart) {
- var _this;
- _this = _Interaction.call(this, cfg, chart) || this;
- var self = _assertThisInitialized(_this);
- var hammer = self.hammer;
- hammer.get('pinch').set({
- // open pinch recognizer
- enable: true
- });
- chart.registerPlugins([FilterPlugin, {
- changeData: function changeData() {
- self.limitRange = {};
- self.originTicks = null;
- },
- clear: function clear() {
- self.limitRange = {};
- self.originTicks = null;
- }
- }]);
- (0, _common.mix)(self, _updateScale["default"]);
- return _this;
- }
- _proto.start = function start() {
- if (this.pressed) return;
- this.currentPinchScaling = 1;
- };
- _proto.process = function process(e) {
- if (this.pressed) return;
- this._handlePinch(e);
- };
- _proto.end = function end(e) {
- if (this.pressed) return;
- this._handlePinch(e);
- this.currentPinchScaling = null; // reset
- this.pinchCumulativeDelta = 0;
- };
- _proto._handlePinch = function _handlePinch(e) {
- var currentPinchScaling = this.currentPinchScaling;
- var diff = 1 / currentPinchScaling * e.scale;
- var rect = e.target.getBoundingClientRect();
- var offsetX = e.center.x - rect.left;
- var offsetY = e.center.y - rect.top;
- var center = {
- x: offsetX,
- y: offsetY
- }; // fingers position difference
- var x = Math.abs(e.pointers[0].clientX - e.pointers[1].clientX);
- var y = Math.abs(e.pointers[0].clientY - e.pointers[1].clientY); // diagonal fingers will change both (xy) axes
- var p = x / y;
- var xy;
- if (p > 0.3 && p < 1.7) {
- xy = 'xy';
- } else if (x > y) {
- xy = 'x';
- } else {
- xy = 'y';
- }
- var lastTimestamp = this._timestamp;
- var now = +new Date();
- if (now - lastTimestamp > 16) {
- this._doZoom(diff, center, xy);
- this._timestamp = now;
- } // Keep track of overall scale
- this.currentPinchScaling = e.scale;
- };
- _proto._doZoom = function _doZoom(diff, center, whichAxes) {
- var self = this;
- var mode = self.mode,
- chart = self.chart,
- limitRange = self.limitRange; // Which axe should be modified when figers were used.
- var _whichAxes;
- if (mode === 'xy' && whichAxes !== undefined) {
- // based on fingers positions
- _whichAxes = whichAxes;
- } else {
- _whichAxes = 'xy';
- }
- var data = chart.get('data');
- if ((0, _common.directionEnabled)(mode, 'x') && (0, _common.directionEnabled)(_whichAxes, 'x')) {
- // x
- var xScale = chart.getXScale();
- var xField = xScale.field;
- if (!limitRange[xField]) {
- limitRange[xField] = (0, _helper.getLimitRange)(data, xScale);
- }
- if (xScale.isCategory) {
- // 横轴为分类类型
- self._zoomCatScale(xScale, diff, center);
- } else if (xScale.isLinear) {
- self._zoomLinearScale(xScale, diff, center, 'x');
- }
- this.xRange = (0, _helper.getFieldRange)(xScale, limitRange[xField], xScale.type);
- }
- if ((0, _common.directionEnabled)(mode, 'y') && (0, _common.directionEnabled)(_whichAxes, 'y')) {
- // y
- var yScales = chart.getYScales();
- (0, _common.each)(yScales, function (yScale) {
- var yField = yScale.field;
- if (!limitRange[yField]) {
- limitRange[yField] = (0, _helper.getLimitRange)(data, yScale);
- }
- yScale.isLinear && self._zoomLinearScale(yScale, diff, center, 'y');
- });
- var scale = yScales[0];
- this.yRange = (0, _helper.getFieldRange)(scale, limitRange[scale.field], scale.type);
- }
- chart.repaint();
- };
- _proto._zoomLinearScale = function _zoomLinearScale(scale, zoom, center, flag) {
- var chart = this.chart;
- var min = scale.min,
- max = scale.max,
- field = scale.field;
- var valueRange = max - min;
- var limitRange = this.limitRange;
- var originRange = limitRange[field].max - limitRange[field].min;
- var coord = chart.get('coord');
- var newDiff = valueRange * (zoom - 1);
- if (this.minScale && zoom < 1) {
- // zoom in
- var maxRange = originRange / this.minScale;
- newDiff = Math.max(valueRange - maxRange, newDiff);
- }
- if (this.maxScale && zoom >= 1) {
- // zoom out
- var minRange = originRange / this.maxScale;
- newDiff = Math.min(valueRange - minRange, newDiff);
- }
- var offsetPoint = coord.invertPoint(center);
- var percent = flag === 'x' ? offsetPoint.x : offsetPoint.y;
- var minDelta = newDiff * percent;
- var maxDelta = newDiff * (1 - percent);
- var newMax = max - maxDelta;
- var newMin = min + minDelta;
- this.updateLinearScale(field, newMin, newMax);
- } // 针对分类类型
- ;
- _proto._zoomCatScale = function _zoomCatScale(scale, zoom, center) {
- var pinchCumulativeDelta = this._pinchCumulativeDelta;
- var sensitivity = this.sensitivity;
- pinchCumulativeDelta = zoom > 1 ? pinchCumulativeDelta + 1 : pinchCumulativeDelta - 1;
- this._pinchCumulativeDelta = pinchCumulativeDelta;
- var field = scale.field,
- values = scale.values;
- var chart = this.chart;
- var coord = chart.get('coord');
- if (!this.originTicks) {
- this.originTicks = scale.ticks;
- }
- var originValues = this.limitRange[field];
- var originValuesLen = originValues.length;
- var minScale = this.minScale || 1;
- var maxScale = this.maxScale || 5;
- var minCount = parseInt(originValuesLen / maxScale);
- var maxCount = parseInt(originValuesLen / minScale);
- var currentLen = values.length;
- if (pinchCumulativeDelta > 0 && currentLen <= minCount) {
- return null;
- }
- if (pinchCumulativeDelta < 0 && currentLen >= maxCount) {
- return null;
- }
- var lastLabelIndex = originValuesLen - 1;
- var firstValue = values[0];
- var lastValue = values[currentLen - 1];
- var minIndex = originValues.indexOf(firstValue);
- var maxIndex = originValues.indexOf(lastValue);
- var chartCenter = (coord.start.x + coord.end.x) / 2;
- var centerPointer = center.x;
- if (Math.abs(pinchCumulativeDelta) > sensitivity) {
- var deltaCount = Math.max(1, parseInt(currentLen * Math.abs(zoom - 1)));
- if (pinchCumulativeDelta < 0) {
- if (centerPointer >= chartCenter) {
- if (minIndex <= 0) {
- maxIndex = Math.min(lastLabelIndex, maxIndex + deltaCount);
- } else {
- minIndex = Math.max(0, minIndex - deltaCount);
- }
- } else if (centerPointer < chartCenter) {
- if (maxIndex >= lastLabelIndex) {
- minIndex = Math.max(0, minIndex - deltaCount);
- } else {
- maxIndex = Math.min(lastLabelIndex, maxIndex + deltaCount);
- }
- }
- this._pinchCumulativeDelta = 0;
- } else if (pinchCumulativeDelta > 0) {
- if (centerPointer >= chartCenter) {
- minIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + deltaCount) : minIndex;
- } else if (centerPointer < chartCenter) {
- maxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - deltaCount) : maxIndex;
- }
- this._pinchCumulativeDelta = 0;
- }
- var newValues = originValues.slice(minIndex, maxIndex + 1);
- this.updateCatScale(field, newValues, this.originTicks, originValues, minIndex, maxIndex);
- }
- };
- return Pinch;
- }(_base["default"]);
- _chart["default"].registerInteraction('pinch', Pinch);
- var _default = Pinch;
- exports["default"] = _default;
|