Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: disable drag scroll #337

Merged
merged 2 commits into from
Mar 27, 2023
Merged

fix: disable drag scroll #337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e06678
fix: disable drag scroll
HandsomeButterball Mar 27, 2023
53fa441
fix: remove table column classList
HandsomeButterball Mar 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 68 additions & 67 deletions packages/gantt/src/components/bar/bar-drag.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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