fix: fix today line compute and group state sync bug (#23)

worktile · Jun 6, 2020 · 641ac49 · 641ac49
1 parent a031c2c
commit 641ac49
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 15 deletions.
diff --git 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
@@ -1,5 +1,30 @@
+<div class="header">
+  <div class="header-section">
+    <span class="header-section-title">视图：</span>
+    <span class="header-section-content">
+      <input id="day" type="radio" value="day" name="view-type" [(ngModel)]="options.viewType" /> <label for="day">日</label>
+      <input id="month" type="radio" value="month" name="view-type" [(ngModel)]="options.viewType" /> <label for="month">月</label>
+      <input id="quarter" type="radio" value="quarter" name="view-type" [(ngModel)]="options.viewType" /> <label for="quarter">季度</label>
+    </span>
+  </div>
+  <div class="header-section">
+    <span class="header-section-title">是否可拖拽：</span>
+    <span class="header-section-content">
+      <input type="checkbox" [(ngModel)]="options.draggable" />
+    </span>
+  </div>
+</div>
 <div class="content">
-  <ngx-gantt start="1514736000" end="1609430400" [items]="items" [groups]="groups" [draggable]="true" (barClick)="barClick($event)">
+  <ngx-gantt
+    start="1514736000"
+    end="1609430400"
+    [items]="items"
+    [groups]="groups"
+    [viewType]="options.viewType"
+    [draggable]="options.draggable"
+    (barClick)="barClick($event)"
+    (dragEnded)="dragEnded($event)"
+  >
     <ngx-gantt-table>
       <ngx-gantt-column name="标题">
         <ng-template #cell let-item>

diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -2,7 +2,7 @@
   <svg [attr.width]="view.width" height="1">
     <g>
       <polygon class="today-line-angle" [attr.points]="todayPoint.angle" />
-      <line [attr.x1]="todayPoint.x" [attr.x2]="todayPoint.x" [attr.y1]="0" [attr.y2]="todayPoint.y" class="today-line"></line>
+      <line [attr.x1]="todayPoint.x" [attr.x2]="todayPoint.x" [attr.y1]="headerHeight" [attr.y2]="todayPoint.y" class="today-line"></line>
     </g>
   </svg>
 </div>

diff --git 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
@@ -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<any>;
 
+    @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);
         });