suoqiu-f2/lib/interaction/pinch.js

Charts for mobile visualization.

"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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
var Pinch = /*#__PURE__*/function (_Interaction) {
  function Pinch(cfg, chart) {
    var _this;
    _this = _Interaction.call(this, cfg, chart) || this;
    var self = _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;
  }
  _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
    });
  };
  _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 = exports["default"] = Pinch;