169 lines
3.6 KiB
JavaScript
169 lines
3.6 KiB
JavaScript
import deviceType from './constant/deviceType';
|
|
import Eventful from 'zrender/src/mixin/Eventful';
|
|
import * as eventTool from 'zrender/src/core/event';
|
|
|
|
class EventModel {
|
|
constructor(e) {
|
|
this.clientX = e.event.clientX;
|
|
this.clientY = e.event.clientY;
|
|
|
|
let view = e.target;
|
|
while (view) {
|
|
if (Object.values(deviceType).includes(view._type)) {
|
|
this.code = view._code;
|
|
this.type = view._type;
|
|
break;
|
|
}
|
|
|
|
if (view._subType) {
|
|
this.subType = view._subType;
|
|
}
|
|
if (view._val) {
|
|
this.val = view._val;
|
|
}
|
|
|
|
view = view.parent;
|
|
}
|
|
}
|
|
}
|
|
|
|
class MouseController extends Eventful {
|
|
constructor(jmap) {
|
|
super();
|
|
this.events = jmap.getEvents();
|
|
this.$zr = jmap.getZr();
|
|
this.initHandler(this.$zr);
|
|
}
|
|
|
|
initHandler(zr) {
|
|
if (zr) {
|
|
const clickHandler = this.click.bind(this);
|
|
const contextmenuHandler = this.contextmenu.bind(this);
|
|
const moveEventHandler = this.moveEvent.bind(this);
|
|
|
|
const mousedownHandler = this.mousedown.bind(this);
|
|
const mousemoveHandler = this.mousemove.bind(this);
|
|
const mouseupHandler = this.mouseup.bind(this);
|
|
const mousewheelHandler = this.mousewheel.bind(this);
|
|
|
|
zr.on('click', clickHandler);
|
|
zr.on('contextmenu', contextmenuHandler);
|
|
zr.on('mousemove', moveEventHandler);
|
|
|
|
this.enable = function (opts) {
|
|
opts = opts || {};
|
|
this._moveOnMouseMove = opts.moveOnMouseMove || true;
|
|
this._zoomOnMouseWheel = opts.zoomOnMouseWheel || true;
|
|
this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
|
|
|
|
this.disable();
|
|
|
|
zr.on('mousedown', mousedownHandler);
|
|
zr.on('mousemove', mousemoveHandler);
|
|
zr.on('mouseup', mouseupHandler);
|
|
zr.on('mousewheel', mousewheelHandler);
|
|
};
|
|
|
|
this.disable = function () {
|
|
zr.off('mousedown', mousedownHandler);
|
|
zr.off('mousemove', mouseupHandler);
|
|
zr.off('mouseup', mousemoveHandler);
|
|
zr.off('mousewheel', mousewheelHandler);
|
|
};
|
|
|
|
this.dispose = function () {
|
|
zr.off('click', clickHandler);
|
|
zr.off('contextmenu', contextmenuHandler);
|
|
zr.off('mousemove', moveEventHandler);
|
|
this.disable();
|
|
};
|
|
|
|
this.isDragging = function () { return this._dragging; };
|
|
}
|
|
}
|
|
|
|
mousedown(e) {
|
|
if (eventTool.notLeftMouse(e)) {
|
|
return;
|
|
}
|
|
|
|
var x = e.offsetX;
|
|
var y = e.offsetY;
|
|
|
|
this._x = x;
|
|
this._y = y;
|
|
this._dragging = true;
|
|
}
|
|
|
|
mousemove(e) {
|
|
if (eventTool.notLeftMouse(e) ||
|
|
!this._moveOnMouseMove ||
|
|
!this._dragging
|
|
) {
|
|
return;
|
|
}
|
|
|
|
const oldX = this._x;
|
|
const oldY = this._y;
|
|
|
|
const dx = e.offsetX - oldX;
|
|
const dy = e.offsetY - oldY;
|
|
|
|
this._x = e.offsetX;
|
|
this._y = e.offsetY;
|
|
|
|
this._preventDefaultMouseMove && eventTool.stop(e.event);
|
|
|
|
this.trigger(this.events.Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
|
|
}
|
|
|
|
mouseup(e) {
|
|
if (!eventTool.notLeftMouse(e)) {
|
|
this._dragging = false;
|
|
}
|
|
}
|
|
|
|
mousewheel(e) {
|
|
const shouldZoom = this._zoomOnMouseWheel;
|
|
const wheelDelta = e.wheelDelta;
|
|
const originX = e.offsetX;
|
|
const originY = e.offsetY;
|
|
|
|
if (wheelDelta === 0 || !shouldZoom) {
|
|
return;
|
|
}
|
|
|
|
if (shouldZoom) {
|
|
eventTool.stop(e.event);
|
|
let scale = 1;
|
|
if (wheelDelta > 0) {
|
|
scale = 1;
|
|
} else if (wheelDelta < 0) {
|
|
scale = -1;
|
|
}
|
|
|
|
this.trigger(this.events.Zoom, {type: 'zoom', scale, originX, originY });
|
|
}
|
|
}
|
|
|
|
click(e) {
|
|
var em = this.checkEvent(e);
|
|
this.trigger(this.events.Selected, em);
|
|
}
|
|
|
|
contextmenu(e) {
|
|
var em = this.checkEvent(e);
|
|
this.trigger(this.events.Contextmenu, em);
|
|
}
|
|
|
|
moveEvent(e) {
|
|
return new EventModel(e);
|
|
}
|
|
|
|
checkEvent(e) {
|
|
return new EventModel(e);
|
|
}
|
|
}
|
|
|
|
export default MouseController;
|