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) {
			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;
		}

		this._x = e.offsetX;
		this._y = e.offsetY;
		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;