vevet/lib/cjs/components/Swipe/Coords/index.js

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwipeCoords = void 0;
var initVevet_1 = require("../../../global/initVevet");
var SwipeCoords = /** @class */ (function () {
    function SwipeCoords(_ctx) {
        this._ctx = _ctx;
        /** Event timestamp. */
        this._timestamp = 0;
        /** Start position. */
        this._start = { x: 0, y: 0, angle: 0 };
        /** Previous position. */
        this._prev = { x: 0, y: 0, angle: 0 };
        /** Current position. */
        this._current = { x: 0, y: 0, angle: 0 };
        /** Movement offset from start. */
        this._diff = { x: 0, y: 0, angle: 0 };
        /** Movement offset from previous position. */
        this._step = { x: 0, y: 0, angle: 0 };
        /** Total accumulated movement. */
        this._accum = { x: 0, y: 0 };
    }
    Object.defineProperty(SwipeCoords.prototype, "timestamp", {
        get: function () {
            return this._timestamp;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "start", {
        get: function () {
            return this._start;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "prev", {
        get: function () {
            return this._prev;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "current", {
        get: function () {
            return this._current;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "diff", {
        get: function () {
            return this._diff;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "step", {
        get: function () {
            return this._step;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "accum", {
        get: function () {
            return this._accum;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SwipeCoords.prototype, "coords", {
        get: function () {
            var _a = this, timestamp = _a.timestamp, start = _a.start, prev = _a.prev, current = _a.current, diff = _a.diff, step = _a.step, accum = _a.accum;
            return { timestamp: timestamp, start: start, prev: prev, current: current, diff: diff, step: step, accum: accum };
        },
        enumerable: false,
        configurable: true
    });
    /** Parses pointer coordinates relative to the container */
    SwipeCoords.prototype.decode = function (event) {
        var vevet = (0, initVevet_1.initVevet)();
        var _a = this._ctx, props = _a.props, container = _a.container;
        var ratio = props.ratio;
        var clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
        var clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
        var x = clientX;
        var y = clientY;
        var centerX = vevet.width / 2;
        var centerY = vevet.height / 2;
        if (props.relative) {
            var bounding = container.getBoundingClientRect();
            x = clientX - bounding.left;
            y = clientY - bounding.top;
            centerX = bounding.left + bounding.width / 2;
            centerY = bounding.top + bounding.height / 2;
        }
        var angleRad = Math.atan2(clientY - centerY, clientX - centerX);
        var angle = (angleRad * 180) / Math.PI;
        return {
            x: x * ratio,
            y: y * ratio,
            angle: angle * ratio,
        };
    };
    SwipeCoords.prototype.setStart = function (matrix) {
        this._timestamp = performance.now();
        this._start = __assign({}, matrix);
        this._prev = __assign({}, matrix);
        this._current = __assign({}, matrix);
        this._diff = { x: 0, y: 0, angle: 0 };
        this._step = { x: 0, y: 0, angle: 0 };
        this._accum = { x: 0, y: 0 };
    };
    SwipeCoords.prototype.update = function (_a) {
        var x = _a.x, y = _a.y, angle = _a.angle;
        // prepare data
        var start = __assign({}, this.start);
        var prev = __assign({}, this.current);
        var current = { x: x, y: y, angle: angle };
        // update coords
        this._timestamp = performance.now();
        this._prev = prev;
        this._current = current;
        var angleDelta = this._current.angle - this._prev.angle;
        if (angleDelta > 180) {
            angleDelta -= 360;
        }
        else if (angleDelta < -180) {
            angleDelta += 360;
        }
        this._step = {
            x: current.x - prev.x,
            y: current.y - prev.y,
            angle: angleDelta,
        };
        this._diff = {
            x: current.x - start.x,
            y: current.y - start.y,
            angle: this._diff.angle + this._step.angle,
        };
        this._accum = {
            x: this._accum.x + Math.abs(this._step.x),
            y: this._accum.y + Math.abs(this._step.y),
        };
    };
    return SwipeCoords;
}());
exports.SwipeCoords = SwipeCoords;
//# sourceMappingURL=index.js.map