Browse Source

Merge remote-tracking branch 'origin/develop' into develop

Conflicts:
	dist/vis.js
v3_develop
Alex de Mulder 10 years ago
parent
commit
894a590fbe
12 changed files with 20280 additions and 19921 deletions
  1. +7
    -5
      HISTORY.md
  2. +20074
    -19857
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +13
    -13
      dist/vis.min.js
  6. +28
    -18
      docs/graph2d.html
  7. +25
    -15
      docs/timeline.html
  8. +94
    -0
      examples/timeline/22_window_adjustment.html
  9. +1
    -0
      examples/timeline/index.html
  10. +21
    -1
      lib/timeline/Core.js
  11. +8
    -5
      lib/timeline/Range.js
  12. +7
    -5
      lib/timeline/Timeline.js

+ 7
- 5
HISTORY.md View File

@ -15,6 +15,7 @@ http://visjs.org
on screen. on screen.
- Implemented an option `focus` for `setSelection(ids, options)`, to immediately - Implemented an option `focus` for `setSelection(ids, options)`, to immediately
focus selected nodes. focus selected nodes.
- Implemented function `moveTo(time, options)`.
- Implemented animated range change for functions `fit`, `focus`, `setSelection`, - Implemented animated range change for functions `fit`, `focus`, `setSelection`,
and `setWindow`. and `setWindow`.
- Implemented functions `setCurrentTime(date)` and `getCurrentTime()`. - Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
@ -26,19 +27,20 @@ http://visjs.org
- A fix in reading group properties for a node. - A fix in reading group properties for a node.
- Fixed physics solving stopping when a support node was not moving. - Fixed physics solving stopping when a support node was not moving.
- Added localization support.
- Implemented localization support.
- Implemented option `clickToUse`. - Implemented option `clickToUse`.
- Fixed page scroll event not being blocked when moving around in Network - Fixed page scroll event not being blocked when moving around in Network
using arrow keys. using arrow keys.
### Graph2D ### Graph2D
- Added 'handleOverlap' to support overlap, sideBySide and stack.
- Added two examples showing the 'handleOverlap' functionality.
- Added 'customRange' for the Y axis and an example showing how it works.
- Added localization support.
- Implemented option `handleOverlap` to support overlap, sideBySide and stack.
- Implemented two examples showing the `handleOverlap` functionality.
- Implemented `customRange` for the Y axis and an example showing how it works.
- Implemented localization support.
- Implemented option `clickToUse`. - Implemented option `clickToUse`.
- Implemented functions `setCurrentTime(date)` and `getCurrentTime()`. - Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
- Implemented function `moveTo(time, options)`.
- Fixed bugs. - Fixed bugs.
- Added groups.visibility functionality and an example showing how it works. - Added groups.visibility functionality and an example showing how it works.

+ 20074
- 19857
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 13
- 13
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 28
- 18
docs/graph2d.html View File

@ -709,21 +709,6 @@ Graph2d.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>setCurrentTime(time)</td>
<td>none</td>
<td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
<code>time</code> can be a Date object, numeric timestamp, or ISO date string.
Only applicable when option <code>showCurrentTime</code> is true.</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
</td>
</tr>
<tr> <tr>
<td>getLegend(groupId, iconWidth, iconHeight)</td> <td>getLegend(groupId, iconWidth, iconHeight)</td>
<td>SVGelement, String, String</td> <td>SVGelement, String, String</td>
@ -750,6 +735,23 @@ Graph2d.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>isGroupVisible(groupId)</td>
<td>Boolean</td>
<td>This checks if the visible option of the supplied group (by ID) is true or false.
</td>
</tr>
<tr>
<td>moveTo(time [, options])</td>
<td>none</td>
<td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
<ul>
<li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
</ul>
</td>
</tr>
<tr> <tr>
<td>on(event, callback)</td> <td>on(event, callback)</td>
<td>none</td> <td>none</td>
@ -770,9 +772,17 @@ Graph2d.clear({options: true}); // clear options only
</tr> </tr>
<tr> <tr>
<td>isGroupVisible(groupId)</td>
<td>Boolean</td>
<td>This checks if the visible option of the supplied group (by ID) is true or false.
<td>setCurrentTime(time)</td>
<td>none</td>
<td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
<code>time</code> can be a Date object, numeric timestamp, or ISO date string.
Only applicable when option <code>showCurrentTime</code> is true.</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
</td> </td>
</tr> </tr>

+ 25
- 15
docs/timeline.html View File

@ -771,21 +771,6 @@ timeline.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>setCurrentTime(time)</td>
<td>none</td>
<td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
<code>time</code> can be a Date object, numeric timestamp, or ISO date string.
Only applicable when option <code>showCurrentTime</code> is true.</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
</td>
</tr>
<tr> <tr>
<td>getSelection()</td> <td>getSelection()</td>
<td>Number[]</td> <td>Number[]</td>
@ -804,6 +789,16 @@ timeline.clear({options: true}); // clear options only
<td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td> <td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
</tr> </tr>
<tr>
<td>moveTo(time [, options])</td>
<td>none</td>
<td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
<ul>
<li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
</ul>
</td>
</tr>
<tr> <tr>
<td>on(event, callback)</td> <td>on(event, callback)</td>
<td>none</td> <td>none</td>
@ -823,6 +818,21 @@ timeline.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>setCurrentTime(time)</td>
<td>none</td>
<td>Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
<code>time</code> can be a Date object, numeric timestamp, or ISO date string.
Only applicable when option <code>showCurrentTime</code> is true.</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
</td>
</tr>
<tr> <tr>
<td>setGroups(groups)</td> <td>setGroups(groups)</td>
<td>none</td> <td>none</td>

+ 94
- 0
examples/timeline/22_window_adjustment.html View File

@ -0,0 +1,94 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Adjusting window</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This example demonstrates functions to adjust the visible window of the Timeline.</p>
<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
<input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
<input type="button" id="fit" value="Fit all items"><br>
<input type="button" id="select" value="Select & focus items 5 and 6"><br>
<input type="button" id="focus1" value="Focus item 2"><br>
<input type="button" id="focus2" value="Focus items 5 and 6 (slow animation)"><br>
<input type="button" id="focus3" value="Focus current selection"><br>
<input type="button" id="moveTo" value="Move to 2014-02-01"><br>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true,
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
document.getElementById('window1').onclick = function() {
timeline.setWindow('2014-01-01', '2014-04-01');
};
document.getElementById('window2').onclick = function() {
timeline.setWindow('2014-01-01', '2014-04-01', {
animate: false
});
};
document.getElementById('fit').onclick = function() {
timeline.fit();
};
document.getElementById('select').onclick = function() {
timeline.setSelection([5, 6], {
focus: true
});
};
document.getElementById('focus1').onclick = function() {
timeline.focus(2);
};
document.getElementById('focus2').onclick = function() {
timeline.focus([5, 6], {
animate: 3000 // ms
});
};
document.getElementById('focus3').onclick = function() {
var selection = timeline.getSelection();
timeline.focus(selection);
};
document.getElementById('moveTo').onclick = function() {
timeline.moveTo('2014-02-01');
};
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -33,6 +33,7 @@
<p><a href="19_localization.html">19_localization.html</a></p> <p><a href="19_localization.html">19_localization.html</a></p>
<p><a href="20_click_to_use.html">20_click_to_use.html</a></p> <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
<p><a href="21_set_selection.html">21_set_selection.html</a></p> <p><a href="21_set_selection.html">21_set_selection.html</a></p>
<p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

+ 21
- 1
lib/timeline/Core.js View File

@ -358,7 +358,6 @@ Core.prototype.fit = function(options) {
this.range.setRange(start, end, animate); this.range.setRange(start, end, animate);
}; };
/** /**
* Set the visible window. Both parameters are optional, you can change only * Set the visible window. Both parameters are optional, you can change only
* start or only end. Syntax: * start or only end. Syntax:
@ -389,6 +388,27 @@ Core.prototype.setWindow = function(start, end, options) {
} }
}; };
/**
* Move the window such that given time is centered on screen.
* @param {Date | Number | String} time
* @param {Object} [options] Available options:
* `animate: boolean | number`
* If true (default), the range is animated
* smoothly to the new window.
* If a number, the number is taken as duration
* for the animation. Default duration is 500 ms.
*/
Core.prototype.moveTo = function(time, options) {
var interval = this.range.end - this.range.start;
var t = util.convert(time, 'Date').valueOf();
var start = t - interval / 2;
var end = t + interval / 2;
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(start, end, animate);
};
/** /**
* Get the visible window * Get the visible window
* @return {{start: Date, end: Date}} Visible range * @return {{start: Date, end: Date}} Visible range

+ 8
- 5
lib/timeline/Range.js View File

@ -100,8 +100,8 @@ function validateDirection (direction) {
/** /**
* Set a new start and end range * Set a new start and end range
* @param {Number} [start]
* @param {Number} [end]
* @param {Date | Number | String} [start]
* @param {Date | Number | String} [end]
* @param {boolean | number} [animate=false] If true, the range is animated * @param {boolean | number} [animate=false] If true, the range is animated
* smoothly to the new window. * smoothly to the new window.
* If animate is a number, the * If animate is a number, the
@ -110,6 +110,9 @@ function validateDirection (direction) {
* *
*/ */
Range.prototype.setRange = function(start, end, animate) { Range.prototype.setRange = function(start, end, animate) {
var _start = start != undefined ? util.convert(start, 'Date').valueOf() : null;
var _end = end != undefined ? util.convert(end, 'Date').valueOf() : null;
this._cancelAnimation(); this._cancelAnimation();
if (animate) { if (animate) {
@ -123,8 +126,8 @@ Range.prototype.setRange = function(start, end, animate) {
if (!me.props.touch.dragging) { if (!me.props.touch.dragging) {
var now = new Date().valueOf(); var now = new Date().valueOf();
var time = now - initTime; var time = now - initTime;
var s = util.easeInOutQuad(time, initStart, start, duration);
var e = util.easeInOutQuad(time, initEnd, end, duration);
var s = util.easeInOutQuad(time, initStart, _start, duration);
var e = util.easeInOutQuad(time, initEnd, _end, duration);
changed = me._applyRange(s, e); changed = me._applyRange(s, e);
anyChanged = anyChanged || changed; anyChanged = anyChanged || changed;
if (changed) { if (changed) {
@ -148,7 +151,7 @@ Range.prototype.setRange = function(start, end, animate) {
return next(); return next();
} }
else { else {
var changed = this._applyRange(start, end);
var changed = this._applyRange(_start, _end);
if (changed) { if (changed) {
var params = {start: new Date(this.start), end: new Date(this.end)}; var params = {start: new Date(this.start), end: new Date(this.end)};
this.body.emitter.emit('rangechange', params); this.body.emitter.emit('rangechange', params);

+ 7
- 5
lib/timeline/Timeline.js View File

@ -238,12 +238,14 @@ Timeline.prototype.focus = function(id, options) {
} }
}); });
// calculate the new middle and interval for the window
var middle = (start + end) / 2;
var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
if (start !== null && end !== null) {
// calculate the new middle and interval for the window
var middle = (start + end) / 2;
var interval = Math.max((this.range.end - this.range.start), (end - start) * 1.1);
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
var animate = (options && options.animate !== undefined) ? options.animate : true;
this.range.setRange(middle - interval / 2, middle + interval / 2, animate);
}
}; };
/** /**

Loading…
Cancel
Save