Removed reflow step from Panel, RootPanel, and ContentPanel

dist/vis.css

@@ -34,8 +34,8 @@
   margin: 0;
 
   border-right: 1px solid #bfbfbf;
-  box-sizing: border-box;
   -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .vis.timeline .labels .label-set {
@@ -102,6 +102,9 @@
   background-color: #D5DDF6;
   display: inline-block;
   padding: 5px;
+
+  -webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out, height .4s ease-in-out;
+  transition:         top .4s ease-in-out, bottom .4s ease-in-out, height .4s ease-in-out;
 }
 
 .vis.timeline .item.selected {
@@ -118,7 +121,8 @@
   background-color: #FFF785;
   z-index: 999;
 }
-.vis.timeline .item.point.selected .dot {
+.vis.timeline .item.point.selected .dot,
+.vis.timeline .item.dot.selected {
   border-color: #FFC200;
 }
 
@@ -158,6 +162,7 @@
   border-width: 1px;
   border-radius: 2px;
   -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -220,7 +225,7 @@
 }
 
 .vis.timeline .axis {
-  position: relative;
+  position: absolute;
 }
 
 .vis.timeline .axis .text {

src/timeline/component/Component.js

@@ -93,11 +93,9 @@ Component.prototype.getFrame = function getFrame() {
 
 /**
  * Repaint the component
- * @return {Boolean} changed
  */
 Component.prototype.repaint = function repaint() {
   // should be implemented by the component
-  return false;
 };
 
 /**

src/timeline/component/ContentPanel.js

@@ -45,69 +45,26 @@ ContentPanel.prototype.getContainer = function () {
 
 /**
  * Repaint the component
- * @return {Boolean} changed
  */
 ContentPanel.prototype.repaint = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      asSize = util.option.asSize,
+  var asSize = util.option.asSize,
       options = this.options,
       frame = this.frame;
+
+  // create frame
   if (!frame) {
     frame = document.createElement('div');
-    frame.className = 'content-panel';
-
-    var className = options.className;
-    if (className) {
-      if (typeof className == 'function') {
-        util.addClassName(frame, String(className()));
-      }
-      else {
-        util.addClassName(frame, String(className));
-      }
-    }
-
     this.frame = frame;
-    changed += 1;
-  }
-  if (!frame.parentNode) {
-    if (!this.parent) {
-      throw new Error('Cannot repaint panel: no parent attached');
-    }
+
+    if (!this.parent) throw new Error('Cannot repaint panel: no parent attached');
     var parentContainer = this.parent.getContainer();
-    if (!parentContainer) {
-      throw new Error('Cannot repaint panel: parent has no container element');
-    }
+    if (!parentContainer) throw new Error('Cannot repaint panel: parent has no container element');
     parentContainer.appendChild(frame);
-    changed += 1;
   }
 
-  changed += update(frame.style, 'top',    asSize(options.top, '0px'));
-  changed += update(frame.style, 'left',   asSize(options.left, '0px'));
-  changed += update(frame.style, 'width',  asSize(options.width, '100%'));
-  changed += update(frame.style, 'height', asSize(options.height, '100%'));
-
-  return (changed > 0);
-};
-
-/**
- * Reflow the component
- * @return {Boolean} resized
- */
-ContentPanel.prototype.reflow = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      frame = this.frame;
-
-  if (frame) {
-    changed += update(this, 'top', frame.offsetTop);
-    changed += update(this, 'left', frame.offsetLeft);
-    changed += update(this, 'width', frame.offsetWidth);
-    changed += update(this, 'height', frame.offsetHeight);
-  }
-  else {
-    changed += 1;
-  }
+  // update className
+  frame.className = 'content-panel' + (options.className ? (' ' + asSize(options.className)) : '');
 
-  return (changed > 0);
+  // update frame size
+  this._updateSize();
 };

src/timeline/component/Panel.js

@@ -44,69 +44,52 @@ Panel.prototype.getContainer = function () {
 
 /**
  * Repaint the component
- * @return {Boolean} changed
  */
 Panel.prototype.repaint = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      asSize = util.option.asSize,
+  var asSize = util.option.asSize,
       options = this.options,
       frame = this.frame;
+
+  // create frame
   if (!frame) {
     frame = document.createElement('div');
-    frame.className = 'vpanel';
 
-    var className = options.className;
-    if (className) {
-      if (typeof className == 'function') {
-        util.addClassName(frame, String(className()));
-      }
-      else {
-        util.addClassName(frame, String(className));
-      }
-    }
+    if (!this.parent) throw new Error('Cannot repaint panel: no parent attached');
 
-    this.frame = frame;
-    changed += 1;
-  }
-  if (!frame.parentNode) {
-    if (!this.parent) {
-      throw new Error('Cannot repaint panel: no parent attached');
-    }
     var parentContainer = this.parent.getContainer();
-    if (!parentContainer) {
-      throw new Error('Cannot repaint panel: parent has no container element');
-    }
+    if (!parentContainer) throw new Error('Cannot repaint panel: parent has no container element');
+
     parentContainer.appendChild(frame);
-    changed += 1;
+
+    this.frame = frame;
   }
 
-  changed += update(frame.style, 'top',    asSize(options.top, '0px'));
-  changed += update(frame.style, 'left',   asSize(options.left, '0px'));
-  changed += update(frame.style, 'width',  asSize(options.width, '100%'));
-  changed += update(frame.style, 'height', asSize(options.height, '100%'));
+  // update className
+  frame.className = 'vpanel' + (options.className ? (' ' + asSize(options.className)) : '');
 
-  return (changed > 0);
+  // update class name
+  var className = 'vis timeline rootpanel ' + options.orientation + (options.editable ? ' editable' : '');
+  if (options.className) className += ' ' + util.option.asString(className);
+  frame.className = className;
+
+  // update frame size
+  this._updateSize();
 };
 
 /**
- * Reflow the component
- * @return {Boolean} resized
+ * Apply the size from options to the panel, and recalculate it's actual size.
+ * @private
  */
-Panel.prototype.reflow = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      frame = this.frame;
-
-  if (frame) {
-    changed += update(this, 'top', frame.offsetTop);
-    changed += update(this, 'left', frame.offsetLeft);
-    changed += update(this, 'width', frame.offsetWidth);
-    changed += update(this, 'height', frame.offsetHeight);
-  }
-  else {
-    changed += 1;
-  }
+Panel.prototype._updateSize = function () {
+  // apply size
+  this.frame.style.top    = util.option.asSize(this.options.top, '0px');
+  this.frame.style.left   = util.option.asSize(this.options.left, '0px');
+  this.frame.style.width  = util.option.asSize(this.options.width, '100%');
+  this.frame.style.height = util.option.asSize(this.options.height, '100%');
 
-  return (changed > 0);
+  // get actual size
+  this.top    = this.frame.offsetTop;
+  this.left   = this.frame.offsetLeft;
+  this.width  = this.frame.offsetWidth;
+  this.height = this.frame.offsetHeight;
 };

src/timeline/component/RootPanel.js

@@ -51,69 +51,32 @@ RootPanel.prototype.setOptions = Component.prototype.setOptions;
 
 /**
  * Repaint the component
- * @return {Boolean} changed
  */
 RootPanel.prototype.repaint = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      asSize = util.option.asSize,
+  var asSize = util.option.asSize,
       options = this.options,
       frame = this.frame;
 
+  // create frame
   if (!frame) {
     frame = document.createElement('div');
-
     this.frame = frame;
 
-    this._registerListeners();
-
-    changed += 1;
-  }
-  if (!frame.parentNode) {
-    if (!this.container) {
-      throw new Error('Cannot repaint root panel: no container attached');
-    }
+    if (!this.container) throw new Error('Cannot repaint root panel: no container attached');
     this.container.appendChild(frame);
-    changed += 1;
-  }
 
-  frame.className = 'vis timeline rootpanel ' + options.orientation +
-      (options.editable ? ' editable' : '');
-  var className = options.className;
-  if (className) {
-    util.addClassName(frame, util.option.asString(className));
+    this._registerListeners();
   }
 
-  changed += update(frame.style, 'top',    asSize(options.top, '0px'));
-  changed += update(frame.style, 'left',   asSize(options.left, '0px'));
-  changed += update(frame.style, 'width',  asSize(options.width, '100%'));
-  changed += update(frame.style, 'height', asSize(options.height, '100%'));
+  // update class name
+  var className = 'vis timeline rootpanel ' + options.orientation + (options.editable ? ' editable' : '');
+  if (options.className) className += ' ' + util.option.asString(className);
+  frame.className = className;
 
-  this._updateWatch();
-
-  return (changed > 0);
-};
+  // update frame size
+  this._updateSize();
 
-/**
- * Reflow the component
- * @return {Boolean} resized
- */
-RootPanel.prototype.reflow = function () {
-  var changed = 0,
-      update = util.updateProperty,
-      frame = this.frame;
-
-  if (frame) {
-    changed += update(this, 'top', frame.offsetTop);
-    changed += update(this, 'left', frame.offsetLeft);
-    changed += update(this, 'width', frame.offsetWidth);
-    changed += update(this, 'height', frame.offsetHeight);
-  }
-  else {
-    changed += 1;
-  }
-
-  return (changed > 0);
+  this._updateWatch();
 };
 
 /**
@@ -154,7 +117,7 @@ RootPanel.prototype._watch = function () {
           (me.frame.clientHeight != me.lastHeight)) {
         me.lastWidth = me.frame.clientWidth;
         me.lastHeight = me.frame.clientHeight;
-        me.requestReflow();
+        me.requestRepaint();
       }
     }
   };

src/timeline/component/TimeAxis.js

@@ -87,7 +87,6 @@ TimeAxis.prototype.toScreen = function(time) {
 
 /**
  * Repaint the component
- * @return {Boolean} changed
  */
 TimeAxis.prototype.repaint = function () {
   var asSize = util.option.asSize,

src/timeline/component/item/Item.js

@@ -58,11 +58,9 @@ Item.prototype.hide = function hide() {
 
 /**
  * Repaint the item
- * @return {Boolean} changed
  */
 Item.prototype.repaint = function repaint() {
   // should be implemented by the item
-  return false;
 };
 
 /**

src/timeline/component/item/ItemRange.js

@@ -40,7 +40,7 @@ ItemRange.prototype.baseClassName = 'item range';
 ItemRange.prototype.isVisible = function isVisible (range) {
   // determine visibility
   return (this.data.start < range.end) && (this.data.end > range.start);
-}
+};
 
 /**
  * Repaint the item