CODEWITHSUNDEEP
angularresizablesplitpane
CodingIntern
CodingIntern

Reputation: 13

Stop dragging left in resizable split view

I have resizable split view where I can drag the splitter to resize the left and right sides. But I'm unable to stop dragging left at a point. But I can set a width to stop dragging right. Here is the code snippet which stops dragging to right.

`this.mousemoveListener = (e) => {
      if (this.resizing) {
        this.showResizeIndicator(e.pageX);
      }
    };

showResizeIndicator(offsetLeft: number): void {
    if (this.resizeIndicator) {
      let positionLeft = offsetLeft - this.containerElement.getBoundingClientRect().left + this.containerElement.scrollLeft;
      // Ensure that resize indicator cannot be dragged completely to the right - minimum table with should be considered.
      const indicatorTreshold = this.containerElement.getBoundingClientRect().width - this.minTableWidth;
      if (positionLeft > indicatorTreshold) {
        positionLeft = indicatorTreshold;
      }
      this.resizeIndicator.style.left = positionLeft + 'px';
      this.resizeIndicator.style.height = this.containerElement.offsetHeight + 'px';
      this.resizeIndicator.style.display = 'block';
    }
  }

  get containerElement() {
    return this.parentDirective.element.nativeElement;
  }`

Upvotes: 0

Views: 251

Answers (1)

Abolfazl Almas
Abolfazl Almas

Reputation: 135

I already implemented such a splitter with three events. mousedown event for when it is selected. I will listen to the other two when it element is selected. One mousemove to change the size. and another mouseup to stop the operation.

this.mousedownSubscription = fromEvent(
        this.vl.nativeElement,
        'mousedown'
      ).subscribe((e: any) => {
        this.onMouseDown();
      });

onMouseDown() {
    this.isMouseDown = true;
    const body = document.body;
    this.mousemoveSubscription = fromEvent(body, 'mousemove').subscribe(
      (e: any) => {
        this.onMouseMove(e);
      }
    );
    this.mouseupSubscription = fromEvent(body, 'mouseup').subscribe(
      (e: any) => {
        this.onMouseEnd();
      }
    );
  }

onMouseEnd() {
    this.isMouseDown = false;
    this.mouseupSubscription.unsubscribe();
    this.mousemoveSubscription.unsubscribe();
  }

I think you should use mouseup event.

Upvotes: 0

Related Questions