@egjs/axes/outjs/inputType/PinchInput.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 { $, isCssPropsFromAxes, setCssProps, revertCssProps } from "../utils";
import { DIRECTION_ALL } from "../const";
import { toAxis, convertInputType, } from "./InputType";
var PinchInput = (function () {
    function PinchInput(el, options) {
        this.axes = [];
        this.element = null;
        this._pinchFlag = false;
        this._enabled = false;
        this._activeEvent = null;
        this._isOverThreshold = false;
        this.element = $(el);
        this.options = __assign({ scale: 1, threshold: 0, inputType: ["touch", "pointer"], touchAction: "none" }, options);
        this._onPinchStart = this._onPinchStart.bind(this);
        this._onPinchMove = this._onPinchMove.bind(this);
        this._onPinchEnd = this._onPinchEnd.bind(this);
    }
    PinchInput.prototype.mapAxes = function (axes) {
        this.axes = axes;
    };
    PinchInput.prototype.connect = function (observer) {
        if (this._activeEvent) {
            this._detachEvent();
        }
        this._attachEvent(observer);
        this._originalCssProps = setCssProps(this.element, this.options, DIRECTION_ALL);
        return this;
    };
    PinchInput.prototype.disconnect = function () {
        this._detachEvent();
        if (!isCssPropsFromAxes(this._originalCssProps)) {
            revertCssProps(this.element, this._originalCssProps);
        }
        return this;
    };
    PinchInput.prototype.destroy = function () {
        this.disconnect();
        this.element = null;
    };
    PinchInput.prototype.enable = function () {
        this._enabled = true;
        return this;
    };
    PinchInput.prototype.disable = function () {
        this._enabled = false;
        return this;
    };
    PinchInput.prototype.isEnabled = function () {
        return this._enabled;
    };
    PinchInput.prototype._onPinchStart = function (event) {
        var activeEvent = this._activeEvent;
        var pinchEvent = activeEvent.onEventStart(event);
        if (!pinchEvent || !this._enabled || activeEvent.getTouches(event) !== 2) {
            return;
        }
        this._baseValue = this._observer.get(this)[this.axes[0]];
        this._observer.hold(this, event);
        this._pinchFlag = true;
        this._isOverThreshold = false;
        activeEvent.prevEvent = pinchEvent;
    };
    PinchInput.prototype._onPinchMove = function (event) {
        var threshold = this.options.threshold;
        var activeEvent = this._activeEvent;
        var pinchEvent = activeEvent.onEventMove(event);
        if (!pinchEvent ||
            !this._pinchFlag ||
            !this._enabled ||
            activeEvent.getTouches(event) !== 2) {
            return;
        }
        var distance = this._getDistance(pinchEvent.scale);
        var offset = this._getOffset(pinchEvent.scale, activeEvent.prevEvent.scale);
        if (this._isOverThreshold || distance >= threshold) {
            this._isOverThreshold = true;
            this._observer.change(this, event, toAxis(this.axes, [offset]));
        }
        activeEvent.prevEvent = pinchEvent;
    };
    PinchInput.prototype._onPinchEnd = function (event) {
        var activeEvent = this._activeEvent;
        activeEvent.onEventEnd(event);
        if (!this._pinchFlag ||
            !this._enabled ||
            activeEvent.getTouches(event) >= 2) {
            return;
        }
        activeEvent.onRelease();
        this._observer.release(this, event, [0], 0);
        this._baseValue = null;
        this._pinchFlag = false;
    };
    PinchInput.prototype._attachEvent = function (observer) {
        var _this = this;
        var activeEvent = convertInputType(this.options.inputType);
        var element = this.element;
        if (!activeEvent) {
            return;
        }
        if (!element) {
            throw new Error("Element to connect input does not exist.");
        }
        this._observer = observer;
        this._enabled = true;
        this._activeEvent = activeEvent;
        activeEvent.start.forEach(function (event) {
            element.addEventListener(event, _this._onPinchStart, false);
        });
        activeEvent.move.forEach(function (event) {
            element.addEventListener(event, _this._onPinchMove, false);
        });
        activeEvent.end.forEach(function (event) {
            element.addEventListener(event, _this._onPinchEnd, false);
        });
    };
    PinchInput.prototype._detachEvent = function () {
        var _this = this;
        var activeEvent = this._activeEvent;
        var element = this.element;
        if (element) {
            activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
                element.removeEventListener(event, _this._onPinchStart, false);
            });
            activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
                element.removeEventListener(event, _this._onPinchMove, false);
            });
            activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.end.forEach(function (event) {
                element.removeEventListener(event, _this._onPinchEnd, false);
            });
        }
        this._enabled = false;
        this._observer = null;
    };
    PinchInput.prototype._getOffset = function (pinchScale, prev) {
        if (prev === void 0) { prev = 1; }
        return this._baseValue * (pinchScale - prev) * this.options.scale;
    };
    PinchInput.prototype._getDistance = function (pinchScale) {
        return Math.abs(pinchScale - 1);
    };
    return PinchInput;
}());
export { PinchInput };
//# sourceMappingURL=PinchInput.js.map