Refactored item selection

docs/timeline.html

@@ -483,8 +483,7 @@ var options = {
   <pre class="prettyprint lang-css">
 .vis.timeline .item {
   padding: 10px;
-}
-  </pre>
+}</pre>
   </td>
 </tr>
 

src/timeline/Stack.js

@@ -29,9 +29,6 @@ function Stack (itemset, options) {
           return 1;
         }
         else {
-          if (!a.data) {
-            throw new Error('hu')
-          }
           return (a.data.start - b.data.start);
         }
       }
@@ -60,7 +57,7 @@ Stack.prototype.setOptions = function setOptions (options) {
 /**
  * Order a map with items
  * @param {Object<String, Item>} items
- * @return {Item[]} sorted items
+ * @return {{asc: Item[], desc: Item[]}} sorted items
  */
 Stack.prototype.order = function order(items) {
   var ordered = [];
@@ -70,13 +67,46 @@ Stack.prototype.order = function order(items) {
     if (items.hasOwnProperty(id)) ordered.push(items[id]);
   }
 
+  /* FIXME: fix option order
   //order the items
   var order = this.options.order || this.defaultOptions.order;
   if (!(typeof order === 'function')) {
     throw new Error('Option order must be a function');
   }
   ordered.sort(order);
+  */
+
+  // TODO: fix ordering, doesn't work correctly for ItemRange
+  ordered.sort(function (a, b) {
+    var aCenter = ('end' in a.data) ? (a.data.start + a.data.end) / 2 : a.data.start,
+        bCenter = ('end' in b.data) ? (b.data.start + b.data.end) / 2 : b.data.start;
+
+    return aCenter - bCenter;
+  });
+
+
+  /* TODO: cleanup
+  var asc = array.concat(),
+      desc= array.concat();
 
+  // sort ascending
+  asc.sort(function (a, b) {
+    return a.data.start - b.data.start;
+  });
+
+  // sort descending
+  desc.sort(function (a, b) {
+    var aTime = 'end' in a.data ? a.data.end : a.data.start,
+        bTime = 'end' in b.data ? b.data.end : b.data.start;
+
+    return bTime - aTime;
+  });
+
+  return {
+    asc: asc,
+    desc: desc
+  };
+  */
   return ordered;
 };
 

src/timeline/component/ItemSet.js

@@ -45,19 +45,13 @@ function ItemSet(parent, depends, options) {
   // data change listeners
   this.listeners = {
     'add': function (event, params, senderId) {
-      if (senderId != me.id) {
-        me._onAdd(params.items);
-      }
+      if (senderId != me.id) me._onAdd(params.items);
     },
     'update': function (event, params, senderId) {
-      if (senderId != me.id) {
-        me._onUpdate(params.items);
-      }
+      if (senderId != me.id) me._onUpdate(params.items);
     },
     'remove': function (event, params, senderId) {
-      if (senderId != me.id) {
-        me._onRemove(params.items);
-      }
+      if (senderId != me.id) me._onRemove(params.items);
     }
   };
 
@@ -166,7 +160,7 @@ ItemSet.prototype.setRange = function setRange(range) {
  *                      unselected.
  */
 ItemSet.prototype.setSelection = function setSelection(ids) {
-  var i, ii, id, item, selection;
+  var i, ii, id, item;
 
   if (ids) {
     if (!Array.isArray(ids)) {
@@ -764,7 +758,7 @@ ItemSet.prototype._onDrag = function (event) {
 
     // TODO: implement dragging from one group to another
 
-    this.requestReflow();
+    this.repaint();
 
     event.stopPropagation();
   }
@@ -808,7 +802,7 @@ ItemSet.prototype._onDragEnd = function (event) {
             // restore original values
             if ('start' in props) props.item.data.start = props.start;
             if ('end' in props)   props.item.data.end   = props.end;
-            me.requestReflow();
+            me.repaint();
           }
         });
       }

src/timeline/component/css/item.css

@@ -7,8 +7,8 @@
   display: inline-block;
   padding: 5px;
 
-  -webkit-transition: top .4s, height .4s, background-color .4s, -webkit-transform .4s ease-in-out;
-  transition: top .4s, height .4s, background-color .4s, transform .4s ease-in-out;
+  -webkit-transition: top .4s ease-in-out, height .4s ease-in-out;
+  transition:         top .4s ease-in-out, height .4s ease-in-out;
 }
 
 .vis.timeline .item.selected {
@@ -25,7 +25,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;
 }
 

src/timeline/component/item/Item.js

@@ -30,7 +30,7 @@ function Item (parent, data, options, defaultOptions) {
  */
 Item.prototype.select = function select() {
   this.selected = true;
-  if (this.visible) this.repaint();
+  if (this.displayed) this.repaint();
 };
 
 /**
@@ -38,7 +38,7 @@ Item.prototype.select = function select() {
  */
 Item.prototype.unselect = function unselect() {
   this.selected = false;
-  if (this.visible) this.repaint();
+  if (this.displayed) this.repaint();
 };
 
 /**

src/timeline/component/item/ItemBox.js

@@ -160,11 +160,11 @@ ItemBox.prototype.hide = function hide() {
     if (dom.line.parentNode)  dom.line.parentNode.removeChild(dom.line);
     if (dom.dot.parentNode)   dom.dot.parentNode.removeChild(dom.dot);
 
+    this.top = null;
+    this.left = null;
+
     this.displayed = false;
   }
-
-  this.top = null;
-  this.left = null;
 };
 
 /**

src/timeline/component/item/ItemPoint.js

@@ -129,7 +129,7 @@ ItemPoint.prototype.repaint = function repaint() {
     this.dirty = false;
   }
 
-  this._repaintDeleteButton(dom.box);
+  this._repaintDeleteButton(dom.point);
 };
 
 /**
@@ -151,6 +151,9 @@ ItemPoint.prototype.hide = function hide() {
       this.dom.point.parentNode.removeChild(this.dom.point);
     }
 
+    this.top = null;
+    this.left = null;
+
     this.displayed = false;
   }
 };

src/timeline/component/item/ItemRange.js

@@ -140,6 +140,9 @@ ItemRange.prototype.hide = function hide() {
       box.parentNode.removeChild(box);
     }
 
+    this.top = null;
+    this.left = null;
+
     this.displayed = false;
   }
 };

src/timeline/component/item/ItemRangeOverflow.js

@@ -47,9 +47,9 @@ ItemRangeOverflow.prototype.repositionX = function repositionX() {
 
   this.left = start;
   var boxWidth = Math.max(end - start, 1);
-  this.width = (this.props.content && boxWidth < this.props.content.width) ?
-      this.props.content.width :
-      boxWidth;
+  this.width = (this.props.content.width < boxWidth) ?
+      boxWidth :
+      start + contentLeft + this.props.content.width;
 
   this.dom.box.style.left = this.left + 'px';
   this.dom.box.style.width = boxWidth + 'px';