feat: #INFR-11827 gantt custom global style configurations code optimize

worktile · Mar 14, 2024 · 1dffd3e · 1dffd3e
1 parent 69be58e
commit 1dffd3e
Show file tree

Hide file tree

Showing 16 changed files with 54 additions and 55 deletions.
diff --git a/docs/guides/basic/style.md b/docs/guides/basic/style.md
@@ -11,6 +11,7 @@ order: 50
 @use '@worktile/gantt/styles/variables.scss' with (
   // basic
   $gantt-color: #333,
+  $gantt-header-height: 44px,
   $gantt-border-color: #eee,
   $gantt-bg-color: #fff,
   $gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15),

diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts
@@ -55,19 +55,7 @@ import { AppGanttVirtualScrollExampleComponent } from './gantt-virtual-scroll/ga
         ThyDatePickerModule,
         ...EXAMPLE_MODULES
     ],
-    providers: [
-        ...DOCGENI_SITE_PROVIDERS,
-        {
-            provide: GANTT_GLOBAL_CONFIG,
-            useValue: {
-                styleOptions: {
-                    headerHeight: 60,
-                    lineHeight: 44,
-                    barHeight: 22
-                }
-            }
-        }
-    ],
+    providers: [...DOCGENI_SITE_PROVIDERS],
     bootstrap: [AppComponent]
 })
 export class AppModule {

diff --git a/example/src/app/gantt-advanced/component/flat.component.html b/example/src/app/gantt-advanced/component/flat.component.html
@@ -1,6 +1,6 @@
 <ngx-gantt-root [sideWidth]="300">
   <ng-template #sideTemplate>
-    <div class="gantt-flat-side-header" [style.height.px]="styles.headerHeight" [style.line-height.px]="styles.headerHeight">项目</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">
@@ -10,7 +10,7 @@
     </div>
   </ng-template>
   <ng-template #mainTemplate>
-    <div class="gantt-main-container" [style.height]="headerHeight">
+    <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">

diff --git a/example/src/app/gantt-advanced/component/flat.component.ts b/example/src/app/gantt-advanced/component/flat.component.ts
@@ -20,10 +20,6 @@ export class AppGanttFlatComponent extends GanttUpper implements OnInit {
 
     @HostBinding('class.gantt-flat') ganttFlatClass = true;
 
-    get headerHeight() {
-        return `calc(100% - ${this.styles.headerHeight}px)`;
-    }
-
     constructor(
         elementRef: ElementRef<HTMLElement>,
         cdr: ChangeDetectorRef,

diff --git a/example/src/app/gantt-advanced/component/flat.scss b/example/src/app/gantt-advanced/component/flat.scss
@@ -4,6 +4,8 @@
     position: sticky;
     top: 0;
     background: #fff;
+    height: 44px;
+    line-height: 44px;
     z-index: 1;
     border-bottom: 1px solid #eee;
     box-sizing: border-box;

diff --git a/packages/gantt/src/components/calendar/header/calendar-header.component.html b/packages/gantt/src/components/calendar/header/calendar-header.component.html
@@ -10,7 +10,7 @@
       [class.weekend]="point.additions?.isWeekend"
       *ngFor="let point of view.primaryDatePoints; trackBy: trackBy"
       [attr.x]="point.x"
-      [attr.y]="primaryDatePointTop"
+      [attr.y]="point.y"
     >
       {{ point.text }}
     </text>
@@ -21,7 +21,7 @@
         [class.today]="point.additions?.isToday"
         [class.weekend]="point.additions?.isWeekend"
         [attr.x]="point.x"
-        [attr.y]="secondaryDatePointTop"
+        [attr.y]="point.y"
       >
         {{ point.text }}
       </text>

diff --git a/packages/gantt/src/components/calendar/header/calendar-header.component.ts b/packages/gantt/src/components/calendar/header/calendar-header.component.ts
@@ -24,10 +24,6 @@ export class GanttCalendarHeaderComponent implements OnInit {
 
     viewTypes = GanttViewType;
 
-    primaryDatePointTop = 26;
-
-    secondaryDatePointTop = 48;
-
     @HostBinding('class') className = `gantt-calendar gantt-calendar-header`;
 
     @HostBinding('style.height')
@@ -43,7 +39,6 @@ export class GanttCalendarHeaderComponent implements OnInit {
 
     ngOnInit() {
         // 头部日期定位
-        this.setDatePointTop();
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
                 .pipe(takeUntil(this.unsubscribe$))
@@ -53,15 +48,6 @@ export class GanttCalendarHeaderComponent implements OnInit {
         });
     }
 
-    setDatePointTop() {
-        const fontSize = 14;
-        const marginTop = 4;
-        const { headerHeight } = this.ganttUpper.styles;
-        const remainder = headerHeight - fontSize * 2 - marginTop;
-        this.primaryDatePointTop = fontSize + remainder / 2;
-        this.secondaryDatePointTop = this.primaryDatePointTop + fontSize + marginTop;
-    }
-
     setTodayPoint() {
         const x = this.view.getTodayXPoint();
         const today = new GanttDate().getDate();

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -189,6 +189,13 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
 
     private createView() {
         const viewDate = this.getViewDate();
+        this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
+        this.viewOptions.styleOptions = Object.assign(
+            {},
+            defaultConfig.styleOptions,
+            this.config.styleOptions,
+            this.viewOptions.styleOptions
+        );
         this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
     }
 
@@ -307,7 +314,6 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
 
     ngOnInit() {
         this.styles = Object.assign({}, defaultConfig.styleOptions, this.config.styleOptions, this.styles);
-        this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
         this.createView();
         this.setupGroups();
         this.setupItems();

diff --git a/packages/gantt/src/styles/variables.scss b/packages/gantt/src/styles/variables.scss
@@ -1,6 +1,7 @@
 // basic
 $gantt-color: #333 !default;
 $gantt-primary-color: #6698ff !default;
+$gantt-header-height: 44px !default;
 $gantt-border-color: #eee !default;
 $gantt-bg-color: #fff !default;
 $gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;

diff --git a/packages/gantt/src/views/day.ts b/packages/gantt/src/views/day.ts
@@ -1,7 +1,7 @@
 import { GanttViewType } from '../class';
 import { GanttDatePoint } from '../class/date-point';
 import { GanttDate, eachDayOfInterval, eachWeekOfInterval } from '../utils/date';
-import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } from './view';
+import { GanttView, GanttViewDate, GanttViewOptions } from './view';
 
 const viewOptions: GanttViewOptions = {
     cellWidth: 35,
@@ -48,7 +48,7 @@ export class GanttViewDay extends GanttView {
                 weekStart,
                 weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.yearMonth),
                 (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7),
-                primaryDatePointTop
+                this.primaryDatePointTop
             );
             points.push(point);
         }
@@ -64,7 +64,7 @@ export class GanttViewDay extends GanttView {
                 start,
                 start.getDate().toString(),
                 i * this.getCellWidth() + this.getCellWidth() / 2,
-                secondaryDatePointTop,
+                this.secondaryDatePointTop,
                 {
                     isWeekend: start.isWeekend(),
                     isToday: start.isToday()

diff --git a/packages/gantt/src/views/hour.ts b/packages/gantt/src/views/hour.ts
@@ -1,7 +1,7 @@
 import { GanttViewType } from '../class';
 import { GanttDatePoint } from '../class/date-point';
 import { GanttDate, differenceInMinutes, eachDayOfInterval, eachHourOfInterval } from '../utils/date';
-import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } from './view';
+import { GanttView, GanttViewDate, GanttViewOptions } from './view';
 
 const viewOptions: GanttViewOptions = {
     cellWidth: 80,
@@ -53,7 +53,7 @@ export class GanttViewHour extends GanttView {
                 start,
                 start.format(this.options.dateFormat.day),
                 (this.getCellWidth() * 24) / 2 + i * (this.getCellWidth() * 24),
-                primaryDatePointTop
+                this.primaryDatePointTop
             );
             points.push(point);
         }
@@ -70,7 +70,7 @@ export class GanttViewHour extends GanttView {
                 start,
                 start.format(this.options.dateFormat.hour),
                 i * this.getCellWidth() + this.getCellWidth() / 2,
-                secondaryDatePointTop,
+                this.secondaryDatePointTop,
                 {
                     isWeekend: start.isWeekend(),
                     isToday: start.isToday()

diff --git a/packages/gantt/src/views/month.ts b/packages/gantt/src/views/month.ts
@@ -1,4 +1,4 @@
-import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop, GanttViewDate } from './view';
+import { GanttView, GanttViewOptions, GanttViewDate } from './view';
 import { GanttDate, differenceInCalendarQuarters, eachMonthOfInterval } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 import { GanttViewType } from '../class';
@@ -43,7 +43,7 @@ export class GanttViewMonth extends GanttView {
                 start,
                 start.format(this.options.dateFormat.yearQuarter),
                 (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3),
-                primaryDatePointTop
+                this.primaryDatePointTop
             );
             points.push(point);
         }
@@ -60,7 +60,7 @@ export class GanttViewMonth extends GanttView {
                 start,
                 start.format(this.options.dateFormat.month),
                 i * this.getCellWidth() + this.getCellWidth() / 2,
-                secondaryDatePointTop
+                this.secondaryDatePointTop
             );
             points.push(point);
         }

diff --git a/packages/gantt/src/views/quarter.ts b/packages/gantt/src/views/quarter.ts
@@ -1,4 +1,4 @@
-import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop, GanttViewDate } from './view';
+import { GanttView, GanttViewOptions, GanttViewDate } from './view';
 import { GanttDate } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 import { eachYearOfInterval, differenceInCalendarQuarters } from 'date-fns';
@@ -46,7 +46,7 @@ export class GanttViewQuarter extends GanttView {
                 start,
                 `${start.format(this.options.dateFormat.year)}`,
                 (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4),
-                primaryDatePointTop
+                this.primaryDatePointTop
             );
             points.push(point);
         }
@@ -62,7 +62,7 @@ export class GanttViewQuarter extends GanttView {
                 start,
                 start.format(this.options.dateFormat.quarter),
                 i * this.getCellWidth() + this.getCellWidth() / 2,
-                secondaryDatePointTop
+                this.secondaryDatePointTop
             );
             points.push(point);
         }

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -3,6 +3,7 @@ import { BehaviorSubject } from 'rxjs';
 import { GanttViewType } from '../class';
 import { GanttDatePoint } from '../class/date-point';
 import { GanttDateFormat, defaultConfig } from '../gantt.config';
+import { GanttStyles } from '../gantt.styles';
 import { GanttDate, GanttDateUtil, differenceInDays } from '../utils/date';
 
 export const primaryDatePointTop = 18;
@@ -25,6 +26,7 @@ export interface GanttViewOptions {
     dateFormat?: GanttDateFormat;
     datePrecisionUnit?: 'day' | 'hour' | 'minute';
     dragPreviewDateFormat?: string;
+    styleOptions?: GanttStyles;
     // custom key and value
     [key: string]: any;
 }
@@ -34,7 +36,8 @@ const viewOptions: GanttViewOptions = {
     max: new GanttDate().addYears(1).endOfYear(),
     dateFormat: defaultConfig.dateFormat,
     datePrecisionUnit: 'day',
-    dragPreviewDateFormat: 'MM-dd'
+    dragPreviewDateFormat: 'MM-dd',
+    styleOptions: defaultConfig.styleOptions
 };
 
 export abstract class GanttView {
@@ -54,8 +57,12 @@ export abstract class GanttView {
 
     primaryDatePoints: GanttDatePoint[];
 
+    primaryDatePointTop = 18;
+
     secondaryDatePoints: GanttDatePoint[];
 
+    secondaryDatePointTop = 36;
+
     width: number;
 
     cellWidth: number;
@@ -78,6 +85,7 @@ export abstract class GanttView {
             : this.viewEndOf(end.date.value > this.options.end.value ? end.date : this.options.end);
         this.start$ = new BehaviorSubject<GanttDate>(startDate);
         this.end$ = new BehaviorSubject<GanttDate>(endDate);
+        this.setDatePointTop();
         this.initialize();
     }
 
@@ -254,4 +262,14 @@ export abstract class GanttView {
                 return this.getDayOccupancyWidth(date);
         }
     }
+
+    // 设置甘特图头部日期位置
+    setDatePointTop() {
+        const fontSize = 14;
+        const marginTop = 4;
+        const { headerHeight } = this.options.styleOptions;
+        const remainder = headerHeight - fontSize * 2 - marginTop;
+        this.primaryDatePointTop = fontSize + remainder / 2;
+        this.secondaryDatePointTop = this.primaryDatePointTop + fontSize + marginTop;
+    }
 }
diff --git a/packages/gantt/src/views/week.ts b/packages/gantt/src/views/week.ts
@@ -1,7 +1,7 @@
 import { GanttViewType } from '../class';
 import { GanttDatePoint } from '../class/date-point';
 import { eachWeekOfInterval, GanttDate } from '../utils/date';
-import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } from './view';
+import { GanttView, GanttViewDate, GanttViewOptions } from './view';
 
 const viewOptions: GanttViewOptions = {
     cellWidth: 280,
@@ -44,7 +44,7 @@ export class GanttViewWeek extends GanttView {
                 weekStart,
                 weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.year),
                 this.getCellWidth() / 2 + i * this.getCellWidth(),
-                primaryDatePointTop
+                this.primaryDatePointTop
             );
             points.push(point);
         }
@@ -60,7 +60,7 @@ export class GanttViewWeek extends GanttView {
                 start,
                 `${start.format(this.options.dateFormat.week)}`,
                 i * this.getCellWidth() + this.getCellWidth() / 2,
-                secondaryDatePointTop
+                this.secondaryDatePointTop
             );
             points.push(point);
         }

diff --git a/packages/gantt/src/views/year.ts b/packages/gantt/src/views/year.ts
@@ -1,4 +1,4 @@
-import { GanttView, GanttViewOptions, primaryDatePointTop, GanttViewDate } from './view';
+import { GanttView, GanttViewOptions, GanttViewDate } from './view';
 import { GanttDate } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 import { eachYearOfInterval, differenceInCalendarYears } from 'date-fns';
@@ -40,7 +40,7 @@ export class GanttViewYear extends GanttView {
         const points: GanttDatePoint[] = [];
         for (let i = 0; i < years.length; i++) {
             const start = new GanttDate(years[i]);
-            const point = new GanttDatePoint(start, ``, this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+            const point = new GanttDatePoint(start, ``, this.getCellWidth() / 2 + i * this.getCellWidth(), this.primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -49,7 +49,8 @@ export class GanttViewYear extends GanttView {
     getSecondaryDatePoints(): GanttDatePoint[] {
         const years = differenceInCalendarYears(this.end.value, this.start.value);
         const points: GanttDatePoint[] = [];
-        const pointTop = 27;
+        // 二级标题向上移动 1/2 fontSize 以及 1/2 marginTop
+        const pointTop = this.secondaryDatePointTop - 14 / 2 - 2;
         for (let i = 0; i <= years; i++) {
             const start = this.start.addYears(i);
             const point = new GanttDatePoint(