Completely disable MouseWheelDirective if not needed

projects/swimlane/ngx-graph/src/lib/graph/graph.component.html

@@ -5,7 +5,7 @@
   [@.disabled]="!animations"
   (mouseWheelUp)="onZoom($event, 'in')"
   (mouseWheelDown)="onZoom($event, 'out')"
-  mouseWheel
+  [mouseWheelEnabled]="enableZoom || enableTrackpadSupport"
 >
   <svg:svg class="ngx-charts" [attr.width]="width" [attr.height]="height">
     <svg:g

projects/swimlane/ngx-graph/src/lib/graph/graph.component.spec.ts

@@ -0,0 +1,57 @@
+import { GraphComponent } from '@swimlane/ngx-graph';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LayoutService } from '@swimlane/ngx-graph/lib/graph/layouts/layout.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('GraphComponent', () => {
+  let fixture: ComponentFixture<GraphComponent>;
+  let component: GraphComponent;
+  let aMouseWheelEvent: WheelEvent;
+
+  beforeEach(() => {
+    (window as any).event = null;
+    aMouseWheelEvent = {
+      deltaY: 5,
+      preventDefault: () => null
+    } as WheelEvent;
+
+    TestBed.configureTestingModule({
+      providers: [LayoutService, NoopAnimationsModule],
+      imports: [NoopAnimationsModule]
+    });
+    fixture = TestBed.createComponent(GraphComponent);
+
+    component = fixture.componentInstance;
+    component.enableZoom = false;
+    component.enableTrackpadSupport = false;
+  });
+
+  it('disables mouseWheel directive, if neither zoom nor trackpad is enabled', () => {
+    spyOn(component, 'onZoom');
+    spyOn(aMouseWheelEvent, 'preventDefault');
+
+    triggerMouseWheelEvent();
+
+    expect(component.onZoom).not.toHaveBeenCalled();
+    expect(aMouseWheelEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+  ['enableZoom', 'enableTrackpadSupport'].forEach(propertyName =>
+    it(`enables mouseWheel directive, if ${propertyName} is true`, () => {
+      component[propertyName] = true;
+      spyOn(component, 'onZoom');
+      spyOn(aMouseWheelEvent, 'preventDefault');
+
+      triggerMouseWheelEvent();
+
+      expect(component.onZoom).toHaveBeenCalled();
+      expect(aMouseWheelEvent.preventDefault).toHaveBeenCalled();
+    })
+  );
+
+  function triggerMouseWheelEvent() {
+    fixture.detectChanges();
+    fixture.debugElement.children[0].triggerEventHandler('onmousewheel', aMouseWheelEvent);
+    fixture.detectChanges();
+  }
+});

projects/swimlane/ngx-graph/src/lib/graph/mouse-wheel.directive.spec.ts

@@ -0,0 +1,44 @@
+import { MouseWheelDirective } from '@swimlane/ngx-graph';
+
+describe('MouseWheelDirective', () => {
+  let eventMock: WheelEvent;
+
+  let directive: MouseWheelDirective;
+
+  beforeEach(() => {
+    directive = new MouseWheelDirective();
+    eventMock = {
+      deltaY: 5,
+      returnValue: true,
+      preventDefault: () => null
+    } as WheelEvent;
+
+    spyOn(eventMock, 'preventDefault').and.returnValue();
+    spyOn(directive.mouseWheelUp, 'emit').and.returnValue();
+    spyOn(directive.mouseWheelDown, 'emit').and.returnValue();
+
+    (window as any).event = null;
+  });
+
+  it('should call preventDefault & emit mouseWheelDown, if mouseWheel is enabled', () => {
+    directive.mouseWheelEnabled = true;
+
+    directive.mouseWheelFunc(eventMock);
+
+    expect(eventMock.returnValue).toBe(false);
+    expect(eventMock.preventDefault).toHaveBeenCalled();
+    expect(directive.mouseWheelDown.emit).toHaveBeenCalled();
+    expect(directive.mouseWheelUp.emit).not.toHaveBeenCalled();
+  });
+
+  it('should do nothing, if mouseWheel is not enabled', () => {
+    directive.mouseWheelEnabled = false;
+
+    directive.mouseWheelFunc(eventMock);
+
+    expect(eventMock.returnValue).toBe(true);
+    expect(eventMock.preventDefault).not.toHaveBeenCalled();
+    expect(directive.mouseWheelDown.emit).not.toHaveBeenCalled();
+    expect(directive.mouseWheelUp.emit).not.toHaveBeenCalled();
+  });
+});

projects/swimlane/ngx-graph/src/lib/graph/mouse-wheel.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Output, HostListener, EventEmitter } from '@angular/core';
+import { Directive, Output, HostListener, EventEmitter, Input } from '@angular/core';
 
 /**
  * Mousewheel directive
@@ -7,12 +7,14 @@ import { Directive, Output, HostListener, EventEmitter } from '@angular/core';
  * @export
  */
 // tslint:disable-next-line: directive-selector
-@Directive({ selector: '[mouseWheel]' })
+@Directive({ selector: '[mouseWheelEnabled]' })
 export class MouseWheelDirective {
   @Output()
   mouseWheelUp = new EventEmitter();
   @Output()
   mouseWheelDown = new EventEmitter();
+  @Input()
+  mouseWheelEnabled = true;
 
   @HostListener('mousewheel', ['$event'])
   onMouseWheelChrome(event: any): void {
@@ -35,6 +37,9 @@ export class MouseWheelDirective {
   }
 
   mouseWheelFunc(event: any): void {
+    if (!this.mouseWheelEnabled) {
+      return;
+    }
     if (window.event) {
       event = window.event;
     }

src/docs/demos/components/ngx-graph-org-tree/ngx-graph-org-tree.component.html

@@ -7,7 +7,8 @@
   [nodeWidth]="150"
   [nodeHeight]="100"
   [layoutSettings]="layoutSettings"
-  [enableZoom]="true"
+  [enableZoom]="enableZoom"
+  [enableTrackpadSupport]="enableTrackpadSupport"
   [autoZoom]="true"
 >
   <ng-template #defsTemplate>

src/docs/demos/components/ngx-graph-org-tree/ngx-graph-org-tree.component.spec.ts

@@ -1,14 +1,17 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { By } from '@angular/platform-browser';
 import { NgxGraphOrgTreeComponent } from './ngx-graph-org-tree.component';
+import { NgxGraphModule } from '@swimlane/ngx-graph';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('NgxGraphOrgTreeComponent', () => {
   let component: NgxGraphOrgTreeComponent;
   let fixture: ComponentFixture<NgxGraphOrgTreeComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NgxGraphOrgTreeComponent]
+      declarations: [NgxGraphOrgTreeComponent],
+      imports: [NgxGraphModule, NoopAnimationsModule]
     }).compileComponents();
   }));
 
@@ -21,4 +24,23 @@ describe('NgxGraphOrgTreeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  [
+    [false, false, false],
+    [false, true, true],
+    [true, false, true],
+    [true, true, true]
+  ].forEach(([enableZoom, enableTrackpadSupport, shouldBeAEnabled]) => {
+    it(`mouseWheelEnabled is ${shouldBeAEnabled}, 
+          given enableZoom is ${enableZoom} 
+          and enableTrackpadSupport is ${enableTrackpadSupport}`, () => {
+      component.enableZoom = enableZoom;
+      component.enableTrackpadSupport = enableTrackpadSupport;
+
+      fixture.detectChanges();
+
+      const actual = fixture.debugElement.query(By.css('[mouseWheel]'));
+      expect(actual.nativeElement.getAttribute('ng-reflect-mouse-wheel-enabled')).toEqual(shouldBeAEnabled.toString());
+    });
+  });
 });

src/docs/demos/components/ngx-graph-org-tree/ngx-graph-org-tree.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Edge, Node, Layout } from '@swimlane/ngx-graph';
+import { Component, Input, OnInit } from '@angular/core';
+import { Edge, Layout, Node } from '@swimlane/ngx-graph';
 import { DagreNodesOnlyLayout } from './customDagreNodesOnly';
 import * as shape from 'd3-shape';
 
@@ -20,6 +20,9 @@ export class Employee {
 export class NgxGraphOrgTreeComponent implements OnInit {
   @Input() employees: Employee[] = [];
 
+  public enableZoom = true;
+  public enableTrackpadSupport = false;
+
   public nodes: Node[] = [];
   public links: Edge[] = [];
   public layoutSettings = {