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

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.deviceCode = view._code;
				this.deviceType = 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) {
			zr.on('click', this.click, this);
			zr.on('contextmenu', this.contextmenu, this);
			zr.on('mousemove', this.moveEvent, this);

			this.enable = function (opts) {
				opts = opts || {};
				this._moveOnMouseMove = opts.moveOnMouseMove || true;
				this._zoomOnMouseWheel = opts.zoomOnMouseWheel || false;
				this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;

				this.disable();

				zr.on('mousedown', this.mousedown, this);
				zr.on('mousemove', this.mousemove, this);
				zr.on('mouseup', this.mouseup, this);
				zr.on('mousewheel', this.mousewheel, this);
			};

			this.disable = function () {
				zr.off('mousedown', this.mousedown);
				zr.off('mousemove', this.mousemove);
				zr.off('mouseup', this.mouseup);
				zr.off('mousewheel', this.mousewheel);
			};

			this.dispose = function () {
				zr.off('click', this.click);
				zr.off('contextmenu', this.contextmenu);
				zr.off('mousemove', this.moveEvent);
				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) {
		console.log(e.which);
		return new EventModel(e);
		// var oldEm = new EventModel(this.$zr.curEvent || { event: {} });
		// var newEm = new EventModel(e);
		// if ([1, 3].includes(e.which)) {
		// // 查找之前和当前鼠标选中的实例
		// 	var oldInstances = (this._viewRepo.__getViewInstancesByDeviceType(oldEm.deviceType) || {})._instances || {};
		// 	var newInstances = (this._viewRepo.__getViewInstancesByDeviceType(newEm.deviceType) || {})._instances || {};
		// 	var newDevice = newInstances[newEm.deviceCode] || {};
		// 	var oldDevice = oldInstances[oldEm.deviceCode] || {};

		// 	// 如果之前和当前选中的实例不一致
		// 	if (oldDevice.name != newDevice.name) {
		// 	// 如果实例有取消选择函数并且被点击，则执行取消选中函数
		// 		if (oldDevice && oldDevice.model && oldDevice.mouseleave) {
		// 		// 视图数据设置点击标志，同步执行
		// 			oldDevice['selected'] = false;
		// 			oldDevice['mouseleave'](e);
		// 		}

		// 		// 如果实例有选中函数并且被点击，则执行选中函数
		// 		if (newDevice && newDevice.model && newDevice.mouseenter) {
		// 			const model = store.getters['map/getDeviceByCode'](newDevice.name) || {};
		// 			Object.assign(model, { _selected: true });
		// 		}
		// 	}

		// 	// 保存当前实例到全局
		// 	this._zr.curEvent = e;
		// }

		// return newEm;
	}

	updateDatazoom(zoom) {
		this.trigger(this.events.Datazoom, zoom);
	}
}

export default MouseController;