fix: fix drag to boundary error #INFR-5951 (#293)

worktile · Jan 9, 2023 · 6dfa78b · 6dfa78b
1 parent 01e8bf8
commit 6dfa78b
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/gantt/src/components/bar/bar-drag.ts b/packages/gantt/src/components/bar/bar-drag.ts
@@ -91,6 +91,7 @@ export class GanttBarDrag implements OnDestroy {
     private createBarDrag() {
         const dragRef = this.dragDrop.createDrag(this.barElement);
         dragRef.lockAxis = 'x';
+        dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
         dragRef.started.subscribe(() => {
             this.setDraggingStyles();
             this.dragContainer.dragStarted.emit({ item: this.item.origin });
@@ -109,7 +110,7 @@ export class GanttBarDrag implements OnDestroy {
                 start = start.addDays(1);
                 end = end.addDays(1);
             }
-            // this.openDragBackdrop(this.barElement, start, end);
+
             this.openDragBackdrop(
                 this.barElement,
                 this.ganttUpper.view.getDateByXPoint(currentX),
@@ -136,7 +137,7 @@ export class GanttBarDrag implements OnDestroy {
             const isBefore = index === 0;
             const dragRef = this.dragDrop.createDrag(handle);
             dragRef.lockAxis = 'x';
-            dragRef.withBoundaryElement(this.dom.root as HTMLElement);
+            dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
 
             dragRef.started.subscribe(() => {
                 this.setDraggingStyles();
@@ -147,23 +148,21 @@ export class GanttBarDrag implements OnDestroy {
                 if (isBefore) {
                     const x = this.item.refs.x + event.distance.x;
                     const width = this.item.refs.width + event.distance.x * -1;
+                    const start = this.ganttUpper.view.getDateByXPoint(x);
                     if (width > dragMinWidth) {
                         this.barElement.style.width = width + 'px';
                         this.barElement.style.left = x + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.item.end);
-                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(x), this.item.end);
+                        this.openDragBackdrop(this.barElement, start, this.item.end);
+                        this.item.updateDate(start, this.item.end);
                     }
                 } else {
                     const width = this.item.refs.width + event.distance.x;
+                    const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
                     if (width > dragMinWidth) {
                         this.barElement.style.width = width + 'px';
-                        this.openDragBackdrop(
-                            this.barElement,
-                            this.item.start,
-                            this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width)
-                        );
+                        this.openDragBackdrop(this.barElement, this.item.start, end);
+                        this.item.updateDate(this.item.start, end);
                     }
-                    this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
                 }
                 this.dragContainer.dragMoved.emit({ item: this.item.origin });
                 event.source.reset();
@@ -172,19 +171,12 @@ export class GanttBarDrag implements OnDestroy {
             dragRef.ended.subscribe((event) => {
                 if (isBefore) {
                     const width = this.item.refs.width + event.distance.x * -1;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
-                    } else {
+                    if (width <= dragMinWidth) {
                         this.item.updateDate(this.item.end.startOfDay(), this.item.end);
                     }
                 } else {
                     const width = this.item.refs.width + event.distance.x;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(
-                            this.item.start,
-                            this.ganttUpper.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x)
-                        );
-                    } else {
+                    if (width <= dragMinWidth) {
                         this.item.updateDate(this.item.start, this.item.start.endOfDay());
                     }
                 }

diff --git a/packages/gantt/src/components/bar/bar.component.ts b/packages/gantt/src/components/bar/bar.component.ts
@@ -14,8 +14,8 @@ import {
     QueryList,
     NgZone
 } from '@angular/core';
-import { fromEvent, merge, Observable } from 'rxjs';
-import { startWith, switchMap, takeUntil } from 'rxjs/operators';
+import { from, fromEvent, merge, Observable } from 'rxjs';
+import { startWith, switchMap, take, takeUntil } from 'rxjs/operators';
 import { GanttBarDrag } from './bar-drag';
 import { hexToRgb } from '../../utils/helpers';
 import { GanttDragContainer } from '../../gantt-drag-container';
@@ -60,7 +60,17 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
     }
 
     ngAfterViewInit() {
-        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
+        // the `onStable` will never emit any value.
+        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
+        // Normally this isn't in the zone, but it can cause performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this.ngZone.runOutsideAngular(() => {
+            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+            });
+        });
+
         this.setContentBackground();
 
         this.handles.changes

diff --git a/packages/gantt/src/gantt-dom.service.ts b/packages/gantt/src/gantt-dom.service.ts
@@ -30,6 +30,8 @@ export class GanttDomService implements OnDestroy {
 
     public mainContainer: Element;
 
+    public mainItems: Element;
+
     public calendarOverlay: Element;
 
     public linksOverlay: Element;
@@ -95,6 +97,7 @@ export class GanttDomService implements OnDestroy {
         this.container = this.root.getElementsByClassName('gantt-container')[0];
         this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
         this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+        this.mainItems = this.root.getElementsByClassName('gantt-main-items')[0];
         this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
         this.monitorScrollChange();
         this.disableBrowserWheelEvent();

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -174,8 +174,8 @@ export abstract class GanttView {
 
     // 根据X坐标获取对应时间
     getDateByXPoint(x: number) {
-        const indexOfSecondaryDate = Math.floor(x / this.getCellWidth());
-        const matchDate = this.secondaryDatePoints[indexOfSecondaryDate];
+        const indexOfSecondaryDate = Math.max(Math.floor(x / this.getCellWidth()), 0);
+        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
         const dayWidth = this.getDayOccupancyWidth(matchDate?.start);
         if (dayWidth === this.getCellWidth()) {
             return matchDate?.start;