Fixed items not automatically being repainted on changed data

src/component/item/itembox.js

@@ -224,22 +224,22 @@ ItemBox.prototype.reflow = function reflow() {
                 // default or 'center'
                 left = start - this.width / 2;
             }
-            update(this, 'left', left);
+            changed += update(this, 'left', left);
 
-            update(props.line, 'left', start - props.line.width / 2);
-            update(props.dot, 'left', start - props.dot.width / 2);
-            update(props.dot, 'top', -props.dot.height / 2);
+            changed += update(props.line, 'left', start - props.line.width / 2);
+            changed += update(props.dot, 'left', start - props.dot.width / 2);
+            changed += update(props.dot, 'top', -props.dot.height / 2);
             if (orientation == 'top') {
                 top = margin;
 
-                update(this, 'top', top);
+                changed += update(this, 'top', top);
             }
             else {
                 // default or 'bottom'
                 var parentHeight = this.parent.height;
                 top = parentHeight - this.height - margin;
 
-                update(this, 'top', top);
+                changed += update(this, 'top', top);
             }
         }
         else {

src/component/itemset.js

@@ -239,6 +239,9 @@ ItemSet.prototype.repaint = function repaint() {
                         }
                     }
 
+                    // force a repaint (not only a reposition)
+                    item.repaint();
+
                     items[id] = item;
                 }
 

src/component/rootpanel.js

@@ -10,7 +10,7 @@ function RootPanel(container, options) {
     this.id = util.randomUUID();
     this.container = container;
 
-    this.options = options || {}
+    this.options = options || {};
     this.defaultOptions = {
         autoResize: true
     };

src/visualization/timeline.js

@@ -7,7 +7,7 @@
  */
 function Timeline (container, items, options) {
     var me = this;
-    this.options = {
+    this.options = util.extend({
         orientation: 'bottom',
         min: null,
         max: null,
@@ -18,7 +18,7 @@ function Timeline (container, items, options) {
         showMinorLabels: true,
         showMajorLabels: true,
         autoResize: false
-    };
+    }, options);
 
     // controller
     this.controller = new Controller();

test/timeline.html

@@ -40,14 +40,14 @@
     <script>
         // create a dataset with items
         var now = moment().minutes(0).seconds(0).milliseconds(0);
-        var data = new vis.DataSet({
+        var items = new vis.DataSet({
             fieldTypes: {
                 start: 'Date',
                 end: 'Date'
             },
             fieldId: '_id'
         });
-        data.add([
+        items.add([
             {_id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
             {_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
             {_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
@@ -60,16 +60,17 @@
 
         var container = document.getElementById('visualization');
         var options = {
+            //orientation: 'top',
             //start: now.clone().add('days', -7).valueOf(),
             //end: now.clone().add('days', 7).valueOf(),
+            //maxHeight: 200,
             min: moment('2013-01-01').valueOf(),
             max: moment('2013-12-31').valueOf(),
-            //maxHeight: 200,
             zoomMin: 1000 * 60 * 60 * 24,            // 1 day
             zoomMax: 1000 * 60 * 60 * 24 * 30 * 6    // 6 months
         };
 
-        var timeline = new vis.Timeline(container, data, options);
+        var timeline = new vis.Timeline(container, items, options);
 
     </script>
 </body>

vis.js

@@ -3834,7 +3834,7 @@ function RootPanel(container, options) {
     this.id = util.randomUUID();
     this.container = container;
 
-    this.options = options || {}
+    this.options = options || {};
     this.defaultOptions = {
         autoResize: true
     };
@@ -4793,6 +4793,9 @@ ItemSet.prototype.repaint = function repaint() {
                         }
                     }
 
+                    // force a repaint (not only a reposition)
+                    item.repaint();
+
                     items[id] = item;
                 }
 
@@ -5378,22 +5381,22 @@ ItemBox.prototype.reflow = function reflow() {
                 // default or 'center'
                 left = start - this.width / 2;
             }
-            update(this, 'left', left);
+            changed += update(this, 'left', left);
 
-            update(props.line, 'left', start - props.line.width / 2);
-            update(props.dot, 'left', start - props.dot.width / 2);
-            update(props.dot, 'top', -props.dot.height / 2);
+            changed += update(props.line, 'left', start - props.line.width / 2);
+            changed += update(props.dot, 'left', start - props.dot.width / 2);
+            changed += update(props.dot, 'top', -props.dot.height / 2);
             if (orientation == 'top') {
                 top = margin;
 
-                update(this, 'top', top);
+                changed += update(this, 'top', top);
             }
             else {
                 // default or 'bottom'
                 var parentHeight = this.parent.height;
                 top = parentHeight - this.height - margin;
 
-                update(this, 'top', top);
+                changed += update(this, 'top', top);
             }
         }
         else {
@@ -6468,7 +6471,7 @@ GroupSet.prototype._toQueue = function _toQueue(ids, action) {
  */
 function Timeline (container, items, options) {
     var me = this;
-    this.options = {
+    this.options = util.extend({
         orientation: 'bottom',
         min: null,
         max: null,
@@ -6479,7 +6482,7 @@ function Timeline (container, items, options) {
         showMinorLabels: true,
         showMajorLabels: true,
         autoResize: false
-    };
+    }, options);
 
     // controller
     this.controller = new Controller();