From 15ac15e11ff6da82f305038d54db0bfb3ecf77a9 Mon Sep 17 00:00:00 2001 From: syntax-error Date: Fri, 12 Jan 2018 19:13:34 +0100 Subject: [PATCH 1/4] INTROduce zoom in/out feature --- components/timeline/vis-timeline.service.ts | 16 ++++++++++++++++ demo/timeline/timeline-example.component.ts | 12 +++++++++++- package.json | 9 +++++---- 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/components/timeline/vis-timeline.service.ts b/components/timeline/vis-timeline.service.ts index b7b82b7b..0abe4a80 100644 --- a/components/timeline/vis-timeline.service.ts +++ b/components/timeline/vis-timeline.service.ts @@ -203,6 +203,22 @@ export class VisTimelineService { } } + public zoomIn(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].zoomIn(zoomLevel); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } + } + + public zoomOut(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].zoomOut(zoomLevel); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } + } + /** * Adjust the visible window such that it fits all items. * See also function focus(id). diff --git a/demo/timeline/timeline-example.component.ts b/demo/timeline/timeline-example.component.ts index feec3770..69fc5770 100644 --- a/demo/timeline/timeline-example.component.ts +++ b/demo/timeline/timeline-example.component.ts @@ -10,7 +10,9 @@ import { VisTimelineService, VisTimelineItems } from '../../components/timeline'
- + + +

Note: Open your dev tools to see the console output when the timeline receives click events.

@@ -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'}, diff --git a/package.json b/package.json index d4ec6bcd..049896b5 100644 --- a/package.json +++ b/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", From d0256c3aa56d0a205d86c7f019d84db9edd48e93 Mon Sep 17 00:00:00 2001 From: syntax-error Date: Sat, 13 Jan 2018 12:27:22 +0100 Subject: [PATCH 2/4] implement zoom in/out feature directly into service instead of relying on index.d.ts --- components/timeline/vis-timeline.service.ts | 345 +++++++++++--------- 1 file changed, 183 insertions(+), 162 deletions(-) diff --git a/components/timeline/vis-timeline.service.ts b/components/timeline/vis-timeline.service.ts index 0abe4a80..0a25d227 100644 --- a/components/timeline/vis-timeline.service.ts +++ b/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 = new EventEmitter(); - private timelines: {[id: string]: VisTimeline} = {}; + private timelines: { [id: string]: VisTimeline } = {}; /** * Creates a new timeline instance. @@ -205,19 +206,39 @@ export class VisTimelineService { public zoomIn(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void { if (this.timelines[visTimeline]) { - this.timelines[visTimeline].zoomIn(zoomLevel); - } else { - throw new Error(this.doesNotExistError(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)); +} } - public zoomOut(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].zoomOut(zoomLevel); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + 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. @@ -230,13 +251,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public fit(visTimeline: string, options?: VisTimelineFitOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].fit(options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public fit(visTimeline: string, options ?: VisTimelineFitOptions): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].fit(options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Adjust the visible window such that the selected item is centered on screen. @@ -249,13 +270,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public focusOnId(visTimeline: string, id: VisId, options?: VisTimelineFitOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].focus(id, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public focusOnId(visTimeline: string, id: VisId, options ?: VisTimelineFitOptions): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].focus(id, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Adjust the visible window such that the selected items are centered on screen. @@ -268,13 +289,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public focusOnIds(visTimeline: string, ids: VisId[], options?: VisTimelineFitOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].focus(ids, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public focusOnIds(visTimeline: string, ids: VisId[], options ?: VisTimelineFitOptions): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].focus(ids, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Get the current time. @@ -288,12 +309,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getCurrentTime(visTimeline: string): Date { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getCurrentTime(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getCurrentTime(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Retrieve the custom time from the custom time bar with given id. @@ -307,13 +328,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public getCustomTime(visTimeline: string, id?: VisId): Date { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getCustomTime(id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public getCustomTime(visTimeline: string, id ?: VisId): Date { + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getCustomTime(id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Returns an Object with relevant properties from an event. @@ -327,12 +348,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getEventProperties(visTimeline: string, event: Event): VisTimelineEventPropertiesResult { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getEventProperties(event); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getEventProperties(event); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Get the range of all the items as an object containing min: Date and max: Date. @@ -345,12 +366,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getItemRange(visTimeline: string): { min: Date, max: Date } { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getItemRange(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getItemRange(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Get an array with the ids of the currently selected items. @@ -363,12 +384,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getSelection(visTimeline: string): VisId[] { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getSelection(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getSelection(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Get an array with the ids of the currently visible items. @@ -381,12 +402,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getVisibleItems(visTimeline: string): VisId[] { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getVisibleItems(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getVisibleItems(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Get the current visible window. @@ -399,12 +420,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getWindow(visTimeline: string): { start: Date, end: Date } { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getWindow(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getWindow(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Move the window such that given time is centered on screen. @@ -417,13 +438,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public moveTo(visTimeline: string, time: VisDate, options?: VisTimelineFitOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].moveTo(time, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public moveTo(visTimeline: string, time: VisDate, options ?: VisTimelineFitOptions): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].moveTo(time, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Force a redraw of the Timeline. @@ -438,12 +459,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public redraw(visTimeline: string): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].redraw(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].redraw(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Remove vertical bars previously added to the timeline via addCustomTime method. @@ -456,12 +477,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public removeCustomTime(visTimeline: string, id: VisId): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].removeCustomTime(id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].removeCustomTime(id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Set a current time. @@ -477,12 +498,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setCurrentTime(visTimeline: string, time: VisDate): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setCurrentTime(time); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setCurrentTime(time); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Adjust the time of a custom time bar. @@ -495,13 +516,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public setCustomTime(visTimeline: string, time: VisDate, id?: VisId): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setCustomTime(time, id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public setCustomTime(visTimeline: string, time: VisDate, id ?: VisId): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setCustomTime(time, id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Adjust the title attribute of a custom time bar. @@ -515,13 +536,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public setCustomTimeTitle(visTimeline: string, title: string, id?: VisId): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setCustomTimeTitle(title, id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public setCustomTimeTitle(visTimeline: string, title: string, id ?: VisId): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setCustomTimeTitle(title, id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Set both groups and items at once. @@ -540,12 +561,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setData(visTimeline: string, data: { groups?: VisTimelineGroups; items?: VisTimelineItems }): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setData(data); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setData(data); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Set a data set with groups for the Timeline. @@ -560,12 +581,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setGroups(visTimeline: string, groups: VisTimelineGroups): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setGroups(groups); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setGroups(groups); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Set a data set with items for the Timeline. @@ -578,12 +599,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setItems(visTimeline: string, items: VisTimelineItems): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setItems(items); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setItems(items); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Set or update options. @@ -598,12 +619,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setOptions(visTimeline: string, options: VisTimelineOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setOptions(options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setOptions(options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Select one item by its id.# @@ -617,12 +638,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setSelectionToId(visTimeline: string, id: VisId): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setSelection(id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setSelection(id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Select multiple items by their id. @@ -637,12 +658,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setSelectionToIds(visTimeline: string, ids: VisId[]): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setSelection(ids); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setSelection(ids); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Set the current visible window. @@ -658,13 +679,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public setWindow(visTimeline: string, start: VisDate, end: VisDate, options?: VisTimelineFitOptions): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].setWindow(start, end, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); - } + public setWindow(visTimeline: string, start: VisDate, end: VisDate, options ?: VisTimelineFitOptions): void { + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].setWindow(start, end, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); } +} /** * Destroy the Timeline. @@ -676,11 +697,11 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public destroy(visTimeline: string): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].destroy(); - delete this.timelines[visTimeline]; - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].destroy(); + delete this.timelines[visTimeline]; } +} /** * Activates an event. @@ -692,25 +713,25 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public on(visTimeline: string, eventName: VisTimelineEvents, preventDefault?: boolean): boolean { - if (this.timelines[visTimeline]) { - const that: {[index: string]: any} = this; - this.timelines[visTimeline].on(eventName, (params: any) => { - const emitter = that[eventName] as EventEmitter; - if (emitter) { - emitter.emit(params ? [visTimeline].concat(params) : visTimeline); - } - if (preventDefault && params.event) { - params.event.preventDefault(); - } - }); - - return true; - } + public on(visTimeline: string, eventName: VisTimelineEvents, preventDefault ?: boolean): boolean { + if (this.timelines[visTimeline]) { + const that: { [index: string]: any } = this; + this.timelines[visTimeline].on(eventName, (params: any) => { + const emitter = that[eventName] as EventEmitter; + if (emitter) { + emitter.emit(params ? [visTimeline].concat(params) : visTimeline); + } + if (preventDefault && params.event) { + params.event.preventDefault(); + } + }); - return false; + return true; } + return false; +} + /** * Deactivates an event. * @@ -720,16 +741,16 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public off(visTimeline: string, eventName: VisTimelineEvents): void { - if (this.timelines[visTimeline]) { - this.timelines[visTimeline].off(eventName, undefined); - } + if(this.timelines[visTimeline]) { + this.timelines[visTimeline].off(eventName, undefined); } +} private doesNotExistError(visTimeline: string): string { - return `Timeline with id ${visTimeline} does not exist.`; - } + return `Timeline with id ${visTimeline} does not exist.`; +} private alreadyExistsError(visTimeline: string): string { - return `Timeline with id ${visTimeline} already exists.`; - } + return `Timeline with id ${visTimeline} already exists.`; +} } From b3824b56fbd376e30b90cd80819a4d313bed4642 Mon Sep 17 00:00:00 2001 From: syntax-error Date: Sat, 13 Jan 2018 12:47:19 +0100 Subject: [PATCH 3/4] add comment and format fixes --- components/timeline/vis-timeline.service.ts | 362 ++++++++++---------- 1 file changed, 180 insertions(+), 182 deletions(-) diff --git a/components/timeline/vis-timeline.service.ts b/components/timeline/vis-timeline.service.ts index 0a25d227..c7de0161 100644 --- a/components/timeline/vis-timeline.service.ts +++ b/components/timeline/vis-timeline.service.ts @@ -8,7 +8,7 @@ import { VisTimelineFitOptions, VisTimelineGroups, VisTimelineItems, - VisTimelineOptions + VisTimelineOptions, } from './index'; /** @@ -204,41 +204,39 @@ export class VisTimelineService { } } - public zoomIn(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void { + /** + * 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)); -} + this.timelines[visTimeline].zoomIn(zoomLevel); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } - 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)); + /** + * 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): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].zoomOut(zoomLevel); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Adjust the visible window such that it fits all items. @@ -251,13 +249,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public fit(visTimeline: string, options ?: VisTimelineFitOptions): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].fit(options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public fit(visTimeline: string, options?: VisTimelineFitOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].fit(options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Adjust the visible window such that the selected item is centered on screen. @@ -270,13 +268,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public focusOnId(visTimeline: string, id: VisId, options ?: VisTimelineFitOptions): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].focus(id, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public focusOnId(visTimeline: string, id: VisId, options?: VisTimelineFitOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].focus(id, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Adjust the visible window such that the selected items are centered on screen. @@ -289,13 +287,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public focusOnIds(visTimeline: string, ids: VisId[], options ?: VisTimelineFitOptions): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].focus(ids, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public focusOnIds(visTimeline: string, ids: VisId[], options?: VisTimelineFitOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].focus(ids, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Get the current time. @@ -309,12 +307,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getCurrentTime(visTimeline: string): Date { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getCurrentTime(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getCurrentTime(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Retrieve the custom time from the custom time bar with given id. @@ -328,13 +326,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public getCustomTime(visTimeline: string, id ?: VisId): Date { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getCustomTime(id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public getCustomTime(visTimeline: string, id?: VisId): Date { + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getCustomTime(id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Returns an Object with relevant properties from an event. @@ -348,12 +346,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getEventProperties(visTimeline: string, event: Event): VisTimelineEventPropertiesResult { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getEventProperties(event); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getEventProperties(event); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Get the range of all the items as an object containing min: Date and max: Date. @@ -366,12 +364,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getItemRange(visTimeline: string): { min: Date, max: Date } { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getItemRange(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getItemRange(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Get an array with the ids of the currently selected items. @@ -384,12 +382,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getSelection(visTimeline: string): VisId[] { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getSelection(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getSelection(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Get an array with the ids of the currently visible items. @@ -402,12 +400,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getVisibleItems(visTimeline: string): VisId[] { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getVisibleItems(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getVisibleItems(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Get the current visible window. @@ -420,12 +418,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public getWindow(visTimeline: string): { start: Date, end: Date } { - if (this.timelines[visTimeline]) { - return this.timelines[visTimeline].getWindow(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + return this.timelines[visTimeline].getWindow(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Move the window such that given time is centered on screen. @@ -438,13 +436,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public moveTo(visTimeline: string, time: VisDate, options ?: VisTimelineFitOptions): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].moveTo(time, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public moveTo(visTimeline: string, time: VisDate, options?: VisTimelineFitOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].moveTo(time, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Force a redraw of the Timeline. @@ -459,12 +457,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public redraw(visTimeline: string): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].redraw(); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].redraw(); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Remove vertical bars previously added to the timeline via addCustomTime method. @@ -477,12 +475,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public removeCustomTime(visTimeline: string, id: VisId): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].removeCustomTime(id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].removeCustomTime(id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Set a current time. @@ -498,12 +496,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setCurrentTime(visTimeline: string, time: VisDate): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setCurrentTime(time); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setCurrentTime(time); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Adjust the time of a custom time bar. @@ -516,13 +514,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public setCustomTime(visTimeline: string, time: VisDate, id ?: VisId): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setCustomTime(time, id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public setCustomTime(visTimeline: string, time: VisDate, id?: VisId): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setCustomTime(time, id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Adjust the title attribute of a custom time bar. @@ -536,13 +534,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public setCustomTimeTitle(visTimeline: string, title: string, id ?: VisId): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setCustomTimeTitle(title, id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public setCustomTimeTitle(visTimeline: string, title: string, id?: VisId): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setCustomTimeTitle(title, id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Set both groups and items at once. @@ -561,12 +559,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setData(visTimeline: string, data: { groups?: VisTimelineGroups; items?: VisTimelineItems }): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setData(data); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setData(data); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Set a data set with groups for the Timeline. @@ -581,12 +579,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setGroups(visTimeline: string, groups: VisTimelineGroups): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setGroups(groups); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setGroups(groups); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Set a data set with items for the Timeline. @@ -599,12 +597,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setItems(visTimeline: string, items: VisTimelineItems): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setItems(items); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setItems(items); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Set or update options. @@ -619,12 +617,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setOptions(visTimeline: string, options: VisTimelineOptions): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setOptions(options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setOptions(options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Select one item by its id.# @@ -638,12 +636,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setSelectionToId(visTimeline: string, id: VisId): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setSelection(id); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setSelection(id); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Select multiple items by their id. @@ -658,12 +656,12 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public setSelectionToIds(visTimeline: string, ids: VisId[]): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setSelection(ids); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setSelection(ids); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Set the current visible window. @@ -679,13 +677,13 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public setWindow(visTimeline: string, start: VisDate, end: VisDate, options ?: VisTimelineFitOptions): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].setWindow(start, end, options); - } else { - throw new Error(this.doesNotExistError(visTimeline)); + public setWindow(visTimeline: string, start: VisDate, end: VisDate, options?: VisTimelineFitOptions): void { + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].setWindow(start, end, options); + } else { + throw new Error(this.doesNotExistError(visTimeline)); + } } -} /** * Destroy the Timeline. @@ -697,11 +695,11 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public destroy(visTimeline: string): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].destroy(); - delete this.timelines[visTimeline]; + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].destroy(); + delete this.timelines[visTimeline]; + } } -} /** * Activates an event. @@ -713,25 +711,25 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public on(visTimeline: string, eventName: VisTimelineEvents, preventDefault ?: boolean): boolean { - if (this.timelines[visTimeline]) { - const that: { [index: string]: any } = this; - this.timelines[visTimeline].on(eventName, (params: any) => { - const emitter = that[eventName] as EventEmitter; - if (emitter) { - emitter.emit(params ? [visTimeline].concat(params) : visTimeline); - } - if (preventDefault && params.event) { - params.event.preventDefault(); - } - }); + public on(visTimeline: string, eventName: VisTimelineEvents, preventDefault?: boolean): boolean { + if (this.timelines[visTimeline]) { + const that: { [index: string]: any } = this; + this.timelines[visTimeline].on(eventName, (params: any) => { + const emitter = that[eventName] as EventEmitter; + if (emitter) { + emitter.emit(params ? [visTimeline].concat(params) : visTimeline); + } + if (preventDefault && params.event) { + params.event.preventDefault(); + } + }); + + return true; + } - return true; + return false; } - return false; -} - /** * Deactivates an event. * @@ -741,16 +739,16 @@ export class VisTimelineService { * @memberOf VisTimelineService */ public off(visTimeline: string, eventName: VisTimelineEvents): void { - if(this.timelines[visTimeline]) { - this.timelines[visTimeline].off(eventName, undefined); + if (this.timelines[visTimeline]) { + this.timelines[visTimeline].off(eventName, undefined); + } } -} private doesNotExistError(visTimeline: string): string { - return `Timeline with id ${visTimeline} does not exist.`; -} + return `Timeline with id ${visTimeline} does not exist.`; + } private alreadyExistsError(visTimeline: string): string { - return `Timeline with id ${visTimeline} already exists.`; -} + return `Timeline with id ${visTimeline} already exists.`; + } } From 60b3b4a85fd6c59aa66d95fd107ff5a7cc6f20c3 Mon Sep 17 00:00:00 2001 From: syntax-error Date: Sat, 13 Jan 2018 12:49:50 +0100 Subject: [PATCH 4/4] implement zoom in/out feature directly into service instead of relying on index.d.ts --- components/timeline/vis-timeline.service.ts | 26 ++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/components/timeline/vis-timeline.service.ts b/components/timeline/vis-timeline.service.ts index c7de0161..b6c722f0 100644 --- a/components/timeline/vis-timeline.service.ts +++ b/components/timeline/vis-timeline.service.ts @@ -215,7 +215,19 @@ export class VisTimelineService { */ public zoomIn(visTimeline: string, zoomLevel: number): void { if (this.timelines[visTimeline]) { - this.timelines[visTimeline].zoomIn(zoomLevel); + 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)); } @@ -230,9 +242,17 @@ export class VisTimelineService { * * @memberOf VisTimelineService */ - public zoomOut(visTimeline: string, zoomLevel: number): void { + public zoomOut(visTimeline: string, zoomLevel: number, options?: VisTimelineOptions): void { if (this.timelines[visTimeline]) { - this.timelines[visTimeline].zoomOut(zoomLevel); + 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)); }