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.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) {
			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 || true;
				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) {
		return new EventModel(e);
	}

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

export default MouseController;