add zoom in/out feature

components/timeline/vis-timeline.service.ts

@@ -8,7 +8,8 @@ import {
     VisTimelineFitOptions,
     VisTimelineGroups,
     VisTimelineItems,
-    VisTimelineOptions } from './index';
+    VisTimelineOptions,
+} from './index';
 
 /**
  * A service to create, manage and control VisTimeline instances.
@@ -129,7 +130,7 @@ export class VisTimelineService {
      */
     public timechanged: EventEmitter<any> = new EventEmitter<any>();
 
-    private timelines: {[id: string]: VisTimeline} = {};
+    private timelines: { [id: string]: VisTimeline } = {};
 
     /**
      * Creates a new timeline instance.
@@ -203,6 +204,60 @@ export class VisTimelineService {
         }
     }
 
+    /**
+     * Zoom in the window such that given time is centered on screen.
+     * @param {string} visTimeline the time name/identifier
+     * @param {number} zoomLevel percentage - must be between [0..1]
+     *
+     * @throws {Error} Thrown when timeline does not exist.
+     *
+     * @memberOf VisTimelineService
+     */
+    public zoomIn(visTimeline: string, zoomLevel: number): void {
+        if (this.timelines[visTimeline]) {
+            if (!zoomLevel || zoomLevel < 0 || zoomLevel > 1) { return; }
+
+            const tl = this.timelines[visTimeline];
+            const range = tl.getWindow();
+            const start = range.start.valueOf();
+            const end = range.end.valueOf();
+            const interval = end - start;
+            const newInterval = interval / (1 + zoomLevel);
+            const distance = (interval - newInterval) / 2;
+            const newStart = start + distance;
+            const newEnd = end - distance;
+            tl.setWindow(newStart, newEnd);
+
+        } else {
+            throw new Error(this.doesNotExistError(visTimeline));
+        }
+    }
+
+    /**
+     *  Zoom out the window such that given time is centered on screen.
+     * @param string} visTimeline the time name/identifier
+     * @param {number} zoomLevel percentage - must be between [0..1]
+     *
+     * @throws {Error} Thrown when timeline does not exist.
+     *
+     * @memberOf VisTimelineService
+     */
+    public zoomOut(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void {
+        if (this.timelines[visTimeline]) {
+            const tl = this.timelines[visTimeline];
+            const range = tl.getWindow();
+            const start = range.start.valueOf();
+            const end = range.end.valueOf();
+            const interval = end - start;
+            const newStart = start - interval * zoomLevel / 2;
+            const newEnd = end + interval * zoomLevel / 2;
+            tl.setWindow(newStart, newEnd);
+
+        } else {
+            throw new Error(this.doesNotExistError(visTimeline));
+        }
+    }
+
     /**
      * Adjust the visible window such that it fits all items.
      * See also function focus(id).
@@ -678,7 +733,7 @@ export class VisTimelineService {
      */
     public on(visTimeline: string, eventName: VisTimelineEvents, preventDefault?: boolean): boolean {
         if (this.timelines[visTimeline]) {
-            const that: {[index: string]: any} = this;
+            const that: { [index: string]: any } = this;
             this.timelines[visTimeline].on(eventName, (params: any) => {
                 const emitter = that[eventName] as EventEmitter<any>;
                 if (emitter) {

demo/timeline/timeline-example.component.ts

@@ -10,7 +10,9 @@ import { VisTimelineService, VisTimelineItems } from '../../components/timeline'
       <div [visTimeline]="visTimeline"
            [visTimelineItems]="visTimelineItems"
            (initialized)="timelineInitialized()"></div>
-      <button type="button" class="btn btn-default" (click)="addItem()">Add and focus</button>
+           <button type="button" class="btn btn-default" (click)="addItem()">Add and focus</button>
+      <button type="button" class="btn btn-default" (click)="zoomIn()">Zoom In</button>
+      <button type="button" class="btn btn-default" (click)="zoomOut()">Zoom Out</button>
       <p>
         <strong>Note:</strong> Open your dev tools to see the console output when the timeline receives click events.
       </p>
@@ -46,6 +48,14 @@ export class VisTimelineExampleComponent implements OnInit, OnDestroy {
         this.visTimelineService.focusOnIds(this.visTimeline, [1, newLength]);
     }
 
+    public zoomOut(): void {
+        this.visTimelineService.zoomOut(this.visTimeline, 0.5);
+    }
+
+    public zoomIn(): void {
+        this.visTimelineService.zoomIn(this.visTimeline, 0.5);
+    }
+
     public ngOnInit(): void {
         this.visTimelineItems = new VisTimelineItems([
             {id: 1, content: 'item 1', start: '2016-04-20'},

package.json

@@ -47,13 +47,13 @@
     "postversion": "git push origin master && git push --tags"
   },
   "dependencies": {
-    "vis": "4.17.0",
-    "@types/vis": "4.17.4"
+    "@types/vis": "4.17.4",
+    "vis": "4.17.0"
   },
   "peerDependencies": {
     "@angular/common": "^2.4.10",
-    "@angular/core": "^2.4.10",
-    "@angular/compiler": "^2.4.10"
+    "@angular/compiler": "^2.4.10",
+    "@angular/core": "^2.4.10"
   },
   "devDependencies": {
     "@angular/common": "^2.4.10",
@@ -84,6 +84,7 @@
     "gulp": "3.9.1",
     "gulp-tslint": "^7.1.0",
     "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.30.1",
     "istanbul-instrumenter-loader": "^2.0.0",
     "jasmine-core": "^2.5.2",
     "karma": "^1.5.0",