Skip to content

Commit bdcaa88

Browse files
HandsomeButterballwalkerkay
HandsomeButterball
authored and
walkerkay
committed
feat(gantt-table): add width in gantt column
1 parent 7c0ee57 commit bdcaa88

14 files changed

+254
-120
lines changed

‎example/src/app/examples/examples.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<ngx-gantt start="1514736000" end="1609430400" [items]="items" [groups]="groups" [draggable]="true">
2-
<ngx-gantt-column name="标题">
2+
<ngx-gantt-column width="100px" name="标题">
33
<ng-template #cell let-row>
44
{{ row.title }}
55
</ng-template>
66
</ngx-gantt-column>
7-
<ngx-gantt-column name="开始时间">
7+
<ngx-gantt-column width="400px" name="开始时间">
88
<ng-template #cell let-row>
99
{{ row.start * 1000 | date }}
1010
</ng-template>

‎example/src/app/examples/examples.component.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@
22
height: 100%;
33
margin: 20px;
44
display: block;
5-
border: 1px solid #ddd;
65
}

‎package-lock.json

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"date-fns": "^2.14.0",
2525
"rxjs": "~6.4.0",
2626
"tslib": "^1.10.0",
27-
"zone.js": "~0.9.1"
27+
"zone.js": "~0.9.1",
28+
"html2canvas": "^1.0.0-rc.5"
2829
},
2930
"devDependencies": {
3031
"@angular-devkit/build-angular": "~0.803.25",

‎packages/gantt/src/gantt-print.service.ts

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Injectable } from '@angular/core';
2+
import { GanttDomService } from './gantt-dom.service';
3+
import html2canvas from 'html2canvas';
4+
5+
@Injectable()
6+
export class GanttPrintService {
7+
constructor(private ganttDomService: GanttDomService) {}
8+
9+
private root = this.ganttDomService.root as HTMLElement;
10+
11+
private viewer = this.ganttDomService.viewer as HTMLElement;
12+
13+
private calendarOverlay = this.ganttDomService.calendarOverlay as HTMLElement;
14+
15+
private setInlineStyles(targetElem: Element) {
16+
const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
17+
for (const svgElement of svgElements) {
18+
this.recursElementChildren(svgElement);
19+
}
20+
}
21+
22+
private recursElementChildren(node: SVGSVGElement | HTMLElement) {
23+
const transformProperties = [
24+
'fill',
25+
'color',
26+
'font-size',
27+
'stroke',
28+
'font',
29+
'text-anchor',
30+
'stroke-dasharray',
31+
'shape-rendering',
32+
'stroke-width'
33+
];
34+
if (!node.style) {
35+
return;
36+
}
37+
const styles = getComputedStyle(node);
38+
for (const transformProperty of transformProperties) {
39+
node.style[transformProperty] = styles[transformProperty];
40+
}
41+
for (const child of Array.from(node.childNodes)) {
42+
this.recursElementChildren(child as SVGSVGElement);
43+
}
44+
}
45+
46+
print(name: string = 'download') {
47+
// set print width
48+
const printWidth = this.viewer.scrollWidth - this.viewer.offsetWidth + this.root.offsetWidth;
49+
50+
// set print height
51+
const printHeight = this.viewer.scrollHeight + this.calendarOverlay.offsetHeight;
52+
53+
html2canvas(this.root, {
54+
// scale: 2,
55+
logging: false,
56+
allowTaint: true,
57+
width: printWidth,
58+
height: printHeight,
59+
onclone: (cloneDocument: Document) => {
60+
const ganttClass = this.root.className;
61+
const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`) as HTMLElement;
62+
63+
// change targetDom width
64+
cloneGanttDom.style.width = `${printWidth}px`;
65+
cloneGanttDom.style.height = `${printHeight}px`;
66+
cloneGanttDom.style.overflow = 'unset';
67+
cloneGanttDom.style.flex = 'none';
68+
69+
// setInlineStyles for svg
70+
this.setInlineStyles(cloneGanttDom);
71+
}
72+
}).then((canvas: HTMLCanvasElement) => {
73+
const link = document.createElement('a');
74+
const dataUrl = canvas.toDataURL('image/png');
75+
link.download = `${name}.png`;
76+
link.href = dataUrl;
77+
link.click();
78+
});
79+
}
80+
}

‎packages/gantt/src/gantt.scss

Lines changed: 64 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -17,76 +17,86 @@ $gantt-date-secondary-color: #333 !default;
1717
$gantt-date-secondary-font-size: 14px !default;
1818
$gantt-date-secondary-weekend-color: #aaa !default;
1919
$gantt-date-secondary-border-color: #ddd !default;
20-
$gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5) !default;
20+
$gantt-date-week-backdrop-bg: rgba(
21+
$color: #f3f3f3,
22+
$alpha: 0.5
23+
) !default;
2124
$gantt-date-today-color: #ff9f73 !default;
2225

2326
@import './calendar/calendar.component.scss';
2427
@import './table/gantt-table.component.scss';
2528
@import './bar/bar.component.scss';
2629

2730
.gantt {
28-
width: 100%;
29-
height: 100%;
30-
background-color: $gantt-bg-color;
31-
position: relative;
32-
overflow: hidden;
33-
display: flex;
31+
width: 100%;
32+
height: 100%;
33+
background-color: $gantt-bg-color;
34+
position: relative;
35+
overflow: hidden;
36+
display: flex;
37+
border: 1px solid #eee;
38+
border-bottom: none;
39+
40+
.gantt-side {
41+
width: 400px;
42+
border-right: 1px solid $gantt-border-color;
43+
overflow: auto;
44+
.gantt-side-scrolling {
45+
box-shadow: 10px 0 0 0 #ccc;
46+
}
47+
48+
.gantt-side-header {
49+
box-sizing: border-box;
50+
height: $gantt-header-height;
51+
width: min-content;
52+
}
3453

35-
.gantt-side {
36-
width: 400px;
54+
.gantt-side-container {
55+
height: calc(100% - #{$gantt-header-height});
56+
overflow: auto;
57+
width: min-content;
3758

38-
.gantt-side-header {
39-
box-sizing: border-box;
40-
height: $gantt-header-height;
41-
overflow: hidden;
42-
border-bottom: 1px solid #eee;
43-
}
59+
&::-webkit-scrollbar {
60+
display: none;
61+
}
62+
}
63+
}
4464

45-
.gantt-side-container {
46-
height: calc(100% - #{$gantt-header-height});
47-
overflow: auto;
65+
.gantt-container {
66+
flex: 1;
67+
position: relative;
68+
display: flex;
69+
overflow: hidden;
70+
}
4871

49-
&::-webkit-scrollbar {
50-
display: none;
51-
}
52-
}
72+
.gantt-main-container {
73+
width: 100%;
74+
height: calc(100% - 44px);
75+
flex: 1;
76+
position: absolute;
77+
top: 44px;
78+
bottom: 0;
79+
left: 0;
80+
right: 0;
81+
overflow: auto;
82+
83+
.gantt-main-groups .gantt-main-items {
84+
height: 100%;
5385
}
5486

55-
.gantt-container {
56-
flex: 1;
57-
position: relative;
58-
display: flex;
59-
overflow: hidden;
87+
.gantt-group {
88+
height: 44px;
89+
box-sizing: border-box;
90+
background: #fafafa;
6091
}
6192

62-
.gantt-main-container {
63-
width: 100%;
64-
height: calc(100% - 44px);
65-
flex: 1;
66-
position: absolute;
67-
top: 44px;
68-
bottom: 0;
69-
left: 0;
70-
right: 0;
71-
overflow: auto;
72-
73-
.gantt-main-groups .gantt-main-items {
74-
height: 100%;
75-
}
76-
77-
.gantt-group {
78-
height: 44px;
79-
box-sizing: border-box;
80-
background: #fafafa;
81-
}
82-
83-
.gantt-item {
84-
height: 44px;
85-
border-bottom: 1px solid $gantt-border-color;
86-
box-sizing: border-box;
87-
position: relative;
88-
}
93+
.gantt-item {
94+
height: 44px;
95+
border-bottom: 1px solid $gantt-border-color;
96+
box-sizing: border-box;
97+
position: relative;
8998
}
99+
}
90100
}
91101

92102
// .gantt-container {

‎packages/gantt/src/table/column/column.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export class GanttTableColumnComponent implements OnInit {
1010

1111
@Input('width')
1212
set width(width: number | string) {
13+
console.log(width);
1314
this.columnWidth = coerceCssPixelValue(width);
1415
}
1516

‎packages/gantt/src/table/gantt-table.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<div class="gantt-side-header" *ngIf="columns?.length">
22
<table>
3+
<colgroup>
4+
<col [style.width]="column.columnWidth" [style.minWidth]="column.columnWidth" *ngFor="let column of columns" />
5+
</colgroup>
36
<thead>
47
<th *ngFor="let column of columns" [title]="column.name">
58
{{ column.name }}
@@ -9,9 +12,7 @@
912
</div>
1013
<div class="gantt-side-container">
1114
<ng-container *ngIf="groups.length; else itemsTemplate">
12-
<gantt-table-group *ngFor="let group of groups" [group]="group" [groupHeader]="groupTemplate">
13-
<gantt-table-items [items]="group.items" [columns]="columns"></gantt-table-items>
14-
</gantt-table-group>
15+
<gantt-table-group *ngFor="let group of groups" [group]="group" [columns]="columns" [groupHeader]="groupTemplate"> </gantt-table-group>
1516
</ng-container>
1617
<ng-template #itemsTemplate>
1718
<gantt-table-items [items]="items" [columns]="columns"></gantt-table-items>

0 commit comments

Comments
 (0)