@antv/interaction/src/shapeSelect.js

const Util = require('./util');
const Interaction = require('./base');

function getOriginalAttrs(attrs, styles) {
  const origin = {};
  for (const style in styles) {
    origin[style] = attrs[style];
  }
  return origin;
}

class Select extends Interaction {
  getDefaultCfg() {
    const defaultCfg = super.getDefaultCfg();
    return Util.mix({}, defaultCfg, {
      startEvent: 'mouseup',
      processEvent: null,
      selectStyle: {
        fillOpacity: 1
      },
      unSelectStyle: {
        fillOpacity: 0.1
      },
      cancelable: true
    });
  }

  start(ev) {
    const self = this;
    const chart = self.view;

    let selectedShape;
    const unSelectedShapes = [];
    chart.eachShape((obj, shape) => {
      if (shape.isPointInPath(ev.x, ev.y)) {
        selectedShape = shape;
      } else {
        unSelectedShapes.push(shape);
      }
    });

    if (!selectedShape) {
      self.reset();
      return;
    }

    if (selectedShape.get('_selected')) { // 已经被选中
      if (!self.cancelable) { // 不允许取消选中则不处理
        return;
      }
      self.reset(); // 允许取消选中
    } else { // 未被选中
      const { selectStyle, unSelectStyle } = self;
      // 获取选中效果对应的本来效果,保存下来
      const originAttrs = getOriginalAttrs(selectedShape.attr(), selectedShape);
      selectedShape.set('_originAttrs', originAttrs);
      selectedShape.attr(selectStyle);

      Util.each(unSelectedShapes, child => {
        let originAttrs = child.get('_originAttrs');
        // 先恢复到默认状态下
        if (originAttrs) {
          child.attr(originAttrs);
        }
        child.set('_selected', false);
        // 保存未选中效果对应的原始效果
        if (unSelectStyle) {
          originAttrs = getOriginalAttrs(child.attr(), unSelectStyle);
          child.set('_originAttrs', originAttrs);
          child.attr(unSelectStyle);
        }
      });

      selectedShape.set('_selected', true);
      self.selectedShape = selectedShape;
      self.canvas.draw();
    }
  }

  end(ev) {
    const selectedShape = this.selectedShape;
    if (selectedShape && !selectedShape.get('destroyed') && selectedShape.get('origin')) {
      ev.data = selectedShape.get('origin')._origin; // 绘制数据，包含原始数据啊
      ev.shapeInfo = selectedShape.get('origin');
      ev.shape = selectedShape;
      ev.selected = !!selectedShape.get('_selected'); // 返回选中的状态
    }
  }

  reset() {
    const self = this;
    if (!self.selectedShape) {
      return;
    }
    const chart = self.view;
    const geom = chart.get('geoms')[0];
    const container = geom.get('container').get('children')[0];
    const children = container.get('children');

    Util.each(children, child => {
      const originAttrs = child.get('_originAttrs');
      if (originAttrs) {
        child._attrs = originAttrs;
        child.set('_originAttrs', null);
      }
      child.set('_selected', false);
    });
    self.canvas.draw();
  }
}

module.exports = Select;