perf: do not run change detection when bar handles are clicked

worktile · Mar 25, 2022 · 9d219cc · 9d219cc
1 parent 187f506
commit 9d219cc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/packages/gantt/src/components/bar/bar.component.html b/packages/gantt/src/components/bar/bar.component.html
@@ -1,8 +1,8 @@
 <div class="gantt-bar-layer">
   <div *ngIf="item.draggable && ganttUpper.draggable" class="drag-handles">
     <ng-container>
-      <span class="handle" (mousedown)="stopPropagation($event)"></span>
-      <span class="handle" (mousedown)="stopPropagation($event)"></span>
+      <span class="handle" #handle></span>
+      <span class="handle" #handle></span>
     </ng-container>
   </div>
   <div *ngIf="item.linkable && ganttUpper.linkable" class="link-handles">

diff --git a/packages/gantt/src/components/bar/bar.component.ts b/packages/gantt/src/components/bar/bar.component.ts
@@ -9,9 +9,13 @@ import {
     ViewChild,
     Output,
     EventEmitter,
-    AfterViewInit
+    AfterViewInit,
+    ViewChildren,
+    QueryList,
+    NgZone
 } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
+import { fromEvent, merge, Observable } from 'rxjs';
+import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { GanttBarDrag } from './bar-drag';
 import { hexToRgb } from '../../utils/helpers';
 import { GanttDragContainer } from '../../gantt-drag-container';
@@ -36,13 +40,16 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
 
     @HostBinding('class.gantt-bar') ganttItemClass = true;
 
+    @ViewChildren('handle') handles: QueryList<ElementRef<HTMLElement>>;
+
     color = 'red';
 
     constructor(
         private dragContainer: GanttDragContainer,
         private drag: GanttBarDrag,
         elementRef: ElementRef<HTMLDivElement>,
-        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper
+        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
+        private ngZone: NgZone
     ) {
         super(elementRef, ganttUpper);
     }
@@ -57,6 +64,27 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
     ngAfterViewInit() {
         this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
         this.setContentBackground();
+
+        this.handles.changes
+            .pipe(
+                startWith(this.handles),
+                switchMap(
+                    () =>
+                        // Note: we need to explicitly subscribe outside of the Angular zone since `addEventListener`
+                        // is called when the `fromEvent` is subscribed.
+                        new Observable<Event>((subscriber) =>
+                            this.ngZone.runOutsideAngular(() =>
+                                merge(...this.handles.toArray().map((handle) => fromEvent(handle.nativeElement, 'mousedown'))).subscribe(
+                                    subscriber
+                                )
+                            )
+                        )
+                ),
+                takeUntil(this.unsubscribe$)
+            )
+            .subscribe((event) => {
+                event.stopPropagation();
+            });
     }
 
     ngOnChanges(): void {
@@ -97,10 +125,6 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
         }
     }
 
-    stopPropagation(event: Event) {
-        event.stopPropagation();
-    }
-
     ngOnDestroy() {
         super.onDestroy();
     }

diff --git a/packages/gantt/src/components/bar/test/bar.drag.spec.ts b/packages/gantt/src/components/bar/test/bar.drag.spec.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, DebugElement, Directive } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
+import { ApplicationRef, Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { GanttDragEvent, GanttLinkDragEvent } from '../../../class';
 import { NgxGanttComponent } from '../../../gantt.component';
@@ -193,4 +193,16 @@ describe('bar-drag', () => {
         const lastHandleElement = bar.queryAll(By.css('.link-handles .handle'))[1].nativeElement;
         linkDragEvent(fixture, lastHandleElement);
     });
+
+    it('should not run change detection when the `mousedown` is dispatched on the handle', () => {
+        const appRef = TestBed.inject(ApplicationRef);
+        spyOn(appRef, 'tick');
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0];
+        const firstHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[0].nativeElement;
+        const event = new Event('mousedown');
+        spyOn(event, 'stopPropagation').and.callThrough();
+        firstHandleElement.dispatchEvent(event);
+        expect(appRef.tick).not.toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+    });
 });