Merge branch 'develop' of https://github.com/almende/vis into develop

Conflicts:
	dist/vis.js
	dist/vis.min.js

HISTORY.md

@@ -4,9 +4,14 @@ http://visjs.org
 
 ## not yet released, version 1.0.1
 
+### Timeline
+
+- Fixed width of items with type `rangeoverflow`.
+- Fixed a bug wrongly rendering invisible items after updating them.
+
 ### Graph
 
-- added coordinate conversion from DOM to Canvas.
+- Added coordinate conversion from DOM to Canvas.
 
 
 ## 2014-05-02, version 1.0.0

dist/vis.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version @@version
- * @date    @@date
+ * @version 1.0.1-SNAPSHOT
+ * @date    2014-05-09
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -5271,7 +5271,6 @@ ItemSet.prototype.repaint = function repaint() {
     };
   }
 
-
   // update className
   frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : '');
 
@@ -5780,7 +5779,9 @@ ItemSet.prototype._updateItem = function _updateItem(item, itemData) {
   var oldGroupId = item.data.group;
 
   item.data = itemData;
-  item.repaint();
+  if (item.displayed) {
+    item.repaint();
+  }
 
   // update group
   if (oldGroupId != item.data.group) {
@@ -6973,9 +6974,10 @@ ItemRangeOverflow.prototype.repositionX = function repositionX() {
 
   this.left = start;
   var boxWidth = Math.max(end - start, 1);
-  this.width = (this.props.content.width < boxWidth) ?
-      boxWidth :
-      start + contentLeft + this.props.content.width;
+  this.width = boxWidth + this.props.content.width;
+  // Note: The calculation of width is an optimistic calculation, giving
+  //       a width which will not change when moving the Timeline
+  //       So no restacking needed, which is nicer for the eye
 
   this.dom.box.style.left = this.left + 'px';
   this.dom.box.style.width = boxWidth + 'px';

examples/timeline/08_edit_items.html

@@ -18,6 +18,7 @@
   <div id="log"></div>
 
   <script type="text/javascript">
+    // note that months are zero-based in the JavaScript Date object, so month 3 is April
     var items = new vis.DataSet([
       {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
       {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},

examples/timeline/09_order_groups.html

@@ -33,6 +33,7 @@
   ]);
 
   // create a dataset with items
+  // note that months are zero-based in the JavaScript Date object, so month 3 is April
   var items = new vis.DataSet([
     {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
     {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},

examples/timeline/10_limit_move_and_zoom.html

@@ -27,6 +27,7 @@
 
 <script>
   // create some items
+  // note that months are zero-based in the JavaScript Date object, so month 4 is May
   var items = [
     {'start': new Date(2012, 4, 25), 'content': 'First'},
     {'start': new Date(2012, 4, 26), 'content': 'Last'}

examples/timeline/11_points.html

@@ -22,6 +22,7 @@
 <script type="text/javascript">
   var container = document.getElementById('visualization');
 
+  // note that months are zero-based in the JavaScript Date object
   var items = [
     {start: new Date(1939,8,1),  content: 'German Invasion of Poland'},
     {start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'},

examples/timeline/12_custom_styling.html

@@ -65,6 +65,8 @@
 
 <script type="text/javascript">
   var container = document.getElementById('visualization');
+
+  // note that months are zero-based in the JavaScript Date object
   var items = [
     {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'},
     {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'},
@@ -75,6 +77,7 @@
     {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
     {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'}
   ];
+
   var options = {
     editable: true,
     margin: {
@@ -82,6 +85,7 @@
       axis: 40
     }
   };
+
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>

examples/timeline/15_item_class_names.html

@@ -73,6 +73,7 @@
 
 <script type="text/javascript">
   // create data
+  // note that months are zero-based in the JavaScript Date object
   var data = [
     {
       'start': new Date(2012,7,19),

src/timeline/component/ItemSet.js

@@ -813,7 +813,9 @@ ItemSet.prototype._updateItem = function _updateItem(item, itemData) {
   var oldGroupId = item.data.group;
 
   item.data = itemData;
-  item.repaint();
+  if (item.displayed) {
+    item.repaint();
+  }
 
   // update group
   if (oldGroupId != item.data.group) {

src/timeline/component/item/ItemRangeOverflow.js

@@ -46,9 +46,10 @@ ItemRangeOverflow.prototype.repositionX = function repositionX() {
 
   this.left = start;
   var boxWidth = Math.max(end - start, 1);
-  this.width = (this.props.content.width < boxWidth) ?
-      boxWidth :
-      start + contentLeft + this.props.content.width;
+  this.width = boxWidth + this.props.content.width;
+  // Note: The calculation of width is an optimistic calculation, giving
+  //       a width which will not change when moving the Timeline
+  //       So no restacking needed, which is nicer for the eye
 
   this.dom.box.style.left = this.left + 'px';
   this.dom.box.style.width = boxWidth + 'px';