fix: add template in range and change today style

worktile · Jul 28, 2020 · a4391a5 · a4391a5
1 parent 8aaaa1f
commit a4391a5
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 28 deletions.
diff --git a/packages/gantt/src/components/bar/bar.component.ts b/packages/gantt/src/components/bar/bar.component.ts
@@ -32,7 +32,6 @@ function linearGradient(sideOrCorner: string, color: string, stop: string) {
     providers: [GanttBarDrag]
 })
 export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-    @Input() template: TemplateRef<any>;
 
     @Output() barClick = new EventEmitter<GanttBarClickEvent>();
 

diff --git a/packages/gantt/src/components/calendar/calendar.component.html b/packages/gantt/src/components/calendar/calendar.component.html
@@ -1,7 +1,6 @@
 <div class="gantt-calendar-today-overlay" *ngIf="ganttUpper.showTodayLine">
   <svg [attr.width]="view.width" height="1">
     <g>
-      <polygon class="today-line-angle" />
       <line class="today-line"></line>
     </g>
   </svg>
@@ -11,16 +10,28 @@
     <text class="primary-text" *ngFor="let point of view.primaryDatePoints; trackBy: trackBy" [attr.x]="point.x" [attr.y]="point.y">
       {{ point.text }}
     </text>
-    <text
-      *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy"
-      class="secondary-text"
-      [class.secondary-text-weekend]="point.additions?.isWeekend"
-      [class.secondary-text-today]="point.additions?.isToday"
-      [attr.x]="point.x"
-      [attr.y]="point.y"
-    >
-      {{ point.text }}
-    </text>
+    <ng-container *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy">
+      <rect
+        *ngIf="point.additions?.isToday"
+        class="today-rect"
+        [attr.x]="point.x - todayWidth / 2"
+        [attr.y]="point.y - todayWidth / 2"
+        [attr.rx]="todayBorderRadius"
+        [attr.ry]="todayBorderRadius"
+        [attr.width]="todayWidth"
+        [attr.height]="todayHeight"
+      ></rect>
+      <text
+        class="secondary-text"
+        [class.secondary-text-weekend]="point.additions?.isWeekend"
+        [class.secondary-text-today]="point.additions?.isToday"
+        [attr.x]="point.x"
+        [attr.y]="point.y"
+      >
+        {{ point.text }}
+      </text>
+    </ng-container>
+
     <g>
       <line
         *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"

diff --git a/packages/gantt/src/components/calendar/calendar.component.scss b/packages/gantt/src/components/calendar/calendar.component.scss
@@ -40,7 +40,7 @@
       fill: $gantt-date-secondary-weekend-color;
     }
     &-today {
-      fill: $gantt-date-today-color;
+      fill: $gantt-date-today-text-color;
     }
   }
 
@@ -66,12 +66,12 @@
     fill: $gantt-date-week-backdrop-bg;
   }
 
-  .today-line-angle {
-    fill: $gantt-date-today-color;
-  }
-
   .today-line {
     stroke: $gantt-date-today-color;
     stroke-width: 2px;
   }
+
+  .today-rect {
+    fill: $gantt-date-today-color;
+  }
 }
diff --git a/packages/gantt/src/components/calendar/calendar.component.ts b/packages/gantt/src/components/calendar/calendar.component.ts
@@ -14,7 +14,7 @@ import {
 import { GanttDatePoint } from '../../class/date-point';
 import { Subject, merge } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
-import { headerHeight } from '../../gantt.styles';
+import { headerHeight, todayHeight, todayWidth, todayBorderRadius } from '../../gantt.styles';
 import { isNumber } from '../../utils/helpers';
 import { GanttDate } from '../../utils/date';
 import { GanttDomService } from '../../gantt-dom.service';
@@ -37,6 +37,12 @@ export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges,
 
     mainHeight = mainHeight;
 
+    todayHeight = todayHeight;
+
+    todayWidth = todayWidth;
+
+    todayBorderRadius = todayBorderRadius;
+
     @HostBinding('class.gantt-calendar-overlay') className = true;
 
     constructor(
@@ -49,10 +55,8 @@ export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges,
 
     setTodayPoint() {
         const x = this.view.getTodayXPoint();
-        const angle = this.elementRef.nativeElement.getElementsByClassName('today-line-angle')[0];
         const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        if (angle && line && isNumber(x)) {
-            angle.setAttribute('points', [`${x - 6},${headerHeight}`, `${x + 6},${headerHeight}`, `${x},${headerHeight + 5}`].join(' '));
+        if (line && isNumber(x)) {
             line.setAttribute('x1', x.toString());
             line.setAttribute('x2', x.toString());
             line.setAttribute('y1', headerHeight.toString());

diff --git a/packages/gantt/src/components/main/gantt-main.component.html b/packages/gantt/src/components/main/gantt-main.component.html
@@ -26,7 +26,7 @@
       <ng-container *ngIf="item.type === ganttItemType.custom">
         <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
       </ng-container>
-      <gantt-range *ngIf="item.type === ganttItemType.range" [item]="item"></gantt-range>
+      <gantt-range *ngIf="item.type === ganttItemType.range" [template]="rangeTemplate" [item]="item"></gantt-range>
       <gantt-bar
         *ngIf="item.type === ganttItemType.bar"
         [item]="item"

diff --git a/packages/gantt/src/components/main/gantt-main.component.ts b/packages/gantt/src/components/main/gantt-main.component.ts
@@ -15,6 +15,8 @@ export class GanttMainComponent implements OnInit {
 
     @Input() barTemplate: TemplateRef<any>;
 
+    @Input() rangeTemplate: TemplateRef<any>;
+
     @Output() barClick = new EventEmitter<GanttBarClickEvent>();
 
     @Output() lineClick = new EventEmitter<GanttLineClickEvent>();

diff --git a/packages/gantt/src/components/range/range.component.html b/packages/gantt/src/components/range/range.component.html
@@ -4,4 +4,5 @@
   </div>
   <div class="gantt-range-triangle left"></div>
   <div class="gantt-range-triangle right"></div>
+  <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
 </ng-container>
diff --git a/packages/gantt/src/components/table/gantt-table.component.scss b/packages/gantt/src/components/table/gantt-table.component.scss
@@ -1,6 +1,5 @@
 .gantt-table {
     display: block;
-    height: 100%;
 
     .gantt-table-row {
         display: flex;

diff --git a/packages/gantt/src/gantt-item-upper.ts b/packages/gantt/src/gantt-item-upper.ts
@@ -1,11 +1,13 @@
-import { Input, ElementRef, Inject } from '@angular/core';
+import { Input, ElementRef, Inject, TemplateRef } from '@angular/core';
 import { GanttItemInternal, GanttItemType } from './class';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { rangeHeight } from './gantt.styles';
 import { GANTT_UPPER_TOKEN, GanttUpper } from './gantt-upper';
 
 export abstract class GanttItemUpper {
+    @Input() template: TemplateRef<any>;
+
     @Input() item: GanttItemInternal;
 
     public firstChange = true;

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -62,6 +62,8 @@ export abstract class GanttUpper {
 
     @ContentChild('bar', { static: true }) barTemplate: TemplateRef<any>;
 
+    @ContentChild('range', { static: true }) rangeTemplate: TemplateRef<any>;
+
     @ContentChild('item', { static: true }) itemTemplate: TemplateRef<any>;
 
     @ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
@@ -120,7 +122,9 @@ export abstract class GanttUpper {
         this.originItems = uniqBy(this.originItems, 'id');
         // 根据上一次数据展开状态同步新的数据展开状态
         this.originItems.forEach((item) => {
-            item.expanded = item.expanded || this.expandedItemIds.includes(item.id);
+            if (!this.firstChange) {
+                item.expanded = this.expandedItemIds.includes(item.id);
+            }
         });
         if (this.groups.length > 0) {
             this.originItems.forEach((origin) => {

diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -8,6 +8,7 @@
       [items]="items"
       [itemTemplate]="itemTemplate"
       [barTemplate]="barTemplate"
+      [rangeTemplate]="rangeTemplate"
       (barClick)="barClick.emit($event)"
       (lineClick)="lineClick.emit($event)"
     >

diff --git a/packages/gantt/src/gantt.styles.ts b/packages/gantt/src/gantt.styles.ts
@@ -19,4 +19,10 @@ export const barBackground = '#348fe4';
 
 export const rangeHeight = 17;
 
+export const todayHeight = 25;
+
+export const todayWidth = 35;
+
+export const todayBorderRadius = 4;
+
 
diff --git a/packages/gantt/src/styles/variables.scss b/packages/gantt/src/styles/variables.scss
@@ -6,7 +6,10 @@ $gantt-bg-color: #fff !default;
 $gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
 $gantt-container-background-color: #fafafa !default;
 $gantt-item-height: 44px !default;
-$gantt-group-background-color: rgba($color: #f3f3f3, $alpha: 0.5) !default;
+$gantt-group-background-color: rgba(
+  $color: #f3f3f3,
+  $alpha: 0.5
+) !default;
 $gantt-group-height: 44px !default;
 $gantt-table-td-padding: 0 15px !default;
 
@@ -20,8 +23,12 @@ $gantt-date-primary-border: #ddd !default;
 $gantt-date-secondary-color: #333 !default;
 $gantt-date-secondary-font-size: 14px !default;
 $gantt-date-secondary-weekend-color: #aaa !default;
-$gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5) !default;
+$gantt-date-week-backdrop-bg: rgba(
+  $color: #f3f3f3,
+  $alpha: 0.5
+) !default;
 $gantt-date-today-color: #ff9f73 !default;
+$gantt-date-today-text-color: #fff !default;
 
 // bar
 $gantt-bar-layer-bg: #fff !default;
@@ -35,4 +42,3 @@ $gantt-link-dragging-line-color: #348fe4 !default;
 
 // link
 $gantt-link-line-color: #348fe4 !default;
-