@egjs/axes/outjs/inputType/RotatePanInput.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 __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import Axes from "../Axes";
import { getAngle } from "../utils";
import { toAxis } from "./InputType";
import { PanInput } from "./PanInput";
var RotatePanInput = (function (_super) {
    __extends(RotatePanInput, _super);
    function RotatePanInput(el, options) {
        var _this = _super.call(this, el, options) || this;
        _this._prevQuadrant = null;
        _this._lastDiff = 0;
        return _this;
    }
    RotatePanInput.prototype.mapAxes = function (axes) {
        this._direction = Axes.DIRECTION_ALL;
        this.axes = axes;
    };
    RotatePanInput.prototype._onPanstart = function (event) {
        var _a = this.options, inputKey = _a.inputKey, inputButton = _a.inputButton;
        var activeEvent = this._activeEvent;
        var panEvent = activeEvent.onEventStart(event, inputKey, inputButton);
        if (!panEvent || !this.isEnabled()) {
            return;
        }
        var rect = this.element.getBoundingClientRect();
        this._observer.hold(this, panEvent);
        this._attachWindowEvent(activeEvent);
        this._coefficientForDistanceToAngle = 360 / (rect.width * Math.PI);
        this._rotateOrigin = [
            rect.left + (rect.width - 1) / 2,
            rect.top + (rect.height - 1) / 2,
        ];
        this._prevAngle = null;
        this._triggerChange(panEvent);
        activeEvent.prevEvent = panEvent;
    };
    RotatePanInput.prototype._onPanmove = function (event) {
        var _a = this.options, inputKey = _a.inputKey, inputButton = _a.inputButton;
        var activeEvent = this._activeEvent;
        var panEvent = activeEvent.onEventMove(event, inputKey, inputButton);
        if (!panEvent || !this.isEnabled()) {
            return;
        }
        if (panEvent.srcEvent.cancelable !== false) {
            panEvent.srcEvent.preventDefault();
        }
        panEvent.srcEvent.stopPropagation();
        this._triggerChange(panEvent);
        activeEvent.prevEvent = panEvent;
    };
    RotatePanInput.prototype._onPanend = function (event) {
        var activeEvent = this._activeEvent;
        activeEvent.onEventEnd(event);
        if (!this.isEnabled()) {
            return;
        }
        var prevEvent = activeEvent.prevEvent;
        this._triggerChange(prevEvent);
        var vx = prevEvent.velocityX;
        var vy = prevEvent.velocityY;
        var velocity = Math.sqrt(vx * vx + vy * vy) * (this._lastDiff > 0 ? -1 : 1);
        activeEvent.onRelease();
        this._observer.release(this, prevEvent, [
            velocity * this._coefficientForDistanceToAngle,
        ]);
        this._detachWindowEvent(activeEvent);
    };
    RotatePanInput.prototype._triggerChange = function (event) {
        var _a = this._getPosFromOrigin(event.center.x, event.center.y), x = _a.x, y = _a.y;
        var angle = getAngle(x, y);
        var positiveAngle = angle < 0 ? 360 + angle : angle;
        var quadrant = this._getQuadrant(event.center.x, event.center.y);
        var diff = this._getDifference(this._prevAngle, positiveAngle, this._prevQuadrant, quadrant);
        this._prevAngle = positiveAngle;
        this._prevQuadrant = quadrant;
        if (diff === 0) {
            return;
        }
        this._lastDiff = diff;
        this._observer.change(this, event, toAxis(this.axes, [-diff]));
    };
    RotatePanInput.prototype._getDifference = function (prevAngle, angle, prevQuadrant, quadrant) {
        var diff;
        if (prevAngle === null) {
            diff = 0;
        }
        else if (prevQuadrant === 1 && quadrant === 4) {
            diff = -prevAngle - (360 - angle);
        }
        else if (prevQuadrant === 4 && quadrant === 1) {
            diff = 360 - prevAngle + angle;
        }
        else {
            diff = angle - prevAngle;
        }
        return diff;
    };
    RotatePanInput.prototype._getPosFromOrigin = function (posX, posY) {
        return {
            x: posX - this._rotateOrigin[0],
            y: this._rotateOrigin[1] - posY,
        };
    };
    RotatePanInput.prototype._getQuadrant = function (posX, posY) {
        var _a = this._getPosFromOrigin(posX, posY), x = _a.x, y = _a.y;
        var q = 0;
        if (x >= 0 && y >= 0) {
            q = 1;
        }
        else if (x < 0 && y >= 0) {
            q = 2;
        }
        else if (x < 0 && y < 0) {
            q = 3;
        }
        else if (x >= 0 && y < 0) {
            q = 4;
        }
        return q;
    };
    return RotatePanInput;
}(PanInput));
export { RotatePanInput };
//# sourceMappingURL=RotatePanInput.js.map