in src/cdk-experimental/column-resize/overlay-handle.ts [85:173]
private _dragStarted(mousedownEvent: MouseEvent) {
// Only allow dragging using the left mouse button.
if (mousedownEvent.button !== 0) {
return;
}
const mouseup = fromEvent<MouseEvent>(this.document, 'mouseup');
const mousemove = fromEvent<MouseEvent>(this.document, 'mousemove');
const escape = fromEvent<KeyboardEvent>(this.document, 'keyup').pipe(
filter(event => event.keyCode === ESCAPE),
);
const startX = mousedownEvent.screenX;
const initialSize = this._getOriginWidth();
let overlayOffset = 0;
let originOffset = this._getOriginOffset();
let size = initialSize;
let overshot = 0;
this.updateResizeActive(true);
mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({screenX}) => {
this.styleScheduler.scheduleEnd(() => {
this._notifyResizeEnded(size, screenX !== startX);
});
});
escape.pipe(takeUntil(merge(mouseup, this.destroyed))).subscribe(() => {
this._notifyResizeEnded(initialSize);
});
mousemove
.pipe(
map(({screenX}) => screenX),
startWith(startX),
distinctUntilChanged(),
pairwise(),
takeUntil(merge(mouseup, escape, this.destroyed)),
)
.subscribe(([prevX, currX]) => {
let deltaX = currX - prevX;
// If the mouse moved further than the resize was able to match, limit the
// movement of the overlay to match the actual size and position of the origin.
if (overshot !== 0) {
if ((overshot < 0 && deltaX < 0) || (overshot > 0 && deltaX > 0)) {
overshot += deltaX;
return;
} else {
const remainingOvershot = overshot + deltaX;
overshot =
overshot > 0 ? Math.max(remainingOvershot, 0) : Math.min(remainingOvershot, 0);
deltaX = remainingOvershot - overshot;
if (deltaX === 0) {
return;
}
}
}
let computedNewSize: number = size + (this._isLtr() ? deltaX : -deltaX);
computedNewSize = Math.min(
Math.max(computedNewSize, this.resizeRef.minWidthPx, 0),
this.resizeRef.maxWidthPx,
);
this.resizeNotifier.triggerResize.next({
columnId: this.columnDef.name,
size: computedNewSize,
previousSize: size,
isStickyColumn: this.columnDef.sticky || this.columnDef.stickyEnd,
});
this.styleScheduler.scheduleEnd(() => {
const originNewSize = this._getOriginWidth();
const originNewOffset = this._getOriginOffset();
const originOffsetDeltaX = originNewOffset - originOffset;
const originSizeDeltaX = originNewSize - size;
size = originNewSize;
originOffset = originNewOffset;
overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);
overlayOffset += originOffsetDeltaX + (this._isLtr() ? originSizeDeltaX : 0);
this._updateOverlayOffset(overlayOffset);
});
});
}