From b5d006d1f2ccc10e565322637801e83ac3d7b0bf Mon Sep 17 00:00:00 2001 From: luxiaobei Date: Tue, 22 Oct 2024 10:19:19 +0800 Subject: [PATCH] fix: reset draggable or linkable when modify item.draggable or item.linkable #TINFR-806 --- example/src/app/gantt/gantt.component.ts | 13 +- packages/gantt/src/components/bar/bar-drag.ts | 232 ++++++++++-------- .../gantt/src/components/bar/bar.component.ts | 2 +- .../src/components/bar/test/bar.drag.spec.ts | 54 +++- 4 files changed, 200 insertions(+), 101 deletions(-) diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts index 7ce9c14d..d3a6782c 100644 --- a/example/src/app/gantt/gantt.component.ts +++ b/example/src/app/gantt/gantt.component.ts @@ -67,10 +67,10 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit { loading = false; items: GanttItem[] = [ - { id: '000000', title: 'Task 0', start: 1627729997, end: 1627769997 }, + { id: '000000', title: 'Task 0', start: 1627729997, end: 1627769997, draggable: false, linkable: false }, // { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '000000'], }, - { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '0000029'] }, - { id: '000002', title: 'Task 2', start: 1610536397, end: 1610622797, progress: 0.5 }, + { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '0000029'], draggable: false }, + { id: '000002', title: 'Task 2', start: 1617361997, end: 1625483597, progress: 0.5, linkable: false }, { id: '000003', title: 'Task 3 (不可拖动)', start: 1628507597, end: 1633345997, itemDraggable: false }, { id: '000004', title: 'Task 4', start: 1624705997 }, { id: '000005', title: 'Task 5', start: 1628075597, end: 1629544397, color: '#709dc1' }, @@ -134,6 +134,13 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit { } }); + setTimeout(() => { + this.items[0] = { ...this.items[0], draggable: true, linkable: true }; + this.items[1] = { ...this.items[1], draggable: true, linkable: false }; + this.items[2] = { ...this.items[2], draggable: false, linkable: true }; + this.items = [...this.items]; + }, 5000); + console.log(this.items); } diff --git a/packages/gantt/src/components/bar/bar-drag.ts b/packages/gantt/src/components/bar/bar-drag.ts index b9e25709..192aeba0 100644 --- a/packages/gantt/src/components/bar/bar-drag.ts +++ b/packages/gantt/src/components/bar/bar-drag.ts @@ -1,5 +1,5 @@ import { DragDrop, DragRef } from '@angular/cdk/drag-drop'; -import { ElementRef, Injectable, NgZone, OnDestroy } from '@angular/core'; +import { effect, ElementRef, Injectable, NgZone, OnDestroy, signal, WritableSignal } from '@angular/core'; import { Subject, animationFrameScheduler, fromEvent, interval } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { GanttViewType } from '../../class'; @@ -41,14 +41,16 @@ export class GanttBarDrag implements OnDestroy { private barElement: HTMLElement; - private item: GanttItemInternal; + private item: WritableSignal = signal(null); + + private hasMonitorMouseEvent: boolean; private get dragDisabled() { - return !this.item.draggable || !this.ganttUpper.draggable; + return !this.item().draggable || !this.ganttUpper.draggable; } private get linkDragDisabled() { - return !this.item.linkable || !this.ganttUpper.linkable; + return !this.item().linkable || !this.ganttUpper.linkable; } private get barHandleDragMoveAndScrollDistance() { @@ -63,7 +65,9 @@ export class GanttBarDrag implements OnDestroy { private barDragRef: DragRef; - private dragRefs: DragRef[] = []; + private linkDragRefs: DragRef[] = []; + + private barHandleDragRefs: DragRef[] = []; private destroy$ = new Subject(); @@ -99,7 +103,14 @@ export class GanttBarDrag implements OnDestroy { private dom: GanttDomService, private dragContainer: GanttDragContainer, private _ngZone: NgZone - ) {} + ) { + effect(() => { + const item: GanttItemInternal = this.item(); + if (item) { + this.createDrags(); + } + }); + } private createDragRef(element: ElementRef | HTMLElement): DragRef { const dragRef = this.dragDrop.createDrag(element); @@ -111,42 +122,48 @@ export class GanttBarDrag implements OnDestroy { } private createMouseEvents() { - const dropClass = - this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 && - this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs - ? singleDropActiveClass - : dropActiveClass; - - fromEvent(this.barElement, 'mouseenter', passiveListenerOptions) - .pipe(takeUntil(this.destroy$)) - .subscribe(() => { - if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) { - if (this.item.linkable) { - this.barElement.classList.add(dropClass); - this.dragContainer.emitLinkDragEntered({ - item: this.item, - element: this.barElement - }); + if (!this.hasMonitorMouseEvent && (!this.dragDisabled || !this.linkDragDisabled)) { + this.hasMonitorMouseEvent = true; + const dropClass = + this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 && + this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs + ? singleDropActiveClass + : dropActiveClass; + + fromEvent(this.barElement, 'mouseenter', passiveListenerOptions) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item().id) { + if (!this.linkDragDisabled) { + this.barElement.classList.add(dropClass); + this.dragContainer.emitLinkDragEntered({ + item: this.item(), + element: this.barElement + }); + } + } else { + if (!this.dragDisabled || !this.linkDragDisabled) { + this.barElement.classList.add(activeClass); + } } - } else { - this.barElement.classList.add(activeClass); - } - }); + }); - fromEvent(this.barElement, 'mouseleave', passiveListenerOptions) - .pipe(takeUntil(this.destroy$)) - .subscribe(() => { - if (!this.dragContainer.linkDraggingId) { - this.barElement.classList.remove(activeClass); - } else { - this.dragContainer.emitLinkDragLeaved(); - } - this.barElement.classList.remove(dropClass); - }); + fromEvent(this.barElement, 'mouseleave', passiveListenerOptions) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + if (!this.dragContainer.linkDraggingId) { + this.barElement.classList.remove(activeClass); + } else { + this.dragContainer.emitLinkDragLeaved(); + } + this.barElement.classList.remove(dropClass); + }); + } } private createBarDrag() { const dragRef = this.createDragRef(this.barElement); + dragRef.disabled = this.dragDisabled; dragRef.lockAxis = 'x'; dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement); dragRef.started.subscribe(() => { @@ -160,7 +177,7 @@ export class GanttBarDrag implements OnDestroy { this.barDragMove(); } }); - this.dragContainer.dragStarted.emit({ item: this.item.origin }); + this.dragContainer.dragStarted.emit({ item: this.item().origin }); }); dragRef.moved.subscribe((event) => { @@ -179,14 +196,13 @@ export class GanttBarDrag implements OnDestroy { this.dragScrolling = false; this.dragScrollDistance = 0; this.barDragMoveDistance = 0; - this.item.updateRefs({ - width: this.ganttUpper.view.getDateRangeWidth(this.item.start, this.item.end), - x: this.ganttUpper.view.getXPointByDate(this.item.start), + this.item().updateRefs({ + width: this.ganttUpper.view.getDateRangeWidth(this.item().start, this.item().end), + x: this.ganttUpper.view.getXPointByDate(this.item().start), y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1 }); - this.dragContainer.dragEnded.emit({ item: this.item.origin }); + this.dragContainer.dragEnded.emit({ item: this.item().origin }); }); - this.barDragRef = dragRef; return dragRef; } @@ -197,6 +213,7 @@ export class GanttBarDrag implements OnDestroy { handles.forEach((handle, index) => { const isBefore = index === 0; const dragRef = this.createDragRef(handle); + dragRef.disabled = this.dragDisabled; dragRef.lockAxis = 'x'; dragRef.withBoundaryElement(this.dom.mainItems as HTMLElement); dragRef.started.subscribe(() => { @@ -220,7 +237,7 @@ export class GanttBarDrag implements OnDestroy { } } }); - this.dragContainer.dragStarted.emit({ item: this.item.origin }); + this.dragContainer.dragStarted.emit({ item: this.item().origin }); }); dragRef.moved.subscribe((event) => { @@ -245,12 +262,12 @@ export class GanttBarDrag implements OnDestroy { this.dragScrolling = false; this.dragScrollDistance = 0; this.barHandleDragMoveDistance = 0; - this.item.updateRefs({ - width: this.ganttUpper.view.getDateRangeWidth(this.item.start, this.item.end), - x: this.ganttUpper.view.getXPointByDate(this.item.start), + this.item().updateRefs({ + width: this.ganttUpper.view.getDateRangeWidth(this.item().start, this.item().end), + x: this.ganttUpper.view.getXPointByDate(this.item().start), y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1 }); - this.dragContainer.dragEnded.emit({ item: this.item.origin }); + this.dragContainer.dragEnded.emit({ item: this.item().origin }); }); dragRefs.push(dragRef); }); @@ -263,6 +280,7 @@ export class GanttBarDrag implements OnDestroy { handles.forEach((handle, index) => { const isBegin = index === 0; const dragRef = this.dragDrop.createDrag(handle); + dragRef.disabled = this.linkDragDisabled; dragRef.withBoundaryElement(this.dom.root as HTMLElement); dragRef.beforeStarted.subscribe(() => { handle.style.pointerEvents = 'none'; @@ -272,7 +290,7 @@ export class GanttBarDrag implements OnDestroy { this.createLinkDraggingLine(); this.dragContainer.emitLinkDragStarted({ element: this.barElement, - item: this.item, + item: this.item(), pos: isBegin ? InBarPosition.start : InBarPosition.finish }); }); @@ -357,11 +375,11 @@ export class GanttBarDrag implements OnDestroy { } private barDragMove() { - const currentX = this.item.refs.x + this.barDragMoveDistance + this.dragScrollDistance; + const currentX = this.item().refs.x + this.barDragMoveDistance + this.dragScrollDistance; const currentDate = this.ganttUpper.view.getDateByXPoint(currentX); const currentStartX = this.ganttUpper.view.getXPointByDate(currentDate); - const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item.end, this.item.start); + const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item().end, this.item().start); let start = currentDate; let end = currentDate.add(diffs, this.ganttUpper.view?.options?.datePrecisionUnit); @@ -383,66 +401,66 @@ export class GanttBarDrag implements OnDestroy { this.openDragBackdrop( this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), - this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width) + this.ganttUpper.view.getDateByXPoint(currentX + this.item().refs.width) ); if (!this.isStartOrEndInsideView(start, end)) { return; } this.updateItemDate(start, end); - this.dragContainer.dragMoved.emit({ item: this.item.origin }); + this.dragContainer.dragMoved.emit({ item: this.item().origin }); } private barBeforeHandleDragMove() { const { x, start, minRangeWidthWidth } = this.startOfBarHandle(); - const width = this.item.refs.width + this.barHandleDragMoveAndScrollDistance * -1; - const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item.end, start); + const width = this.item().refs.width + this.barHandleDragMoveAndScrollDistance * -1; + const diffs = this.ganttUpper.view.differenceByPrecisionUnit(this.item().end, start); if (width > dragMinWidth && diffs > 0) { this.barElement.style.width = width + 'px'; this.barElement.style.left = x + 'px'; - this.openDragBackdrop(this.barElement, start, this.item.end); + this.openDragBackdrop(this.barElement, start, this.item().end); - if (!this.isStartOrEndInsideView(start, this.item.end)) { + if (!this.isStartOrEndInsideView(start, this.item().end)) { return; } - this.updateItemDate(start, this.item.end); + this.updateItemDate(start, this.item().end); } else { if (this.barHandleDragMoveRecordDiffs > 0 && diffs <= 0) { this.barElement.style.width = minRangeWidthWidth + 'px'; - const x = this.ganttUpper.view.getXPointByDate(this.item.end); + const x = this.ganttUpper.view.getXPointByDate(this.item().end); this.barElement.style.left = x + 'px'; } - this.openDragBackdrop(this.barElement, this.item.end, this.item.end); - this.updateItemDate(this.item.end, this.item.end); + this.openDragBackdrop(this.barElement, this.item().end, this.item().end); + this.updateItemDate(this.item().end, this.item().end); } this.barHandleDragMoveRecordDiffs = diffs; - this.dragContainer.dragMoved.emit({ item: this.item.origin }); + this.dragContainer.dragMoved.emit({ item: this.item().origin }); } private barAfterHandleDragMove() { const { width, end } = this.endOfBarHandle(); - const diffs = this.ganttUpper.view.differenceByPrecisionUnit(end, this.item.start); + const diffs = this.ganttUpper.view.differenceByPrecisionUnit(end, this.item().start); if (width > dragMinWidth && diffs > 0) { this.barElement.style.width = width + 'px'; - this.openDragBackdrop(this.barElement, this.item.start, end); - if (!this.isStartOrEndInsideView(this.item.start, end)) { + this.openDragBackdrop(this.barElement, this.item().start, end); + if (!this.isStartOrEndInsideView(this.item().start, end)) { return; } - this.updateItemDate(this.item.start, end); + this.updateItemDate(this.item().start, end); } else { if (this.barHandleDragMoveRecordDiffs > 0 && diffs <= 0) { - const minRangeWidth = this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item.start); + const minRangeWidth = this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item().start); this.barElement.style.width = minRangeWidth + 'px'; } - this.openDragBackdrop(this.barElement, this.item.start, this.item.start); - this.updateItemDate(this.item.start, this.item.start); + this.openDragBackdrop(this.barElement, this.item().start, this.item().start); + this.updateItemDate(this.item().start, this.item().start); } this.barHandleDragMoveRecordDiffs = diffs; - this.dragContainer.dragMoved.emit({ item: this.item.origin }); + this.dragContainer.dragMoved.emit({ item: this.item().origin }); } private calcLinkLinePositions(target: HTMLElement, isBefore: boolean) { @@ -523,15 +541,15 @@ export class GanttBarDrag implements OnDestroy { if (isBefore) { const { start, minRangeWidthWidth } = this.startOfBarHandle(); - const xPointerByEndDate = this.ganttUpper.view.getXPointByDate(this.item.end); + const xPointerByEndDate = this.ganttUpper.view.getXPointByDate(this.item().end); - isStartGreaterThanEnd = start.value > this.item.end.value; + isStartGreaterThanEnd = start.value > this.item().end.value; isBarAppearsInView = xPointerByEndDate + minRangeWidthWidth + xThreshold <= scrollLeft + clientWidth; } else { const { end } = this.endOfBarHandle(); - const xPointerByStartDate = this.ganttUpper.view.getXPointByDate(this.item.start); + const xPointerByStartDate = this.ganttUpper.view.getXPointByDate(this.item().start); - isStartGreaterThanEnd = end.value < this.item.start.value; + isStartGreaterThanEnd = end.value < this.item().start.value; isBarAppearsInView = scrollLeft + xThreshold <= xPointerByStartDate; } @@ -540,21 +558,21 @@ export class GanttBarDrag implements OnDestroy { // Some data information about dragging start until it is equal to or greater than end private startOfBarHandle() { - const x = this.item.refs.x + this.barHandleDragMoveAndScrollDistance; + const x = this.item().refs.x + this.barHandleDragMoveAndScrollDistance; return { x, start: this.ganttUpper.view.getDateByXPoint(x), - minRangeWidthWidth: this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item.end) + minRangeWidthWidth: this.ganttUpper.view.getMinRangeWidthByPrecisionUnit(this.item().end) }; } // Some data information about dragging end of bar handle private endOfBarHandle() { - const width = this.item.refs.width + this.barHandleDragMoveAndScrollDistance; + const width = this.item().refs.width + this.barHandleDragMoveAndScrollDistance; return { width, - end: this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width) + end: this.ganttUpper.view.getDateByXPoint(this.item().refs.x + width) }; } @@ -575,37 +593,59 @@ export class GanttBarDrag implements OnDestroy { } private updateItemDate(start: GanttDate, end: GanttDate) { - this.item.updateDate(this.ganttUpper.view.startOfPrecision(start), this.ganttUpper.view.endOfPrecision(end)); + this.item().updateDate(this.ganttUpper.view.startOfPrecision(start), this.ganttUpper.view.endOfPrecision(end)); } - createDrags(elementRef: ElementRef, item: GanttItemInternal, ganttUpper: GanttUpper) { - this.item = item; + initialize(elementRef: ElementRef, item: GanttItemInternal, ganttUpper: GanttUpper) { this.barElement = elementRef.nativeElement; - this.ganttUpper = ganttUpper; - if (this.dragDisabled && this.linkDragDisabled) { - return; - } else { - this.createMouseEvents(); - if (!this.dragDisabled) { - const dragRef = this.createBarDrag(); - const dragHandlesRefs = this.createBarHandleDrags(); - this.dragRefs.push(dragRef, ...dragHandlesRefs); - } - if (!this.linkDragDisabled) { - const linkDragRefs = this.createLinkHandleDrags(); - this.dragRefs.push(...linkDragRefs); - } + this.item.set(item); + } + + private createBarDragRef() { + if (this.barDragRef) { + this.barDragRef.disabled = this.dragDisabled; + } else if (!this.dragDisabled) { + this.barDragRef = this.createBarDrag(); } } + private createBarHandleDragRefs() { + if (this.barHandleDragRefs.length > 0) { + this.barHandleDragRefs.forEach((dragRef) => { + dragRef.disabled = this.dragDisabled; + }); + } else if (!this.dragDisabled) { + this.barHandleDragRefs = this.createBarHandleDrags(); + } + } + + private createLinkDragRefs() { + if (this.linkDragRefs.length > 0) { + this.linkDragRefs.forEach((dragRef) => { + dragRef.disabled = this.linkDragDisabled; + }); + } else if (!this.linkDragDisabled) { + this.linkDragRefs = this.createLinkHandleDrags(); + } + } + + createDrags() { + this.createMouseEvents(); + this.createBarDragRef(); + this.createBarHandleDragRefs(); + this.createLinkDragRefs(); + } + updateItem(item: GanttItemInternal) { - this.item = item; + this.item.set(item); } ngOnDestroy() { this.closeDragBackdrop(); - this.dragRefs.forEach((dragRef) => dragRef.dispose()); + this.barDragRef?.dispose(); + this.linkDragRefs?.forEach((dragRef) => dragRef.dispose()); + this.barHandleDragRefs?.forEach((dragRef) => dragRef.dispose()); this.destroy$.next(); this.destroy$.complete(); this.stopScrolling(); diff --git a/packages/gantt/src/components/bar/bar.component.ts b/packages/gantt/src/components/bar/bar.component.ts index 3bc1f3e3..08ccd86d 100644 --- a/packages/gantt/src/components/bar/bar.component.ts +++ b/packages/gantt/src/components/bar/bar.component.ts @@ -91,7 +91,7 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte // 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.drag.initialize(this.elementRef, this.item, this.ganttUpper); }); }); diff --git a/packages/gantt/src/components/bar/test/bar.drag.spec.ts b/packages/gantt/src/components/bar/test/bar.drag.spec.ts index 1f95a5ca..9a2492a1 100644 --- a/packages/gantt/src/components/bar/test/bar.drag.spec.ts +++ b/packages/gantt/src/components/bar/test/bar.drag.spec.ts @@ -36,6 +36,12 @@ const mockBarItems = [ } ]; +const mockResetBarItems = [ + { ...mockBarItems[0], draggable: false, linkable: false }, + { ...mockBarItems[1], linkable: false }, + { ...mockBarItems[2], draggable: false } +]; + @Component({ selector: 'test-gantt-bar', template: ` { }); it('should active when mouse enter bar', () => { + fixture.detectChanges(); const barElement = fixture.debugElement.query(By.directive(NgxGanttBarComponent)).nativeElement; dispatchMouseEvent(barElement, 'mouseenter'); expect(barElement.classList).toContain(activeClass); @@ -165,7 +172,25 @@ describe('bar-drag', () => { expect(barElement.classList).not.toContain(activeClass); }); + it('should has correct style when reset draggable or linkable to false of item', async () => { + ganttComponentInstance.items = [...mockResetBarItems]; + fixture.detectChanges(); + const barElements = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent)); + dispatchMouseEvent(barElements[0].nativeElement, 'mouseenter'); + expect(barElements[0].nativeElement.classList).not.toContain(activeClass); + dispatchMouseEvent(barElements[1].nativeElement, 'mouseenter'); + expect(barElements[1].nativeElement.classList).toContain(activeClass); + dispatchMouseEvent(barElements[2].nativeElement, 'mouseenter'); + expect(barElements[2].nativeElement.classList).toContain(activeClass); + + ganttComponentInstance.items = [...mockBarItems]; + fixture.detectChanges(); + dispatchMouseEvent(barElements[2].nativeElement, 'mouseenter'); + expect(barElements[2].nativeElement.classList).toContain(activeClass); + }); + it('should bar drag', fakeAsync(() => { + fixture.detectChanges(); const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0]; dragEvent(fixture, bar.nativeElement); tick(200); @@ -173,7 +198,31 @@ describe('bar-drag', () => { expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-06-26 23:59:59').getUnixTime()); })); + it('should reset dragRef.disable when reset items', async () => { + ganttComponentInstance.items = [...mockResetBarItems]; + fixture.detectChanges(); + let bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0]; + expect(bar.componentInstance.drag.barDragRef.disabled).toEqual(true); + bar.componentInstance.drag.barHandleDragRefs.forEach((dragRef) => { + expect(dragRef.disabled).toEqual(true); + }); + bar.componentInstance.drag.linkDragRefs.forEach((dragRef) => { + expect(dragRef.disabled).toEqual(true); + }); + + ganttComponentInstance.items = [...mockBarItems]; + fixture.detectChanges(); + expect(bar.componentInstance.drag.barDragRef.disabled).toEqual(false); + bar.componentInstance.drag.barHandleDragRefs.forEach((dragRef) => { + expect(dragRef.disabled).toEqual(false); + }); + bar.componentInstance.drag.linkDragRefs.forEach((dragRef) => { + expect(dragRef.disabled).toEqual(false); + }); + }); + it('should first bar handle drag', fakeAsync(() => { + fixture.detectChanges(); const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1]; const firstHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[0].nativeElement; dragEvent(fixture, firstHandleElement, bar.nativeElement); @@ -182,6 +231,7 @@ describe('bar-drag', () => { })); it('should last bar handles drag', fakeAsync(() => { + fixture.detectChanges(); const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1]; const lastHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[1].nativeElement; dragEvent(fixture, lastHandleElement, bar.nativeElement); @@ -190,12 +240,14 @@ describe('bar-drag', () => { })); it('should first bar link handle drag', () => { + fixture.detectChanges(); const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2]; const firstHandleElement = bar.queryAll(By.css('.link-handles .handle'))[0].nativeElement; linkDragEvent(fixture, firstHandleElement); }); it('should last bar link handles drag', () => { + fixture.detectChanges(); const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2]; const lastHandleElement = bar.queryAll(By.css('.link-handles .handle'))[1].nativeElement; linkDragEvent(fixture, lastHandleElement);