@alicloud/cloud-charts/es/common/g2ConnectFilter.js


'use strict';

import { Chart } from '@antv/g2/esm/core';

var G2ConnectFilter = /*#__PURE__*/function () {
  function G2ConnectFilter(charts, config) {
    var _this = this;

    if (charts === void 0) {
      charts = [];
    }

    if (config === void 0) {
      config = {};
    }

    this.charts = void 0;
    this.config = void 0;
    this.isBrushing = void 0;
    this.startPoint = void 0;
    this.endPoint = void 0;
    this.mask = void 0;

    this.handleMouseEnter = function () {
      _this.charts.forEach(function (chart) {
        chart.getCanvas().setCursor('crosshair');
      });
    };

    this.handleMouseDown = function () {
      var self = _this;
      return function (e) {
        self.isBrushing = true;
        self.startPoint = [e.x, e.y];
      };
    }();

    this.handleMouseMove = function () {
      var self = _this;
      return function (e) {
        if (!self.isBrushing) {
          return;
        } // @ts-ignore


        var chartInstance = this;
        var x = Math.min(self.startPoint[0], e.x);
        var y = Math.min(self.startPoint[1], e.y);
        var width = Math.abs(e.x - self.startPoint[0]);
        var height = Math.abs(e.y - self.startPoint[1]); // 显示mask

        if (!self.mask) {
          self.mask = chartInstance.foregroundGroup.addShape({
            type: 'rect',
            name: 'mask',
            draggable: true,
            attrs: {
              fill: '#C5D4EB',
              opacity: 0.3,
              x: x,
              y: y,
              width: width,
              height: height
            }
          });
        } else {
          self.mask.attr({
            x: x,
            y: y,
            width: width,
            height: height
          });
        }
      };
    }();

    this.handleMouseUp = function () {
      var self = _this;
      return function (e) {
        if (!self.isBrushing) {
          return;
        } // @ts-ignore


        var chartInstance = this;
        var x = Math.min(self.startPoint[0], e.x);
        var y = Math.min(self.startPoint[1], e.y);
        var width = Math.abs(e.x - self.startPoint[0]);
        var height = Math.abs(e.y - self.startPoint[1]);
        var coord = chartInstance.getCoordinate();
        var normalStart = coord.invert({
          x: x,
          y: y
        });
        var normalEnd = coord.invert({
          x: x + width,
          y: y + height
        }); // 过滤数据

        self.charts.forEach(function (chart) {
          var xScale = chart.getXScale();
          var minValue = xScale.invert(normalStart.x);
          var maxValue = xScale.invert(normalEnd.x);
          var filterFunc = null;

          if (xScale.isCategory) {
            var minIndex = xScale.values.indexOf(minValue);
            var maxIndex = xScale.values.indexOf(maxValue);
            var arr = xScale.values.slice(minIndex, maxIndex + 1);

            filterFunc = function filterFunc(value) {
              return arr.includes(value);
            };
          } else {
            filterFunc = function filterFunc(value) {
              return value >= minValue && value <= maxValue;
            };
          }

          chart.filter(xScale.field, filterFunc);
          chart.render(true);
        });

        if (self.mask) {
          self.mask.hide();
        }

        self.isBrushing = false;
      };
    }();

    this.charts = []; // 配置项，后续添加数据联动等配置项

    this.config = Object.assign({
      type: 'position',
      coordinate: 'x'
    }, config);
    this.isBrushing = false; // 添加绑定

    this.add.apply(this, charts);
  }

  var _proto = G2ConnectFilter.prototype;

  _proto.add = function add() {
    var _this2 = this;

    for (var _len = arguments.length, charts = new Array(_len), _key = 0; _key < _len; _key++) {
      charts[_key] = arguments[_key];
    }

    charts.forEach(function (chart) {
      if (!isValidChart(chart)) {
        return;
      }

      if (_this2.charts.indexOf(chart) === -1) {
        // 存储实例的引用
        _this2.charts.push(chart); // 绑定事件 新版G2底层事件系统没有去重，需要手动去重


        chart.on('plot:mouseenter', _this2.handleMouseEnter);
        chart.on('plot:mousedown', _this2.handleMouseDown);
        chart.on('plot:mousemove', _this2.handleMouseMove);
        chart.on('plot:mouseup', _this2.handleMouseUp);
      }
    });
  };

  _proto.remove = function remove() {
    var _this3 = this;

    for (var _len2 = arguments.length, charts = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      charts[_key2] = arguments[_key2];
    }

    if (charts.length === 0) {
      // 清空所有绑定
      this.charts.forEach(function (chart) {
        if (!isValidChart(chart)) {
          return;
        }

        chart.off('plot:mouseenter', _this3.handleMouseEnter);
        chart.off('plot:mousedown', _this3.handleMouseDown);
        chart.off('plot:mousemove', _this3.handleMouseMove);
        chart.off('plot:mouseup', _this3.handleMouseUp);
      });
      this.charts = [];
    } else {
      charts.forEach(function (chart) {
        if (!isValidChart(chart)) {
          return;
        }

        var index = _this3.charts.indexOf(chart);

        if (index !== -1) {
          // 去除实例的存储
          _this3.charts.splice(index, 1); // 绑定事件


          chart.off('plot:mouseenter', _this3.handleMouseEnter);
          chart.off('plot:mousedown', _this3.handleMouseDown);
          chart.off('plot:mousemove', _this3.handleMouseMove);
          chart.off('plot:mouseup', _this3.handleMouseUp);
        }
      });
    }
  };

  _proto.destroy = function destroy() {
    this.remove();
  } // 事件相关函数
  // 需要注意的是，这里用闭包创建特殊的行为函数。
  // 事件函数被调用时，this（chartInstance）会指向触发事件的图表实例，而self指向connect类的实例
  ;

  return G2ConnectFilter;
}();
/**
 * 判断图表是否有效
 *
 * @param {object} chart G2图表实例
 *
 * @return {boolean} 是否有效图例
 * */


function isValidChart(chart) {
  return chart && !chart.destroyed && chart.constructor === Chart;
}

export default G2ConnectFilter;