@egjs/axes/outjs/inputType/MoveKeyInput.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.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { $ } from "../utils";
import { toAxis } from "./InputType";
export var KEY_LEFT_ARROW = 37;
export var KEY_A = 65;
export var KEY_UP_ARROW = 38;
export var KEY_W = 87;
export var KEY_RIGHT_ARROW = 39;
export var KEY_D = 68;
export var KEY_DOWN_ARROW = 40;
export var KEY_S = 83;
var DIRECTION_REVERSE = -1;
var DIRECTION_FORWARD = 1;
var DIRECTION_HORIZONTAL = -1;
var DIRECTION_VERTICAL = 1;
var DELAY = 80;
var MoveKeyInput = (function () {
    function MoveKeyInput(el, options) {
        this.axes = [];
        this.element = null;
        this._enabled = false;
        this._holding = false;
        this._timer = null;
        this.element = $(el);
        this.options = __assign({
            scale: [1, 1],
        }, options);
        this._onKeydown = this._onKeydown.bind(this);
        this._onKeyup = this._onKeyup.bind(this);
    }
    MoveKeyInput.prototype.mapAxes = function (axes) {
        this.axes = axes;
    };
    MoveKeyInput.prototype.connect = function (observer) {
        this._detachEvent();
        if (this.element.getAttribute("tabindex") !== "0") {
            this.element.setAttribute("tabindex", "0");
        }
        this._attachEvent(observer);
        return this;
    };
    MoveKeyInput.prototype.disconnect = function () {
        this._detachEvent();
        return this;
    };
    MoveKeyInput.prototype.destroy = function () {
        this.disconnect();
        this.element = null;
    };
    MoveKeyInput.prototype.enable = function () {
        this._enabled = true;
        return this;
    };
    MoveKeyInput.prototype.disable = function () {
        this._enabled = false;
        return this;
    };
    MoveKeyInput.prototype.isEnabled = function () {
        return this._enabled;
    };
    MoveKeyInput.prototype._onKeydown = function (event) {
        if (!this._enabled) {
            return;
        }
        var isMoveKey = true;
        var direction = DIRECTION_FORWARD;
        var move = DIRECTION_HORIZONTAL;
        switch (event.keyCode) {
            case KEY_LEFT_ARROW:
            case KEY_A:
                direction = DIRECTION_REVERSE;
                break;
            case KEY_RIGHT_ARROW:
            case KEY_D:
                break;
            case KEY_DOWN_ARROW:
            case KEY_S:
                direction = DIRECTION_REVERSE;
                move = DIRECTION_VERTICAL;
                break;
            case KEY_UP_ARROW:
            case KEY_W:
                move = DIRECTION_VERTICAL;
                break;
            default:
                isMoveKey = false;
        }
        if ((move === DIRECTION_HORIZONTAL && !this.axes[0]) ||
            (move === DIRECTION_VERTICAL && !this.axes[1])) {
            isMoveKey = false;
        }
        if (!isMoveKey) {
            return;
        }
        event.preventDefault();
        var offsets = move === DIRECTION_HORIZONTAL
            ? [+this.options.scale[0] * direction, 0]
            : [0, +this.options.scale[1] * direction];
        if (!this._holding) {
            this._observer.hold(this, event);
            this._holding = true;
        }
        clearTimeout(this._timer);
        this._observer.change(this, event, toAxis(this.axes, offsets));
    };
    MoveKeyInput.prototype._onKeyup = function (event) {
        var _this = this;
        if (!this._holding) {
            return;
        }
        clearTimeout(this._timer);
        this._timer = setTimeout(function () {
            _this._observer.release(_this, event, [0, 0]);
            _this._holding = false;
        }, DELAY);
    };
    MoveKeyInput.prototype._attachEvent = function (observer) {
        var element = this.element;
        if (!element) {
            throw new Error("Element to connect input does not exist.");
        }
        this._observer = observer;
        element.addEventListener("keydown", this._onKeydown, false);
        element.addEventListener("keypress", this._onKeydown, false);
        element.addEventListener("keyup", this._onKeyup, false);
        this._enabled = true;
    };
    MoveKeyInput.prototype._detachEvent = function () {
        var element = this.element;
        if (element) {
            element.removeEventListener("keydown", this._onKeydown, false);
            element.removeEventListener("keypress", this._onKeydown, false);
            element.removeEventListener("keyup", this._onKeyup, false);
        }
        this._enabled = false;
        this._observer = null;
    };
    return MoveKeyInput;
}());
export { MoveKeyInput };
//# sourceMappingURL=MoveKeyInput.js.map