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

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) {
            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.initController(jmap.getZr());
    }

    initController(zr) {
        if (zr) {
            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);

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

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

        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) {
        let shouldZoom = this._zoomOnMouseWheel;
        let wheelDelta = e.wheelDelta;
        let originX = e.offsetX;
        let 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, { 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;