@egjs/axes/outjs/eventInput/EventInput.js

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.

import { getAngle } from "../utils";
import { window } from "../browser";
import { ALT, ANY, CTRL, META, MOUSE_LEFT, MOUSE_MIDDLE, MOUSE_RIGHT, NONE, SHIFT, VELOCITY_INTERVAL, } from "../const";
export var SUPPORT_TOUCH = "ontouchstart" in window;
export var SUPPORT_POINTER = "PointerEvent" in window;
export var SUPPORT_MSPOINTER = "MSPointerEvent" in window;
export var SUPPORT_POINTER_EVENTS = SUPPORT_POINTER || SUPPORT_MSPOINTER;
export var isValidKey = function (event, inputKey) {
    if (!inputKey ||
        inputKey.indexOf(ANY) > -1 ||
        (inputKey.indexOf(NONE) > -1 &&
            !event.shiftKey &&
            !event.ctrlKey &&
            !event.altKey &&
            !event.metaKey) ||
        (inputKey.indexOf(SHIFT) > -1 && event.shiftKey) ||
        (inputKey.indexOf(CTRL) > -1 && event.ctrlKey) ||
        (inputKey.indexOf(ALT) > -1 && event.altKey) ||
        (inputKey.indexOf(META) > -1 && event.metaKey)) {
        return true;
    }
    return false;
};
var EventInput = (function () {
    function EventInput() {
        var _this = this;
        this._stopContextMenu = function (event) {
            event.preventDefault();
            window.removeEventListener("contextmenu", _this._stopContextMenu);
        };
    }
    EventInput.prototype.extendEvent = function (event) {
        var _a;
        var prevEvent = this.prevEvent;
        var center = this._getCenter(event);
        var movement = prevEvent ? this._getMovement(event) : { x: 0, y: 0 };
        var scale = prevEvent ? this._getScale(event) : 1;
        var angle = prevEvent
            ? getAngle(center.x - prevEvent.center.x, center.y - prevEvent.center.y)
            : 0;
        var deltaX = prevEvent ? prevEvent.deltaX + movement.x : movement.x;
        var deltaY = prevEvent ? prevEvent.deltaY + movement.y : movement.y;
        var offsetX = movement.x;
        var offsetY = movement.y;
        var latestInterval = this._latestInterval;
        var timeStamp = Date.now();
        var deltaTime = latestInterval ? timeStamp - latestInterval.timestamp : 0;
        var velocityX = prevEvent ? prevEvent.velocityX : 0;
        var velocityY = prevEvent ? prevEvent.velocityY : 0;
        var directionX = prevEvent ? prevEvent.directionX : 1;
        var directionY = prevEvent ? prevEvent.directionY : 1;
        if (offsetX > 0) {
            directionX = 1;
        }
        else if (offsetX < 0) {
            directionX = -1;
        }
        if (offsetY > 0) {
            directionY = 1;
        }
        else if (offsetY < 0) {
            directionY = -1;
        }
        if (!latestInterval || deltaTime >= VELOCITY_INTERVAL) {
            if (latestInterval) {
                _a = [
                    (deltaX - latestInterval.deltaX) / deltaTime,
                    (deltaY - latestInterval.deltaY) / deltaTime,
                ], velocityX = _a[0], velocityY = _a[1];
            }
            this._latestInterval = {
                timestamp: timeStamp,
                deltaX: deltaX,
                deltaY: deltaY,
            };
        }
        return {
            srcEvent: event,
            scale: scale,
            angle: angle,
            center: center,
            deltaX: deltaX,
            deltaY: deltaY,
            offsetX: offsetX,
            offsetY: offsetY,
            directionX: directionX,
            directionY: directionY,
            velocityX: velocityX,
            velocityY: velocityY,
            preventSystemEvent: true,
        };
    };
    EventInput.prototype._getDistance = function (start, end) {
        var x = end.clientX - start.clientX;
        var y = end.clientY - start.clientY;
        return Math.sqrt(x * x + y * y);
    };
    EventInput.prototype._getButton = function (event) {
        var buttonCodeMap = { 1: MOUSE_LEFT, 2: MOUSE_RIGHT, 4: MOUSE_MIDDLE };
        var button = this._isTouchEvent(event)
            ? MOUSE_LEFT
            : buttonCodeMap[event.buttons];
        return button ? button : null;
    };
    EventInput.prototype._isTouchEvent = function (event) {
        return event.type && event.type.indexOf("touch") > -1;
    };
    EventInput.prototype._isValidButton = function (button, inputButton) {
        return inputButton.indexOf(button) > -1;
    };
    EventInput.prototype._isValidEvent = function (event, inputKey, inputButton) {
        return ((!inputKey || isValidKey(event, inputKey)) &&
            (!inputButton || this._isValidButton(this._getButton(event), inputButton)));
    };
    EventInput.prototype._preventMouseButton = function (event, button) {
        if (button === MOUSE_RIGHT) {
            window.addEventListener("contextmenu", this._stopContextMenu);
        }
        else if (button === MOUSE_MIDDLE) {
            event.preventDefault();
        }
    };
    return EventInput;
}());
export { EventInput };
//# sourceMappingURL=EventInput.js.map