Skip to content

Commit

Permalink
fix: disable drag scroll (#337)
Browse files Browse the repository at this point in the history 
* fix: disable drag scroll

* fix: remove table column classList
  • Loading branch information
@HandsomeButterball
HandsomeButterball authored Mar 27, 2023
1 parent 5953b58 commit 75d49ec
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 69 deletions.
135 changes: 68 additions & 67 deletions packages/gantt/src/components/bar/bar-drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,38 +133,38 @@ export class GanttBarDrag implements OnDestroy {
dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement);
dragRef.started.subscribe(() => {
this.setDraggingStyles();
this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
this.createDragScrollEvent(dragRef).subscribe(() => {
if (dragRef.isDragging()) {
const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
this.dragScrollDistance = dragScrollDistance;
this.barDragMove();
}
});
// this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
// this.createDragScrollEvent(dragRef).subscribe(() => {
// if (dragRef.isDragging()) {
// const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
// this.dragScrollDistance = dragScrollDistance;
// this.barDragMove();
// }
// });
this.dragContainer.dragStarted.emit({ item: this.item.origin });
});

dragRef.moved.subscribe((event) => {
this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
// this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
this.barDragMoveDistance = event.distance.x;
if (!this.dragScrolling) {
this.barDragMove();
}
});

dragRef.ended.subscribe((event) => {
this.clearDraggingStyles();
this.closeDragBackdrop();
event.source.reset();
// this.stopScrolling();
// this.dragScrolling = false;
// this.dragScrollDistance = 0;
this.barDragMoveDistance = 0;
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();
this.stopScrolling();
this.dragScrolling = false;
this.dragScrollDistance = 0;
this.barDragMoveDistance = 0;
this.dragContainer.dragEnded.emit({ item: this.item.origin });
});
this.barDragRef = dragRef;
Expand All @@ -183,19 +183,19 @@ export class GanttBarDrag implements OnDestroy {

dragRef.started.subscribe(() => {
this.setDraggingStyles();
this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
this.createDragScrollEvent(dragRef).subscribe(() => {
if (dragRef.isDragging()) {
const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
this.dragScrollDistance = dragScrollDistance;
this.barHandleDragMove(isBefore);
}
});
// this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
// this.createDragScrollEvent(dragRef).subscribe(() => {
// if (dragRef.isDragging()) {
// const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
// this.dragScrollDistance = dragScrollDistance;
// this.barHandleDragMove(isBefore);
// }
// });
this.dragContainer.dragStarted.emit({ item: this.item.origin });
});

dragRef.moved.subscribe((event) => {
this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
// this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
this.barHandleDragMoveDistance = event.distance.x;
if (!this.dragScrolling) {
this.barHandleDragMove(isBefore);
Expand All @@ -214,18 +214,19 @@ export class GanttBarDrag implements OnDestroy {
this.item.updateDate(this.item.start, this.item.start.endOfDay());
}
}

this.clearDraggingStyles();
this.closeDragBackdrop();
event.source.reset();
// this.stopScrolling();
// this.dragScrolling = false;
// this.dragScrollDistance = 0;
this.barHandleDragMoveDistance = 0;
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();
this.stopScrolling();
this.dragScrolling = false;
this.dragScrollDistance = 0;
this.barHandleDragMoveDistance = 0;
this.dragContainer.dragEnded.emit({ item: this.item.origin });
});
dragRefs.push(dragRef);
Expand Down Expand Up @@ -299,7 +300,7 @@ export class GanttBarDrag implements OnDestroy {
const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
const rootRect = this.dom.root.getBoundingClientRect();
const dragRect = dragElement.getBoundingClientRect();
const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
const left = dragRect.left - rootRect.left - (this.dom.side.clientWidth + 1);
const width = dragRect.right - dragRect.left;
// Note: updating styles will cause re-layout so we have to place them consistently one by one.
dragMaskElement.style.left = left + 'px';
Expand Down Expand Up @@ -420,39 +421,39 @@ export class GanttBarDrag implements OnDestroy {
}
}

private startScrollInterval = () => {
this.stopScrolling();
interval(0, animationFrameScheduler)
.pipe(takeUntil(this.stopScrollTimers$))
.subscribe(() => {
const node = this.dom.mainContainer;
const scrollStep = autoScrollStep;
if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {
node.scrollBy(-scrollStep, 0);
} else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {
node.scrollBy(scrollStep, 0);
}
});
};

private startScrollingIfNecessary(pointerX: number, pointerY: number) {
const clientRect = this.dom.mainContainer.getBoundingClientRect();
if (isPointerNearClientRect(clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
const horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
if (horizontalScrollDirection) {
this._horizontalScrollDirection = horizontalScrollDirection;
this.dragScrolling = true;
this._ngZone.runOutsideAngular(this.startScrollInterval);
} else {
this.dragScrolling = false;
this.stopScrolling();
}
}
}

private stopScrolling() {
this.stopScrollTimers$.next();
}
// private startScrollInterval = () => {
// this.stopScrolling();
// interval(0, animationFrameScheduler)
// .pipe(takeUntil(this.stopScrollTimers$))
// .subscribe(() => {
// const node = this.dom.mainContainer;
// const scrollStep = autoScrollStep;
// if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {
// node.scrollBy(-scrollStep, 0);
// } else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {
// node.scrollBy(scrollStep, 0);
// }
// });
// };

// private startScrollingIfNecessary(pointerX: number, pointerY: number) {
// const clientRect = this.dom.mainContainer.getBoundingClientRect();
// if (isPointerNearClientRect(clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
// const horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
// if (horizontalScrollDirection) {
// this._horizontalScrollDirection = horizontalScrollDirection;
// this.dragScrolling = true;
// this._ngZone.runOutsideAngular(this.startScrollInterval);
// } else {
// this.dragScrolling = false;
// this.stopScrolling();
// }
// }
// }

// private stopScrolling() {
// this.stopScrollTimers$.next();
// }

private isStartOrEndInsideView(start: GanttDate, end: GanttDate) {
const itemStart = start.getUnixTime();
Expand Down Expand Up @@ -496,7 +497,7 @@ export class GanttBarDrag implements OnDestroy {
this.dragRefs.forEach((dragRef) => dragRef.dispose());
this.destroy$.next();
this.destroy$.complete();
this.stopScrolling();
// this.stopScrolling();
this.stopScrollTimers$.complete();
}
}
2 changes: 1 addition & 1 deletion packages/gantt/src/components/table/body/gantt-table-body.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
[ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"
></ng-template>

<div [classList]="column.classList" *ngFor="let column of columns; let first = first" [style.width]="column.columnWidth">
<div class="gantt-table-column" *ngFor="let column of columns; let first = first" [style.width]="column.columnWidth">
<!-- drag icon -->
<gantt-icon
*ngIf="first && draggable"
Expand Down
2 changes: 1 addition & 1 deletion packages/gantt/src/components/table/body/gantt-table-body.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
this.columns.changes.pipe(startWith(this.columns), takeUntil(this.destroy$)).subscribe(() => {
this.hasExpandIcon = false;
this.columns.forEach((column) => {
column.classList.add('gantt-table-column');
// column.classList.add('gantt-table-column');
if (!column.columnWidth) {
column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
}
Expand Down

0 comments on commit 75d49ec

Please sign in to comment.