@antv/g2-brush/build/g2-plugin-brush.js

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["Brush"] = factory();
	else
		root["Brush"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

/**
 * [exports description]
 * @type {Object}
 */
var Brush = __webpack_require__(1);
module.exports = Brush;

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * [exports description]
 * @type {Object}
 */
var Util = __webpack_require__(2);

var Brush = function () {
  function Brush(chart, type) {
    _classCallCheck(this, Brush);

    this.startPoint = null;
    this.isBrushing = false;
    this.brushShape = null;
    this.container = null;
    this.polygonPath = null;
    this.polygonPoints = null;

    this.type = type || 'XY';
    this.chart = chart;
    // TODO
    this.canvas = chart.get('canvas');
    this.plotRange = chart.get('plotRange');
    this.frontPlot = chart.get('frontPlot');

    this.bindEvent();
  }

  Brush.prototype.bindEvent = function bindEvent() {
    var me = this;
    var chart = me.chart,
        frontPlot = me.frontPlot,
        type = me.type;


    chart.on('mousedown', function (ev) {
      var x = ev.x,
          y = ev.y;

      var container = me.container;
      me.startPoint = {
        x: x,
        y: y
      };
      me.isBrushing = true; // 开始框选
      if (!container) {
        container = frontPlot.addGroup();
        container.initTransform();
      } else {
        container.clear();
      }
      me.container = container;

      if (type === 'polygon') {
        // 不规则筛选
        me.polygonPoints = [];
        me.polygonPath = 'M ' + x + ' ' + y;
        me.polygonPoints.push([x, y]);
      }
      // 这里抛出 brush start 事件

      // const originEvent = ev.event;
      // originEvent.stopPropagation();
      // originEvent.preventDefault();
      me._bindCanvasEvent();
    });
  };

  Brush.prototype._bindCanvasEvent = function _bindCanvasEvent() {
    var canvas = this.canvas;

    var canvasDOM = canvas.get('canvasDOM');
    // canvasDOM.addEventListener('mousemove', Util.wrapBehavior(this, '_onCanvasMouseMove'), false);
    // canvasDOM.addEventListener('mouseup', Util.wrapBehavior(this, '_onCanvasMouseUp'), false);
    this.onMouseMoveListener = Util.addEventListener(canvasDOM, 'mousemove', Util.wrapBehavior(this, '_onCanvasMouseMove'));
    this.onMouseUpListener = Util.addEventListener(canvasDOM, 'mouseup', Util.wrapBehavior(this, '_onCanvasMouseUp'));
  };

  Brush.prototype._limitCoordScope = function _limitCoordScope(point) {
    var plotRange = this.plotRange;
    var tl = plotRange.tl,
        br = plotRange.br;


    if (point.x < tl.x) {
      point.x = tl.x;
    }
    if (point.x > br.x) {
      point.x = br.x;
    }
    if (point.y < tl.y) {
      point.y = tl.y;
    }
    if (point.y > br.y) {
      point.y = br.y;
    }
    return point;
  };

  Brush.prototype._onCanvasMouseMove = function _onCanvasMouseMove(ev) {
    var me = this;
    var isBrushing = me.isBrushing,
        type = me.type,
        plotRange = me.plotRange,
        startPoint = me.startPoint;

    if (!isBrushing) {
      return;
    }
    var canvas = me.canvas;
    var tl = plotRange.tl,
        tr = plotRange.tr,
        bl = plotRange.bl;

    var polygonPath = me.polygonPath;
    var polygonPoints = me.polygonPoints;
    var brushShape = me.brushShape;
    var container = me.container;
    var pointX = ev.offsetX;
    var pointY = ev.offsetY;
    var currentPoint = me._limitCoordScope({
      x: pointX,
      y: pointY
    });
    var rectStartX = void 0;
    var rectStartY = void 0;
    var rectWidth = void 0;
    var rectHeight = void 0;

    if (type === 'Y') {
      rectStartX = tl.x;
      rectStartY = currentPoint.y >= startPoint.y ? startPoint.y : currentPoint.y;
      rectWidth = Math.abs(tl.x - tr.x);
      rectHeight = Math.abs(startPoint.y - currentPoint.y);
    } else if (type === 'X') {
      rectStartX = currentPoint.x >= startPoint.x ? startPoint.x : currentPoint.x;
      rectStartY = tl.y;
      rectWidth = Math.abs(startPoint.x - currentPoint.x);
      rectHeight = Math.abs(tl.y - bl.y);
    } else if (type === 'XY') {
      if (currentPoint.x >= startPoint.x) {
        rectStartX = startPoint.x;
        rectStartY = pointY >= startPoint.y ? startPoint.y : currentPoint.y;
      } else {
        rectStartX = currentPoint.x;
        rectStartY = currentPoint.y >= startPoint.y ? startPoint.y : currentPoint.y;
      }
      rectWidth = Math.abs(startPoint.x - currentPoint.x);
      rectHeight = Math.abs(startPoint.y - currentPoint.y);
    } else if (type === 'polygon') {
      // 不规则框选
      polygonPath += 'L ' + pointX + ' ' + pointY;
      polygonPoints.push([pointX, pointY]);
      me.polygonPath = polygonPath;
      me.polygonPoints = polygonPoints;
      if (!brushShape) {
        brushShape = container.addShape('path', {
          attrs: {
            path: polygonPath,
            stroke: '#979797',
            lineWidth: 2,
            fill: '#D8D8D8',
            fillOpacity: 0.5,
            lineDash: [5, 5]
          }
        });
      } else {
        brushShape.attr(Util.mix({}, brushShape.__attrs, {
          path: polygonPath
        }));
      }
    }
    if (type !== 'polygon') {
      if (!brushShape) {
        brushShape = container.addShape('rect', {
          attrs: {
            x: rectStartX,
            y: rectStartY,
            width: rectWidth,
            height: rectHeight,
            fill: '#CCD7EB',
            opacity: 0.4
          }
        });
      } else {
        brushShape.attr(Util.mix({}, brushShape.__attrs, {
          x: rectStartX,
          y: rectStartY,
          width: rectWidth,
          height: rectHeight
        }));
      }
    }

    me.brushShape = brushShape;

    canvas.draw();

    ev.cancelBubble = true;
    ev.returnValue = false;
  };

  Brush.prototype._onCanvasMouseUp = function _onCanvasMouseUp() {
    var me = this;
    var canvas = me.canvas,
        type = me.type;

    var canvasDOM = canvas.get('canvasDOM');

    // canvasDOM.removeEventListener('mousemove', Util.getWrapBehavior(me, '_onCanvasMouseMove'), false);
    // canvasDOM.removeEventListener('mouseup', Util.getWrapBehavior(me, '_onCanvasMouseUp'), false);
    me.onMouseMoveListener.remove();
    me.onMouseUpListener.remove();
    // selectionPlot.clear(); // 一期先默认清楚
    me.isBrushing = false;
    // this.brushShape = null;
    var brushShape = me.brushShape;
    var polygonPath = me.polygonPath;
    var polygonPoints = me.polygonPoints;

    if (type === 'polygon') {
      polygonPath += 'z';
      polygonPoints.push([polygonPoints[0][0], polygonPoints[0][1]]);

      brushShape.attr(Util.mix({}, brushShape.__attrs, {
        path: polygonPath
      }));
      me.polygonPath = polygonPath;
      me.polygonPoints = polygonPoints;
      canvas.draw();
    } else {
      me.brushShape = null;
    }

    // 抛出 brush end 事件
  };

  // setMode(type) {
  //   // TODO: 框选模式转变
  // }


  return Brush;
}();

module.exports = Brush;

/***/ }),
/* 2 */
/***/ (function(module, exports) {


function _mix(dist, obj) {
  for (var k in obj) {
    if (obj.hasOwnProperty(k) && k !== 'constructor' && obj[k] !== undefined) {
      dist[k] = obj[k];
    }
  }
}

var Util = {
  mix: function mix(dist, obj1, obj2, obj3) {
    if (obj1) {
      _mix(dist, obj1);
    }

    if (obj2) {
      _mix(dist, obj2);
    }

    if (obj3) {
      _mix(dist, obj3);
    }
    return dist;
  },

  /**
   * 添加事件监听器
   * @param  {Object} target DOM对象
   * @param  {String} eventType 事件名
   * @param  {Funtion} callback 回调函数
   * @return {Object} 返回对象
   */
  addEventListener: function addEventListener(target, eventType, callback) {
    if (target.addEventListener) {
      target.addEventListener(eventType, callback, false);
      return {
        remove: function remove() {
          target.removeEventListener(eventType, callback, false);
        }
      };
    } else if (target.attachEvent) {
      target.attachEvent('on' + eventType, callback);
      return {
        remove: function remove() {
          target.detachEvent('on' + eventType, callback);
        }
      };
    }
  },

  /**
   * 封装事件，便于使用上下文this,和便于解除事件时使用
   * @protected
   * @param  {Object} obj   对象
   * @param  {String} action 事件名称
   * @return {Function}        返回事件处理函数
   */
  wrapBehavior: function wrapBehavior(obj, action) {
    if (obj['_wrap_' + action]) {
      return obj['_wrap_' + action];
    }
    var method = function method(e) {
      obj[action](e);
    };
    obj['_wrap_' + action] = method;
    return method;
  },

  /**
   * 获取封装的事件
   * @protected
   * @param  {Object} obj   对象
   * @param  {String} action 事件名称
   * @return {Function}        返回事件处理函数
   */
  getWrapBehavior: function getWrapBehavior(obj, action) {
    return obj['_wrap_' + action];
  }
};

module.exports = Util;

/***/ })
/******/ ]);
});
//# sourceMappingURL=g2-plugin-brush.js.map