Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: optionally use snap for custom time bars #332

Merged
merged 4 commits into from
Mar 7, 2020
Merged

feat: optionally use snap for custom time bars #332

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d22cdb1
feat: optionally use snap for custom time bars
smee Feb 21, 2020
479ea21
Merge branch 'master' into master
smee Feb 24, 2020
986976f
Merge branch 'master' into master
yotamberk Mar 7, 2020
880dc13
Merge branch 'master' into master
yotamberk Mar 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions examples/timeline/other/customTimeBarsSnap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | other | Show current and custom time bars with snapping</title>

<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>

<script src="../../../standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="../../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p>
The Timeline has functions to add multiple custom time bars which can be dragged by the user.
</p>
<p>
<input type="button" id="add" value="Add custom vertical bar">
<input type="text" id="barId" placeholder="custom bar ID">
</p>
<p>
<input type="button" id="remove" value="Remove custom vertical bar">
<input type="text" id="barIndex" value="t1" placeholder="custom bar ID">
</p>
<p>
<code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
</p>
<p>
<code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
</p><br>

<div id="visualization"></div>

<script type="text/javascript">
var container = document.getElementById('visualization');
var items = new vis.DataSet();
var customDate = new Date();
var options = {
showCurrentTime: true,
start: new Date(Date.now() - 1000 * 60 * 60 * 24),
end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6),
snap: function (date, scale, step) {
const hour = 60 * 1000;
return Math.round(date / hour) * hour;
}
};
var timeline = new vis.Timeline(container, items, options);

// Set first time bar
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
timeline.addCustomTime(customDate, 't1');

document.getElementById('add').onclick = function () {
try {
customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
var barId = document.getElementById('barId').value || undefined;
timeline.addCustomTime(customDate, barId);
document.getElementById('barId').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};

document.getElementById('remove').onclick = function () {
try {
timeline.removeCustomTime(document.getElementById('barIndex').value);
document.getElementById('barIndex').value = '';
}
catch (err) {
console.log(err);
alert(err);
}
};

timeline.on('timechange', function (properties) {
document.getElementById('timechangeBar').innerHTML = properties.id;
document.getElementById('timechangeEvent').innerHTML = properties.time;
});
timeline.on('timechanged', function (properties) {
document.getElementById('timechangedBar').innerHTML = properties.id;
document.getElementById('timechangedEvent').innerHTML = properties.time;
});

</script>
</body>
</html>
3 changes: 2 additions & 1 deletion lib/timeline/Core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 8 additions & 2 deletions lib/timeline/component/CustomTime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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', {
Expand Down