Add horizontalResize event to resize observer directive

Use this event instead to reset column widths.

Author: shadowbas

src/app/app.component.html

@@ -403,7 +403,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
 
           <div
             appResizeObserver
-            (resize)="onTableResize()"
+            (horizontalResize)="onTableResize()"
             id="canvasTableContainerArea"
             [ngStyle]="{'bottom.px': canvasTableBtmOffset}">
 

src/app/app.component.ts

@@ -94,7 +94,7 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   private rowsSubject= new BehaviorSubject(this.rows);
   debouncedRows$ = this.rowsSubject.asObservable().pipe(debounceTime(300));
 
-  lastCheckedIndex: number = null;
+  lastCheckedIndex: number = -1;
   scrollToIndex: number = 0;
   rowSelectionModel = new FilterSelectionModel(
     false,
@@ -1521,7 +1521,6 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
     // When nothing is selected yet.
     if (from === -1) return this.oneSelect(to, check)
 
-
     return this.rangeSelectFrom(from, to, check)
   }
 

src/app/directives/resize-observer.directive.ts

@@ -24,13 +24,35 @@ import { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular
   standalone: true,
 })
 export class ResizeObserverDirective implements OnDestroy {
-  @Output() resize = new EventEmitter<ResizeObserverEntry[]>();
+  @Output() resize = new EventEmitter<ResizeObserverEntry>();
+  @Output() horizontalResize = new EventEmitter<ResizeObserverEntry>();
+  @Output() verticalResize = new EventEmitter<ResizeObserverEntry>();
 
   private observer: ResizeObserver;
+  private lastSize: { width: number; height: number } | null = null;
 
   constructor(private elementRef: ElementRef) {
-    console.log('yes i am called', this)
-    this.observer = new ResizeObserver((entries) => this.resize.emit(entries));
+    this.observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+
+      if (!entry) return;
+
+      const { width, height } = entry.contentRect;
+
+      if (this.lastSize) {
+        if (this.lastSize.width !== width) {
+          this.horizontalResize.emit(entry);
+        }
+
+        if (this.lastSize.height !== height) {
+          this.verticalResize.emit(entry);
+        }
+      }
+
+      this.resize.emit(entry);
+      this.lastSize = { width, height };
+    });
+
     this.observer.observe(this.elementRef.nativeElement);
   }