Browse Source

Implemented function `moveTo(time, options)`

v3_develop
jos 10 years ago
parent
commit
d2591a8dc3
4 changed files with 81 additions and 38 deletions
  1. +7
    -5
      HISTORY.md
  2. +28
    -18
      docs/graph2d.html
  3. +25
    -15
      docs/timeline.html
  4. +21
    -0
      lib/timeline/Core.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.

+ 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>

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

@ -389,6 +389,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

Loading…
Cancel
Save