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';
import store from '@/store';

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.$jmap = jmap;
		this.$zr = jmap.getZr();
		this.events = jmap.getEvents();
		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: this.events.__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) {
		const newEm = new EventModel(e);
		const trainDetails = store.state.map.trainDetails;
		if (trainDetails) {
			if (newEm.deviceType != deviceType.Train || trainDetails.code != newEm.deviceCode) {
				var instance = (this.$jmap.getDeviceByCode(trainDetails.code) || {} ).instance;
				instance && instance.removeTrainDetail && instance.removeTrainDetail();
			}
		}
	}

	checkEvent(e) {
		var oldEm = new EventModel(this.$zr.curEvent || { event: {} });
		var newEm = new EventModel(e);
		if ([1, 3].includes(e.which)) {
			// 查找之前和当前鼠标选中的实例
			var oldDevice = this.$jmap.getDeviceByCode(oldEm.deviceCode) || {};
			var newDevice = this.$jmap.getDeviceByCode(newEm.deviceCode) || {};
			var oldInstance = (this.$jmap.getDeviceByCode(oldEm.deviceCode) || {}).instance || {};
			var newInstance = (this.$jmap.getDeviceByCode(newEm.deviceCode) || {}).instance || {};

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

				// 如果实例有选中函数并且被点击，则执行选中函数
				if (e.which == 3 && newInstance.mouseEvent && newInstance.mouseEvent.mouseover) {
					newDevice['down'] = true;
					newInstance.mouseEvent['mouseover'](e);
				}
			}

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

		return newEm;
	}
}

export default MouseController;