From e4fa5911481108a4a92533a201c65116a99dd40b Mon Sep 17 00:00:00 2001
From: Chintan Kavathia <chintankumar.kavathia@siemens.com>
Date: Wed, 13 Nov 2024 16:33:22 +0530
Subject: [PATCH] refactor: column resize directive

removed use of renderer which was used to manually create resize handle and do DOM manipulations on it.

BREAKING CHANGE: removed `minWidth` and `maxWidth` from resizeable directive which had no use also `resizeEnabled` is now removed.
---
 .../header/header-cell.component.ts           |  1 +
 .../lib/components/header/header.component.ts |  8 ++-
 .../lib/directives/resizeable.directive.ts    | 64 ++++---------------
 3 files changed, 19 insertions(+), 54 deletions(-)

diff --git a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
index c455761fd..91f9206ed 100644
--- a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
+++ b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
@@ -52,6 +52,7 @@ import {
       }
       <span (click)="onSort()" [class]="sortClass"> </span>
     </div>
+    <ng-content [resize-handle]> </ng-content>
   `,
   host: {
     class: 'datatable-header-cell'
diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.ts b/projects/ngx-datatable/src/lib/components/header/header.component.ts
index 651b631f1..3410b5ad3 100644
--- a/projects/ngx-datatable/src/lib/components/header/header.component.ts
+++ b/projects/ngx-datatable/src/lib/components/header/header.component.ts
@@ -48,8 +48,8 @@ import {
           @for (column of colGroup.columns; track column.$$id) {
             <datatable-header-cell
               role="columnheader"
+              #resizeable="resizeable"
               resizeable
-              [resizeEnabled]="column.resizeable"
               (resize)="onColumnResized($event, column)"
               (resizing)="onColumnResizing($event, column)"
               long-press
@@ -79,6 +79,12 @@ import {
               (select)="select.emit($event)"
               (columnContextmenu)="columnContextmenu.emit($event)"
             >
+              <span
+                resize-handle
+                (mousedown)="column.resizeable ? resizeable.onMousedown($event) : null"
+                [class.resize-handle]="column.resizeable"
+                [class.resize-handle--not-resizable]="!column.resizeable"
+              ></span>
             </datatable-header-cell>
           }
         </div>
diff --git a/projects/ngx-datatable/src/lib/directives/resizeable.directive.ts b/projects/ngx-datatable/src/lib/directives/resizeable.directive.ts
index 82def829b..e7cba835d 100644
--- a/projects/ngx-datatable/src/lib/directives/resizeable.directive.ts
+++ b/projects/ngx-datatable/src/lib/directives/resizeable.directive.ts
@@ -1,56 +1,19 @@
-import {
-  AfterViewInit,
-  booleanAttribute,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  inject,
-  Input,
-  numberAttribute,
-  OnDestroy,
-  Output,
-  Renderer2
-} from '@angular/core';
+import { Directive, ElementRef, EventEmitter, inject, OnDestroy, Output } from '@angular/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-
 @Directive({
-  selector: '[resizeable]'
+  selector: '[resizeable]',
+  exportAs: 'resizeable'
 })
-export class ResizeableDirective implements OnDestroy, AfterViewInit {
-  private renderer = inject(Renderer2);
-
-  @HostBinding('class.resizeable') @Input({ transform: booleanAttribute }) resizeEnabled = true;
-  @Input({ transform: numberAttribute }) minWidth: number;
-  @Input({ transform: numberAttribute }) maxWidth: number;
-
+export class ResizeableDirective implements OnDestroy {
   @Output() resize: EventEmitter<any> = new EventEmitter();
   @Output() resizing: EventEmitter<any> = new EventEmitter();
 
   element = inject(ElementRef).nativeElement;
   subscription: Subscription;
-  private resizeHandle: HTMLElement;
-
-  ngAfterViewInit(): void {
-    const renderer2 = this.renderer;
-    this.resizeHandle = renderer2.createElement('span');
-    if (this.resizeEnabled) {
-      renderer2.addClass(this.resizeHandle, 'resize-handle');
-    } else {
-      renderer2.addClass(this.resizeHandle, 'resize-handle--not-resizable');
-    }
-    renderer2.appendChild(this.element, this.resizeHandle);
-  }
 
   ngOnDestroy(): void {
     this._destroySubscription();
-    if (this.renderer.destroyNode) {
-      this.renderer.destroyNode(this.resizeHandle);
-    } else if (this.resizeHandle) {
-      this.renderer.removeChild(this.renderer.parentNode(this.resizeHandle), this.resizeHandle);
-    }
   }
 
   onMouseup(): void {
@@ -60,24 +23,19 @@ export class ResizeableDirective implements OnDestroy, AfterViewInit {
     }
   }
 
-  @HostListener('mousedown', ['$event'])
   onMousedown(event: MouseEvent): void {
-    const isHandle = (event.target as HTMLElement).classList.contains('resize-handle');
     const initialWidth = this.element.clientWidth;
     const mouseDownScreenX = event.screenX;
+    event.stopPropagation();
 
-    if (isHandle) {
-      event.stopPropagation();
+    const mouseup = fromEvent(document, 'mouseup');
+    this.subscription = mouseup.subscribe((ev: MouseEvent) => this.onMouseup());
 
-      const mouseup = fromEvent(document, 'mouseup');
-      this.subscription = mouseup.subscribe((ev: MouseEvent) => this.onMouseup());
+    const mouseMoveSub = fromEvent(document, 'mousemove')
+      .pipe(takeUntil(mouseup))
+      .subscribe((e: MouseEvent) => this.move(e, initialWidth, mouseDownScreenX));
 
-      const mouseMoveSub = fromEvent(document, 'mousemove')
-        .pipe(takeUntil(mouseup))
-        .subscribe((e: MouseEvent) => this.move(e, initialWidth, mouseDownScreenX));
-
-      this.subscription.add(mouseMoveSub);
-    }
+    this.subscription.add(mouseMoveSub);
   }
 
   move(event: MouseEvent, initialWidth: number, mouseDownScreenX: number): void {