verstak/build/dist/source/core/sensors/PointerSensor.js

Verstak - Front-End Library

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { options, observable, atomic, reactive, Reentrance, Transaction, LoggingLevel } from "reactronic";
import { extractPointerButton, isPointerButtonDown, PointerButton, BasePointerSensor } from "./BasePointerSensor.js";
import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
export class PointerSensor extends BasePointerSensor {
    constructor(element, windowSensor) {
        super(element, windowSensor);
        this.hotPositionX = Infinity;
        this.hotPositionY = Infinity;
        this.pointerButton = PointerButton.none;
        this.tryingDragging = false;
        this.clickable = undefined;
        this.clicking = undefined;
        this.clicked = undefined;
        this.clickX = Infinity;
        this.clickY = Infinity;
        this.draggableData = undefined;
        this.dragSource = undefined;
        this.dragTarget = undefined;
        this.dragTargetWindow = undefined;
        this.previousDragTarget = undefined;
        this.dragStarted = false;
        this.dragFinished = false;
        this.startX = Infinity;
        this.startY = Infinity;
        this.draggingData = undefined;
        this.dropAllowed = false;
        this.draggingOver = false;
        this.positionX = Infinity;
        this.positionY = Infinity;
        this.modifiers = KeyboardModifiers.none;
        this.dropX = Infinity;
        this.dropY = Infinity;
        this.dropped = false;
        this.immediatePositionX = Infinity;
        this.immediatePositionY = Infinity;
        this.immediateModifiers = KeyboardModifiers.none;
    }
    getData() {
        return this.draggingData;
    }
    setData(value) {
        this.draggingData = value;
    }
    listen(enabled = true) {
        const t = Transaction.current;
        Transaction.outside(() => {
            t.whenFinished(true).then(() => {
                const element = this.sourceElement;
                if (enabled) {
                    element.addEventListener("pointerdown", this.onPointerDown.bind(this), { capture: true });
                    element.addEventListener("pointermove", this.onPointerMove.bind(this), { capture: true });
                    element.addEventListener("pointerup", this.onPointerUp.bind(this), { capture: true });
                    element.addEventListener("lostpointercapture", this.onLostPointerCapture.bind(this), { capture: true });
                    element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
                }
                else {
                }
            }, e => { });
        });
    }
    onPointerDown(e) {
        var _a;
        (_a = this.sourceElement) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
        const button = extractPointerButton(e);
        if (!this.dragStarted && this.clickable === undefined &&
            (button === PointerButton.left || button === PointerButton.right)) {
            this.tryClickingOrDragging(e);
        }
    }
    onPointerMove(e) {
        this.moveOver(e);
        if (isPointerButtonDown(this.pointerButton, e.buttons)) {
            if (this.tryingDragging) {
                if (Math.abs(e.clientX - this.startX) > PointerSensor.DraggingThreshold ||
                    Math.abs(e.clientY - this.startY) > PointerSensor.DraggingThreshold) {
                    this.startDragging(e);
                }
            }
            else if (this.dragStarted) {
                this.dragOver(e);
            }
            else if (this.clickable) {
                this.clickingOver(e);
            }
        }
        else {
            if (this.dragStarted) {
                this.cancelDragging();
                this.reset();
            }
            else if (this.clickable) {
                this.reset();
            }
        }
    }
    onPointerUp(e) {
        var _a;
        (_a = this.sourceElement) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
        if (this.draggingOver) {
            this.drop(e);
            this.finishDragging();
        }
        else if (this.dragStarted) {
            this.finishDragging();
        }
        else if (this.clickable) {
            this.click(e);
        }
        this.reset();
    }
    onLostPointerCapture(e) {
        if (this.dragStarted || this.clickable) {
            this.cancelDragging();
            this.reset();
        }
    }
    onKeyDown(e) {
        if (e.key === "Escape" && (this.dragStarted || this.clickable)) {
            this.cancelDragging();
            this.reset();
        }
    }
    moveOver(e) {
        this.immediatePositionX = e.clientX;
        this.immediatePositionY = e.clientY;
    }
    tryClickingOrDragging(e) {
        var _a, _b;
        this.preventDefault = false;
        this.stopPropagation = false;
        const targetPath = e.composedPath();
        const underPointer = document.elementsFromPoint(e.clientX, e.clientY);
        const { data, window } = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["click", "draggable"]);
        const clickable = (_a = data === null || data === void 0 ? void 0 : data.click) !== null && _a !== void 0 ? _a : this._getDefaultDataForSensor(e);
        const draggable = data === null || data === void 0 ? void 0 : data.draggable;
        if (clickable || draggable) {
            this.clickable = clickable;
            this.clicking = clickable;
            this.draggableData = draggable;
            this.tryingDragging = draggable !== undefined;
            this.dragSource = (_b = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["drag"], true).data) === null || _b === void 0 ? void 0 : _b.drag;
            this.pointerButton = extractPointerButton(e);
            this.startX = e.clientX;
            this.startY = e.clientY;
            this.modifiers = extractModifierKeys(e);
            this.positionX = e.clientX;
            this.positionY = e.clientY;
            this.dropped = false;
            this.dragTarget = undefined;
            this.dragTargetWindow = undefined;
            this.previousDragTarget = undefined;
            Transaction.isolate(() => {
                var _a;
                (_a = this.windowSensor) === null || _a === void 0 ? void 0 : _a.setActiveWindow(window, "pointer");
            });
        }
        this.revision++;
    }
    clickingOver(e) {
        this.updateClicking(e);
        this.revision++;
    }
    click(e) {
        if (this.updateClicking(e)) {
            this.modifiers = this.immediateModifiers;
            this.clickX = e.clientX;
            this.clickY = e.clientY;
            this.clicked = this.clicking;
        }
        this.clickable = undefined;
        this.revision++;
    }
    startDragging(e) {
        this.updateDragTarget(e);
        this.clickable = undefined;
        this.dragStarted = true;
        this.dragFinished = false;
        this.tryingDragging = false;
        this.dropped = false;
        this.revision++;
    }
    dragOver(e) {
        this.updateDragTarget(e);
        this.draggingOver = true;
        this.dropped = false;
        this.revision++;
    }
    drop(e) {
        this.updateDragTarget(e);
        this.modifiers = this.immediateModifiers;
        this.dropX = e.clientX;
        this.dropY = e.clientY;
        this.dropped = true;
        this.revision++;
    }
    finishDragging() {
        this.dragFinished = true;
        this.tryingDragging = false;
        this.revision++;
    }
    cancelDragging() {
        this.dragFinished = true;
        this.tryingDragging = false;
        this.dropped = false;
        this.revision++;
    }
    reset() {
        this.pointerButton = PointerButton.none;
        this.clickable = undefined;
        this.clicking = undefined;
        this.clicked = undefined;
        this.clickX = Infinity;
        this.clickY = Infinity;
        this.tryingDragging = false;
        this.draggableData = undefined;
        this.dragSource = undefined;
        this.dragTarget = undefined;
        this.dragTargetWindow = undefined;
        this.previousDragTarget = undefined;
        this.dragStarted = false;
        this.dragFinished = false;
        this.startX = Infinity;
        this.startY = Infinity;
        this.draggingData = undefined;
        this.dropAllowed = false;
        this.draggingOver = false;
        this.positionX = Infinity;
        this.positionY = Infinity;
        this.modifiers = KeyboardModifiers.none;
        this.dropX = Infinity;
        this.dropY = Infinity;
        this.dropped = false;
        this.immediatePositionX = Infinity;
        this.immediatePositionY = Infinity;
        this.immediateModifiers = KeyboardModifiers.none;
        this.revision++;
    }
    updateClicking(e) {
        var _a;
        const targetPath = e.composedPath();
        const underPointer = document.elementsFromPoint(e.clientX, e.clientY);
        let clickable = (_a = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["click"]).data) === null || _a === void 0 ? void 0 : _a.click;
        clickable = clickable !== null && clickable !== void 0 ? clickable : this._getDefaultDataForSensor(e);
        const isSameClickable = this.clickable === clickable;
        if (isSameClickable)
            this.clicking = clickable;
        this.immediateModifiers = extractModifierKeys(e);
        this.immediatePositionX = e.clientX;
        this.immediatePositionY = e.clientY;
        return isSameClickable;
    }
    _getDefaultDataForSensor(e) {
        return e.currentTarget === this.sourceElement ? e.currentTarget : undefined;
    }
    updateDragTarget(e) {
        const targetPath = e.composedPath();
        const underPointer = document.elementsFromPoint(e.clientX, e.clientY);
        const { data, window } = findTargetElementData(targetPath, underPointer, SymDataForSensor, ["drag"]);
        const dragTarget = data === null || data === void 0 ? void 0 : data.drag;
        if (dragTarget !== this.dragTarget) {
            this.previousDragTarget = this.dragTarget;
            this.dragTarget = dragTarget;
            this.dragTargetWindow = window;
        }
        this.immediateModifiers = extractModifierKeys(e);
        this.immediatePositionX = e.clientX;
        this.immediatePositionY = e.clientY;
    }
    whenClickingOrDragging() {
        if (this.draggingOver || this.clickable) {
            this.positionX = this.immediatePositionX;
            this.positionY = this.immediatePositionY;
            this.modifiers = this.immediateModifiers;
        }
    }
    whenMoving() {
        if (Number.isFinite(this.immediatePositionX) && Number.isFinite(this.immediatePositionY)) {
            this.hotPositionX = this.immediatePositionX;
            this.hotPositionY = this.immediatePositionY;
        }
    }
}
PointerSensor.DraggingThreshold = 4;
__decorate([
    observable(false),
    __metadata("design:type", Object)
], PointerSensor.prototype, "clickable", void 0);
__decorate([
    observable(false),
    __metadata("design:type", Boolean)
], PointerSensor.prototype, "tryingDragging", void 0);
__decorate([
    observable(false),
    __metadata("design:type", Object)
], PointerSensor.prototype, "draggingData", void 0);
__decorate([
    observable(false),
    __metadata("design:type", Boolean)
], PointerSensor.prototype, "dropAllowed", void 0);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "moveOver", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "tryClickingOrDragging", null);
__decorate([
    atomic,
    options({ reentrance: Reentrance.cancelPrevious, logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "clickingOver", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "click", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "startDragging", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "dragOver", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "drop", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "finishDragging", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "cancelDragging", null);
__decorate([
    atomic,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "reset", null);
__decorate([
    reactive,
    options({ throttling: 0 }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "whenClickingOrDragging", null);
__decorate([
    reactive,
    options({ throttling: 0 }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "whenMoving", null);