@platform/react/lib/drag/drag.position.js

React refs and helpers.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.offsetPosition = exports.position = exports.DragPositionEvent = void 0;
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var events_1 = require("../events");
var EMPTY = { x: -1, y: -1 };
var DragPositionEvent = (function () {
    function DragPositionEvent(options) {
        var type = options.type, el = options.el, event = options.event, start = options.start;
        this.type = type;
        this.el = el;
        this.event = event;
        this.start = start;
    }
    Object.defineProperty(DragPositionEvent.prototype, "client", {
        get: function () {
            var _a = this.event, x = _a.clientX, y = _a.clientY;
            return { x: x, y: y };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DragPositionEvent.prototype, "screen", {
        get: function () {
            var _a = this.event, x = _a.screenX, y = _a.screenY;
            return { x: x, y: y };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DragPositionEvent.prototype, "delta", {
        get: function () {
            var start = this.start || EMPTY;
            var _a = this.event, screenX = _a.screenX, screenY = _a.screenY;
            var x = screenX - start.x;
            var y = screenY - start.y;
            return { x: x, y: y };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(DragPositionEvent.prototype, "element", {
        get: function () {
            var position = (0, exports.offsetPosition)(this.el);
            var _a = this.event, clientX = _a.clientX, clientY = _a.clientY;
            return { x: clientX - position.left, y: clientY - position.top };
        },
        enumerable: false,
        configurable: true
    });
    DragPositionEvent.prototype.toObject = function () {
        return {
            type: this.type,
            client: this.client,
            screen: this.screen,
            element: this.element,
            delta: this.delta,
            start: this.start,
        };
    };
    DragPositionEvent.prototype.clone = function (type) {
        return new DragPositionEvent({
            type: type,
            el: this.el,
            event: this.event,
            start: this.start,
        });
    };
    return DragPositionEvent;
}());
exports.DragPositionEvent = DragPositionEvent;
var position = function (options) {
    var dispose$ = new rxjs_1.Subject();
    var events$ = new rxjs_1.Subject();
    var mouseUp$ = events_1.events.mouseUp$.pipe((0, operators_1.takeUntil)(dispose$));
    var el = options.el;
    var start;
    var prev;
    var move$ = events_1.events.mouseMove$.pipe((0, operators_1.takeUntil)(dispose$), (0, operators_1.map)(function (e) {
        if (!start) {
            start = { x: e.screenX, y: e.screenY };
        }
        prev = new DragPositionEvent({
            type: 'DRAG',
            el: el,
            event: e,
            start: start,
        });
        return prev;
    }), (0, operators_1.takeUntil)(mouseUp$));
    move$.subscribe(function (e) { return events$.next(e); });
    mouseUp$.subscribe(function (e) {
        var arg = prev
            ? prev.clone('COMPLETE')
            : new DragPositionEvent({
                type: 'COMPLETE',
                el: el,
                event: e,
                start: start,
            });
        events$.next(arg);
        api.dispose();
    });
    var api = {
        isComplete: false,
        events$: events$.pipe((0, operators_1.share)()),
        dispose$: dispose$.pipe((0, operators_1.share)()),
        dispose: function () {
            dispose$.next();
            dispose$.complete();
            api.isComplete = true;
        },
    };
    return api;
};
exports.position = position;
var offsetPosition = function (el) {
    var rect = el.getBoundingClientRect();
    var doc = document.documentElement ? document.documentElement : undefined;
    var scrollLeft = window.pageXOffset || (doc ? doc.scrollLeft : 0);
    var scrollTop = window.pageYOffset || (doc ? doc.scrollTop : 0);
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
};
exports.offsetPosition = offsetPosition;