fix(gantt): 修复win系统，左侧表格横向滚轴按钮不生效，滚动条在可视窗口展示 (#555)

Author: xinglu01

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

@@ -4,7 +4,9 @@
   [style.height.px]="ganttRoot?.horizontalScrollbarHeight + 1"
   [style.right.px]="ganttRoot?.verticalScrollbarWidth"
 >
-  <div class="gantt-table-scrollbar" [class.with-scrollbar]="ganttRoot?.horizontalScrollbarHeight" [style.width.px]="tableWidth"></div>
+  <div class="gantt-table-scrollbar" [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>
   <div class="gantt-main-scrollbar">
     <div class="h-100" [style.width.px]="ganttRoot['view']?.width"></div>
   </div>

packages/gantt/src/components/table/body/gantt-table-body.component.html

@@ -89,7 +89,7 @@
               </div>
             </div>
           }
-          <div class="gantt-table-column"></div>
+          <div class="gantt-table-column gantt-table-column-placeholder"></div>
           <ng-template
             [ngTemplateOutlet]="rowAfterTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"

packages/gantt/src/components/table/body/gantt-table-body.component.ts

@@ -5,6 +5,7 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
+    ElementRef,
     EventEmitter,
     HostBinding,
     Inject,
@@ -113,11 +114,14 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
 
     public footerContainer: Element;
 
+    public tableScrollbarContainer: Element;
+
     constructor(
         @Inject(GANTT_ABSTRACT_TOKEN) public gantt: GanttAbstractComponent,
         @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
         private cdr: ChangeDetectorRef,
         @Inject(DOCUMENT) private document: Document,
+        protected elementRef: ElementRef<HTMLElement>,
         private ngZone: NgZone
     ) {}
 
@@ -166,27 +170,25 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
         this.sideContainer = this.document.getElementsByClassName('gantt-side-container')[0];
         this.headerContainer = this.document.getElementsByClassName('gantt-table-header-container')[0];
         this.footerContainer = this.document.getElementsByClassName('gantt-table-footer')[0];
+        this.tableScrollbarContainer = this.document.getElementsByClassName('gantt-table-scrollbar')[0];
         this.monitorScrollChange();
     }
 
     private monitorScrollChange() {
         const scrollObservers = [
             fromEvent(this.sideContainer, 'scroll', passiveListenerOptions),
-            fromEvent(this.headerContainer, 'scroll', passiveListenerOptions)
+            fromEvent(this.headerContainer, 'scroll', passiveListenerOptions),
+            fromEvent(this.tableScrollbarContainer, 'scroll', passiveListenerOptions)
         ];
         this.ngZone.runOutsideAngular(() =>
             merge(...scrollObservers)
                 .pipe(takeUntil(this.destroy$))
                 .subscribe((event) => {
                     const target = event.currentTarget as HTMLElement;
-                    const classList = target.classList;
-                    if (classList.contains('gantt-table-header-container')) {
-                        this.sideContainer && (this.sideContainer.scrollLeft = target.scrollLeft);
-                        this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
-                    } else {
-                        this.headerContainer && (this.headerContainer.scrollLeft = target.scrollLeft);
-                        this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
-                    }
+                    this.headerContainer && (this.headerContainer.scrollLeft = target.scrollLeft);
+                    this.sideContainer && (this.sideContainer.scrollLeft = target.scrollLeft);
+                    this.tableScrollbarContainer && (this.tableScrollbarContainer.scrollLeft = target.scrollLeft);
+                    this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
                 })
         );
     }

packages/gantt/src/components/table/gantt-table.scss

@@ -16,7 +16,7 @@
       border-right: none;
     }
 
-    &:last-child {
+    &.gantt-table-column-placeholder {
       padding: 0;
       border: 1px solid variables.$gantt-border-color;
       border-right: none;
@@ -70,7 +70,7 @@
     &:nth-last-child(2) {
       border-right: none;
     }
-    &:last-child {
+    &.gantt-table-column-placeholder {
       padding: 0;
       border: 1px solid variables.$gantt-border-color;
       border-right: none;
@@ -205,6 +205,7 @@
 
 .gantt-table-body {
   display: block;
+  flex: 1;
   .gantt-table-group {
     display: flex;
     background: variables.$gantt-group-background-color;

packages/gantt/src/components/table/header/gantt-table-header.component.html

@@ -17,7 +17,7 @@
       ></div>
     </div>
   }
-  <div class="gantt-table-column"></div>
+  <div class="gantt-table-column gantt-table-column-placeholder"></div>
 </div>
 
 @if (gantt?.table?.settingsSlot) {

packages/gantt/src/gantt.component.html

@@ -27,6 +27,7 @@
       <div class="gantt-side-container">
         <div class="gantt-table">
           <gantt-table-body
+            #ganttTableBody
             [flatItems]="flatItems"
             [viewportItems]="viewportItems"
             [columns]="columns"

packages/gantt/src/gantt.component.scss

@@ -34,6 +34,7 @@
       .gantt-table {
         height: 100%;
         flex: 1;
+        display: flex;
       }
 
       &::-webkit-scrollbar {

packages/gantt/src/gantt.component.ts

@@ -136,6 +136,8 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
 
+    @ViewChild('ganttTableBody', { static: true }) ganttTableBody: ElementRef<HTMLDivElement>;
+
     get loading() {
         return this._loading;
     }