From c1bf9ee54a1c07cbf2151640942f125fa1784830 Mon Sep 17 00:00:00 2001
From: Mike Becker <universe@uap-core.de>
Date: Mon, 17 Apr 2023 17:17:04 +0200
Subject: [PATCH] introduce column property to access the new width after
 resizing

fixes #57
fixes #126
---
 .../thead/rows/thead-titles-row.component.ts  | 11 +++++----
 .../src/lib/directives/resizer.directive.ts   | 24 +++++++++++++------
 .../src/lib/lib/data-set/column.ts            | 10 ++++++++
 .../custom-filter.component.ts                | 10 ++++----
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/projects/angular2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts b/projects/angular2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts
index 8fc41e62c..4e462f9f3 100644
--- a/projects/angular2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts
+++ b/projects/angular2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts
@@ -13,7 +13,7 @@ import {Column} from "../../../lib/data-set/column";
       <input type="checkbox" [ngModel]="isAllSelected" (click)="selectAllRows.emit()">
     </th>
     <th angular2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
-    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
+    <th *ngFor="let column of visibleColumns; index as i; last as isLast"
         class="angular2-smart-th {{ column.id }}"
         [ngClass]="column.classHeader ?? ''"
         [style.width]="column.width"
@@ -24,7 +24,10 @@ import {Column} from "../../../lib/data-set/column";
         [isHideable]="isHideable"
         (hide)="hide.emit($event)"
       ></angular2-st-column-title>
-      <div *ngIf="isResizable" angular2-resizer class="angular2-resizer-block"></div>
+      <div *ngIf="isResizable && (showActionColumnRight || !isLast)"
+           [angular2SmartTableResizer]="{column: column, siblingColumn: isLast ? undefined : visibleColumns[i+1]}"
+           class="angular2-resizer-block"
+      ></div>
     </th>
     <th angular2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
   `,
@@ -54,7 +57,7 @@ export class TheadTitlesRowComponent implements OnChanges {
     this.isHideable = this.grid.getSetting('hideable');
   }
 
-  getVisibleColumns(columns: Array<Column>): Array<Column> {
-    return (columns || []).filter((column: Column) => !column.hide);
+  get visibleColumns(): Array<Column> {
+    return (this.grid.getColumns() || []).filter((column: Column) => !column.hide);
   }
 }
diff --git a/projects/angular2-smart-table/src/lib/directives/resizer.directive.ts b/projects/angular2-smart-table/src/lib/directives/resizer.directive.ts
index 623f40de4..63bcbe955 100644
--- a/projects/angular2-smart-table/src/lib/directives/resizer.directive.ts
+++ b/projects/angular2-smart-table/src/lib/directives/resizer.directive.ts
@@ -1,21 +1,24 @@
-import {Directive, ElementRef, HostListener, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {Directive, ElementRef, HostListener, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
 import {Subject} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
 
 import {TableService} from '../services/table.service';
+import {Column} from "../lib/data-set/column";
 
 @Directive({
-  selector: '[angular2-resizer]'
+  selector: '[angular2SmartTableResizer]'
 })
 export class NgxResizerDirective implements OnInit, OnDestroy {
+  @Input() angular2SmartTableResizer!: {column: Column, siblingColumn: Column | undefined};
+
   isClicked!: boolean;
 
   parentElement: any;
   siblingElement: any;
 
-  pointerOffset!: number;
-  parentOffset!: number;
-  siblingOffset!: number;
+  pointerOffset: number = 0;
+  parentOffset: number = 0;
+  siblingOffset: number | undefined = undefined;
 
   destroyed$ = new Subject<any>();
 
@@ -31,8 +34,15 @@ export class NgxResizerDirective implements OnInit, OnDestroy {
       .subscribe((event: MouseEvent) => {
         const offset = this.pointerOffset - event.pageX;
         const width = this.parentOffset - offset;
+        this.angular2SmartTableResizer.column.resizedWidth = width;
         this.renderer.setStyle(this.parentElement, 'width', width + 'px');
-        this.renderer.setStyle(this.siblingElement, 'width', this.siblingOffset + offset + 'px');
+
+        const siblingColumn = this.angular2SmartTableResizer.siblingColumn;
+        if (siblingColumn !== undefined && this.siblingOffset !== undefined) {
+          const siblingWidth = this.siblingOffset + offset;
+          siblingColumn.resizedWidth = siblingWidth;
+          this.renderer.setStyle(this.siblingElement, 'width', siblingWidth + 'px');
+        }
       });
   }
 
@@ -43,7 +53,7 @@ export class NgxResizerDirective implements OnInit, OnDestroy {
     this.pointerOffset = event.pageX;
 
     this.parentOffset = this.parentElement.offsetWidth;
-    this.siblingOffset = this.siblingElement.offsetWidth;
+    this.siblingOffset = this.siblingElement?.offsetWidth;
   }
 
   @HostListener('document:mouseup') onMouseDown() {
diff --git a/projects/angular2-smart-table/src/lib/lib/data-set/column.ts b/projects/angular2-smart-table/src/lib/lib/data-set/column.ts
index f9ccb14a7..d479423a3 100644
--- a/projects/angular2-smart-table/src/lib/lib/data-set/column.ts
+++ b/projects/angular2-smart-table/src/lib/lib/data-set/column.ts
@@ -18,6 +18,16 @@ export class Column implements IColumn {
   classHeader?: string = '';
   classContent?: string = '';
   width?: string = '';
+  /**
+   * If this column was resized, this contains the new width in pixels.
+   * Please be aware that this only contains the width specified in the width
+   * CSS attribute. It does NOT necessarily equal the actual width of the column
+   * unless the table-layout is fixed.
+   * Also note carefully that in automatic table layouts the actual width of other columns,
+   * that are not adjacent to the resized column, may also change. Those changes are not
+   * reflected by this property.
+   */
+  resizedWidth?: number = undefined;
   isSortable?: boolean = true;
   isEditable?: boolean = true;
   isAddable?: boolean = true;
diff --git a/projects/demo/src/app/pages/examples/custom-edit-view/custom-filter.component.ts b/projects/demo/src/app/pages/examples/custom-edit-view/custom-filter.component.ts
index 0257aca53..dfa583a93 100644
--- a/projects/demo/src/app/pages/examples/custom-edit-view/custom-filter.component.ts
+++ b/projects/demo/src/app/pages/examples/custom-edit-view/custom-filter.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 
-import { DefaultFilter } from 'angular2-smart-table';
+import {DefaultFilter} from 'angular2-smart-table';
 
 @Component({
   template: `
-    <input 
+    <input
       #number
       [ngClass]="inputClass"
       [formControl]="inputControl"