@antv/f2/es/components/geometry/selection.js

Charts for mobile visualization.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { isFunction } from '@antv/util';
import Component from '../../base/component';
import equal from '../../base/equal';
function isEqual(origin1, origin2, fields) {
  if (origin1 === origin2) {
    return true;
  }
  for (var i = 0, len = fields.length; i < len; i++) {
    var field = fields[i];
    if (origin1[field] !== origin2[field]) {
      return false;
    }
  }
  return true;
}
var Selection = /*#__PURE__*/function (_Component) {
  _inherits(Selection, _Component);
  var _super = _createSuper(Selection);
  function Selection(props, context) {
    var _this;
    _classCallCheck(this, Selection);
    _this = _super.call(this, props, context);
    var selection = props.selection;
    if (!selection) return _possibleConstructorReturn(_this);
    var defaultSelected = selection.defaultSelected;
    _this.state.selected = defaultSelected;
    return _this;
  }
  _createClass(Selection, [{
    key: "didMount",
    value: function didMount() {
      var _this2 = this;
      var props = this.props,
        state = this.state,
        container = this.container;
      var canvas = container.get('canvas');
      var selection = props.selection,
        chart = props.chart;
      if (!selection) return;
      // 默认为 click
      var _selection$triggerOn = selection.triggerOn,
        triggerOn = _selection$triggerOn === void 0 ? 'click' : _selection$triggerOn;
      canvas.on(triggerOn, function (ev) {
        var points = ev.points;
        var records = _this2.getSnapRecords(points[0]);
        var _selection$type = selection.type,
          type = _selection$type === void 0 ? 'single' : _selection$type,
          _selection$cancelable = selection.cancelable,
          cancelable = _selection$cancelable === void 0 ? true : _selection$cancelable;
        if (!records || !records.length) {
          if (cancelable) {
            _this2.setState({
              selected: null
            });
          }
          return;
        }
        var selected = state.selected;
        var origins = records.map(function (record) {
          return record.origin;
        });
        if (!selected || !selected.length) {
          _this2.setState({
            selected: origins
          });
        }
        if (type === 'single') {
          if (!cancelable) {
            _this2.setState({
              selected: origins
            });
            return;
          }
          var _newSelected = [];
          records.forEach(function (record) {
            if (!_this2.isSelected(record)) {
              _newSelected.push(record.origin);
            }
          });
          _this2.setState({
            selected: _newSelected
          });
          return;
        }
        // 多选
        var scales = chart.getScales();
        var fields = Object.keys(scales);
        var selectedMap = {};
        selected.forEach(function (item) {
          var key = fields.map(function (field) {
            return item[field];
          }).join('-');
          selectedMap[key] = item;
        });
        records.forEach(function (record) {
          var origin = record.origin;
          var key = fields.map(function (field) {
            return origin[field];
          }).join('-');
          selectedMap[key] = selectedMap[key] ? null : origin;
        });
        var newSelected = Object.keys(selectedMap).map(function (key) {
          return selectedMap[key];
        }).filter(Boolean);
        _this2.setState({
          selected: newSelected
        });
      });
    }
  }, {
    key: "willReceiveProps",
    value: function willReceiveProps(nextProps) {
      var nextSelection = nextProps.selection;
      var lastSelection = this.props.selection;
      if (!nextSelection || !lastSelection) {
        return;
      }
      var nextDefaultSelected = nextSelection.defaultSelected;
      var lastDefaultSelected = lastSelection.defaultSelected;
      if (!equal(nextDefaultSelected, lastDefaultSelected)) {
        this.state.selected = nextDefaultSelected;
      }
    }
  }, {
    key: "getSnapRecords",
    value: function getSnapRecords(_point) {
      return null;
    }
  }, {
    key: "isSelected",
    value: function isSelected(record) {
      var state = this.state,
        props = this.props;
      var selected = state.selected;
      if (!selected || !selected.length) {
        return false;
      }
      var chart = props.chart;
      var scales = chart.getScales();
      var fields = Object.keys(scales);
      for (var i = 0, len = selected.length; i < len; i++) {
        var item = selected[i];
        if (isEqual(record.origin, item, fields)) {
          return true;
        }
      }
      return false;
    }
  }, {
    key: "getSelectionStyle",
    value: function getSelectionStyle(record) {
      var state = this.state,
        props = this.props;
      var selected = state.selected;
      if (!selected || !selected.length) {
        return null;
      }
      var selection = props.selection;
      var selectedStyle = selection.selectedStyle,
        unSelectedStyle = selection.unSelectedStyle;
      var isSelected = this.isSelected(record);
      if (isSelected) {
        return isFunction(selectedStyle) ? selectedStyle(record) : selectedStyle;
      }
      return isFunction(unSelectedStyle) ? unSelectedStyle(record) : unSelectedStyle;
    }
  }]);
  return Selection;
}(Component);
export default Selection;