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

10 years ago · b2d406e446
--- a/HISTORY.md
+++ b/HISTORY.md
@ -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

--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -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>

--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@ -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.
--- a/test/timeline.html
+++ b/test/timeline.html
@ -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');
--- a/test/timeline_groups.html
+++ b/test/timeline_groups.html
@ -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" />