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

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

Hide file tree

Showing 8 changed files with 22 additions and 41 deletions.
diff --git a/packages/gantt/src/class/date-point.ts b/packages/gantt/src/class/date-point.ts
@@ -5,7 +5,7 @@ export class GanttDatePoint {
         public start: GanttDate,
         public text: string,
         public x: number,
-        public y: number,
+        public y: number | string,
         public additions?: {
             isWeekend: boolean;
             isToday: boolean;

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 } from './view';
+import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } 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),
-                this.primaryDatePointTop
+                primaryDatePointTop
             );
             points.push(point);
         }
@@ -64,7 +64,7 @@ export class GanttViewDay extends GanttView {
                 start,
                 start.getDate().toString(),
                 i * this.getCellWidth() + this.getCellWidth() / 2,
-                this.secondaryDatePointTop,
+                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 } from './view';
+import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } 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),
-                this.primaryDatePointTop
+                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,
-                this.secondaryDatePointTop,
+                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, GanttViewDate } from './view';
+import { GanttView, GanttViewOptions, GanttViewDate, secondaryDatePointTop, primaryDatePointTop } 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),
-                this.primaryDatePointTop
+                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,
-                this.secondaryDatePointTop
+                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, GanttViewDate } from './view';
+import { GanttView, GanttViewOptions, GanttViewDate, secondaryDatePointTop, primaryDatePointTop } 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),
-                this.primaryDatePointTop
+                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,
-                this.secondaryDatePointTop
+                secondaryDatePointTop
             );
             points.push(point);
         }

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -3,12 +3,11 @@ 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;
+export const primaryDatePointTop = '41%';
 
-export const secondaryDatePointTop = 36;
+export const secondaryDatePointTop = '82%';
 
 export interface GanttViewDate {
     date: GanttDate;
@@ -26,7 +25,6 @@ export interface GanttViewOptions {
     dateFormat?: GanttDateFormat;
     datePrecisionUnit?: 'day' | 'hour' | 'minute';
     dragPreviewDateFormat?: string;
-    styleOptions?: GanttStyles;
     // custom key and value
     [key: string]: any;
 }
@@ -36,8 +34,7 @@ const viewOptions: GanttViewOptions = {
     max: new GanttDate().addYears(1).endOfYear(),
     dateFormat: defaultConfig.dateFormat,
     datePrecisionUnit: 'day',
-    dragPreviewDateFormat: 'MM-dd',
-    styleOptions: defaultConfig.styleOptions
+    dragPreviewDateFormat: 'MM-dd'
 };
 
 export abstract class GanttView {
@@ -57,12 +54,8 @@ export abstract class GanttView {
 
     primaryDatePoints: GanttDatePoint[];
 
-    primaryDatePointTop = 18;
-
     secondaryDatePoints: GanttDatePoint[];
 
-    secondaryDatePointTop = 36;
-
     width: number;
 
     cellWidth: number;
@@ -85,7 +78,6 @@ 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();
     }
 
@@ -262,14 +254,4 @@ 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 } from './view';
+import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } 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(),
-                this.primaryDatePointTop
+                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,
-                this.secondaryDatePointTop
+                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, GanttViewDate } from './view';
+import { GanttView, GanttViewOptions, GanttViewDate, primaryDatePointTop, secondaryDatePointTop } 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(), this.primaryDatePointTop);
+            const point = new GanttDatePoint(start, ``, this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -49,8 +49,7 @@ export class GanttViewYear extends GanttView {
     getSecondaryDatePoints(): GanttDatePoint[] {
         const years = differenceInCalendarYears(this.end.value, this.start.value);
         const points: GanttDatePoint[] = [];
-        // 二级标题向上移动 1/2 fontSize 以及 1/2 marginTop
-        const pointTop = this.secondaryDatePointTop - 14 / 2 - 2;
+        const pointTop = '61%';
         for (let i = 0; i <= years; i++) {
             const start = this.start.addYears(i);
             const point = new GanttDatePoint(