dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
128 lines (127 loc) • 5.95 kB
JavaScript
import { addDisposableListener } from '../../events';
import { CompositeDisposable } from '../../lifecycle';
const DEFAULT_DELAY = 500;
const DEFAULT_TOLERANCE = 8;
/**
* Passive — does not consume the pointer; movement past `tolerance`
* cancels silently so a sibling `PointerDragSource` can take over.
*/
export class LongPressDetector extends CompositeDisposable {
constructor(element, options) {
super();
this.element = element;
this.options = options;
this._startX = 0;
this._startY = 0;
this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
this._onPointerDown(e);
}));
}
_onPointerDown(event) {
var _a, _b, _c, _d, _e;
const touchOnly = (_a = this.options.touchOnly) !== null && _a !== void 0 ? _a : true;
if (touchOnly &&
event.pointerType !== 'touch' &&
event.pointerType !== 'pen') {
return;
}
// Defensive — supersede any in-flight press.
this._cancelPending();
this._pointerId = event.pointerId;
this._startX = event.clientX;
this._startY = event.clientY;
const delay = (_b = this.options.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY;
const tolerance = (_c = this.options.tolerance) !== null && _c !== void 0 ? _c : DEFAULT_TOLERANCE;
// Source's owning window — popout drags fire on their own window.
const targetWindow = (_e = (_d = this.element.ownerDocument) === null || _d === void 0 ? void 0 : _d.defaultView) !== null && _e !== void 0 ? _e : window;
this._timer = setTimeout(() => {
this._timer = undefined;
this._cancelPending();
// Touch browsers synthesize a compatibility `contextmenu` event
// for long-press. preventDefault on the original pointerdown is
// too late (already dispatched), so install a one-shot
// capture-phase guard for the next contextmenu. Without this,
// consumers that don't preventDefault inside their onLongPress
// (or that early-return before doing so) leak the browser's
// native menu on top of theirs.
this._installContextMenuGuard(targetWindow);
// Same idea for `click`: when the user releases their finger
// after the long-press, touch browsers dispatch a `click` to
// the element the touch ended on (the source). Consumers
// typically wire click to a primary action (e.g. tab activate,
// tab-group chip collapse-toggle). Without this guard, the
// long-press immediately fires both the context menu AND the
// primary action — and the action's side effects (e.g. a chip
// collapse animation) read as a screen wobble while the menu
// is supposed to be open. Scoped to the source element so
// clicks on menu items elsewhere remain effective.
this._installClickGuard(targetWindow);
this.options.onLongPress(event);
}, delay);
this._moveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
if (moveEvent.pointerId !== this._pointerId) {
return;
}
const dx = moveEvent.clientX - this._startX;
const dy = moveEvent.clientY - this._startY;
if (Math.hypot(dx, dy) > tolerance) {
this._cancelPending();
}
});
this._upListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
if (upEvent.pointerId !== this._pointerId) {
return;
}
this._cancelPending();
});
this._cancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
if (cancelEvent.pointerId !== this._pointerId) {
return;
}
this._cancelPending();
});
}
_installContextMenuGuard(targetWindow) {
let guard;
const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
guard = addDisposableListener(targetWindow, 'contextmenu', (event) => {
event.preventDefault();
clearTimeout(timeout);
guard === null || guard === void 0 ? void 0 : guard.dispose();
}, { capture: true });
}
_installClickGuard(targetWindow) {
let guard;
const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
guard = addDisposableListener(targetWindow, 'click', (event) => {
// Only suppress clicks targeted at the long-pressed element
// or its descendants. A user tap on a context menu item (or
// anywhere else) still gets through unchanged.
const target = event.target;
if (target && this.element.contains(target)) {
event.preventDefault();
event.stopPropagation();
}
clearTimeout(timeout);
guard === null || guard === void 0 ? void 0 : guard.dispose();
}, { capture: true });
}
_cancelPending() {
var _a, _b, _c;
if (this._timer !== undefined) {
clearTimeout(this._timer);
this._timer = undefined;
}
this._pointerId = undefined;
(_a = this._moveListener) === null || _a === void 0 ? void 0 : _a.dispose();
(_b = this._upListener) === null || _b === void 0 ? void 0 : _b.dispose();
(_c = this._cancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
this._moveListener = undefined;
this._upListener = undefined;
this._cancelListener = undefined;
}
dispose() {
this._cancelPending();
super.dispose();
}
}