fix: fix drag error (#326)

worktile · Mar 16, 2023 · f314c9b · f314c9b
1 parent 1d1f671
commit f314c9b
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 10 deletions.
diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -139,6 +139,7 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
 
     dragEnded(event: GanttDragEvent) {
         this.thyNotify.info('Event: dragEnded', `修改了 [${event.item.title}] 的时间`);
+        this.items = [...this.items];
     }
 
     selectedChange(event: GanttSelectedEvent) {

diff --git a/packages/gantt/src/components/bar/bar-drag.ts b/packages/gantt/src/components/bar/bar-drag.ts
@@ -138,6 +138,11 @@ export class GanttBarDrag implements OnDestroy {
         });
 
         dragRef.ended.subscribe((event) => {
+            this.item.updateRefs({
+                width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
+                x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
+            });
             this.clearDraggingStyles();
             this.closeDragBackdrop();
             event.source.reset();
@@ -191,6 +196,11 @@ export class GanttBarDrag implements OnDestroy {
                         this.item.updateDate(this.item.start, this.item.start.endOfDay());
                     }
                 }
+                this.item.updateRefs({
+                    width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
+                    x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                    y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
+                });
                 this.clearDraggingStyles();
                 this.closeDragBackdrop();
                 event.source.reset();
@@ -403,6 +413,10 @@ export class GanttBarDrag implements OnDestroy {
         }
     }
 
+    updateItem(item: GanttItemInternal) {
+        this.item = item;
+    }
+
     ngOnDestroy() {
         this.closeDragBackdrop();
         this.dragRefs.forEach((dragRef) => dragRef.dispose());

diff --git a/packages/gantt/src/components/bar/bar.component.ts b/packages/gantt/src/components/bar/bar.component.ts
@@ -12,7 +12,8 @@ import {
     AfterViewInit,
     ViewChildren,
     QueryList,
-    NgZone
+    NgZone,
+    SimpleChanges
 } from '@angular/core';
 import { from, fromEvent, merge, Observable } from 'rxjs';
 import { startWith, switchMap, take, takeUntil } from 'rxjs/operators';
@@ -59,6 +60,13 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
         });
     }
 
+    override ngOnChanges(changes: SimpleChanges): void {
+        super.ngOnChanges(changes);
+        if (!this.firstChange) {
+            this.drag.updateItem(this.item);
+        }
+    }
+
     ngAfterViewInit() {
         // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
         // the `onStable` will never emit any value.

diff --git a/packages/gantt/src/components/table/header/gantt-table-header.component.ts b/packages/gantt/src/components/table/header/gantt-table-header.component.ts
@@ -121,7 +121,6 @@ export class GanttTableHeaderComponent implements OnInit, OnDestroy {
         }
 
         this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
-        console.log(this.tableWidth);
         this.hideAuxiliaryLine();
         event.source.reset();
     }

diff --git a/packages/gantt/src/gantt-item-upper.ts b/packages/gantt/src/gantt-item-upper.ts
@@ -1,4 +1,4 @@
-import { Input, ElementRef, Inject, TemplateRef, Directive, OnInit, OnChanges, OnDestroy } from '@angular/core';
+import { Input, ElementRef, Inject, TemplateRef, Directive, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { GanttItemInternal, GanttItemType } from './class';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -24,12 +24,22 @@ export abstract class GanttItemUpper implements OnChanges, OnInit, OnDestroy {
         });
     }
 
-    ngOnChanges(): void {
+    ngOnChanges(changes: SimpleChanges): void {
         if (!this.firstChange) {
-            this.setPositions();
+            this.itemChange(changes.item.currentValue);
         }
     }
 
+    private itemChange(item: GanttItemInternal) {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+        this.item = item;
+        this.setPositions();
+        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
+    }
+
     private setPositions() {
         const itemElement = this.elementRef.nativeElement;
         itemElement.style.left = this.item.refs?.x + 'px';

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -334,8 +334,8 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
 
                 this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                     this.dragEnded.emit(event);
-                    this.computeRefs();
-                    this.detectChanges();
+                    // this.computeRefs();
+                    // this.detectChanges();
                 });
             });
         });

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -108,9 +108,9 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
         this.ngZone.runOutsideAngular(() => {
             onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.dragContainer.dragEnded.subscribe((event) => {
-                    this.computeTempDataRefs();
-                });
+                // this.dragContainer.dragEnded.subscribe((event) => {
+                //     this.computeTempDataRefs();
+                // });
 
                 this.dragContainer.linkDragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe((event: GanttLinkDragEvent) => {
                     this.linkDragStarted.emit(event);