dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
172 lines (171 loc) • 7.25 kB
JavaScript
import { addDisposableListener } from '../../events';
import { CompositeDisposable } from '../../lifecycle';
import { PointerDragController } from './pointerDragController';
const DEFAULT_THRESHOLD = 5;
const DEFAULT_TOUCH_INITIATION_DELAY = 250;
const DEFAULT_PRESS_TOLERANCE = 8;
/**
* Pointer-event drag source. Waits for movement past `threshold` (and
* touch-only `touchInitiationDelay`) before promoting to a drag so taps
* pass through unaffected.
*/
export class PointerDragSource extends CompositeDisposable {
constructor(element, options) {
var _a;
super();
this.element = element;
this.options = options;
this._disabled = false;
this._armed = false;
this._startX = 0;
this._startY = 0;
this._touchOnly = (_a = options.touchOnly) !== null && _a !== void 0 ? _a : true;
this.addDisposables(addDisposableListener(this.element, 'pointerdown', (e) => {
this._onPointerDown(e);
}));
}
setDisabled(value) {
this._disabled = value;
if (value) {
this._cancelPending();
}
}
/**
* `false` lets the pointer source also handle mouse pointers; used when
* `dndStrategy: 'pointer'` to drive every input type through this path.
*/
setTouchOnly(value) {
if (this._touchOnly === value) {
return;
}
this._touchOnly = value;
// A pending mouse-tracked drag should be abandoned if we re-enable
// the touch-only filter mid-flight.
if (value) {
this._cancelPending();
}
}
_shouldHandle(event) {
var _a, _b;
if (this._disabled) {
return false;
}
// Pointer-type filter runs before isCancelled — consumer state read
// by isCancelled may not be populated for events we'll never handle.
if (this._touchOnly &&
event.pointerType !== 'touch' &&
event.pointerType !== 'pen') {
return false;
}
if ((_b = (_a = this.options).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event)) {
return false;
}
return true;
}
_onPointerDown(event) {
var _a, _b, _c, _d, _e;
if (!this._shouldHandle(event)) {
return;
}
// Defensive: a fresh pointerdown supersedes any in-flight tracking.
this._cancelPending();
this._pendingPointerId = event.pointerId;
this._startX = event.clientX;
this._startY = event.clientY;
this._startEvent = event;
const isTouch = event.pointerType === 'touch' || event.pointerType === 'pen';
// Touch waits a short window so a still finger can press-and-hold
// before drifting; once the timer fires, any motion past `threshold`
// begins the drag.
const initiationDelayOpt = this.options.touchInitiationDelay;
const initiationDelay = (_a = (typeof initiationDelayOpt === 'function'
? initiationDelayOpt()
: initiationDelayOpt)) !== null && _a !== void 0 ? _a : DEFAULT_TOUCH_INITIATION_DELAY;
this._armed = !isTouch || initiationDelay <= 0;
if (isTouch && initiationDelay > 0 && isFinite(initiationDelay)) {
this._armTimer = setTimeout(() => {
this._armTimer = undefined;
this._armed = true;
}, initiationDelay);
}
const threshold = (_b = this.options.threshold) !== null && _b !== void 0 ? _b : DEFAULT_THRESHOLD;
const pressToleranceOpt = this.options.pressTolerance;
const pressTolerance = (_c = (typeof pressToleranceOpt === 'function'
? pressToleranceOpt()
: pressToleranceOpt)) !== null && _c !== void 0 ? _c : DEFAULT_PRESS_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._pendingMoveListener = addDisposableListener(targetWindow, 'pointermove', (moveEvent) => {
if (moveEvent.pointerId !== this._pendingPointerId) {
return;
}
const dx = moveEvent.clientX - this._startX;
const dy = moveEvent.clientY - this._startY;
const distance = Math.hypot(dx, dy);
if (this._armed) {
if (distance >= threshold) {
this._beginDrag(moveEvent);
}
return;
}
// Pre-arm phase: a flick past `pressTolerance` in any
// direction is treated as drag intent. The element opts out
// of native scroll via `touch-action: none`; container-level
// scrolling lives on the surrounding strip's empty space.
if (distance > pressTolerance) {
this._beginDrag(moveEvent);
}
});
this._pendingUpListener = addDisposableListener(targetWindow, 'pointerup', (upEvent) => {
if (upEvent.pointerId !== this._pendingPointerId) {
return;
}
this._cancelPending();
});
this._pendingCancelListener = addDisposableListener(targetWindow, 'pointercancel', (cancelEvent) => {
if (cancelEvent.pointerId !== this._pendingPointerId) {
return;
}
this._cancelPending();
});
}
/** For sibling gesture detectors (e.g. LongPressDetector) to dismiss a pending drag. */
cancelPending() {
this._cancelPending();
}
_cancelPending() {
var _a, _b, _c;
this._pendingPointerId = undefined;
if (this._armTimer !== undefined) {
clearTimeout(this._armTimer);
this._armTimer = undefined;
}
this._armed = false;
(_a = this._pendingMoveListener) === null || _a === void 0 ? void 0 : _a.dispose();
(_b = this._pendingUpListener) === null || _b === void 0 ? void 0 : _b.dispose();
(_c = this._pendingCancelListener) === null || _c === void 0 ? void 0 : _c.dispose();
this._pendingMoveListener = undefined;
this._pendingUpListener = undefined;
this._pendingCancelListener = undefined;
this._startEvent = undefined;
}
_beginDrag(triggerEvent) {
var _a, _b, _c, _d, _e;
const startEvent = (_a = this._startEvent) !== null && _a !== void 0 ? _a : triggerEvent;
this._cancelPending();
(_c = (_b = this.options).onDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, startEvent);
const ghost = (_e = (_d = this.options).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, startEvent);
PointerDragController.getInstance().beginDrag({
pointerEvent: triggerEvent,
source: this.element,
getData: () => this.options.getData(startEvent),
ghost,
onDragMove: this.options.onDragMove,
onDragEnd: this.options.onDragEnd,
});
}
dispose() {
this._cancelPending();
super.dispose();
}
}