fix: fix sync scroll

worktile · Jul 18, 2023 · 3a1f7bf · 3a1f7bf
1 parent 574aa00
commit 3a1f7bf
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 61 deletions.
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -185,13 +185,13 @@ module.exports = [
                 type: 'TemplateRef<any>'
             },
             {
-                name: '#tableEmpty',
-                description: `设置空表格模板`,
+                name: '#toolbar',
+                description: `工具栏自定义模版`,
                 type: 'TemplateRef<any>'
             },
             {
-                name: '#toolbar',
-                description: `工具栏自定义模版`,
+                name: '#tableFooter',
+                description: `设置底部模板`,
                 type: 'TemplateRef<any>'
             }
         ]
@@ -246,6 +246,16 @@ module.exports = [
                 name: '#rowAfterSlot',
                 description: `设置表格中每行的后置自定义渲染模板`,
                 type: 'TemplateRef<any>'
+            },
+            {
+                name: '#tableEmpty',
+                description: `设置空表格模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: '#tableFooter',
+                description: `设置表格底部模板`,
+                type: 'TemplateRef<any>'
             }
         ]
     },

diff --git a/example/src/app/gantt-custom-view/gantt.component.ts b/example/src/app/gantt-custom-view/gantt.component.ts
@@ -23,7 +23,7 @@ registerView(customViewType, GanttViewCustom);
     selector: 'app-gantt-custom-view-example',
     templateUrl: './gantt.component.html'
 })
-export class AppGanttCustomViewExampleComponent implements OnInit, AfterViewInit {
+export class AppGanttCustomViewExampleComponent implements OnInit {
     viewType = customViewType;
 
     showWeekend = true;
@@ -78,10 +78,6 @@ export class AppGanttCustomViewExampleComponent implements OnInit, AfterViewInit
 
     ngOnInit(): void {}
 
-    ngAfterViewInit() {
-        setTimeout(() => this.ganttComponent.scrollToDate(1627729997), 200);
-    }
-
     barClick(event: GanttBarClickEvent) {
         this.thyNotify.info('Event: barClick', `你点击了 [${event.item.title}]`);
     }

diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.html b/example/src/app/gantt-virtual-scroll/gantt.component.html
@@ -1,10 +1,10 @@
-<div style="line-height: 30px; padding: 15px; display: flex">
-  <div style="flex: 1">
-    <span class="text-primary">NgxGantt</span>
-    默认开启了虚拟滚动功能，如需关闭该功能设置 virtualScrollEnabled 参数为 false 即可。
-  </div>
-</div>
 <thy-layout>
+  <thy-header class="header-with-baseline">
+    <ng-template #headerContent>
+      <span class="text-primary">NgxGantt</span>
+      &nbsp;&nbsp;默认开启了虚拟滚动功能，如需关闭该功能设置 virtualScrollEnabled 参数为 false 即可。
+    </ng-template>
+  </thy-header>
   <thy-content>
     <ngx-gantt #gantt [items]="items" [virtualScrollEnabled]="true">
       <ngx-gantt-table>
@@ -22,7 +22,7 @@
           </ng-template>
         </ngx-gantt-column>
 
-        <ng-template #footer let-columns="columns">
+        <ng-template #tableFooter let-columns="columns">
           <div class="table-footer">
             <div class="gantt-table-column" *ngFor="let column of columns; let i = index" [style.width]="column.columnWidth">
               {{ column.name }}
@@ -35,13 +35,13 @@
         <span style="color: #fff">&nbsp;&nbsp;{{ item.title }} </span>
       </ng-template>
 
-      <ng-template #mainFooter>
-        <div class="footer-container" [style.width.px]="ganttComponent?.view.width">
+      <ng-template #footer>
+        <div class="footer-container" [style.width.px]="gantt?.view.width">
           <div
             class="footer-item"
-            *ngFor="let day of ganttComponent?.view.secondaryDatePoints"
-            [style.left.px]="day.x - ganttComponent?.view.options.cellWidth / 2"
-            [style.width.px]="ganttComponent?.view.options.cellWidth"
+            *ngFor="let day of gantt?.view.secondaryDatePoints"
+            [style.left.px]="day.x - gantt?.view.options.cellWidth / 2"
+            [style.width.px]="gantt?.view.options.cellWidth"
           >
             <ng-container *ngIf="false; else empty">
               <div class="stat stat-fill"></div>

diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.ts b/example/src/app/gantt-virtual-scroll/gantt.component.ts
@@ -7,7 +7,7 @@ import { randomItems, random } from '../helper';
     templateUrl: './gantt.component.html',
     providers: [GanttPrintService]
 })
-export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewInit {
+export class AppGanttVirtualScrollExampleComponent implements OnInit {
     items: GanttItem[] = randomItems(10000);
 
     @HostBinding('class.gantt-example-component') class = true;
@@ -24,8 +24,4 @@ export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewI
             }
         });
     }
-
-    ngAfterViewInit() {
-        setTimeout(() => this.ganttComponent.scrollToDate(1627729997), 200);
-    }
 }
diff --git a/packages/gantt/src/gantt-dom.service.ts b/packages/gantt/src/gantt-dom.service.ts
@@ -49,11 +49,16 @@ export class GanttDomService implements OnDestroy {
     constructor(private ngZone: NgZone, @Inject(PLATFORM_ID) private platformId: string) {}
 
     private monitorScrollChange() {
+        const scrollObservers = [
+            fromEvent(this.mainContainer, 'scroll', passiveListenerOptions),
+            fromEvent(this.sideContainer, 'scroll', passiveListenerOptions)
+        ];
+
+        this.mainFooter && scrollObservers.push(fromEvent(this.mainFooter, 'scroll', passiveListenerOptions));
+        this.mainScrollbar && scrollObservers.push(fromEvent(this.mainScrollbar, 'scroll', passiveListenerOptions));
+
         this.ngZone.runOutsideAngular(() =>
-            merge(
-                fromEvent(this.mainContainer, 'scroll', passiveListenerOptions),
-                fromEvent(this.sideContainer, 'scroll', passiveListenerOptions)
-            )
+            merge(...scrollObservers)
                 .pipe(takeUntil(this.unsubscribe$))
                 .subscribe((event) => {
                     this.syncScroll(event);
@@ -63,18 +68,22 @@ export class GanttDomService implements OnDestroy {
 
     private syncScroll(event: Event) {
         const target = event.currentTarget as HTMLElement;
-        this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
-        this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-        if (this.mainScrollbar) {
-            this.mainScrollbar.scrollLeft = this.mainContainer.scrollLeft;
-        }
-
-        if (this.mainFooter) {
-            this.mainFooter.scrollLeft = this.mainContainer.scrollLeft;
+        const classList = target.classList;
+
+        if (!classList.contains('gantt-side-container')) {
+            this.mainContainer.scrollLeft = target.scrollLeft;
+            this.calendarHeader.scrollLeft = target.scrollLeft;
+            this.calendarOverlay.scrollLeft = target.scrollLeft;
+            this.mainScrollbar && (this.mainScrollbar.scrollLeft = target.scrollLeft);
+            this.mainFooter && (this.mainFooter.scrollLeft = target.scrollLeft);
+            if (classList.contains('gantt-main-container')) {
+                this.sideContainer.scrollTop = target.scrollTop;
+                this.mainContainer.scrollTop = target.scrollTop;
+            }
+        } else {
+            this.sideContainer.scrollTop = target.scrollTop;
+            this.mainContainer.scrollTop = target.scrollTop;
         }
-
-        this.sideContainer.scrollTop = target.scrollTop;
-        this.mainContainer.scrollTop = target.scrollTop;
     }
 
     private disableBrowserWheelEvent() {
@@ -108,7 +117,6 @@ export class GanttDomService implements OnDestroy {
         this.verticalScrollContainer = this.root.getElementsByClassName('gantt-scroll-container')[0];
         const mainItems = this.mainContainer.getElementsByClassName('gantt-main-items')[0];
         const mainGroups = this.mainContainer.getElementsByClassName('gantt-main-groups')[0];
-
         this.mainItems = mainItems || mainGroups;
         this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
         this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
@@ -122,9 +130,13 @@ export class GanttDomService implements OnDestroy {
      * to run the change detection if needed.
      */
     getViewerScroll(options?: AddEventListenerOptions): Observable<ScrollEvent> {
+        const scrollObservers = [fromEvent(this.mainContainer, 'scroll', options)];
+        this.mainFooter && scrollObservers.push(fromEvent(this.mainFooter, 'scroll', options));
+        this.mainScrollbar && scrollObservers.push(fromEvent(this.mainScrollbar, 'scroll', options));
+
         return new Observable<ScrollEvent>((subscriber) =>
             this.ngZone.runOutsideAngular(() =>
-                fromEvent(this.mainContainer, 'scroll', options)
+                merge(...scrollObservers)
                     .pipe(
                         map(() => this.mainContainer.scrollLeft),
                         pairwise(),
@@ -164,12 +176,8 @@ export class GanttDomService implements OnDestroy {
             this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
             this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
             this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
-            if (this.mainScrollbar) {
-                this.mainScrollbar.scrollLeft = this.mainContainer.scrollLeft;
-            }
-            if (this.mainFooter) {
-                this.mainFooter.scrollLeft = this.mainContainer.scrollLeft;
-            }
+            this.mainScrollbar && (this.mainScrollbar.scrollLeft = this.mainContainer.scrollLeft);
+            this.mainFooter && (this.mainFooter.scrollLeft = this.mainContainer.scrollLeft);
         }
     }
 

diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -12,7 +12,7 @@
     [ngClass]="{
       'gantt-normal-viewport': !virtualScrollEnabled,
       'gantt-scroll-container': virtualScrollEnabled,
-      'with-footer': table?.footerTemplate && mainFooterTemplate
+      'with-footer': table?.tableFooterTemplate || footerTemplate
     }"
     [itemSize]="styles.lineHeight"
     [minBufferPx]="styles.lineHeight * 10"
@@ -27,7 +27,7 @@
             [viewportItems]="viewportItems"
             [columns]="columns"
             [groupTemplate]="groupTemplate"
-            [emptyTemplate]="tableEmptyTemplate"
+            [emptyTemplate]="table.tableEmptyTemplate || tableEmptyTemplate"
             [rowBeforeTemplate]="table?.rowBeforeTemplate"
             [rowAfterTemplate]="table?.rowAfterTemplate"
             [draggable]="table.draggable"
@@ -75,16 +75,16 @@
       [class.with-scrollbar]="ganttRoot.horizontalScrollbarHeight"
     ></div>
     <div class="gantt-main-scrollbar">
-      <div [style.width.px]="view.width"></div>
+      <div class="h-100" [style.width.px]="view.width"></div>
     </div>
   </div>
 
   <div class="gantt-footer" [style.right.px]="ganttRoot.verticalScrollbarWidth" [style.bottom.px]="ganttRoot.horizontalScrollbarHeight">
-    <div class="gantt-table-footer" [style.width.px]="tableHeader.tableWidth + 1" *ngIf="table?.footerTemplate">
-      <ng-template [ngTemplateOutlet]="table?.footerTemplate" [ngTemplateOutletContext]="{ columns: columns }"> </ng-template>
+    <div class="gantt-table-footer" [style.width.px]="tableHeader.tableWidth + 1" *ngIf="table?.tableFooterTemplate">
+      <ng-template [ngTemplateOutlet]="table?.tableFooterTemplate" [ngTemplateOutletContext]="{ columns: columns }"> </ng-template>
     </div>
-    <div class="gantt-container-footer" *ngIf="mainFooterTemplate">
-      <ng-template [ngTemplateOutlet]="mainFooterTemplate"> </ng-template>
+    <div class="gantt-container-footer" *ngIf="footerTemplate">
+      <ng-template [ngTemplateOutlet]="footerTemplate"> </ng-template>
     </div>
   </div>
 </ngx-gantt-root>
diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss
@@ -63,6 +63,7 @@
     .gantt-main-scrollbar {
       flex: 1;
       overflow-x: auto;
+      overflow-y: hidden;
     }
   }
 
@@ -113,7 +114,6 @@
     right: 0;
     bottom: 0;
     z-index: 2;
-    // 兼容火狐浏览器
     overflow: auto;
 
     &.with-footer {
@@ -183,7 +183,11 @@
   }
   .gantt-container-footer {
     height: variables.$gantt-footer-height;
-    overflow: hidden;
+    overflow-x: auto;
+    overflow-y: hidden;
     flex: 1;
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }
diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -87,14 +87,15 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @ContentChild(NgxGanttTableComponent) override table: NgxGanttTableComponent;
 
-    @ContentChild('mainFooter', { static: true }) mainFooterTemplate: TemplateRef<any>;
-
     @ContentChildren(NgxGanttTableColumnComponent, { descendants: true }) columns: QueryList<NgxGanttTableColumnComponent>;
 
+    // 此模版已挪到 table 组件下，为了兼容此处暂时保留
     @ContentChild('tableEmpty', { static: true }) tableEmptyTemplate: TemplateRef<any>;
 
     @ViewChild('ganttRoot') ganttRoot: NgxGanttRootComponent;
 
+    @ContentChild('footer', { static: true }) footerTemplate: TemplateRef<any>;
+
     @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
 
     get loading() {

diff --git a/packages/gantt/src/table/gantt-table.component.ts b/packages/gantt/src/table/gantt-table.component.ts
@@ -28,5 +28,7 @@ export class NgxGanttTableComponent {
 
     @ContentChild('rowAfterSlot', { static: true }) rowAfterTemplate: TemplateRef<any>;
 
-    @ContentChild('footer', { static: true }) footerTemplate: TemplateRef<any>;
+    @ContentChild('tableEmpty', { static: true }) tableEmptyTemplate: TemplateRef<any>;
+
+    @ContentChild('tableFooter', { static: true }) tableFooterTemplate: TemplateRef<any>;
 }