feat: add sync scroll directive #TINFR-2346

HandsomeButterball · web-flow · commit cbe67e4afd2b · 2025-07-14T10:05:11.000+08:00
diff --git a/example/src/app/gantt-advanced/component/flat.component.html b/example/src/app/gantt-advanced/component/flat.component.html
@@ -10,21 +10,19 @@
     </div>
   </ng-template>
   <ng-template #mainTemplate>
-    <div class="gantt-main-container">
-      <!-- groups -->
-      <div class="gantt-main-groups" *ngIf="groups && groups.length > 0" [style.width.px]="view.width">
-        <ng-container *ngFor="let group of groups; trackBy: trackBy">
-          <div class="gantt-main-group" [style.height.px]="group.mergedItems?.length * (styles.lineHeight + 10) - 10">
-            <ng-container *ngFor="let items of group.mergedItems">
-              <div class="gantt-flat-items" [style.height.px]="styles.lineHeight">
-                <ng-container *ngFor="let item of items; trackBy: trackBy">
-                  <ngx-gantt-bar [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></ngx-gantt-bar>
-                </ng-container>
-              </div>
-            </ng-container>
-          </div>
-        </ng-container>
-      </div>
+    <!-- groups -->
+    <div class="gantt-main-groups" *ngIf="groups && groups.length > 0" [style.width.px]="view.width">
+      <ng-container *ngFor="let group of groups; trackBy: trackBy">
+        <div class="gantt-main-group" [style.height.px]="group.mergedItems?.length * (styles.lineHeight + 10) - 10">
+          <ng-container *ngFor="let items of group.mergedItems">
+            <div class="gantt-flat-items" [style.height.px]="styles.lineHeight">
+              <ng-container *ngFor="let item of items; trackBy: trackBy">
+                <ngx-gantt-bar [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></ngx-gantt-bar>
+              </ng-container>
+            </div>
+          </ng-container>
+        </div>
+      </ng-container>
     </div>
   </ng-template>
 </ngx-gantt-root>
diff --git a/packages/gantt/src/components/scrollbar/scrollbar.component.html b/packages/gantt/src/components/scrollbar/scrollbar.component.html
@@ -4,10 +4,15 @@
   [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
+    class="gantt-table-scrollbar"
+    syncScrollX="ganttTableXScroll"
+    [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="gantt-main-scrollbar" syncScrollX="ganttMainXScroll">
     <div class="h-100" [style.width.px]="ganttRoot['view']?.width"></div>
   </div>
 </div>
diff --git a/packages/gantt/src/components/scrollbar/scrollbar.component.ts b/packages/gantt/src/components/scrollbar/scrollbar.component.ts
@@ -2,11 +2,12 @@ import { Component, Inject, Input } from '@angular/core';
 import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
 import { NgClass } from '@angular/common';
 import { NgxGanttRootComponent } from '../../root.component';
+import { GanttSyncScrollXDirective } from '../../directives/sync-scroll.directive';
 
 @Component({
     selector: 'gantt-scrollbar',
     templateUrl: `./scrollbar.component.html`,
-    imports: [NgClass]
+    imports: [NgClass, GanttSyncScrollXDirective]
 })
 export class GanttScrollbarComponent {
     @Input() hasFooter: boolean = false;
diff --git a/packages/gantt/src/components/table/body/gantt-table-body.component.ts b/packages/gantt/src/components/table/body/gantt-table-body.component.ts
@@ -10,15 +10,14 @@ import {
     HostBinding,
     Inject,
     Input,
-    NgZone,
     OnDestroy,
     OnInit,
     Output,
     QueryList,
     TemplateRef,
     ViewChildren
 } from '@angular/core';
-import { auditTime, filter, fromEvent, merge, startWith, Subject, takeUntil } from 'rxjs';
+import { auditTime, filter, startWith, Subject, takeUntil } from 'rxjs';
 import {
     GanttGroupInternal,
     GanttItemInternal,
@@ -33,7 +32,6 @@ import { GANTT_ABSTRACT_TOKEN, GanttAbstractComponent } from '../../../gantt-abs
 import { GANTT_UPPER_TOKEN, GanttUpper } from '../../../gantt-upper';
 import { IsGanttGroupPipe, IsGanttRangeItemPipe } from '../../../gantt.pipe';
 import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
-import { passiveListenerOptions } from '../../../utils/passive-listeners';
 import { GanttIconComponent } from '../../icon/icon.component';
 import { defaultColumnWidth } from '../header/gantt-table-header.component';
 
@@ -108,21 +106,12 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
 
     private destroy$ = new Subject<void>();
 
-    public sideContainer: Element;
-
-    public headerContainer: Element;
-
-    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
+        protected elementRef: ElementRef<HTMLElement>
     ) {}
 
     ngOnInit() {
@@ -141,7 +130,6 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
     }
 
     ngAfterViewInit(): void {
-        this.initialize();
         this.cdkDrags.changes
             .pipe(startWith(this.cdkDrags), takeUntil(this.destroy$))
             .subscribe((drags: QueryList<CdkDrag<GanttItemInternal>>) => {
@@ -166,33 +154,6 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
             });
     }
 
-    initialize() {
-        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.tableScrollbarContainer, 'scroll', passiveListenerOptions)
-        ];
-        this.ngZone.runOutsideAngular(() =>
-            merge(...scrollObservers)
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((event) => {
-                    const target = event.currentTarget as HTMLElement;
-                    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);
-                })
-        );
-    }
-
     expandGroup(group: GanttGroupInternal) {
         this.gantt.expandGroup(group);
     }
diff --git a/packages/gantt/src/components/table/header/gantt-table-header.component.html b/packages/gantt/src/components/table/header/gantt-table-header.component.html
@@ -1,4 +1,4 @@
-<div class="gantt-table-header-container" [style.width.px]="tableWidth" cdkScrollable>
+<div class="gantt-table-header-container" syncScrollX="ganttTableXScroll" [style.width.px]="tableWidth" cdkScrollable>
   @for (column of columns; track $index) {
     <div class="gantt-table-column" [style.width]="column.columnWidth">
       @if (column.headerTemplateRef) {
diff --git a/packages/gantt/src/components/table/header/gantt-table-header.component.ts b/packages/gantt/src/components/table/header/gantt-table-header.component.ts
@@ -17,6 +17,7 @@ import { Subject, takeUntil } from 'rxjs';
 import { GANTT_ABSTRACT_TOKEN, GanttAbstractComponent } from '../../../gantt-abstract';
 import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import { setStyleWithVendorPrefix } from '../../../utils/set-style-with-vendor-prefix';
+import { GanttSyncScrollXDirective } from '../../../directives/sync-scroll.directive';
 export const defaultColumnWidth = 100;
 export const minColumnWidth = 80;
 interface DragFixedConfig {
@@ -28,7 +29,7 @@ interface DragFixedConfig {
 @Component({
     selector: 'gantt-table-header',
     templateUrl: './gantt-table-header.component.html',
-    imports: [NgTemplateOutlet, CdkDrag]
+    imports: [NgTemplateOutlet, CdkDrag, GanttSyncScrollXDirective]
 })
 export class GanttTableHeaderComponent implements OnInit, OnDestroy {
     public dragStartLeft: number;
diff --git a/packages/gantt/src/directives/sync-scroll.directive.ts b/packages/gantt/src/directives/sync-scroll.directive.ts
@@ -0,0 +1,45 @@
+import { Directive, ElementRef, inject, input, OnDestroy, OnInit } from '@angular/core';
+import { GanttSyncScrollService } from '../gantt-sync-scroll.service';
+@Directive({
+    selector: '[syncScrollX]',
+    standalone: true
+})
+export class GanttSyncScrollXDirective implements OnInit, OnDestroy {
+    readonly syncScrollX = input<string>();
+
+    private elementRef = inject(ElementRef<HTMLElement>);
+
+    private syncScrollService = inject(GanttSyncScrollService);
+
+    constructor() {}
+
+    ngOnInit() {
+        this.syncScrollService.registerScrollEvent(this.syncScrollX(), this.elementRef.nativeElement, 'x');
+    }
+
+    ngOnDestroy() {
+        this.syncScrollService.unregisterScrollEvent(this.syncScrollX(), this.elementRef.nativeElement);
+    }
+}
+
+@Directive({
+    selector: '[syncScrollY]',
+    standalone: true
+})
+export class GanttSyncScrollYDirective implements OnInit, OnDestroy {
+    readonly syncScrollY = input<string>();
+
+    private syncScrollService = inject(GanttSyncScrollService);
+
+    private elementRef = inject(ElementRef<HTMLElement>);
+
+    constructor() {}
+
+    ngOnInit() {
+        this.syncScrollService.registerScrollEvent(this.syncScrollY(), this.elementRef.nativeElement, 'y');
+    }
+
+    ngOnDestroy() {
+        this.syncScrollService.unregisterScrollEvent(this.syncScrollY(), this.elementRef.nativeElement);
+    }
+}
diff --git a/packages/gantt/src/gantt-dom.service.ts b/packages/gantt/src/gantt-dom.service.ts
@@ -3,7 +3,6 @@ import { ElementRef, Inject, Injectable, NgZone, OnDestroy, PLATFORM_ID, Writabl
 import { EMPTY, Observable, Subject, fromEvent, merge } from 'rxjs';
 import { auditTime, map, pairwise, takeUntil } from 'rxjs/operators';
 import { isNumber } from './utils/helpers';
-import { passiveListenerOptions } from './utils/passive-listeners';
 
 const scrollThreshold = 50;
 
@@ -53,44 +52,6 @@ export class GanttDomService implements OnDestroy {
         @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(...scrollObservers)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe((event) => {
-                    this.syncScroll(event);
-                })
-        );
-    }
-
-    private syncScroll(event: Event) {
-        const target = event.currentTarget as HTMLElement;
-        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;
-        }
-    }
-
     private disableBrowserWheelEvent() {
         const container = this.mainContainer as HTMLElement;
         this.ngZone.runOutsideAngular(() =>
@@ -126,7 +87,6 @@ export class GanttDomService implements OnDestroy {
         this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
         this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
 
-        this.monitorScrollChange();
         this.disableBrowserWheelEvent();
     }
 
diff --git a/packages/gantt/src/gantt-sync-scroll.service.ts b/packages/gantt/src/gantt-sync-scroll.service.ts
@@ -0,0 +1,54 @@
+import { inject, Injectable, NgZone } from '@angular/core';
+import { fromEvent, merge, Subject, takeUntil } from 'rxjs';
+import { passiveListenerOptions } from './utils/passive-listeners';
+
+@Injectable()
+export class GanttSyncScrollService {
+    private ngZone = inject(NgZone);
+
+    private scrollGroupsMap = new Map<string, { elements: HTMLElement[]; direction: 'x' | 'y'; destroy$: Subject<void> }>();
+
+    constructor() {}
+
+    registerScrollEvent(groupName: string, element: HTMLElement, direction: 'x' | 'y') {
+        const group = this.scrollGroupsMap.get(groupName) || { elements: [], destroy$: new Subject<void>(), direction };
+        group.elements.push(element);
+        this.scrollGroupsMap.set(groupName, group);
+        this.monitorScrollChange(group);
+    }
+
+    unregisterScrollEvent(groupName: string, element: HTMLElement) {
+        const group = this.scrollGroupsMap.get(groupName);
+        if (group) {
+            group.elements = group.elements.filter((el) => el !== element);
+            if (!group.elements.length) {
+                this.scrollGroupsMap.delete(groupName);
+            } else {
+                this.scrollGroupsMap.set(groupName, group);
+            }
+            this.monitorScrollChange(group);
+        }
+    }
+
+    private monitorScrollChange(group: { elements: HTMLElement[]; destroy$: Subject<void>; direction: 'x' | 'y' }) {
+        const { elements, destroy$, direction } = group;
+        destroy$.next();
+        destroy$.complete();
+        if (elements.length) {
+            const scrollObservers = elements.map((el) => fromEvent(el, 'scroll', passiveListenerOptions));
+            this.ngZone.runOutsideAngular(() =>
+                merge(...scrollObservers)
+                    .pipe(takeUntil(destroy$))
+                    .subscribe((event) => {
+                        elements.forEach((el) => {
+                            if (direction === 'x') {
+                                el.scrollLeft = (event.currentTarget as HTMLElement).scrollLeft;
+                            } else {
+                                el.scrollTop = (event.currentTarget as HTMLElement).scrollTop;
+                            }
+                        });
+                    })
+            );
+        }
+    }
+}
diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -2,7 +2,10 @@
   <div class="gantt-header">
     <gantt-table-header #tableHeader [columns]="columns"></gantt-table-header>
     <div class="gantt-container-header">
-      <gantt-calendar-header [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"></gantt-calendar-header>
+      <gantt-calendar-header
+        syncScrollX="ganttMainXScroll"
+        [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"
+      ></gantt-calendar-header>
     </div>
   </div>
   @if (loading) {
@@ -24,7 +27,7 @@
   >
     <ng-container *cdkVirtualFor="let item of flatItems; trackBy: trackBy"></ng-container>
     <div class="gantt-side" [style.width.px]="tableHeader.tableWidth + 1" [style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight">
-      <div class="gantt-side-container">
+      <div class="gantt-side-container" syncScrollX="ganttTableXScroll" syncScrollY="ganttMainYScroll">
         <div class="gantt-table">
           <gantt-table-body
             #ganttTableBody
@@ -48,11 +51,14 @@
     </div>
     <div class="gantt-container">
       <gantt-calendar-grid
+        syncScrollX="ganttMainXScroll"
         [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"
         [style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight"
       ></gantt-calendar-grid>
       <div class="gantt-main">
         <gantt-main
+          syncScrollX="ganttMainXScroll"
+          syncScrollY="ganttMainYScroll"
           [ganttRoot]="ganttRoot"
           [flatItems]="flatItems"
           [viewportItems]="viewportItems"
@@ -86,12 +92,12 @@
       [style.bottom.px]="ganttRoot.horizontalScrollbarHeight"
     >
       @if (table?.tableFooterTemplate) {
-        <div class="gantt-table-footer" [style.width.px]="tableHeader.tableWidth + 1">
+        <div class="gantt-table-footer" syncScrollX="ganttTableXScroll" [style.width.px]="tableHeader.tableWidth + 1">
           <ng-template [ngTemplateOutlet]="table?.tableFooterTemplate" [ngTemplateOutletContext]="{ columns: columns }"> </ng-template>
         </div>
       }
       @if (footerTemplate) {
-        <div class="gantt-container-footer">
+        <div class="gantt-container-footer" syncScrollX="ganttMainXScroll">
           <ng-template [ngTemplateOutlet]="footerTemplate"> </ng-template>
         </div>
       }
diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
diff --git a/packages/gantt/src/root.component.html b/packages/gantt/src/root.component.html
diff --git a/packages/gantt/src/root.component.ts b/packages/gantt/src/root.component.ts
diff --git a/packages/gantt/src/test/components/gantt-sync-scroll.spec.ts b/packages/gantt/src/test/components/gantt-sync-scroll.spec.ts
diff --git a/packages/gantt/src/test/services/gantt-sync-scroll.service.spec.ts b/packages/gantt/src/test/services/gantt-sync-scroll.service.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="gantt-table-header-container" [style.width.px]="tableWidth" cdkScrollable>`
	`1`	`+<div class="gantt-table-header-container" syncScrollX="ganttTableXScroll" [style.width.px]="tableWidth" cdkScrollable>`
`2`	`2`	`@for (column of columns; track $index) {`
`3`	`3`	`<div class="gantt-table-column" [style.width]="column.columnWidth">`
`4`	`4`	`@if (column.headerTemplateRef) {`