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;

        debugger
        let view = e.target;
        if (view) {
            if (view._subType) {
                this.subType = view._subType;
            }
            if (view._val) {
                this.val = view._val;
            }
        }

        while (view) {
            if (view._type in Object.values(deviceType)) {
                this.code = view._code;
                this.type = view._type;
                break;
            }

            if (!this.val) {
                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.zr = jmap.getZr();
        this.events = jmap.getEvents();
        this.throttle = 100;   // 刷新频率

        let clickHandler = this.click.bind(this);
        let contextmenuHandler = this.contextmenu.bind(this);
        let moveEventHandler = this.moveEvent.bind(this);

        this.zr.on('click', clickHandler);
        this.zr.on('contextmenu', contextmenuHandler);
        this.zr.on('mousemove', moveEventHandler);

        let mousedownHandler = this.mousedown.bind(this);
        let mousemoveHandler = this.mousemove.bind(this);
        let mouseupHandler = this.mouseup.bind(this);
        let mousewheelHandler = this.mousewheel.bind(this);

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

            this.disable();

            this.zr.on('mousedown', mousedownHandler);
            this.zr.on('mousemove', mousemoveHandler);
            this.zr.on('mouseup', mouseupHandler);
            this.zr.on('mousewheel', mousewheelHandler);
        }

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

        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: dx, dy: dy, oldX: oldX, oldY: 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, {
                type: 'zoom', scale: scale, originX: originX, originY: 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;