feat: add today line and auto scroll today

package.json

@@ -5,10 +5,12 @@
     "ng": "ng",
     "start:docs": "docgeni serve",
     "start": "concurrently \"npm run start:docs\" \"ng serve\"",
-    "build": "ng build",
+    "build": "ng build gantt",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "pub-only": "cd dist/gantt && npm publish --access=public",
+    "pub": "npm run build && npm run pub-only"
   },
   "private": true,
   "dependencies": {

packages/gantt/src/bar/bar-drag.ts

@@ -208,10 +208,10 @@ export class GanttBarDrag implements OnDestroy {
     }
 
     private closeDragBackdrop() {
-        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
-        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
-        dragMaskElement.style.display = 'none';
-        dragBackdropElement.style.display = 'none';
+        // const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
+        // const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
+        // dragMaskElement.style.display = 'none';
+        // dragBackdropElement.style.display = 'none';
     }
 
     private setDraggingStyles() {

packages/gantt/src/calendar/calendar.component.html

@@ -1,11 +1,14 @@
-<svg [attr.width]="view.width" [attr.height]="height">
+<div *ngIf="todayPoint" class="gantt-calendar-today-overlay">
+  <svg [attr.width]="view.width" height="1">
+    <g>
+      <polygon class="today-line-angle" [attr.points]="todayPoint.angle" />
+      <line [attr.x1]="todayPoint.x" [attr.x2]="todayPoint.x" [attr.y1]="0" [attr.y2]="todayPoint.y" class="today-line"></line>
+    </g>
+  </svg>
+</div>
+<svg [attr.width]="view.width" [attr.height]="'100%'">
   <g>
-    <text
-      class="primary-text"
-      *ngFor="let point of view.primaryDatePoints; trackBy: trackBy"
-      [attr.x]="point.x"
-      [attr.y]="point.y"
-    >
+    <text class="primary-text" *ngFor="let point of view.primaryDatePoints; trackBy: trackBy" [attr.x]="point.x" [attr.y]="point.y">
       {{ point.text }}
     </text>
     <text
@@ -29,13 +32,7 @@
     </g>
 
     <g>
-      <line
-        [attr.x1]="0"
-        [attr.x2]="view.width"
-        [attr.y1]="headerHeight"
-        [attr.y2]="headerHeight"
-        class="header-line"
-      ></line>
+      <line [attr.x1]="0" [attr.x2]="view.width" [attr.y1]="headerHeight" [attr.y2]="headerHeight" class="header-line"></line>
     </g>
   </g>
   <g>
@@ -69,16 +66,5 @@
         ></rect>
       </g>
     </g>
-    <g>
-      <polygon *ngIf="todayPoint" class="today-line-angle" [attr.points]="todayPoint.angle" />
-      <line
-        *ngIf="todayPoint"
-        [attr.x1]="todayPoint.x"
-        [attr.x2]="todayPoint.x"
-        [attr.y1]="0"
-        [attr.y2]="'100%'"
-        class="today-line"
-      ></line>
-    </g>
   </g>
 </svg>

packages/gantt/src/calendar/calendar.component.scss

@@ -1,54 +1,67 @@
 .gantt-calendar-overlay {
-  display: block;
-  height: 100%;
-  overflow: hidden;
-
-  line {
-    shape-rendering: crispEdges;
-  }
-
-  .primary-text {
-    fill: $gantt-date-primary-color;
-    font-size: $gantt-date-primary-font-size;
-  }
-
-  .secondary-text {
-    fill: $gantt-date-secondary-color;
-    font-size: $gantt-date-secondary-font-size;
-
-    &-weekend {
-      fill: $gantt-date-secondary-weekend-color;
-    }
-  }
-
-  .primary-text,
-  .secondary-text {
-    text-anchor: middle;
-  }
-
-  .primary-line {
-    stroke: $gantt-border-color;
-  }
-
-  .secondary-line {
-    stroke-dasharray: 2px 3px;
-    stroke:$gantt-border-color;
-  }
-
-  .header-line {
-    stroke: $gantt-border-color;
-  }
-
-  .secondary-backdrop {
-    fill: $gantt-date-week-backdrop-bg;
-  }
-
-  .today-line-angle {
-    fill: $gantt-date-today-color;
-  }
-
-  .today-line {
-    stroke: $gantt-date-today-color;
-    stroke-width: 2px;
-  }
+    display: block;
+    height: 100%;
+    overflow: hidden;
+
+    .gantt-calendar-today-overlay {
+        height: 0;
+        position: relative;
+        z-index: 1;
+        svg{
+            display: block;
+        }
+    }
+
+    svg {
+        overflow: visible;
+    }
+
+    line {
+        shape-rendering: crispEdges;
+    }
+
+    .primary-text {
+        fill: $gantt-date-primary-color;
+        font-size: $gantt-date-primary-font-size;
+    }
+
+    .secondary-text {
+        fill: $gantt-date-secondary-color;
+        font-size: $gantt-date-secondary-font-size;
+
+        &-weekend {
+            fill: $gantt-date-secondary-weekend-color;
+        }
+    }
+
+    .primary-text,
+    .secondary-text {
+        text-anchor: middle;
+    }
+
+    .primary-line {
+        stroke: $gantt-border-color;
+    }
+
+    .secondary-line {
+        stroke-dasharray: 2px 3px;
+        stroke: $gantt-border-color;
+    }
+
+    .header-line {
+        stroke: $gantt-border-color;
+    }
+
+    .secondary-backdrop {
+        fill: $gantt-date-week-backdrop-bg;
+    }
+
+    .today-line-angle {
+        fill: $gantt-date-today-color;
+    }
+
+    .today-line {
+        stroke: $gantt-date-today-color;
+        stroke-width: 2px;
+    }
 }

packages/gantt/src/calendar/calendar.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit, HostBinding, OnChanges, SimpleChanges, ChangeDetectorRef, OnDestroy, NgZone, Inject } from '@angular/core';
 import { GanttDatePoint } from '../class/date-point';
 import { Subject } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { take, takeUntil } from 'rxjs/operators';
 import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 import { headerHeight } from '../gantt.styles';
+import { isNumber } from '../utils/helpers';
+import { GanttDate } from '../utils/date';
+import { GanttDomService } from 'ngx-gantt/gantt-dom.service';
 
 @Component({
     selector: 'gantt-calendar-overlay',
@@ -16,6 +19,7 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
 
     public todayPoint: {
         x: number;
+        y: number;
         angle: string;
         text: string;
     };
@@ -30,13 +34,42 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
 
     @HostBinding('class.gantt-calendar-overlay') className = true;
 
-    constructor(@Inject(GANTT_REF_TOKEN) private ganttRef: GanttRef, private cdr: ChangeDetectorRef, private ngZone: NgZone) {}
+    constructor(
+        @Inject(GANTT_REF_TOKEN) private ganttRef: GanttRef,
+        private cdr: ChangeDetectorRef,
+        private ngZone: NgZone,
+        private dom: GanttDomService
+    ) {}
+
+    private computeTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        if (isNumber(x)) {
+            this.todayPoint = {
+                x,
+                y: this.dom.root.clientHeight,
+                angle: [`${x - 6},0`, `${x + 5},0`, `${x},5`].join(' '),
+                text: new GanttDate().format('MM月d日')
+            };
+        }
+    }
 
     ngOnInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.cdr.detectChanges();
-            this.firstChange = false;
+            this.ganttRef.view.start$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.computeTodayPoint();
+                this.cdr.detectChanges();
+            });
         });
+
+        this.firstChange = false;
+
+        this.dom
+            .getResize()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+                this.todayPoint.y = this.dom.root.clientHeight;
+                this.cdr.detectChanges();
+            });
     }
 
     ngOnChanges(changes: SimpleChanges): void {}

packages/gantt/src/gantt-dom.service.ts

@@ -94,7 +94,7 @@ export class GanttDomService implements OnDestroy {
         return fromEvent(window, 'resize').pipe(auditTime(30));
     }
 
-    scrollViewer(left: number) {
+    scrollMainContainer(left: number) {
         if (isNumber(left)) {
             const scrollLeft = left - this.mainContainer.clientWidth / 2;
             this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;

packages/gantt/src/gantt-upper.ts

@@ -100,6 +100,9 @@ export abstract class GanttUpper {
         this.onStable().subscribe(() => {
             this.dom.initialize(this.elementRef);
             this.setupViewScroll();
+            this.scrollToToday();
+            // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
+            this.element.style.opacity = '1';
         });
 
         this.view.start$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
@@ -161,7 +164,9 @@ export abstract class GanttUpper {
         if (this.groups.length > 0) {
             this.originItems.forEach((origin) => {
                 const group = this.groupsMap[origin.group_id];
-                group.items.push(new GanttItemInternal(origin));
+                if (group) {
+                    group.items.push(new GanttItemInternal(origin));
+                }
             });
         } else {
             this.originItems.forEach((origin) => {
@@ -213,5 +218,8 @@ export abstract class GanttUpper {
         return this.ngZone.onStable.pipe(take(1));
     }
 
-    private scrollToToday() {}
+    private scrollToToday() {
+        const x = this.view.getTodayXPoint();
+        this.dom.scrollMainContainer(x);
+    }
 }

packages/gantt/src/gantt.component.html

@@ -2,6 +2,6 @@
   <gantt-table [groups]="groups" [items]="items" [columns]="columns" [groupTemplate]="groupTemplate"></gantt-table>
 </div>
 <div class="gantt-container">
-  <gantt-calendar-overlay *ngIf="view"></gantt-calendar-overlay>
+  <gantt-calendar-overlay></gantt-calendar-overlay>
   <gantt-main [groups]="groups" [items]="items" [barTemplate]="barTemplate"></gantt-main>
 </div>

packages/gantt/src/gantt.scss

@@ -44,13 +44,15 @@ $gantt-date-today-color: #ff9f73 !default;
   overflow: hidden;
   display: flex;
   color: $gantt-color;
+  opacity: 0;
 
   .gantt-side {
     border-right: 1px solid $gantt-border-color;
     position: relative;
     z-index: 1;
     overflow: auto;
 
+
     &-has-shadow {
       box-shadow: $gantt-side-shadow;
     }

packages/gantt/src/public-api.ts

@@ -3,5 +3,5 @@
  */
 
 export * from './gantt.module';
-export * from './table/gantt-table.component';
-export * from './flat/gantt-flat.component';
+export * from './gantt.component';
+export * from './table/column/column.component';