rt-sim-training-client/src/jmap/mouseController.js

154 lines
4.0 KiB
JavaScript
Raw Normal View History

2019-07-09 19:04:45 +08:00
import deviceType from './config/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) {
2019-07-10 12:02:02 +08:00
if (Object.values(deviceType).includes(view._type)) {
2019-07-09 19:04:45 +08:00
this.code = view._code;
this.type = view._type;
break;
}
2019-07-10 12:02:02 +08:00
if (view._subType) {
this.subType = view._subType;
}
if (view._val) {
this.val = view._val;
2019-07-09 19:04:45 +08:00
}
view = view.parent;
}
}
}
class MouseController extends Eventful {
constructor(jmap) {
super();
2019-07-10 12:02:02 +08:00
this.Events = jmap.getEvents();
2019-07-09 19:04:45 +08:00
let clickHandler = this.click.bind(this);
let contextmenuHandler = this.contextmenu.bind(this);
let moveEventHandler = this.moveEvent.bind(this);
let mousedownHandler = this.mousedown.bind(this);
let mousemoveHandler = this.mousemove.bind(this);
let mouseupHandler = this.mouseup.bind(this);
let mousewheelHandler = this.mousewheel.bind(this);
2019-07-10 13:17:12 +08:00
this.$zr = jmap.getZr();
this.$zr.on('click', clickHandler);
this.$zr.on('contextmenu', contextmenuHandler);
this.$zr.on('mousemove', moveEventHandler);
2019-07-10 12:02:02 +08:00
2019-07-09 19:04:45 +08:00
this.enable = function (opts) {
opts = opts || {};
this._moveOnMouseMove = opts.moveOnMouseMove || true;
2019-07-10 12:02:02 +08:00
this._zoomOnMouseWheel = opts.zoomOnMouseWheel || true;
2019-07-09 19:04:45 +08:00
this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
this.disable();
2019-07-10 13:17:12 +08:00
this.$zr.on('mousedown', mousedownHandler);
this.$zr.on('mousemove', mousemoveHandler);
this.$zr.on('mouseup', mouseupHandler);
this.$zr.on('mousewheel', mousewheelHandler);
2019-07-09 19:04:45 +08:00
}
this.disable = function () {
2019-07-10 13:17:12 +08:00
this.$zr.off('mousedown', mousedownHandler);
this.$zr.off('mousemove', mouseupHandler);
this.$zr.off('mouseup', mousemoveHandler);
this.$zr.off('mousewheel', mousewheelHandler);
2019-07-09 19:04:45 +08:00
}
this.isDragging = function () { return this._dragging; }
}
mousedown(e) {
if (eventTool.notLeftMouse(e)) {
return;
}
this._x = e.offsetX;
this._y = e.offsetY;
this._dragging = true;
}
mousemove(e) {
if (eventTool.notLeftMouse(e)
|| !this._moveOnMouseMove
|| !this._dragging
) {
return;
}
let oldX = this._x;
let oldY = this._y;
let dx = e.offsetX - oldX;
let dy = e.offsetY - oldY;
this._x = e.offsetX;
this._y = e.offsetY;
this._preventDefaultMouseMove && eventTool.stop(e.event);
2019-07-10 12:02:02 +08:00
this.trigger(this.Events.Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
2019-07-09 19:04:45 +08:00
}
mouseup(e) {
if (!eventTool.notLeftMouse(e)) {
this._dragging = false;
}
}
mousewheel(e) {
let shouldZoom = this._zoomOnMouseWheel;
let wheelDelta = e.wheelDelta;
let originX = e.offsetX;
let originY = e.offsetY;
if (wheelDelta === 0 || !shouldZoom) {
return;
}
2019-07-10 12:02:02 +08:00
2019-07-09 19:04:45 +08:00
if (shouldZoom) {
eventTool.stop(e.event);
let scale = 1;
if (wheelDelta > 0) {
scale = 1;
} else if (wheelDelta < 0) {
scale = -1;
}
2019-07-10 12:02:02 +08:00
this.trigger(this.Events.Zoom, { scale, originX, originY });
2019-07-09 19:04:45 +08:00
}
}
click(e) {
var em = this.checkEvent(e);
2019-07-10 12:02:02 +08:00
this.trigger(this.Events.Selected, em);
2019-07-09 19:04:45 +08:00
}
contextmenu(e) {
var em = this.checkEvent(e);
2019-07-10 12:02:02 +08:00
this.trigger(this.Events.Contextmenu, em);
2019-07-09 19:04:45 +08:00
}
moveEvent(e) {
return new EventModel(e);
}
checkEvent(e) {
return new EventModel(e);
}
}
export default MouseController;