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

Charts for mobile visualization.

import { __extends } from "tslib";
import { isFunction } from '@antv/util';
import { Component, isEqual as equal } from '@antv/f-engine';
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 = /** @class */function (_super) {
  __extends(Selection, _super);
  function Selection(props, context) {
    var _this = _super.call(this, props, context) || this;
    var selection = props.selection;
    if (!selection) return _this;
    var defaultSelected = selection.defaultSelected;
    _this.state.selected = defaultSelected;
    return _this;
  }
  Selection.prototype.didMount = function () {
    var _this = this;
    var _a = this,
      props = _a.props,
      state = _a.state;
    var selection = props.selection,
      chart = props.chart;
    if (!selection) return;
    // 默认为 click
    var _b = selection.triggerOn,
      triggerOn = _b === void 0 ? 'click' : _b;
    chart.on(triggerOn, function (ev) {
      var points = ev.points,
        x = ev.canvasX,
        y = ev.canvasY;
      var point = triggerOn === 'click' ? {
        x: x,
        y: y
      } : points[0];
      var records = _this.getSnapRecords(point);
      var _a = selection.type,
        type = _a === void 0 ? 'single' : _a,
        _b = selection.cancelable,
        cancelable = _b === void 0 ? true : _b;
      if (!records || !records.length) {
        if (cancelable) {
          _this.setState({
            selected: null
          });
        }
        return;
      }
      var selected = state.selected;
      var origins = records.map(function (record) {
        return record.origin;
      });
      if (!selected || !selected.length) {
        _this.setState({
          selected: origins
        });
      }
      if (type === 'single') {
        if (!cancelable) {
          _this.setState({
            selected: origins
          });
          return;
        }
        var newSelected_1 = [];
        records.forEach(function (record) {
          if (!_this.isSelected(record)) {
            newSelected_1.push(record.origin);
          }
        });
        _this.setState({
          selected: newSelected_1
        });
        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);
      _this.setState({
        selected: newSelected
      });
    });
  };
  Selection.prototype.willReceiveProps = function (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;
    }
  };
  Selection.prototype.getSnapRecords = function (_point) {
    return null;
  };
  Selection.prototype.isSelected = function (record) {
    var _a = this,
      state = _a.state,
      props = _a.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;
  };
  Selection.prototype.getSelectionStyle = function (record) {
    var _a = this,
      state = _a.state,
      props = _a.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;