Refactored ItemPoint

src/timeline/component/item/ItemBox.js

@@ -56,13 +56,9 @@ ItemBox.prototype.isVisible = function isVisible () {
  * Repaint the item
  */
 ItemBox.prototype.repaint = function repaint() {
-  var dom,
-      update = util.updateProperty,
-      props= this.props;
-
-  // create DOM
-  dom = this.dom;
+  var dom = this.dom;
   if (!dom) {
+    // create DOM
     this.dom = {};
     dom = this.dom;
 
@@ -138,11 +134,11 @@ ItemBox.prototype.repaint = function repaint() {
 
   // recalculate size
   if (this.dirty) {
-    update(props.dot, 'height', dom.dot.offsetHeight);
-    update(props.dot, 'width', dom.dot.offsetWidth);
-    update(props.line, 'width', dom.line.offsetWidth);
-    update(this, 'width', dom.box.offsetWidth);
-    update(this, 'height', dom.box.offsetHeight);
+    this.props.dot.height = dom.dot.offsetHeight;
+    this.props.dot.width = dom.dot.offsetWidth;
+    this.props.line.width = dom.line.offsetWidth;
+    this.width = dom.box.offsetWidth;
+    this.height = dom.box.offsetHeight;
 
     this.dirty = false;
   }

src/timeline/component/item/ItemPoint.js

@@ -21,219 +21,164 @@ function ItemPoint (parent, data, options, defaultOptions) {
     }
   };
 
+  // validate data
+  if (data) {
+    if (data.start == undefined) {
+      throw new Error('Property "start" missing in item ' + data);
+    }
+  }
+
   Item.call(this, parent, data, options, defaultOptions);
 }
 
 ItemPoint.prototype = new Item (null, null);
 
+/**
+ * Check whether this item is visible in the current time window
+ * @returns {boolean} True if visible
+ */
+ItemPoint.prototype.isVisible = function isVisible () {
+  // determine visibility
+  var data = this.data;
+  var range = this.parent && this.parent.range;
+
+  if (data && range) {
+    var interval = (range.end - range.start);
+    return (data.start > range.start - interval) && (data.start < range.end);
+  }
+  else {
+    return false;
+  }
+}
+
 /**
  * Repaint the item
- * @return {Boolean} changed
  */
 ItemPoint.prototype.repaint = function repaint() {
-  // TODO: make an efficient repaint
-  var changed = false;
   var dom = this.dom;
-
   if (!dom) {
-    this._create();
+    // create DOM
+    this.dom = {};
     dom = this.dom;
-    changed = true;
+
+    // background box
+    dom.point = document.createElement('div');
+    // className is updated in repaint()
+
+    // contents box, right from the dot
+    dom.content = document.createElement('div');
+    dom.content.className = 'content';
+    dom.point.appendChild(dom.content);
+
+    // dot at start
+    dom.dot = document.createElement('div');
+    dom.dot.className  = 'dot';
+    dom.point.appendChild(dom.dot);
+
+    // attach this item as attribute
+    dom.point['timeline-item'] = this;
   }
 
-  if (dom) {
-    if (!this.parent) {
-      throw new Error('Cannot repaint item: no parent attached');
-    }
+  // append DOM to parent DOM
+  if (!this.parent) {
+    throw new Error('Cannot repaint item: no parent attached');
+  }
+  if (!dom.point.parentNode) {
     var foreground = this.parent.getForeground();
     if (!foreground) {
-      throw new Error('Cannot repaint time axis: ' +
-          'parent has no foreground container element');
+      throw new Error('Cannot repaint time axis: parent has no foreground container element');
     }
-
-    if (!dom.point.parentNode) {
-      foreground.appendChild(dom.point);
-      foreground.appendChild(dom.point);
-      changed = true;
+    foreground.appendChild(dom.point);
+  }
+  this.displayed = true;
+
+  // update contents
+  if (this.data.content != this.content) {
+    this.content = this.data.content;
+    if (this.content instanceof Element) {
+      dom.content.innerHTML = '';
+      dom.content.appendChild(this.content);
     }
-
-    // update contents
-    if (this.data.content != this.content) {
-      this.content = this.data.content;
-      if (this.content instanceof Element) {
-        dom.content.innerHTML = '';
-        dom.content.appendChild(this.content);
-      }
-      else if (this.data.content != undefined) {
-        dom.content.innerHTML = this.content;
-      }
-      else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
-      }
-      changed = true;
+    else if (this.data.content != undefined) {
+      dom.content.innerHTML = this.content;
+    }
+    else {
+      throw new Error('Property "content" missing in item ' + this.data.id);
     }
 
-    this._repaintDeleteButton(dom.point);
+    this.dirty = true;
+  }
 
-    // update class
-    var className = (this.data.className? ' ' + this.data.className : '') +
-        (this.selected ? ' selected' : '');
-    if (this.className != className) {
-      this.className = className;
-      dom.point.className  = 'item point' + className;
-      changed = true;
-    }
+  // update class
+  var className = (this.data.className? ' ' + this.data.className : '') +
+      (this.selected ? ' selected' : '');
+  if (this.className != className) {
+    this.className = className;
+    dom.point.className  = 'item point' + className;
+
+    this.dirty = true;
   }
 
-  return changed;
+  // recalculate size
+  if (this.dirty) {
+    this.width = dom.point.offsetWidth;
+    this.height = dom.point.offsetHeight;
+    this.props.dot.width = dom.dot.offsetWidth;
+    this.props.dot.height = dom.dot.offsetHeight;
+    this.props.content.height = dom.content.offsetHeight;
+
+    // resize contents
+    dom.content.style.marginLeft = 1.5 * this.props.dot.width + 'px';
+    //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
+
+    dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
+
+    this.dirty = false;
+  }
+
+  this._repaintDeleteButton(dom.box);
 };
 
 /**
  * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
- * @return {Boolean} changed
  */
 ItemPoint.prototype.show = function show() {
-  if (!this.dom || !this.dom.point.parentNode) {
-    return this.repaint();
-  }
-  else {
-    return false;
+  if (!this.displayed) {
+    this.repaint();
   }
 };
 
 /**
  * Hide the item from the DOM (when visible)
- * @return {Boolean} changed
  */
 ItemPoint.prototype.hide = function hide() {
-  var changed = false,
-      dom = this.dom;
-  if (dom) {
-    if (dom.point.parentNode) {
-      dom.point.parentNode.removeChild(dom.point);
-      changed = true;
+  if (this.displayed) {
+    if (this.dom.point.parentNode) {
+      this.dom.point.parentNode.removeChild(this.dom.point);
     }
-  }
-  return changed;
-};
 
-/**
- * Reflow the item: calculate its actual size from the DOM
- * @return {boolean} resized    returns true if the axis is resized
- * @override
- */
-ItemPoint.prototype.reflow = function reflow() {
-  var changed = 0,
-      update,
-      dom,
-      props,
-      options,
-      margin,
-      orientation,
-      start,
-      top,
-      data,
-      range;
-
-  if (this.data.start == undefined) {
-    throw new Error('Property "start" missing in item ' + this.data.id);
-  }
-
-  data = this.data;
-  range = this.parent && this.parent.range;
-  if (data && range) {
-    // TODO: account for the width of the item
-    var interval = (range.end - range.start);
-    this.visible = (data.start > range.start - interval) && (data.start < range.end);
+    this.displayed = false;
   }
-  else {
-    this.visible = false;
-  }
-
-  if (this.visible) {
-    dom = this.dom;
-    if (dom) {
-      update = util.updateProperty;
-      props = this.props;
-      options = this.options;
-      orientation = options.orientation || this.defaultOptions.orientation;
-      margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
-      start = this.parent.toScreen(this.data.start) + this.offset;
-
-      changed += update(this, 'width', dom.point.offsetWidth);
-      changed += update(this, 'height', dom.point.offsetHeight);
-      changed += update(props.dot, 'width', dom.dot.offsetWidth);
-      changed += update(props.dot, 'height', dom.dot.offsetHeight);
-      changed += update(props.content, 'height', dom.content.offsetHeight);
-
-      if (orientation == 'top') {
-        top = margin;
-      }
-      else {
-        // default or 'bottom'
-        var parentHeight = this.parent.height;
-        top = Math.max(parentHeight - this.height - margin, 0);
-      }
-      changed += update(this, 'top', top);
-      changed += update(this, 'left', start - props.dot.width / 2);
-      changed += update(props.content, 'marginLeft', 1.5 * props.dot.width);
-      //changed += update(props.content, 'marginRight', 0.5 * props.dot.width); // TODO
-
-      changed += update(props.dot, 'top', (this.height - props.dot.height) / 2);
-    }
-    else {
-      changed += 1;
-    }
-  }
-
-  return (changed > 0);
 };
 
 /**
- * Create an items DOM
- * @private
+ * Reposition the item horizontally
+ * @Override
  */
-ItemPoint.prototype._create = function _create() {
-  var dom = this.dom;
-  if (!dom) {
-    this.dom = dom = {};
+ItemPoint.prototype.repositionX = function repositionX() {
+  var start = this.parent.toScreen(this.data.start) + this.offset;
 
-    // background box
-    dom.point = document.createElement('div');
-    // className is updated in repaint()
-
-    // contents box, right from the dot
-    dom.content = document.createElement('div');
-    dom.content.className = 'content';
-    dom.point.appendChild(dom.content);
-
-    // dot at start
-    dom.dot = document.createElement('div');
-    dom.dot.className  = 'dot';
-    dom.point.appendChild(dom.dot);
+  this.left = start - this.props.dot.width / 2;
 
-    // attach this item as attribute
-    dom.point['timeline-item'] = this;
-  }
+  // reposition point
+  this.dom.point.style.left = this.left + 'px';
 };
 
 /**
- * Reposition the item, recalculate its left, top, and width, using the current
- * range and size of the items itemset
- * @override
+ * Reposition the item vertically
+ * @Override
  */
-ItemPoint.prototype.reposition = function reposition() {
-  var dom = this.dom,
-      props = this.props;
-
-  if (dom) {
-    dom.point.style.top = this.top + 'px';
-    dom.point.style.left = this.left + 'px';
-
-    dom.content.style.marginLeft = props.content.marginLeft + 'px';
-    //dom.content.style.marginRight = props.content.marginRight + 'px'; // TODO
-
-    dom.dot.style.top = props.dot.top + 'px';
-  }
-};
+ItemPoint.prototype.repositionY = function repositionY () {
+  this.dom.point.style.top = this.top + 'px';
+}

src/timeline/component/item/ItemRange.js

@@ -51,13 +51,9 @@ ItemRange.prototype.isVisible = function isVisible () {
  * Repaint the item
  */
 ItemRange.prototype.repaint = function repaint() {
-  var dom,
-      update = util.updateProperty,
-      props= this.props;
-
-  // create DOM
-  dom = this.dom;
+  var dom = this.dom;
   if (!dom) {
+    // create DOM
     this.dom = {};
     dom = this.dom;
 
@@ -100,6 +96,8 @@ ItemRange.prototype.repaint = function repaint() {
     else {
       throw new Error('Property "content" missing in item ' + this.data.id);
     }
+
+    this.dirty = true;
   }
 
   // update class
@@ -108,12 +106,14 @@ ItemRange.prototype.repaint = function repaint() {
   if (this.className != className) {
     this.className = className;
     dom.box.className = 'item range' + className;
+
+    this.dirty = true;
   }
 
   // recalculate size
   if (this.dirty) {
-    update(props.content, 'width', this.dom.content.offsetWidth);
-    update(this, 'height', this.dom.box.offsetHeight);
+    this.props.content.width = this.dom.content.offsetWidth;
+    this.height = this.dom.box.offsetHeight;
 
     this.dirty = false;
   }
@@ -149,114 +149,6 @@ ItemRange.prototype.hide = function hide() {
   }
 };
 
-/**
- * Reflow the item: calculate its actual size from the DOM
- * @return {boolean} resized    returns true if the axis is resized
- * @override
- */
-// TODO: remove function
-ItemRange.prototype.reflow = function reflow() {
-  return false;
-
-  var changed = 0,
-      dom,
-      props,
-      options,
-      margin,
-      padding,
-      parent,
-      start,
-      end,
-      data,
-      range,
-      update,
-      box,
-      parentWidth,
-      contentLeft,
-      orientation,
-      top;
-
-  if (this.visible) {
-    dom = this.dom;
-    if (dom) {
-      props = this.props;
-      options = this.options;
-      parent = this.parent;
-      start = parent.toScreen(this.data.start) + this.offset;
-      end = parent.toScreen(this.data.end) + this.offset;
-      update = util.updateProperty;
-      box = dom.box;
-      parentWidth = parent.width;
-      orientation = options.orientation || this.defaultOptions.orientation;
-      margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
-      padding = options.padding || this.defaultOptions.padding;
-
-      changed += update(props.content, 'width', dom.content.offsetWidth);
-
-      changed += update(this, 'height', box.offsetHeight);
-
-      // limit the width of the this, as browsers cannot draw very wide divs
-      if (start < -parentWidth) {
-        start = -parentWidth;
-      }
-      if (end > 2 * parentWidth) {
-        end = 2 * parentWidth;
-      }
-
-      // when range exceeds left of the window, position the contents at the left of the visible area
-      if (start < 0) {
-        contentLeft = Math.min(-start,
-            (end - start - props.content.width - 2 * padding));
-        // TODO: remove the need for options.padding. it's terrible.
-      }
-      else {
-        contentLeft = 0;
-      }
-      changed += update(props.content, 'left', contentLeft);
-
-      if (orientation == 'top') {
-        top = margin;
-        changed += update(this, 'top', top);
-      }
-      else {
-        // default or 'bottom'
-        top = parent.height - this.height - margin;
-        changed += update(this, 'top', top);
-      }
-
-      changed += update(this, 'left', start);
-      changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
-    }
-    else {
-      changed += 1;
-    }
-  }
-
-  return (changed > 0);
-};
-
-/**
- * Create an items DOM
- * @private
- */
-ItemRange.prototype._create = function _create() {
-  var dom = this.dom;
-  if (!dom) {
-    this.dom = dom = {};
-    // background box
-    dom.box = document.createElement('div');
-    // className is updated in repaint()
-
-    // contents box
-    dom.content = document.createElement('div');
-    dom.content.className = 'content';
-    dom.box.appendChild(dom.content);
-
-    // attach this item as attribute
-    dom.box['timeline-item'] = this;
-  }
-};
-
 /**
  * Reposition the item horizontally
  * @Override