Skip to content

Commit

Permalink
feat(Library): Use NgZone for Vis-timeline
Browse files Browse the repository at this point in the history
should fix #388

because vis-timeline uses setTimeout as well as setInterval Angular
ChangeDetection will be triggered regularly. This causes
performance issues. Running the timeline outside of the zone
will not trigger the ChangeDetection all the time.

Might cause some breaking changes so this needs further testing.
  • Loading branch information
joostme authored and hypery2k committed Apr 20, 2020
1 parent 7431432 commit 796de1c
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 4 deletions.
5 changes: 4 additions & 1 deletion components/timeline/vis-timeline.service.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import { VisTimelineService } from './vis-timeline.service';

describe('VisTimelineService Tests', () => {
let visTimelineService: VisTimelineService;
const ngZoneMock: any = {
runOutsideAngular: (fn: () => void) => fn()
};

beforeEach(() => {
visTimelineService = new VisTimelineService();
visTimelineService = new VisTimelineService(ngZoneMock);
});

it('throws no error when the network does not exist', () => {
Expand Down
10 changes: 7 additions & 3 deletions components/timeline/vis-timeline.service.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { EventEmitter, Injectable } from '@angular/core';
import { EventEmitter, Injectable, NgZone } from '@angular/core';
import {
DataGroupCollectionType,
DataItemCollectionType,
Expand Down Expand Up @@ -133,6 +133,10 @@ export class VisTimelineService {

private timelines: { [id: string]: Timeline } = {};

constructor(
private ngZone: NgZone
) { }

/**
* Creates a new timeline instance.
*
Expand All @@ -150,7 +154,7 @@ export class VisTimelineService {
throw new Error(this.alreadyExistsError(visTimeline));
}

this.timelines[visTimeline] = new Timeline(container, items, options);
this.timelines[visTimeline] = this.ngZone.runOutsideAngular(() => new Timeline(container, items, options));
}

/**
Expand All @@ -177,7 +181,7 @@ export class VisTimelineService {
throw new Error(this.alreadyExistsError(visTimeline));
}

this.timelines[visTimeline] = new Timeline(container, items, groups, options);
this.timelines[visTimeline] = this.ngZone.runOutsideAngular(() => new Timeline(container, items, groups, options));
}

/**
Expand Down

0 comments on commit 796de1c

Please sign in to comment.