reactronic-dom/build/dist/source/html/sensors/PointerSensor.js

Reactronic DOM - Transactional Reactive Front-End Development Framework

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, reaction, Reentrance, transaction, isnonreactive, Transaction, LoggingLevel } from 'reactronic';
import { extractPointerButton, isPointerButtonDown, PointerButton, BasePointerSensor } from './BasePointerSensor';
import { findTargetElementData, SymDataForSensor } from './DataForSensor';
import { extractModifierKeys, KeyboardModifiers } from './KeyboardSensor';
export class PointerSensor extends BasePointerSensor {
    constructor(focusSensor, windowSensor) {
        super(focusSensor, windowSensor);
        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(element, enabled = true) {
        const existing = this.sourceElement;
        if (element !== existing) {
            if (existing) {
                existing.removeEventListener('pointerdown', this.onPointerDown.bind(this), { capture: true });
                existing.removeEventListener('pointermove', this.onPointerMove.bind(this), { capture: true });
                existing.removeEventListener('pointerup', this.onPointerUp.bind(this), { capture: true });
                existing.removeEventListener('lostpointercapture', this.onLostPointerCapture.bind(this), { capture: true });
                existing.removeEventListener('keydown', this.onKeyDown.bind(this), { capture: true });
            }
            this.sourceElement = element;
            if (element && 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 });
            }
        }
    }
    onPointerDown(e) {
        const button = extractPointerButton(e);
        if (!this.dragStarted && this.clickable === undefined &&
            (button === PointerButton.Left || button === PointerButton.Right)) {
            this.tryClickingOrDragging(e);
        }
    }
    onPointerMove(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) {
        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();
        }
    }
    tryClickingOrDragging(e) {
        var _a;
        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 = data === null || data === void 0 ? void 0 : data.click;
        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 = (_a = findTargetElementData(targetPath, underPointer, SymDataForSensor, ['drag'], true).data) === null || _a === void 0 ? void 0 : _a.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.standalone(() => {
                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);
        const clickable = (_a = findTargetElementData(targetPath, underPointer, SymDataForSensor, ['click']).data) === null || _a === void 0 ? void 0 : _a.click;
        const isSameClickable = this.clickable === clickable;
        if (isSameClickable)
            this.clicking = clickable;
        this.immediateModifiers = extractModifierKeys(e);
        this.immediatePositionX = e.clientX;
        this.immediatePositionY = e.clientY;
        return isSameClickable;
    }
    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;
        }
    }
}
PointerSensor.DraggingThreshold = 4;
__decorate([
    isnonreactive,
    __metadata("design:type", Object)
], PointerSensor.prototype, "clickable", void 0);
__decorate([
    isnonreactive,
    __metadata("design:type", Boolean)
], PointerSensor.prototype, "tryingDragging", void 0);
__decorate([
    isnonreactive,
    __metadata("design:type", Object)
], PointerSensor.prototype, "draggingData", void 0);
__decorate([
    isnonreactive,
    __metadata("design:type", Boolean)
], PointerSensor.prototype, "dropAllowed", void 0);
__decorate([
    transaction,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object, Boolean]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "listen", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "tryClickingOrDragging", null);
__decorate([
    transaction,
    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([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "click", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "startDragging", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "dragOver", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [PointerEvent]),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "drop", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "finishDragging", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "cancelDragging", null);
__decorate([
    transaction,
    options({ logging: LoggingLevel.Off }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "reset", null);
__decorate([
    reaction,
    options({ throttling: 0 }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], PointerSensor.prototype, "whenClickingOrDragging", null);