fix: change today line to normal element

worktile · Aug 19, 2020 · f5b6571 · f5b6571
1 parent 03deb6d
commit f5b6571
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 52 deletions.
diff --git a/packages/gantt/src/components/calendar/calendar.component.html b/packages/gantt/src/components/calendar/calendar.component.html
@@ -1,18 +1,8 @@
-<div class="gantt-calendar-today-overlay" *ngIf="ganttUpper.showTodayLine">
-  <svg [attr.width]="view.width" height="1">
-    <g>
-      <rect
-        class="today-rect"
-        [attr.rx]="todayBorderRadius"
-        [attr.ry]="todayBorderRadius"
-        [attr.width]="todayWidth"
-        [attr.height]="todayHeight"
-      ></rect>
-      <text class="today-text secondary-text"></text>
-      <line class="today-line"></line>
-    </g>
-  </svg>
+<div class="gantt-calendar-today-overlay" [style.width.px]="view.width" *ngIf="ganttUpper.showTodayLine">
+  <span class="today-rect"> </span>
+  <span class="today-line"> </span>
 </div>
+
 <svg class="gantt-calendar-overlay-main" [attr.width]="view.width" [attr.height]="headerHeight">
   <g>
     <text class="primary-text" *ngFor="let point of view.primaryDatePoints; trackBy: trackBy" [attr.x]="point.x" [attr.y]="point.y">

diff --git a/packages/gantt/src/components/calendar/calendar.component.scss b/packages/gantt/src/components/calendar/calendar.component.scss
@@ -4,12 +4,24 @@
   overflow: hidden;
 
   .gantt-calendar-today-overlay {
-    height: 0;
     position: relative;
     z-index: 2;
-
-    svg {
-      display: block;
+    .today-rect {
+      width: 35px;
+      height: 24px;
+      position: absolute;
+      background: $gantt-date-today-color;
+      color: $gantt-date-today-text-color;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .today-line {
+      position: absolute;
+      width: 3px;
+      background: $gantt-date-today-color;
+      transform: scaleX(0.5);
+      transform-origin: 100% 0;
+      margin-left: -2px;
     }
   }
 
@@ -41,10 +53,6 @@
     }
   }
 
-  .today-text {
-    fill: $gantt-date-today-text-color;
-  }
-
   .primary-text,
   .secondary-text {
     text-anchor: middle;
@@ -66,13 +74,4 @@
   .secondary-backdrop {
     fill: $gantt-date-week-backdrop-bg;
   }
-
-  .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
@@ -17,7 +17,6 @@ import { headerHeight, todayHeight, todayWidth, todayBorderRadius } from '../../
 import { isNumber } from '../../utils/helpers';
 import { GanttDate } from '../../utils/date';
 import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
-import { secondaryDatePointTop } from '../../views/view';
 
 const mainHeight = 5000;
 
@@ -53,20 +52,16 @@ export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges,
     setTodayPoint() {
         const x = this.view.getTodayXPoint();
         const today = new GanttDate().getDate();
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        const text = this.elementRef.nativeElement.getElementsByClassName('today-text')[0];
-
-        if (text && rect && line && isNumber(x)) {
-            rect.setAttribute('x', (x - todayWidth / 2).toString());
-            rect.setAttribute('y', (headerHeight - todayHeight).toString());
-            line.setAttribute('x1', x.toString());
-            line.setAttribute('x2', x.toString());
-            line.setAttribute('y1', headerHeight.toString());
-            line.setAttribute('y2', mainHeight.toString());
-            text.setAttribute('x', x.toString());
-            text.setAttribute('y', secondaryDatePointTop.toString());
-            text.innerHTML = today.toString();
+        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0] as HTMLElement;
+        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0] as HTMLElement;
+
+        if (rect && line && isNumber(x)) {
+            rect.style.left = `${x - todayWidth / 2}px`;
+            rect.style.top = `${headerHeight - todayHeight}px`;
+            line.style.left = `${x}px`;
+            line.style.top = `${headerHeight}px`;
+            line.style.bottom = `${-mainHeight}px`;
+            rect.innerHTML = today.toString();
         }
     }
 

diff --git a/packages/gantt/src/components/main/gantt-main.component.html b/packages/gantt/src/components/main/gantt-main.component.html
@@ -1,7 +1,6 @@
 <gantt-links-overlay
   [groups]="groups"
   [items]="items"
-  *ngIf="ganttUpper.linkable"
   (lineClick)="lineClick.emit($event)"
 ></gantt-links-overlay>
 <!-- groups -->

diff --git a/packages/gantt/src/gantt-print.service.ts b/packages/gantt/src/gantt-print.service.ts
@@ -1,5 +1,4 @@
 import { Injectable, ElementRef } from '@angular/core';
-import { GanttDomService } from './gantt-dom.service';
 import html2canvas from 'html2canvas';
 
 @Injectable()
@@ -46,7 +45,7 @@ export class GanttPrintService {
         this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0] as HTMLElement;
     }
 
-    print(name: string = 'download') {
+    print(name: string = 'download', ignoreElementClass?: string) {
         const root = this.root as HTMLElement;
 
         const mainContainer = this.mainContainer as HTMLElement;
@@ -62,6 +61,15 @@ export class GanttPrintService {
             useCORS: true,
             width: printWidth,
             height: printHeight,
+            ignoreElements: (element) => {
+                if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
+                    return true;
+                }
+                if (element.classList.contains('gantt-calendar-today-overlay')) {
+                    return true;
+                }
+            },
+
             onclone: (cloneDocument: Document) => {
                 const ganttClass = root.className;
                 const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`) as HTMLElement;

diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss
@@ -54,8 +54,9 @@
     right: 0;
     overflow: auto;
 
-    .gantt-main-groups .gantt-main-items {
-      height: 100%;
+    .gantt-main-items {
+      overflow: hidden;
+      min-height: 100%;
     }
 
     .gantt-group {

diff --git a/packages/gantt/src/gantt.styles.ts b/packages/gantt/src/gantt.styles.ts
@@ -19,7 +19,7 @@ export const barBackground = '#348fe4';
 
 export const rangeHeight = 17;
 
-export const todayHeight = 25;
+export const todayHeight = 24;
 
 export const todayWidth = 35;