fix(gantt): 纵向滚动条往下拖动会弹回到拉动的位置 (#569)

Author: xinglu01

packages/gantt/src/components/scrollbar/scrollbar.component.html

@@ -1,18 +1,18 @@
 <div
   class="gantt-scrollbar"
-  [ngClass]="{ 'gantt-scrollbar-bg': hasFooter }"
-  [style.height.px]="ganttRoot?.horizontalScrollbarHeight + 1"
-  [style.right.px]="ganttRoot?.verticalScrollbarWidth"
+  [ngClass]="{ 'gantt-scrollbar-bg': hasFooter() }"
+  [style.height.px]="ganttRoot()?.horizontalScrollbarHeight + 1"
+  [style.right.px]="ganttRoot()?.verticalScrollbarWidth"
 >
   <div
     class="gantt-table-scrollbar"
     syncScrollX="ganttTableXScroll"
-    [class.with-scrollbar]="ganttRoot?.horizontalScrollbarHeight"
-    [style.width.px]="tableWidth"
+    [class.with-scrollbar]="ganttRoot()?.horizontalScrollbarHeight"
+    [style.width.px]="tableWidth()"
   >
-    <div class="h-100" [style.width.px]="ganttRoot.ganttUpper['ganttTableBody']?.elementRef?.nativeElement?.offsetWidth - 1 || 0"></div>
+    <div class="h-100" [style.width.px]="tableScrollWidth() - 1"></div>
   </div>
   <div class="gantt-main-scrollbar" syncScrollX="ganttMainXScroll">
-    <div class="h-100" [style.width.px]="ganttRoot['view']?.width"></div>
+    <div class="h-100" [style.width.px]="ganttRoot()['view']?.width"></div>
   </div>
 </div>

packages/gantt/src/components/scrollbar/scrollbar.component.ts

@@ -1,6 +1,6 @@
-import { Component, Inject, Input } from '@angular/core';
-import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
 import { NgClass } from '@angular/common';
+import { Component, Inject, input } from '@angular/core';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
 import { NgxGanttRootComponent } from '../../root.component';
 import { GanttSyncScrollXDirective } from '../../directives/sync-scroll.directive';
 
@@ -10,11 +10,13 @@ import { GanttSyncScrollXDirective } from '../../directives/sync-scroll.directiv
     imports: [NgClass, GanttSyncScrollXDirective]
 })
 export class GanttScrollbarComponent {
-    @Input() hasFooter: boolean = false;
+    hasFooter = input<boolean>(false);
+
+    tableWidth = input<number>();
 
-    @Input() tableWidth: number;
+    ganttRoot = input<NgxGanttRootComponent>();
 
-    @Input() ganttRoot: NgxGanttRootComponent;
+    tableScrollWidth = input<number>(0);
 
     constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
 }

packages/gantt/src/gantt.component.html

@@ -82,6 +82,7 @@
     [ganttRoot]="ganttRoot"
     [hasFooter]="!!table?.tableFooterTemplate"
     [tableWidth]="tableHeader.tableWidth"
+    [tableScrollWidth]="tableScrollWidth()"
   ></gantt-scrollbar>
 
   @if (table?.tableFooterTemplate || footerTemplate) {

packages/gantt/src/gantt.component.ts

@@ -20,7 +20,8 @@ import {
     SimpleChanges,
     TemplateRef,
     ViewChild,
-    forwardRef
+    forwardRef,
+    signal
 } from '@angular/core';
 import { Observable, from } from 'rxjs';
 import { finalize, skip, take, takeUntil } from 'rxjs/operators';
@@ -44,6 +45,7 @@ import { GanttMainComponent } from './components/main/gantt-main.component';
 import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
 import { GanttTableBodyComponent } from './components/table/body/gantt-table-body.component';
 import { GanttTableHeaderComponent } from './components/table/header/gantt-table-header.component';
+import { GanttSyncScrollXDirective, GanttSyncScrollYDirective } from './directives/sync-scroll.directive';
 import { GANTT_ABSTRACT_TOKEN } from './gantt-abstract';
 import { GANTT_UPPER_TOKEN, GanttUpper } from './gantt-upper';
 import { GANTT_GLOBAL_CONFIG, GanttGlobalConfig } from './gantt.config';
@@ -52,7 +54,6 @@ import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
 import { GanttDate } from './utils/date';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
-import { GanttSyncScrollXDirective, GanttSyncScrollYDirective } from './directives/sync-scroll.directive';
 
 @Component({
     selector: 'ngx-gantt',
@@ -141,6 +142,10 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @ViewChild('ganttTableBody', { static: true }) ganttTableBody: ElementRef<HTMLDivElement>;
 
+    public tableScrollWidth = signal<number>(0);
+
+    private resizeObserver: ResizeObserver;
+
     get loading() {
         return this._loading;
     }
@@ -229,6 +234,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
                 this.computeTempDataRefs();
             });
         }
+        this.initScrollContainerObserver();
     }
 
     ngAfterViewChecked() {
@@ -413,4 +419,27 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.table.dragEnded.emit(event);
         this.draggingItem = null;
     }
+
+    private initScrollContainerObserver() {
+        if (this.ganttTableBody && this.ganttTableBody['elementRef']?.nativeElement) {
+            this.tableScrollWidth.set(this.ganttTableBody['elementRef'].nativeElement.clientWidth);
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    const newWidth = entries[0].target.clientWidth;
+                    if (this.tableScrollWidth() !== newWidth) {
+                        this.tableScrollWidth.set(newWidth);
+                        this.cdr.markForCheck();
+                    }
+                });
+                this.resizeObserver.observe(this.ganttTableBody['elementRef'].nativeElement);
+            }
+        }
+    }
+
+    override ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
 }