golden-layout
Version:
A multi-screen javascript Layout manager
132 lines • 5.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragListener = void 0;
const event_emitter_1 = require("./event-emitter");
/** @internal */
class DragListener extends event_emitter_1.EventEmitter {
constructor(_eElement, extraAllowableChildTargets) {
super();
this._eElement = _eElement;
this._pointerTracking = false;
this._pointerDownEventListener = (ev) => this.onPointerDown(ev);
this._pointerMoveEventListener = (ev) => this.onPointerMove(ev);
this._pointerUpEventListener = (ev) => this.onPointerUp(ev);
this._timeout = undefined;
this._allowableTargets = [_eElement, ...extraAllowableChildTargets];
this._oDocument = document;
this._eBody = document.body;
/**
* The delay after which to start the drag in milliseconds
* Do NOT make too short (previous value of 200 was not long enough for my touchpad)
* Should generally rely on the mouse move to start drag. Not this delay.
*/
this._nDelay = 1800;
/**
* The distance the mouse needs to be moved to qualify as a drag
* Previous comment: works better with delay only
* ???
* Probably somehow needs tuning for different devices
*/
this._nDistance = 10;
this._nX = 0;
this._nY = 0;
this._nOriginalX = 0;
this._nOriginalY = 0;
this._dragging = false;
this._eElement.addEventListener('pointerdown', this._pointerDownEventListener, { passive: true });
}
destroy() {
this.checkRemovePointerTrackingEventListeners();
this._eElement.removeEventListener('pointerdown', this._pointerDownEventListener);
}
cancelDrag() {
this.processDragStop(undefined);
}
onPointerDown(oEvent) {
if (this._allowableTargets.includes(oEvent.target) && oEvent.isPrimary) {
const coordinates = this.getPointerCoordinates(oEvent);
this.processPointerDown(coordinates);
}
}
processPointerDown(coordinates) {
this._nOriginalX = coordinates.x;
this._nOriginalY = coordinates.y;
this._oDocument.addEventListener('pointermove', this._pointerMoveEventListener);
this._oDocument.addEventListener('pointerup', this._pointerUpEventListener, { passive: true });
this._pointerTracking = true;
this._timeout = setTimeout(() => {
try {
this.startDrag();
}
catch (err) {
console.error(err);
throw err;
}
}, this._nDelay);
}
onPointerMove(oEvent) {
if (this._pointerTracking) {
this.processDragMove(oEvent);
oEvent.preventDefault();
}
}
processDragMove(dragEvent) {
this._nX = dragEvent.pageX - this._nOriginalX;
this._nY = dragEvent.pageY - this._nOriginalY;
if (this._dragging === false) {
if (Math.abs(this._nX) > this._nDistance ||
Math.abs(this._nY) > this._nDistance) {
this.startDrag();
}
}
if (this._dragging) {
this.emit('drag', this._nX, this._nY, dragEvent);
}
}
onPointerUp(oEvent) {
this.processDragStop(oEvent);
}
processDragStop(dragEvent) {
var _a;
if (this._timeout !== undefined) {
clearTimeout(this._timeout);
this._timeout = undefined;
}
this.checkRemovePointerTrackingEventListeners();
if (this._dragging === true) {
this._eBody.classList.remove("lm_dragging" /* Dragging */);
this._eElement.classList.remove("lm_dragging" /* Dragging */);
(_a = this._oDocument.querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.style.setProperty('pointer-events', '');
this._dragging = false;
this.emit('dragStop', dragEvent);
}
}
checkRemovePointerTrackingEventListeners() {
if (this._pointerTracking) {
this._oDocument.removeEventListener('pointermove', this._pointerMoveEventListener);
this._oDocument.removeEventListener('pointerup', this._pointerUpEventListener);
this._pointerTracking = false;
}
}
startDrag() {
var _a;
if (this._timeout !== undefined) {
clearTimeout(this._timeout);
this._timeout = undefined;
}
this._dragging = true;
this._eBody.classList.add("lm_dragging" /* Dragging */);
this._eElement.classList.add("lm_dragging" /* Dragging */);
(_a = this._oDocument.querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.style.setProperty('pointer-events', 'none');
this.emit('dragStart', this._nOriginalX, this._nOriginalY);
}
getPointerCoordinates(event) {
const result = {
x: event.pageX,
y: event.pageY
};
return result;
}
}
exports.DragListener = DragListener;
//# sourceMappingURL=drag-listener.js.map