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

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _util = require("@antv/util");
var _component = _interopRequireDefault(require("../../base/component"));
var _equal = _interopRequireDefault(require("../../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) {
  (0, _inherits2.default)(Selection, _Component);
  var _super = (0, _createSuper2.default)(Selection);
  function Selection(props, context) {
    var _this;
    (0, _classCallCheck2.default)(this, Selection);
    _this = _super.call(this, props, context);
    var selection = props.selection;
    if (!selection) return (0, _possibleConstructorReturn2.default)(_this);
    var defaultSelected = selection.defaultSelected;
    _this.state.selected = defaultSelected;
    return _this;
  }
  (0, _createClass2.default)(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 (!(0, _equal.default)(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 (0, _util.isFunction)(selectedStyle) ? selectedStyle(record) : selectedStyle;
      }
      return (0, _util.isFunction)(unSelectedStyle) ? unSelectedStyle(record) : unSelectedStyle;
    }
  }]);
  return Selection;
}(_component.default);
var _default = Selection;
exports.default = _default;