Browse Source

Fixed #230: Implemented function `focus(id)` to center a specific item (or multiple items) on screen

v3_develop
jos 9 years ago
parent
commit
b2d406e446
8 changed files with 24791 additions and 24663 deletions
  1. +4
    -0
      HISTORY.md
  2. +24703
    -24641
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +13
    -13
      dist/vis.min.js
  5. +13
    -3
      docs/timeline.html
  6. +53
    -1
      lib/timeline/Timeline.js
  7. +3
    -3
      test/timeline.html
  8. +1
    -1
      test/timeline_groups.html

+ 4
- 0
HISTORY.md View File

@ -11,6 +11,10 @@ http://visjs.org
back to the original group.
- Added localization support.
- Implemented option `clickToUse`.
- Implemented function `focus(id)` to center a specific item (or multiple items)
on screen.
- Implemented an option `focus` for `setSelection(ids, options)`, to immediately
focus selected nodes.
### Network

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


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


+ 13
- 3
docs/timeline.html View File

@ -739,7 +739,14 @@ timeline.clear({options: true}); // clear options only
<tr>
<td>fit()</td>
<td>none</td>
<td>Adjust the visible window such that it fits all items.
<td>Adjust the visible window such that it fits all items. See also function <code>focus(id)</code>.
</td>
</tr>
<tr>
<td>focus(id | ids)</td>
<td>none</td>
<td>Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function <code>fit()</code>.
</td>
</tr>
@ -822,9 +829,12 @@ timeline.clear({options: true}); // clear options only
</tr>
<tr>
<td>setSelection([ids])</td>
<td>setSelection([ids [, options]])</td>
<td>none</td>
<td>Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`.
<td>Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
<ul>
<li><code>focus: boolean</code>. If true, focus will be set to the selected item(s)</li>
</ul>
</td>
</tr>

+ 53
- 1
lib/timeline/Timeline.js View File

@ -171,9 +171,18 @@ Timeline.prototype.setGroups = function(groups) {
* @param {Array} [ids] An array with zero or more id's of the items to be
* selected. If ids is an empty array, all items will be
* unselected.
* @param {Object} [options] Available options:
* `focus: boolean` If true, focus will be set
* to the selected item(s)
*/
Timeline.prototype.setSelection = function(ids) {
Timeline.prototype.setSelection = function(ids, options) {
this.itemSet && this.itemSet.setSelection(ids);
if (ids && options) {
if (options.focus) {
this.focus(ids);
}
}
};
/**
@ -184,6 +193,49 @@ Timeline.prototype.getSelection = function() {
return this.itemSet && this.itemSet.getSelection() || [];
};
/**
* Adjust the visible window such that the selected item (or multiple items)
* are centered on screen.
* @param {String | String[]} id An item id or array with item ids
*/
Timeline.prototype.focus = function(id) {
if (!this.itemsData) return;
// get the specified item(s)
var itemsData = this.itemsData.getDataSet().get(id, {
type: {
start: 'Date',
end: 'Date'
}
});
// turn into an array in case of a single item
if (!Array.isArray(itemsData)) {
itemsData = [itemsData];
}
// calculate minimum start and maximum end of specified items
var start = null;
var end = null;
itemsData.forEach(function (itemData) {
var s = itemData.start.valueOf();
var e = 'end' in itemData ? itemData.end.valueOf() :itemData.start.valueOf();
if (start === null || s < start) {
start = s;
}
if (end === null || e > end) {
end = e;
}
});
// 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);
this.range.setRange(middle - interval / 2, middle + interval / 2);
};
/**
* Get the data range of the item set.

+ 3
- 3
test/timeline.html View File

@ -3,7 +3,7 @@
<head>
<title></title>
<script src="../node_modules/moment/moment.js"></script>
<script src="../node_modules/moment/lang/nl.js"></script>
<script src="../node_modules/moment/locale/nl.js"></script>
<script>
moment.lang('nl');
</script>
@ -93,11 +93,11 @@
//height: 200,
showCurrentTime: true,
showCustomTime: true,
//clickToUse: true,
//min: moment('2013-01-01'),
//max: moment('2013-12-31'),
//zoomMin: 1000 * 60 * 60 * 24, // 1 day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 6, // 6 months
clickToUse: true
zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months
};
console.timeEnd('create dataset');

+ 1
- 1
test/timeline_groups.html View File

@ -16,7 +16,7 @@
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script>
<script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" />

Loading…
Cancel
Save