428 lines
12 KiB
JavaScript
428 lines
12 KiB
JavaScript
(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
|