From 641ac49bfa40be86f25d8ddfc26bc682496388b2 Mon Sep 17 00:00:00 2001 From: Walker <15701592+walkerkay@users.noreply.github.com> Date: Sat, 6 Jun 2020 13:55:30 +0800 Subject: [PATCH] fix: fix today line compute and group state sync bug (#23) --- CHANGELOG.md | 21 +++++++++++++++ .../src/app/examples/examples.component.html | 27 ++++++++++++++++++- .../src/app/examples/examples.component.scss | 21 +++++++++++++-- .../src/app/examples/examples.component.ts | 13 ++++++++- package-lock.json | 2 +- package.json | 2 +- packages/gantt/package.json | 2 +- packages/gantt/src/components/bar/bar-drag.ts | 2 +- .../calendar/calendar.component.html | 2 +- .../components/calendar/calendar.component.ts | 8 +++--- packages/gantt/src/gantt-upper.ts | 11 ++++++-- 11 files changed, 96 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dfa6570..840c11eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,27 @@ Changelog All notable changes to ngx-gantt will be documented in this file. +### [0.0.7](https://github.com/worktile/ngx-gantt/compare/0.0.3...0.0.7) (2020-06-04) + + +### Features + +* add icon component and use with group expand ([cd162b9](https://github.com/worktile/ngx-gantt/commit/cd162b9d1cf35aab39ab66ae31666f92689a9f89)) +* add side shadow ([e5c7fd0](https://github.com/worktile/ngx-gantt/commit/e5c7fd0aa0a020d83c048575b1aa17eedcefe87e)) +* refactor styles and add dragging mask backdrop ([f34f3e6](https://github.com/worktile/ngx-gantt/commit/f34f3e62d788bb294c1b21528ec933ce2a46db9e)) +* **icon:** add icons ([c1e0648](https://github.com/worktile/ngx-gantt/commit/c1e06484a47f000ab9192bd8e7769fed7c5e1fc8)) + + +### Bug Fixes + +* fix group template context and group expand ([92958dc](https://github.com/worktile/ngx-gantt/commit/92958dc826d4c83a346bbac342c64671837738d2)) +* **gantt-table:** add ngx-gantt-table component ([#16](https://github.com/worktile/ngx-gantt/issues/16)) ([8b09018](https://github.com/worktile/ngx-gantt/commit/8b090187d5665cc5c1cf938f0a400979ec5a934c)) +* **table:** change table td padding ([#17](https://github.com/worktile/ngx-gantt/issues/17)) ([41d89d9](https://github.com/worktile/ngx-gantt/commit/41d89d9b7fdc2ea45de8e56ca4087369b93998a0)) +* **table:** change td and th padding ([362ce4e](https://github.com/worktile/ngx-gantt/commit/362ce4ecf2afd417eda2c7dbcac9040635628a34)) +* **table:** fix side overflow ([03e1b38](https://github.com/worktile/ngx-gantt/commit/03e1b389a00eb6ff272cedbfd615b011b6a2aabf)) +* **table:** use one table in gantt table ([#15](https://github.com/worktile/ngx-gantt/issues/15)) ([ce344e3](https://github.com/worktile/ngx-gantt/commit/ce344e399fb18dddb5a26536d2231236043e0d54)) +* fix onChanges event and dragging backdrop position ([d78695b](https://github.com/worktile/ngx-gantt/commit/d78695be5fb1b9c67aacc9d30bd0e2b5d7303967)) + ### [0.0.6](https://github.com/worktile/ngx-gantt/compare/0.0.3...0.0.6) (2020-06-04) diff --git a/example/src/app/examples/examples.component.html b/example/src/app/examples/examples.component.html index e5dfba5f..709bf330 100644 --- a/example/src/app/examples/examples.component.html +++ b/example/src/app/examples/examples.component.html @@ -1,5 +1,30 @@ +
+
+ 视图： + + + + + +
+
+ 是否可拖拽： + + + +
+
- + diff --git a/example/src/app/examples/examples.component.scss b/example/src/app/examples/examples.component.scss index 8dc6c91b..7865359d 100644 --- a/example/src/app/examples/examples.component.scss +++ b/example/src/app/examples/examples.component.scss @@ -3,9 +3,26 @@ display: flex; flex-direction: column; background: #eee; + padding: 20px; - .content{ - margin: 20px; + .header { + height: 50px; + background: #fff; + padding: 0px 20px; + margin-bottom: 15px; + display: flex; + align-items: center; + + .header-section{ + margin-right: 20px; + &-title{ + font-weight: bold; + } + } + + } + + .content { flex: 1; height: 1px; } diff --git a/example/src/app/examples/examples.component.ts b/example/src/app/examples/examples.component.ts index 35ae0a44..f838dab7 100644 --- a/example/src/app/examples/examples.component.ts +++ b/example/src/app/examples/examples.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { mockItems, mockGroups } from './mocks'; -import { GanttBarClickEvent } from '../../../../packages/gantt/src/class'; +import { GanttBarClickEvent, GanttViewType } from '../../../../packages/gantt/src/class'; +import { GanttDragEvent } from 'dist/gantt/class'; @Component({ selector: 'app-examples-gantt', @@ -14,9 +15,19 @@ export class AppExamplesComponent implements OnInit { groups = mockGroups; + options = { + viewType: GanttViewType.month, + draggable: true + }; + ngOnInit(): void {} barClick(event: GanttBarClickEvent) { console.log(event); } + + dragEnded(event: GanttDragEvent) { + this.groups = [...this.groups]; + this.items = [...this.items]; + } } diff --git a/package-lock.json b/package-lock.json index 6e6b5695..0818271b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@worktile/gantt", - "version": "0.0.6", + "version": "0.0.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 782d3157..64b07a82 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@worktile/gantt", - "version": "0.0.6", + "version": "0.0.7", "description": "A modern and powerful gantt chart component for Angular", "keywords": [ "gantt", diff --git a/packages/gantt/package.json b/packages/gantt/package.json index 82c4b9d8..c78708bc 100644 --- a/packages/gantt/package.json +++ b/packages/gantt/package.json @@ -1,6 +1,6 @@ { "name": "@worktile/gantt", - "version": "0.0.6", + "version": "0.0.7", "peerDependencies": { "@angular/common": "^8.2.14", "@angular/core": "^8.2.14" diff --git a/packages/gantt/src/components/bar/bar-drag.ts b/packages/gantt/src/components/bar/bar-drag.ts index be762632..6c9df57b 100644 --- a/packages/gantt/src/components/bar/bar-drag.ts +++ b/packages/gantt/src/components/bar/bar-drag.ts @@ -210,7 +210,7 @@ export class GanttBarDrag implements OnDestroy { const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement; const rootRect = this.dom.root.getBoundingClientRect(); const dragRect = dragElement.getBoundingClientRect(); - const left = dragRect.left - rootRect.left - 400; + const left = dragRect.left - rootRect.left - this.dom.side.clientWidth; const width = dragRect.right - dragRect.left; dragMaskElement.style.left = left + 'px'; dragMaskElement.style.width = width + 'px'; diff --git a/packages/gantt/src/components/calendar/calendar.component.html b/packages/gantt/src/components/calendar/calendar.component.html index a741116e..1385c43f 100644 --- a/packages/gantt/src/components/calendar/calendar.component.html +++ b/packages/gantt/src/components/calendar/calendar.component.html @@ -2,7 +2,7 @@ - +
diff --git a/packages/gantt/src/components/calendar/calendar.component.ts b/packages/gantt/src/components/calendar/calendar.component.ts index be804acc..251ef80a 100644 --- a/packages/gantt/src/components/calendar/calendar.component.ts +++ b/packages/gantt/src/components/calendar/calendar.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, HostBinding, OnChanges, SimpleChanges, ChangeDetectorRef, OnDestroy, NgZone, Inject } from '@angular/core'; import { GanttDatePoint } from '../../class/date-point'; import { Subject } from 'rxjs'; -import { take, takeUntil } from 'rxjs/operators'; +import { take, takeUntil, delay } from 'rxjs/operators'; import { GanttRef, GANTT_REF_TOKEN } from '../../gantt-ref'; import { headerHeight } from '../../gantt.styles'; import { isNumber } from '../../utils/helpers'; @@ -41,13 +41,13 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy { private dom: GanttDomService ) {} - private computeTodayPoint() { + computeTodayPoint() { const x = this.view.getTodayXPoint(); if (isNumber(x)) { this.todayPoint = { x, y: this.dom.root.clientHeight, - angle: [`${x - 6},0`, `${x + 5},0`, `${x},5`].join(' '), + angle: [`${x - 6},${headerHeight}`, `${x + 5},${headerHeight}`, `${x},${headerHeight + 5}`].join(' '), text: new GanttDate().format('MM月d日') }; } @@ -65,7 +65,7 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy { this.dom .getResize() - .pipe(takeUntil(this.unsubscribe$)) + .pipe(delay(10), takeUntil(this.unsubscribe$)) .subscribe(() => { this.todayPoint.y = this.dom.root.clientHeight; this.cdr.detectChanges(); diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts index ed9d9d97..7d39be6c 100644 --- a/packages/gantt/src/gantt-upper.ts +++ b/packages/gantt/src/gantt-upper.ts @@ -8,7 +8,8 @@ import { HostBinding, ChangeDetectorRef, NgZone, - SimpleChanges + SimpleChanges, + ViewChild } from '@angular/core'; import { GanttItem, @@ -27,6 +28,7 @@ import { GanttDomService, ScrollDirection } from './gantt-dom.service'; import { takeUntil, take } from 'rxjs/operators'; import { GanttDragContainer } from './gantt-drag-container'; import { Subject } from 'rxjs'; +import { GanttCalendarComponent } from './components/calendar/calendar.component'; export abstract class GanttUpper { @Input('items') originItems: GanttItem[] = []; @@ -57,6 +59,8 @@ export abstract class GanttUpper { @ContentChild('group', { static: true }) groupTemplate: TemplateRef; + @ViewChild(GanttCalendarComponent, { static: false }) calendar: GanttCalendarComponent; + public view: GanttView; public items: GanttItemInternal[] = []; @@ -123,11 +127,12 @@ export abstract class GanttUpper { if (changes.viewType && changes.viewType.currentValue) { this.createView(); this.computeRefs(); + this.calendar.computeTodayPoint(); this.onStable().subscribe(() => { this.scrollToToday(); }); } - if (changes.items && changes.groups) { + if (changes.originItems || changes.originGroups) { this.setupGroups(); this.setupItems(); this.computeRefs(); @@ -150,10 +155,12 @@ export abstract class GanttUpper { } private setupGroups() { + const collapsedIds = this.groups.filter((group) => !group.expand).map((group) => group.id); this.groupsMap = {}; this.groups = []; this.originGroups.forEach((origin) => { const group = new GanttGroupInternal(origin); + group.expand = !collapsedIds.includes(group.id); this.groupsMap[group.id] = group; this.groups.push(group); });