feat: add print service (#60)

worktile · Aug 12, 2020 · 3fc091f · 3fc091f
1 parent 06ea64a
commit 3fc091f
Show file tree

Hide file tree

Showing 18 changed files with 138 additions and 97 deletions.
diff --git a/example/src/app/gantt-flat/flat.component.html b/example/src/app/gantt-flat/flat.component.html
@@ -19,9 +19,15 @@
       <input type="number" [style.width.px]="50" [(ngModel)]="options.mergeIntervalDays" />
     </span>
   </div>
+  <div class="header-section">
+    <span class="header-section-content">
+      <button (click)="print('gantt-flat')">导出为图片</button>
+    </span>
+  </div>
 </div>
 <div class="gantt-demo-content">
   <ngx-gantt-flat
+    #gantt
     [start]="1514736000"
     [end]="1609430400"
     [items]="items"

diff --git a/example/src/app/gantt-flat/flat.component.ts b/example/src/app/gantt-flat/flat.component.ts
@@ -1,14 +1,17 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { mockItems, mockGroups } from '../gantt/mocks';
-import { GanttViewType } from 'ngx-gantt';
+import { GanttViewType, GanttPrintService } from 'ngx-gantt';
 
 @Component({
     selector: 'app-gantt-flat-example',
     templateUrl: './flat.component.html',
-    styleUrls: ['./flat.component.scss']
+    styleUrls: ['./flat.component.scss'],
+    providers: [GanttPrintService]
 })
 export class AppGanttFlatExampleComponent implements OnInit {
-    constructor() {}
+    constructor(
+        private printService: GanttPrintService
+    ) {}
 
     items = mockItems;
 
@@ -26,4 +29,8 @@ export class AppGanttFlatExampleComponent implements OnInit {
     @HostBinding('class.gantt-demo') class = true;
 
     ngOnInit(): void {}
+
+    print(name: string) {
+        this.printService.print(name);
+    }
 }
diff --git a/example/src/app/gantt-range/gantt-range.component.html b/example/src/app/gantt-range/gantt-range.component.html
@@ -24,6 +24,11 @@
       <button (click)="gantt.collapseAll()">全部收起</button>
     </span>
   </div>
+  <div class="header-section">
+    <span class="header-section-content">
+      <button (click)="print('gantt-range')">导出为图片</button>
+    </span>
+  </div>
 </div>
 <div class="gantt-demo-content">
   <ngx-gantt

diff --git a/example/src/app/gantt-range/gantt-range.component.ts b/example/src/app/gantt-range/gantt-range.component.ts
@@ -9,13 +9,15 @@ import {
     GanttLinkDragEvent,
     GanttItem,
     GanttViewOptions,
-    GanttDate
+    GanttDate,
+    GanttPrintService
 } from 'ngx-gantt';
 import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 @Component({
     selector: 'app-gantt-range-example',
-    templateUrl: './gantt-range.component.html'
+    templateUrl: './gantt-range.component.html',
+    providers: [GanttPrintService]
 })
 export class AppGanttRangeExampleComponent implements OnInit {
     items = mockItems;
@@ -34,7 +36,7 @@ export class AppGanttRangeExampleComponent implements OnInit {
 
     @HostBinding('class.gantt-demo') class = true;
 
-    constructor() {}
+    constructor(private printService: GanttPrintService) {}
 
     ngOnInit(): void {}
 
@@ -59,4 +61,7 @@ export class AppGanttRangeExampleComponent implements OnInit {
             }
         ]).pipe(delay(1000));
     }
+    print(name: string) {
+        this.printService.print(name);
+    }
 }
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -30,6 +30,12 @@
       <button (click)="gantt.collapseAll()">全部收起</button>
     </span>
   </div>
+
+  <div class="header-section">
+    <span class="header-section-content">
+      <button (click)="print('gantt')">导出为图片</button>
+    </span>
+  </div>
 </div>
 <div class="gantt-demo-content">
   <ngx-gantt

diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -1,3 +1,4 @@
+import { GanttPrintService } from './../../../../packages/gantt/src/gantt-print.service';
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { mockItems, mockGroups } from './mocks';
 import {
@@ -16,10 +17,11 @@ import { delay } from 'rxjs/operators';
 @Component({
     selector: 'app-gantt-example',
     templateUrl: './gantt.component.html',
-    styleUrls: ['./gantt.component.scss']
+    styleUrls: ['./gantt.component.scss'],
+    providers: [GanttPrintService]
 })
 export class AppGanttExampleComponent implements OnInit {
-    constructor() {}
+    constructor(private printService: GanttPrintService) {}
 
     items = mockItems;
 
@@ -80,4 +82,8 @@ export class AppGanttExampleComponent implements OnInit {
             }
         ]).pipe(delay(1000));
     }
+
+    print(name: string) {
+        this.printService.print(name);
+    }
 }
diff --git a/packages/gantt/src/components/bar/bar.component.scss b/packages/gantt/src/components/bar/bar.component.scss
@@ -107,7 +107,7 @@ $gantt-bar-link-drop-border: 5px;
 .gantt-bar {
     position: absolute;
     border-radius: 4px;
-    z-index: 1;
+    z-index: 2;
     background: $gantt-bar-bg;
 
     .gantt-bar-layer {

diff --git a/packages/gantt/src/components/calendar/calendar.component.scss b/packages/gantt/src/components/calendar/calendar.component.scss
@@ -6,7 +6,7 @@
   .gantt-calendar-today-overlay {
     height: 0;
     position: relative;
-    z-index: 1;
+    z-index: 2;
 
     svg {
       display: block;
@@ -15,7 +15,7 @@
 
   .gantt-calendar-overlay-main {
     position: relative;
-    // z-index: 1;
+    z-index: 1;
     background-color: $gantt-bg-color;
   }
 

diff --git a/packages/gantt/src/components/calendar/calendar.component.ts b/packages/gantt/src/components/calendar/calendar.component.ts
@@ -4,7 +4,6 @@ import {
     HostBinding,
     OnChanges,
     SimpleChanges,
-    ChangeDetectorRef,
     OnDestroy,
     NgZone,
     Inject,
@@ -17,7 +16,6 @@ import { take, takeUntil } from 'rxjs/operators';
 import { headerHeight, todayHeight, todayWidth, todayBorderRadius } from '../../gantt.styles';
 import { isNumber } from '../../utils/helpers';
 import { GanttDate } from '../../utils/date';
-import { GanttDomService } from '../../gantt-dom.service';
 import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
 import { secondaryDatePointTop } from '../../views/view';
 
@@ -48,9 +46,7 @@ export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges,
 
     constructor(
         @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
-        private cdr: ChangeDetectorRef,
         private ngZone: NgZone,
-        private dom: GanttDomService,
         private elementRef: ElementRef<HTMLElement>
     ) {}
 

diff --git a/packages/gantt/src/components/icon/icons.ts b/packages/gantt/src/components/icon/icons.ts
@@ -1,5 +1,5 @@
-const angleRight = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
-const angleDown = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
+const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
+const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
 const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
 const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
 const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">

diff --git a/packages/gantt/src/components/links/links.component.html b/packages/gantt/src/components/links/links.component.html
@@ -1,4 +1,4 @@
-<svg [attr.width]="ganttUpper.view.width" height="1">
+<svg [attr.width]="ganttUpper.view.width" height="100%">
   <ng-container *ngFor="let link of links; let i = index; trackBy: trackBy">
     <path [attr.d]="link.path" fill="transparent" stroke-width="2" [attr.stroke]="link.color" pointer-events="none"></path>
     <g>

diff --git a/packages/gantt/src/components/range/range.component.scss b/packages/gantt/src/components/range/range.component.scss
@@ -1,6 +1,6 @@
 .gantt-range {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   .gantt-range-main {
     height: 10px;
     background: #dfdfdf;

diff --git a/packages/gantt/src/gantt-drag-container.ts b/packages/gantt/src/gantt-drag-container.ts
@@ -1,7 +1,6 @@
 import { Injectable, EventEmitter } from '@angular/core';
 import { GanttDragEvent, GanttLinkDragEvent } from './class/event';
 import { GanttItemInternal } from './class/item';
-import { GanttDomService } from './gantt-dom.service';
 
 export type LinkDragFrom = 'source' | 'target';
 

diff --git a/packages/gantt/src/gantt-print.service.ts b/packages/gantt/src/gantt-print.service.ts
@@ -1,16 +1,14 @@
-import { Injectable } from '@angular/core';
+import { Injectable, ElementRef } from '@angular/core';
 import { GanttDomService } from './gantt-dom.service';
 import html2canvas from 'html2canvas';
 
 @Injectable()
 export class GanttPrintService {
-    constructor(private ganttDomService: GanttDomService) {}
+    private root: HTMLElement;
 
-    private root = this.ganttDomService.root as HTMLElement;
+    private mainContainer: HTMLElement;
 
-    private mainContainer = this.ganttDomService.mainContainer as HTMLElement;
-
-    private calendarOverlay = this.ganttDomService.calendarOverlay as HTMLElement;
+    constructor() {}
 
     private setInlineStyles(targetElem: Element) {
         const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
@@ -43,28 +41,38 @@ export class GanttPrintService {
         }
     }
 
+    register(root: ElementRef<HTMLElement>) {
+        this.root = root.nativeElement;
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0] as HTMLElement;
+    }
+
     print(name: string = 'download') {
+        const root = this.root as HTMLElement;
+
+        const mainContainer = this.mainContainer as HTMLElement;
         // set print width
-        const printWidth = this.mainContainer.scrollWidth - this.mainContainer.offsetWidth + this.root.offsetWidth;
+        const printWidth = root.offsetWidth;
 
         // set print height
-        const printHeight = this.mainContainer.scrollHeight + this.calendarOverlay.offsetHeight;
+        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
 
-        html2canvas(this.root, {
-            // scale: 2,
+        html2canvas(root, {
             logging: false,
             allowTaint: true,
+            useCORS: true,
             width: printWidth,
             height: printHeight,
             onclone: (cloneDocument: Document) => {
-                const ganttClass = this.root.className;
+                const ganttClass = root.className;
                 const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`) as HTMLElement;
+                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main') as HTMLElement;
 
                 // change targetDom width
                 cloneGanttDom.style.width = `${printWidth}px`;
                 cloneGanttDom.style.height = `${printHeight}px`;
-                cloneGanttDom.style.overflow = 'unset';
-                cloneGanttDom.style.flex = 'none';
+                cloneGanttDom.style.overflow = `unset`;
+                cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
+                cloneCalendarOverlay.style.background = 'transparent';
 
                 // setInlineStyles for svg
                 this.setInlineStyles(cloneGanttDom);