From 78f432471bc069fe9e0afbb85b061aae8de016ee Mon Sep 17 00:00:00 2001 From: Steffen Dienst Date: Sat, 7 Mar 2020 22:26:37 +0100 Subject: [PATCH] feat: optionally use snap for custom time bars (#332) Co-authored-by: Yotam Berkowitz --- .../timeline/other/customTimeBarsSnap.html | 93 +++++++++++++++++++ lib/timeline/Core.js | 3 +- lib/timeline/component/CustomTime.js | 10 +- 3 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 examples/timeline/other/customTimeBarsSnap.html diff --git a/examples/timeline/other/customTimeBarsSnap.html b/examples/timeline/other/customTimeBarsSnap.html new file mode 100644 index 0000000000..ac0acde1cb --- /dev/null +++ b/examples/timeline/other/customTimeBarsSnap.html @@ -0,0 +1,93 @@ + + + + Timeline | other | Show current and custom time bars with snapping + + + + + + + + + +

+ The Timeline has functions to add multiple custom time bars which can be dragged by the user. +

+

+ + +

+

+ + +

+

+ timechange event, index: , time: +

+

+ timechanged event, index: , time: +


+ +
+ + + + diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 9772a0bf7c..347af0d2dd 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -669,7 +669,8 @@ class Core { const customTime = new CustomTime(this.body, util.extend({}, this.options, { time : timestamp, - id + id, + snap: this.itemSet.options.snap })); this.customTimes.push(customTime); diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js index 5ba5cdc287..7759ed9a46 100644 --- a/lib/timeline/component/CustomTime.js +++ b/lib/timeline/component/CustomTime.js @@ -63,7 +63,7 @@ class CustomTime extends Component { setOptions(options) { if (options) { // copy all options that we know - util.selectiveExtend(['moment', 'locale', 'locales', 'id', 'title', 'rtl'], this.options, options); + util.selectiveExtend(['moment', 'locale', 'locales', 'id', 'title', 'rtl', 'snap'], this.options, options); } } @@ -260,7 +260,13 @@ class CustomTime extends Component { const x = this.body.util.toScreen(this.eventParams.customTime) + deltaX; const time = this.body.util.toTime(x); - this.setCustomTime(time); + const scale = this.body.util.getScale(); + const step = this.body.util.getStep(); + const snap = this.options.snap; + + const snappedTime = snap ? snap(time, scale, step) : time; + + this.setCustomTime(snappedTime); // fire a timechange event this.body.emitter.emit('timechange', {