From f5b657127cc4fe001324b56638453b8d5716f23a Mon Sep 17 00:00:00 2001 From: zhangwen <1062680993@qq.com> Date: Wed, 19 Aug 2020 16:16:08 +0800 Subject: [PATCH] fix: change today line to normal element --- .../calendar/calendar.component.html | 18 +++------- .../calendar/calendar.component.scss | 33 +++++++++---------- .../components/calendar/calendar.component.ts | 25 ++++++-------- .../components/main/gantt-main.component.html | 1 - packages/gantt/src/gantt-print.service.ts | 12 +++++-- packages/gantt/src/gantt.component.scss | 5 +-- packages/gantt/src/gantt.styles.ts | 2 +- 7 files changed, 44 insertions(+), 52 deletions(-) diff --git a/packages/gantt/src/components/calendar/calendar.component.html b/packages/gantt/src/components/calendar/calendar.component.html index 6ae2abec..0992cbe9 100644 --- a/packages/gantt/src/components/calendar/calendar.component.html +++ b/packages/gantt/src/components/calendar/calendar.component.html @@ -1,18 +1,8 @@ -
- - - - - - - +
+ +
+ diff --git a/packages/gantt/src/components/calendar/calendar.component.scss b/packages/gantt/src/components/calendar/calendar.component.scss index 57bef498..d012424b 100644 --- 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 index b5951d28..d96ff905 100644 --- 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 index 6b8b1f72..533cc51e 100644 --- a/packages/gantt/src/components/main/gantt-main.component.html +++ b/packages/gantt/src/components/main/gantt-main.component.html @@ -1,7 +1,6 @@ diff --git a/packages/gantt/src/gantt-print.service.ts b/packages/gantt/src/gantt-print.service.ts index 424082e9..6d70488c 100644 --- 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 index ae0af647..736fd392 100644 --- 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 index c6fc6c02..1fe4368e 100644 --- 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;