Handle Resize HTML Frame Element

I'm developing an Angular component that allows users to resize a div containing an iframe by dragging a resize handle. However, I've encountered an issue: the resizing stops when the mouse moves over the iframe during the drag operation. I am using Renderer2 to handle global mouse events.

<div class="resize-container">
    <div class="resize-content">
        <iframe src="https://www.example.com"  frameborder="0"
            #iframe></iframe>
    </div>
    <div class="resize-handle" (mousedown)="onResizeStart($event)"></div>
</div>

@Component({
  selector: 'app-resize-handler',
  standalone: true,
  imports: [],
  templateUrl: './resize-handler.component.html',
  styleUrls: ['./resize-handler.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResizeHandlerComponent implements OnDestroy {
  private isResizing = false;
  private startX = 0;
  private startWidth = 0;
  private mouseMoveListener!: () => void;
  private mouseUpListener!: () => void;

  @ViewChild('iframe') iframe!: ElementRef<HTMLIFrameElement>;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  onResizeStart(event: MouseEvent): void {
    this.isResizing = true;
    this.startX = event.clientX;
    this.startWidth = this.iframe.nativeElement.offsetWidth;
    this.mouseMoveListener = this.renderer.listen('window', 'mousemove', (e) => this.onResize(e));
    this.mouseUpListener = this.renderer.listen('window', 'mouseup', () => this.onResizeEnd());
    event.preventDefault();
  }

  onResize(event: MouseEvent): void {
    if (this.isResizing) {
      const dx = event.clientX - this.startX;
      const newWidth = this.startWidth + dx;
      this.iframe.nativeElement.style.width = `${newWidth}px`;
    }
  }

  onResizeEnd(): void {
    this.isResizing = false;
    if (this.mouseMoveListener) this.mouseMoveListener();
    if (this.mouseUpListener) this.mouseUpListener();
  }

  ngOnDestroy(): void {
    this.onResizeEnd();
  }
}

I've ensured that mouse events are captured globally using Renderer2, yet the issue persists when the mouse hovers over the iframe. How can I maintain the resizing functionality smoothly even when the mouse is over the iframe during the drag operation?

Angular version :17.1.0

You can try this -

The issue you're experiencing is due to the iframe capturing the mouse events, preventing them from bubbling up to the window. To overcome this, you can add a transparent overlay element on top of the iframe during the resize operation. This overlay will capture the mouse events, allowing the resize operation to continue smoothly even when the mouse is over the iframe.

Here the modified code -

onResizeStart(event: MouseEvent): void {
    this.isResizing = true;
    /// ... same code
    this.renderer.addClass(this.elementRef.nativeElement, 'resizing'); // add a class to show the overlay
  }

onResizeEnd(): void {
    this.isResizing = false;
    // ... same code
    this.renderer.removeClass(this.elementRef.nativeElement, 'resizing'); // remove the class to hide the overlay
  }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* ensure it's on top of the iframe */
  background-color: transparent; /* make it invisible */
  pointer-events: auto; /* capture mouse events */
}

<div class="resize-container">
  <div class="resize-content">
    <iframe src="https://www.example.com" frameborder="0" #iframe></iframe>
    <div class="overlay" *ngIf="isResizing"></div>
  </div>
  <div class="resize-handle" (mousedown)="onResizeStart($event)"></div>
</div>

By adding the overlay element and toggling its visibility using a class, you ensure that mouse events are captured even when the mouse is over the iframe during the resize operation