fix: fix expanded not work when items or groups changed

worktile · Jun 28, 2020 · c57bb59 · c57bb59
1 parent 69669b4
commit c57bb59
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 5 deletions.
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -22,6 +22,7 @@
 </div>
 <div class="gantt-demo-content">
   <ngx-gantt
+    #gantt
     start="1514736000"
     end="1609430400"
     [items]="items"

diff --git a/packages/gantt/src/components/icon/icons.ts b/packages/gantt/src/components/icon/icons.ts
@@ -3,7 +3,7 @@ const angleDown = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" f
 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">
-<path fill="#888" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
+<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
     <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
 </path>
 </svg>`;

diff --git a/packages/gantt/src/components/table/gantt-table.component.scss b/packages/gantt/src/components/table/gantt-table.component.scss
@@ -84,6 +84,7 @@
         .gantt-expand-icon {
             display: inline-block;
             width: 20px;
+            color: #aaa;
         }
     }
 }
diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -30,7 +30,7 @@ import { takeUntil, take, skip } from 'rxjs/operators';
 import { GanttDragContainer } from './gantt-drag-container';
 import { Subject } from 'rxjs';
 import { GanttCalendarComponent } from './components/calendar/calendar.component';
-import { uniqBy } from './utils/helpers';
+import { uniqBy, Dictionary, flatten, recursiveItems } from './utils/helpers';
 
 export abstract class GanttUpper {
     @Input('items') originItems: GanttItem[] = [];
@@ -83,6 +83,10 @@ export abstract class GanttUpper {
 
     private groupsMap: { [key: string]: GanttGroupInternal };
 
+    private expandedItemIds: string[] = [];
+
+    private expandedChildren: Dictionary<GanttItem[]> = {};
+
     private unsubscribe$ = new Subject();
 
     @HostBinding('class.gantt') ganttClass = true;
@@ -139,6 +143,7 @@ export abstract class GanttUpper {
                 this.viewChange.emit(this.view);
             }
             if (changes.originItems || changes.originGroups) {
+                this.setupExpandedState();
                 this.setupGroups();
                 this.setupItems();
                 this.computeRefs();
@@ -161,10 +166,12 @@ export abstract class GanttUpper {
     }
 
     private setupGroups() {
+        const collapsedIds = this.groups.filter((group) => group.expanded === false).map((group) => group.id);
         this.groupsMap = {};
         this.groups = [];
         this.originGroups.forEach((origin) => {
             const group = new GanttGroupInternal(origin);
+            group.expanded = !collapsedIds.includes(group.id);
             this.groupsMap[group.id] = group;
             this.groups.push(group);
         });
@@ -173,6 +180,11 @@ export abstract class GanttUpper {
     private setupItems() {
         this.items = [];
         this.originItems = uniqBy(this.originItems, 'id');
+        // 根据上一次数据展开状态同步新的数据展开状态
+        this.originItems.forEach((item) => {
+            item.expanded = this.expandedItemIds.includes(item.id);
+            item.children = this.expandedChildren[item.id];
+        });
         if (this.groups.length > 0) {
             this.originItems.forEach((origin) => {
                 const group = this.groupsMap[origin.group_id];
@@ -189,6 +201,23 @@ export abstract class GanttUpper {
         }
     }
 
+    private setupExpandedState() {
+        let items: GanttItemInternal[] = [];
+        if (this.items.length > 0) {
+            items = recursiveItems(this.items);
+        } else {
+            items = flatten(this.groups.map((group) => recursiveItems(group.items)));
+        }
+        this.expandedItemIds = [];
+        this.expandedChildren = {};
+        items.forEach((item) => {
+            if (item.origin.expanded) {
+                this.expandedItemIds.push(item.id);
+                this.expandedChildren[item.id] = item.origin.children;
+            }
+        });
+    }
+
     private getViewDate() {
         let start = this.start;
         let end = this.end;

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -15,10 +15,9 @@ import {
     TemplateRef,
     ContentChildren,
     QueryList,
-    AfterViewInit,
-    ViewChild
+    AfterViewInit
 } from '@angular/core';
-import { startWith, takeUntil, take, finalize } from 'rxjs/operators';
+import { startWith, takeUntil, take, finalize, expand } from 'rxjs/operators';
 import { Subject, Observable } from 'rxjs';
 import { GanttUpper } from './gantt-upper';
 import { GanttRef, GANTT_REF_TOKEN } from './gantt-ref';

diff --git a/packages/gantt/src/utils/helpers.ts b/packages/gantt/src/utils/helpers.ts
@@ -8,6 +8,10 @@ export function isNumber(value: any) {
     return typeof value === 'number';
 }
 
+export function isUndefined(value: any) {
+    return value === undefined;
+}
+
 export function hexToRgb(color: string, opacity = 1) {
     if (/^#/g.test(color)) {
         return `rgba(${parseInt(color.slice(1, 3), 16)},${parseInt(color.slice(3, 5), 16)},${parseInt(color.slice(5, 7), 16)},${opacity})`;
@@ -29,6 +33,12 @@ export function uniqBy<T = unknown>(array: T[], key: keyof T) {
     return result;
 }
 
+export function flatten<T = unknown>(array: T[]) {
+    return array.reduce((pre, cur) => {
+        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
+    }, []);
+}
+
 export function recursiveItems(items: GanttItemInternal[]) {
     const result = [];
     (items || []).forEach((item) => {