private _dragStarted()

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);
        });
      });
  }