Merge remote-tracking branch 'upstream/master' into use-blocked-for-all-link-types

Robert Meyer · Robert Meyer · commit 3d1ba29404fd · 2025-07-10T12:20:06.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [19.0.5](https://github.com/worktile/ngx-gantt/compare/19.0.4...19.0.5) (2025-07-04)
+
+### Bug Fixes
+
+- **gantt:** 修复win系统，左侧表格横向滚轴按钮不生效，滚动条在可视窗口展示 ([#555](https://github.com/worktile/ngx-gantt/issues/555)) ([5108e2b](https://github.com/worktile/ngx-gantt/commit/5108e2b8449e1f8010e9076c42f39746a26f924f))
+
+## [19.0.4](https://github.com/worktile/ngx-gantt/compare/19.0.3...19.0.4) (2025-06-23)
+
+### Bug Fixes
+
+- fix layout side scroll error in advanced use [#543](https://github.com/worktile/ngx-gantt/issues/543) ([2daa19f](https://github.com/worktile/ngx-gantt/commit/2daa19fc82fc1eb32399b4e4594a98c62fa94cb1))
+
 ## [19.0.3](https://github.com/worktile/ngx-gantt/compare/19.0.2...19.0.3) (2025-05-23)
 
 ## [19.0.2](https://github.com/worktile/ngx-gantt/compare/19.0.1...19.0.2) (2025-05-09)
diff --git a/example/src/app/gantt-advanced/component/flat.component.html b/example/src/app/gantt-advanced/component/flat.component.html
@@ -1,12 +1,10 @@
 <ngx-gantt-root [sideWidth]="300">
   <ng-template #sideTemplate>
-    <div [style.flex]="'auto'">
-      <div class="gantt-flat-side-header">项目</div>
-      <div class="gantt-flat-side-body">
-        <div class="gantt-group" *ngFor="let group of groups; trackBy: trackBy">
-          <div class="gantt-group-content" [style.height.px]="group.mergedItems?.length * (styles.lineHeight + 10) - 10">
-            {{ group.title }}
-          </div>
+    <div class="gantt-flat-side-header">项目</div>
+    <div class="gantt-flat-side-body">
+      <div class="gantt-group" *ngFor="let group of groups; trackBy: trackBy">
+        <div class="gantt-group-content" [style.height.px]="group.mergedItems?.length * (styles.lineHeight + 10) - 10">
+          {{ group.title }}
         </div>
       </div>
     </div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@worktile/gantt",
-  "version": "19.0.3",
+  "version": "19.0.5",
   "author": "walkerkay001",
   "license": "MIT",
   "description": "A modern and powerful gantt chart component for Angular",
diff --git a/packages/gantt/package.json b/packages/gantt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@worktile/gantt",
-  "version": "19.0.3",
+  "version": "19.0.5",
   "schematics": "./schematics/collection.json",
   "author": "walkerkay001",
   "license": "MIT",
diff --git a/packages/gantt/src/components/scrollbar/scrollbar.component.html b/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>
diff --git a/packages/gantt/src/components/table/body/gantt-table-body.component.html b/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 }"
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
@@ -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);
                 })
         );
     }
diff --git a/packages/gantt/src/components/table/gantt-table.scss b/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;
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
@@ -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) {
diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -38,7 +38,7 @@ import { GanttDragContainer } from './gantt-drag-container';
 import { GanttConfigService, GanttGlobalConfig, GanttStyleOptions, defaultConfig } from './gantt.config';
 import { GanttLinkOptions } from './class/link';
 import { SelectionModel } from '@angular/cdk/collections';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { BooleanInput, coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { GanttBaselineItem, GanttBaselineItemInternal } from './class/baseline';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
 
@@ -307,6 +307,12 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
         return new SelectionModel(this.multiple, []);
     }
 
+    private initCssVariables() {
+        this.element.style.setProperty('--gantt-header-height', coerceCssPixelValue(this.styles.headerHeight));
+        this.element.style.setProperty('--gantt-line-height', coerceCssPixelValue(this.styles.lineHeight));
+        this.element.style.setProperty('--gantt-bar-height', coerceCssPixelValue(this.styles.barHeight));
+    }
+
     expandGroups(expanded: boolean) {
         this.groups.forEach((group) => {
             group.setExpand(expanded);
@@ -323,6 +329,7 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
         this.setupBaselineItems();
         this.computeItemsRefs(...this.baselineItems);
         this.initSelectionModel();
+        this.initCssVariables();
         this.firstChange = false;
 
         // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
diff --git a/packages/gantt/src/gantt.component.html b/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"
diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss
@@ -29,10 +29,12 @@
       background-color: variables.$gantt-bg-color;
       overflow-y: auto;
       display: flex;
+      flex-direction: column;
 
       .gantt-table {
         height: 100%;
         flex: 1;
+        display: flex;
       }
 
       &::-webkit-scrollbar {
@@ -83,6 +85,7 @@
 
   .gantt-main-container {
     width: 100%;
+    height: calc(100% - var(--gantt-header-height));
     flex: 1;
     position: absolute;
     bottom: 0;
diff --git a/packages/gantt/src/gantt.component.ts b/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;
     }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@worktile/gantt",`
`3`		`- "version": "19.0.3",`
	`3`	`+ "version": "19.0.5",`
`4`	`4`	`"author": "walkerkay001",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"description": "A modern and powerful gantt chart component for Angular",`
Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@`
`89`	`89`	`</div>`
`90`	`90`	`</div>`
`91`	`91`	`}`
`92`		`- <div class="gantt-table-column"></div>`
	`92`	`+ <div class="gantt-table-column gantt-table-column-placeholder"></div>`
`93`	`93`	`<ng-template`
`94`	`94`	`[ngTemplateOutlet]="rowAfterTemplate"`
`95`	`95`	`[ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`></div>`
`18`	`18`	`</div>`
`19`	`19`	`}`
`20`		`- <div class="gantt-table-column"></div>`
	`20`	`+ <div class="gantt-table-column gantt-table-column-placeholder"></div>`
`21`	`21`	`</div>`
`22`	`22`
`23`	`23`	`@if (gantt?.table?.settingsSlot) {`