From fcc817b4f0d9b2e994f77882db7fa40741627a62 Mon Sep 17 00:00:00 2001
From: Wim Rijnders <wrijnders@gmail.com>
Date: Sat, 22 Oct 2016 19:50:06 +0200
Subject: [PATCH 01/14] Added point draw methods for graph styles 'bar-color'
 and 'bar-size'

---
 lib/graph3d/Graph3d.js | 188 +++++++++++------------------------------
 1 file changed, 51 insertions(+), 137 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index 95be0634..c6f27569 100644
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -836,6 +836,12 @@ Graph3d.prototype.redraw = function() {
     case Graph3d.STYLE.BAR:
       pointDrawingMethod = Graph3d.prototype._redrawBarGraphPoint;
       break;
+    case Graph3d.STYLE.BARCOLOR:
+      pointDrawingMethod = Graph3d.prototype._redrawBarColorGraphPoint;
+      break;
+    case Graph3d.STYLE.BARSIZE:
+      pointDrawingMethod = Graph3d.prototype._redrawBarSizeGraphPoint;
+      break;
   }
 
   if (pointDrawingMethod !== undefined) {
@@ -851,9 +857,6 @@ Graph3d.prototype.redraw = function() {
     }
     else if (this.style === Graph3d.STYLE.LINE) {
       this._redrawDataLine();
-    } else if (this.style === Graph3d.STYLE.BARCOLOR ||
-      this.style === Graph3d.STYLE.BARSIZE) {
-      this._redrawDataBar();
     }
     else {
       // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
@@ -1577,12 +1580,19 @@ Graph3d.prototype._redrawDataDot = function() {
 };
 
 
+// -----------------------------------------------------------------------------
+// Methods for drawing points per graph style.
+// -----------------------------------------------------------------------------
+
 /**
  * Draw a bar element in the view with the given properties.
  */
 Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
   var i, j, surface, corners;
 
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
   // calculate all corner points
   var me = this;
   var point3d = point.point;
@@ -1661,24 +1671,50 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
 
 
 /**
- * Draw single datapoint for graph style 'Bar'.
+ * Draw single datapoint for graph style 'bar'.
  */
 Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
-  var i, j, surface, corners;
+  var xWidth = this.xBarWidth / 2;
+  var yWidth = this.yBarWidth / 2;
+
+  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+  var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+  var color       = this._hsv2rgb(hue, 1, 1);
+  var borderColor = this._hsv2rgb(hue, 1, 0.8);
+
+  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+};
 
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
 
+/**
+ * Draw single datapoint for graph style 'bar-color'.
+ */
+Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
 
+  // calculate the color based on the value
+  var hue         = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+  var color       = this._hsv2rgb(hue, 1, 1);
+  var borderColor = this._hsv2rgb(hue, 1, 0.8);
+
+  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+};
+
+
+/**
+ * Draw single datapoint for graph style 'bar-size'.
+ */
+Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
+  // calculate size for the bar
+  var fraction = (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
+  var xWidth   = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
+  var yWidth   = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
+
 
   // determine color
-  var hue, color, borderColor;
-  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-  hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-  color = this._hsv2rgb(hue, 1, 1);
-  borderColor = this._hsv2rgb(hue, 1, 0.8);
+  var color       = this.dataColor.fill;
+  var borderColor = this.dataColor.stroke;
 
   this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
 };
@@ -1707,131 +1743,9 @@ Graph3d.prototype._redrawDataGraph = function(pointDrawMethod) {
 };
 
 
-/**
- * Draw all datapoints as bars.
- * This function can be used when the style is 'bar', 'bar-color', or 'bar-size'
- */
-Graph3d.prototype._redrawDataBar = function() {
-  var ctx = this._getContext();
-  var i, j, surface, corners;
-
-  if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-    return;  // TODO: throw exception?
-
-  this._calcTranslations(this.dataPoints);
-
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
-
-  // draw the datapoints as bars
-  var xWidth = this.xBarWidth / 2;
-  var yWidth = this.yBarWidth / 2;
-  for (i = 0; i < this.dataPoints.length; i++) {
-    var point = this.dataPoints[i];
-
-    // TODO: Remove code for style `Bar` here - it has been refactored to separate routine
-
-    // determine color
-    var hue, color, borderColor;
-    if (this.style === Graph3d.STYLE.BARCOLOR ) {
-      // calculate the color based on the value
-      hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-      color = this._hsv2rgb(hue, 1, 1);
-      borderColor = this._hsv2rgb(hue, 1, 0.8);
-    }
-    else if (this.style === Graph3d.STYLE.BARSIZE) {
-      color = this.dataColor.fill;
-      borderColor = this.dataColor.stroke;
-    }
-    else {
-      // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-      hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-      color = this._hsv2rgb(hue, 1, 1);
-      borderColor = this._hsv2rgb(hue, 1, 0.8);
-    }
-
-    // calculate size for the bar
-    if (this.style === Graph3d.STYLE.BARSIZE) {
-      xWidth = (this.xBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
-      yWidth = (this.yBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
-    }
-
-    // calculate all corner points
-    var me = this;
-    var point3d = point.point;
-    var top = [
-      {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
-      {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
-      {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
-      {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
-    ];
-    var bottom = [
-      {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, this.zMin)},
-      {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, this.zMin)},
-      {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, this.zMin)},
-      {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, this.zMin)}
-    ];
-
-    // calculate screen location of the points
-    top.forEach(function (obj) {
-      obj.screen = me._convert3Dto2D(obj.point);
-    });
-    bottom.forEach(function (obj) {
-      obj.screen = me._convert3Dto2D(obj.point);
-    });
-
-    // create five sides, calculate both corner points and center points
-    var surfaces = [
-      {corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
-      {corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
-      {corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
-      {corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
-      {corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
-    ];
-    point.surfaces = surfaces;
-
-    // calculate the distance of each of the surface centers to the camera
-    for (j = 0; j < surfaces.length; j++) {
-      surface = surfaces[j];
-      var transCenter = this._convertPointToTranslation(surface.center);
-      surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
-      // TODO: this dept calculation doesn't work 100% of the cases due to perspective,
-      //     but the current solution is fast/simple and works in 99.9% of all cases
-      //     the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
-    }
-
-    // order the surfaces by their (translated) depth
-    surfaces.sort(function (a, b) {
-      var diff = b.dist - a.dist;
-      if (diff) return diff;
-
-      // if equal depth, sort the top surface last
-      if (a.corners === top) return 1;
-      if (b.corners === top) return -1;
-
-      // both are equal
-      return 0;
-    });
-
-    // draw the ordered surfaces
-    ctx.lineWidth = this._getStrokeWidth(point);
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = color;
-    // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
-    for (j = 2; j < surfaces.length; j++) {
-      surface = surfaces[j];
-      corners = surface.corners;
-      ctx.beginPath();
-      ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
-      ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
-      ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
-      ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
-      ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
-      ctx.fill();
-      ctx.stroke();
-    }
-  }
-};
+// -----------------------------------------------------------------------------
+// End methods for drawing points per graph style.
+// -----------------------------------------------------------------------------
 
 
 /**

From cf7543769235f7c98740d45b834d4d834c7f6b74 Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Sun, 23 Oct 2016 00:23:53 +0300
Subject: [PATCH 02/14] Fix dragging items that have a React template (#2211)

* Hide vertically hidden ranged items in groups that are not visible
* Add element to templates options
* Fix comment typo
* Add documentation for react mounting
* add react example
* Fix typo
* fix title
* Fix review comments
* Add vis-drag-center to fix dragging bug when template is react component
---
 lib/timeline/component/css/item.css      |  9 +++++++++
 lib/timeline/component/item/BoxItem.js   |  1 +
 lib/timeline/component/item/Item.js      | 24 ++++++++++++++++++++++++
 lib/timeline/component/item/PointItem.js |  3 ++-
 lib/timeline/component/item/RangeItem.js |  1 +
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 41d22256..0e9327ae 100644
--- a/lib/timeline/component/css/item.css
+++ b/lib/timeline/component/css/item.css
@@ -136,6 +136,15 @@
   color: white;
 }
 
+.vis-item .vis-drag-center {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0px;
+  cursor: move;
+}
+
 .vis-item.vis-range .vis-drag-left {
   position: absolute;
   width: 24px;
diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js
index f77652bf..2963619b 100644
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@@ -164,6 +164,7 @@ BoxItem.prototype.redraw = function() {
     this.dirty = false;
   }
 
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.box);
 };
 
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index c70cc0a4..c12a3203 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -287,6 +287,7 @@ Item.prototype._updateStyle = function(element) {
   }
 };
 
+
 /**
  * Stringify the items contents
  * @param {string | Element | undefined} content
@@ -315,4 +316,27 @@ Item.prototype.getWidthRight = function () {
   return 0;
 };
 
+/**
+ * Repaint a drag area on the center of the item when the item is selected
+ * @protected
+ */
+Item.prototype._repaintDragCenter = function () {
+  if (this.selected && this.options.editable.updateTime && !this.dom.dragCenter) {
+    // create and show drag area
+    var dragCenter = document.createElement('div');
+    dragCenter.className = 'vis-drag-center';
+    dragCenter.dragCenterItem = this;
+
+    this.dom.box.appendChild(dragCenter);
+    this.dom.dragCenter = dragCenter;
+  }
+  else if (!this.selected && this.dom.dragCenter) {
+    // delete drag area
+    if (this.dom.dragCenter.parentNode) {
+      this.dom.dragCenter.parentNode.removeChild(this.dom.dragCenter);
+    }
+    this.dom.dragCenter = null;
+  }
+};
+
 module.exports = Item;
diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js
index 10a2463c..91b86909 100644
--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@@ -140,7 +140,8 @@ PointItem.prototype.redraw = function() {
 
     this.dirty = false;
   }
-
+  
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.point);
 };
 
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 8ec29991..5e287f4f 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -124,6 +124,7 @@ RangeItem.prototype.redraw = function() {
     this.dirty = false;
   }
   this._repaintDeleteButton(dom.box);
+  this._repaintDragCenter();
   this._repaintDragLeft();
   this._repaintDragRight();
 };

From 66ab105d84693bcbf0e54f50fdc7b30774b11137 Mon Sep 17 00:00:00 2001
From: Alexander Wunschik <alex@wunschik.net>
Date: Sun, 23 Oct 2016 09:31:53 +0200
Subject: [PATCH 03/14] add two eyes review process

---
 misc/how_to_help.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/misc/how_to_help.md b/misc/how_to_help.md
index fe16e1e6..f471b237 100644
--- a/misc/how_to_help.md
+++ b/misc/how_to_help.md
@@ -64,4 +64,6 @@ There are some rules for pull-request:
 
 * Always adapt to the code style of the existing source. Never adapt existing code to your personal taste. :trollface:
 
+* Pull-requests must be reviewed by at least two member of the support team. The First must approve the pull-request, the second can than merge after also checking it.
+
 **Happy Helping!!**

From 1c4e1a41eea5f2684fe8f67e55b4cd9b6839e266 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Sun, 23 Oct 2016 09:34:53 +0200
Subject: [PATCH 04/14] Add point draw methods for styles 'dot' and 'dot-line'
 (#2212)

---
 lib/graph3d/Graph3d.js | 117 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 97 insertions(+), 20 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index c6f27569..27466cda 100644
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -817,21 +817,13 @@ Graph3d.prototype.setOptions = function (options) {
   }
 };
 
+
 /**
- * Redraw the Graph.
+ * Determine which point drawing method to use
  */
-Graph3d.prototype.redraw = function() {
-  if (this.dataPoints === undefined) {
-    throw new Error('Graph data not initialized');
-  }
-
-  this._resizeCanvas();
-  this._resizeCenter();
-  this._redrawSlider();
-  this._redrawClear();
-  this._redrawAxis();
-
+Graph3d.prototype.getPointDrawingMethod = function() {
   var pointDrawingMethod = undefined;
+
   switch (this.style) {
     case Graph3d.STYLE.BAR:
       pointDrawingMethod = Graph3d.prototype._redrawBarGraphPoint;
@@ -842,8 +834,34 @@ Graph3d.prototype.redraw = function() {
     case Graph3d.STYLE.BARSIZE:
       pointDrawingMethod = Graph3d.prototype._redrawBarSizeGraphPoint;
       break;
+    case Graph3d.STYLE.DOT:
+      pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
+      break;
+    case Graph3d.STYLE.DOT:
+      pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
+      break;
   }
 
+  return pointDrawingMethod;
+};
+
+
+/**
+ * Redraw the Graph.
+ */
+Graph3d.prototype.redraw = function() {
+  if (this.dataPoints === undefined) {
+    throw new Error('Graph data not initialized');
+  }
+
+  this._resizeCanvas();
+  this._resizeCenter();
+  this._redrawSlider();
+  this._redrawClear();
+  this._redrawAxis();
+
+  var pointDrawingMethod = this.getPointDrawingMethod();
+
   if (pointDrawingMethod !== undefined) {
     // Use generic drawing loop
     // Pass the method reference here
@@ -1581,7 +1599,7 @@ Graph3d.prototype._redrawDataDot = function() {
 
 
 // -----------------------------------------------------------------------------
-// Methods for drawing points per graph style.
+// Drawing primitives for the graphs
 // -----------------------------------------------------------------------------
 
 /**
@@ -1670,19 +1688,43 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
 };
 
 
+Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
+  ctx.lineWidth   = this._getStrokeWidth(point);
+  ctx.strokeStyle = borderColor;
+  ctx.fillStyle   = color;
+  ctx.beginPath();
+  ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
+  ctx.fill();
+  ctx.stroke();
+};
+
+
+Graph3d.prototype._getColorsRegular = function(ctx, point) {
+  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+  var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+  var color       = this._hsv2rgb(hue, 1, 1);
+  var borderColor = this._hsv2rgb(hue, 1, 0.8);
+
+  return {
+    fill  : color,
+    border: borderColor
+  };
+};
+
+// -----------------------------------------------------------------------------
+// Methods for drawing points per graph style.
+// -----------------------------------------------------------------------------
+
+
 /**
  * Draw single datapoint for graph style 'bar'.
  */
 Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
+  var colors = this._getColorsRegular(ctx, point);
 
-  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-  var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-  var color       = this._hsv2rgb(hue, 1, 1);
-  var borderColor = this._hsv2rgb(hue, 1, 0.8);
-
-  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+  this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
 
 
@@ -1711,7 +1753,6 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
   var xWidth   = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
   var yWidth   = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
 
-
   // determine color
   var color       = this.dataColor.fill;
   var borderColor = this.dataColor.stroke;
@@ -1720,6 +1761,42 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
 };
 
 
+/**
+ * Draw single datapoint for graph style 'dot'.
+ */
+Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
+  var size = this._dotSize();
+
+  var radius;
+  if (this.showPerspective) {
+    radius = size / -point.trans.z;
+  }
+  else {
+    radius = size * -(this.eye.z / this.camera.getArmLength());
+  }
+  if (radius < 0) {
+    radius = 0;
+  }
+
+  var colors = this._getColorsRegular(ctx, point);
+
+  this._drawCircle(ctx, point, radius, colors.fill, colors.border);
+};
+
+
+/**
+ * Draw single datapoint for graph style 'dot-line'.
+ */
+Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
+  // draw a vertical line from the XY-plane to the graph value
+  var from = this._convert3Dto2D(point.bottom);
+  ctx.lineWidth = 1;
+  this._line(ctx, from, point.screen, this.gridColor);
+
+  this._redrawDotGraphPoint(ctx, point);
+};
+
+
 /**
  * Draw all datapoints for currently selected graph style.
  *

From 9e1fd6671e1f6e1cf901b9c6a23ace1d374d474c Mon Sep 17 00:00:00 2001
From: Wim Rijnders <wrijnders@gmail.com>
Date: Sun, 23 Oct 2016 11:38:29 +0200
Subject: [PATCH 05/14] Add point draw methods for styles 'dot-color' and
 'dot-size'

---
 lib/graph3d/Graph3d.js | 225 ++++++++++++++++++++---------------------
 1 file changed, 111 insertions(+), 114 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index 27466cda..aae7e869 100644
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -837,9 +837,15 @@ Graph3d.prototype.getPointDrawingMethod = function() {
     case Graph3d.STYLE.DOT:
       pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
       break;
-    case Graph3d.STYLE.DOT:
+    case Graph3d.STYLE.DOTLINE:
       pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
       break;
+    case Graph3d.STYLE.DOTCOLOR:
+      pointDrawingMethod = Graph3d.prototype._redrawDotColorGraphPoint;
+      break;
+    case Graph3d.STYLE.DOTSIZE:
+      pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
+      break;
   }
 
   return pointDrawingMethod;
@@ -877,8 +883,8 @@ Graph3d.prototype.redraw = function() {
       this._redrawDataLine();
     }
     else {
-      // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
-      this._redrawDataDot();
+      // Should not be reached any more.
+      throw new Error('Unknown graph style \'' + this.style + '\'');
     }
   }
 
@@ -893,6 +899,10 @@ Graph3d.prototype.redraw = function() {
 Graph3d.prototype._getContext = function() {
   var canvas = this.frame.canvas;
   var ctx = canvas.getContext('2d');
+
+  ctx.lineJoin = 'round';
+  ctx.lineCap  = 'round';
+
   return ctx;
 };
 
@@ -1430,9 +1440,6 @@ Graph3d.prototype._redrawDataGrid = function() {
     topSideVisible, fillStyle, strokeStyle, lineWidth,
     h, s, v, zAvg;
 
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
-
   if (this.dataPoints === undefined || this.dataPoints.length <= 0)
     return; // TODO: throw exception?
 
@@ -1522,95 +1529,18 @@ Graph3d.prototype._getStrokeWidth = function(point) {
   return this.dataColor.strokeWidth;
 };
 
-/**
- * Draw all datapoints as dots.
- * This function can be used when the style is 'dot' or 'dot-line'
- */
-Graph3d.prototype._redrawDataDot = function() {
-  var ctx = this._getContext();
-  var i;
-
-  if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-    return;  // TODO: throw exception?
-
-  this._calcTranslations(this.dataPoints);
-
-  // draw the datapoints as colored circles
-  var dotSize = this._dotSize();
-  for (i = 0; i < this.dataPoints.length; i++) {
-    var point = this.dataPoints[i];
-
-    if (this.style === Graph3d.STYLE.DOTLINE) {
-      // draw a vertical line from the bottom to the graph value
-      //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
-      var from = this._convert3Dto2D(point.bottom);
-      ctx.lineWidth = 1;
-      this._line(ctx, from, point.screen, this.gridColor);
-    }
-
-    // calculate radius for the circle
-    var size;
-    if (this.style === Graph3d.STYLE.DOTSIZE) {
-      size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
-    }
-    else {
-      size = dotSize;
-    }
-
-    var radius;
-    if (this.showPerspective) {
-      radius = size / -point.trans.z;
-    }
-    else {
-      radius = size * -(this.eye.z / this.camera.getArmLength());
-    }
-    if (radius < 0) {
-      radius = 0;
-    }
-
-    var hue, color, borderColor;
-    if (this.style === Graph3d.STYLE.DOTCOLOR ) {
-      // calculate the color based on the value
-      hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-      color = this._hsv2rgb(hue, 1, 1);
-      borderColor = this._hsv2rgb(hue, 1, 0.8);
-    }
-    else if (this.style === Graph3d.STYLE.DOTSIZE) {
-      color = this.dataColor.fill;
-      borderColor = this.dataColor.stroke;
-    }
-    else {
-      // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-      hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-      color = this._hsv2rgb(hue, 1, 1);
-      borderColor = this._hsv2rgb(hue, 1, 0.8);
-    }
-
-    // draw the circle
-    ctx.lineWidth = this._getStrokeWidth(point);
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
-    ctx.fill();
-    ctx.stroke();
-  }
-};
-
 
 // -----------------------------------------------------------------------------
 // Drawing primitives for the graphs
 // -----------------------------------------------------------------------------
 
+
 /**
  * Draw a bar element in the view with the given properties.
  */
 Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
   var i, j, surface, corners;
 
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
-
   // calculate all corner points
   var me = this;
   var point3d = point.point;
@@ -1688,7 +1618,12 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
 };
 
 
-Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
+/**
+ * @param size optional; if not specified use value from 'this._dotSize()`
+ */
+Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) {
+  var radius = this._calcRadius(point, size);
+
   ctx.lineWidth   = this._getStrokeWidth(point);
   ctx.strokeStyle = borderColor;
   ctx.fillStyle   = color;
@@ -1699,7 +1634,10 @@ Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor)
 };
 
 
-Graph3d.prototype._getColorsRegular = function(ctx, point) {
+/**
+ * Determine the colors for the 'regular' graph styles.
+ */
+Graph3d.prototype._getColorsRegular = function(point) {
   // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
   var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
   var color       = this._hsv2rgb(hue, 1, 1);
@@ -1711,6 +1649,63 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
   };
 };
 
+
+/**
+ * Get the colors for the 'color' graph styles.
+ * These styles are currently: 'bar-color' and 'dot-color'
+ */
+Graph3d.prototype._getColorsColor = function(point) {
+  // calculate the color based on the value
+  var hue         = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+  var color       = this._hsv2rgb(hue, 1, 1);
+  var borderColor = this._hsv2rgb(hue, 1, 0.8);
+
+  return {
+    fill   : color,
+    border : borderColor 
+  };
+};
+
+
+/**
+ * Get the colors for the 'size' graph styles.
+ * These styles are currently: 'bar-size' and 'dot-size'
+ */
+Graph3d.prototype._getColorsSize = function() {
+  return {
+    fill   : this.dataColor.fill,
+    border : this.dataColor.stroke
+  };
+};
+
+
+/**
+ * Determine the size of a point on-screen, as determined by the
+ * distance to the camera.
+ *
+ * @param size the size that needs to be translated to screen coordinates.
+ *             optional; if not passed, use the default point size.
+ */
+Graph3d.prototype._calcRadius = function(point, size) {
+  if (size === undefined) {
+    size = this._dotSize();
+  }
+
+  var radius;
+  if (this.showPerspective) {
+    radius = size / -point.trans.z;
+  }
+  else {
+    radius = size * -(this.eye.z / this.camera.getArmLength());
+  }
+  if (radius < 0) {
+    radius = 0;
+  }
+
+  return radius;
+};
+
+
 // -----------------------------------------------------------------------------
 // Methods for drawing points per graph style.
 // -----------------------------------------------------------------------------
@@ -1722,7 +1717,7 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
 Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
-  var colors = this._getColorsRegular(ctx, point);
+  var colors = this._getColorsRegular(point);
 
   this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
@@ -1734,13 +1729,9 @@ Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
 Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
+  var colors = this._getColorsColor(point);
 
-  // calculate the color based on the value
-  var hue         = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-  var color       = this._hsv2rgb(hue, 1, 1);
-  var borderColor = this._hsv2rgb(hue, 1, 0.8);
-
-  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+  this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
 
 
@@ -1753,11 +1744,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
   var xWidth   = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
   var yWidth   = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
 
-  // determine color
-  var color       = this.dataColor.fill;
-  var borderColor = this.dataColor.stroke;
+  var colors   = this._getColorsSize();
 
-  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+  this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
 
 
@@ -1765,22 +1754,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
  * Draw single datapoint for graph style 'dot'.
  */
 Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
-  var size = this._dotSize();
+  var colors = this._getColorsRegular(point);
 
-  var radius;
-  if (this.showPerspective) {
-    radius = size / -point.trans.z;
-  }
-  else {
-    radius = size * -(this.eye.z / this.camera.getArmLength());
-  }
-  if (radius < 0) {
-    radius = 0;
-  }
-
-  var colors = this._getColorsRegular(ctx, point);
-
-  this._drawCircle(ctx, point, radius, colors.fill, colors.border);
+  this._drawCircle(ctx, point, colors.fill, colors.border);
 };
 
 
@@ -1797,6 +1773,29 @@ Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
 };
 
 
+/**
+ * Draw single datapoint for graph style 'dot-color'.
+ */
+Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
+  var colors = this._getColorsColor(point);
+
+  this._drawCircle(ctx, point, colors.fill, colors.border);
+};
+
+
+/**
+ * Draw single datapoint for graph style 'dot-size'.
+ */
+Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
+  var dotSize  = this._dotSize();
+  var fraction = (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
+  var size     = dotSize/2 + 2*dotSize * fraction;
+  var colors   = this._getColorsSize();
+
+  this._drawCircle(ctx, point, colors.fill, colors.border, size);
+};
+
+
 /**
  * Draw all datapoints for currently selected graph style.
  *
@@ -1843,8 +1842,6 @@ Graph3d.prototype._redrawDataLine = function() {
     point = this.dataPoints[0];
 
     ctx.lineWidth = this._getStrokeWidth(point);
-    ctx.lineJoin = 'round';
-    ctx.lineCap = 'round';
     ctx.strokeStyle = this.dataColor.stroke;
 
     for (i = 0; i < this.dataPoints.length; i++) {

From 6adac314fdcffa84a5468d0d59905922e3522258 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Mon, 24 Oct 2016 09:40:17 +0200
Subject: [PATCH 06/14] Added point draw methods for styles 'surface' and
 'grid' (#2215)

---
 lib/graph3d/Graph3d.js | 248 ++++++++++++++++++++++-------------------
 1 file changed, 131 insertions(+), 117 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index aae7e869..f84908ef 100644
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -846,6 +846,12 @@ Graph3d.prototype.getPointDrawingMethod = function() {
     case Graph3d.STYLE.DOTSIZE:
       pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
       break;
+    case Graph3d.STYLE.SURFACE:
+      pointDrawingMethod = Graph3d.prototype._redrawSurfaceGraphPoint;
+      break;
+    case Graph3d.STYLE.GRID:
+      pointDrawingMethod = Graph3d.prototype._redrawGridGraphPoint;
+      break;
   }
 
   return pointDrawingMethod;
@@ -875,11 +881,7 @@ Graph3d.prototype.redraw = function() {
   } else {
     // Use the old style drawing methods
 
-    if (this.style === Graph3d.STYLE.GRID ||
-      this.style === Graph3d.STYLE.SURFACE) {
-      this._redrawDataGrid();
-    }
-    else if (this.style === Graph3d.STYLE.LINE) {
+    if (this.style === Graph3d.STYLE.LINE) {
       this._redrawDataLine();
     }
     else {
@@ -1414,108 +1416,6 @@ Graph3d.prototype._hsv2rgb = function(H, S, V) {
 };
 
 
-Graph3d.prototype._drawGridLine = function(ctx, from, to) {
-  if (from === undefined || to === undefined) {
-     return;
-  }
-
-  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-  var zAvg = (from.point.z + to.point.z) / 2;
-  var h    = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-
-  ctx.lineWidth   = this._getStrokeWidth(from) * 2;
-  ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
-  this._line(ctx, from.screen, to.screen);
-};
-
-
-/**
- * Draw all datapoints as a grid
- * This function can be used when the style is 'grid'
- */
-Graph3d.prototype._redrawDataGrid = function() {
-  var ctx = this._getContext(),
-    point, right, top, cross,
-    i,
-    topSideVisible, fillStyle, strokeStyle, lineWidth,
-    h, s, v, zAvg;
-
-  if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-    return; // TODO: throw exception?
-
-  this._calcTranslations(this.dataPoints);
-
-  if (this.style === Graph3d.STYLE.SURFACE) {
-    for (i = 0; i < this.dataPoints.length; i++) {
-      point = this.dataPoints[i];
-      right = point.pointRight;
-      top   = point.pointTop;
-      cross = point.pointCross;
-
-      if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {
-
-        if (this.showGrayBottom || this.showShadow) {
-          // calculate the cross product of the two vectors from center
-          // to left and right, in order to know whether we are looking at the
-          // bottom or at the top side. We can also use the cross product
-          // for calculating light intensity
-          var aDiff = Point3d.subtract(cross.trans, point.trans);
-          var bDiff = Point3d.subtract(top.trans, right.trans);
-          var crossproduct = Point3d.crossProduct(aDiff, bDiff);
-          var len = crossproduct.length();
-          // FIXME: there is a bug with determining the surface side (shadow or colored)
-
-          topSideVisible = (crossproduct.z > 0);
-        }
-        else {
-          topSideVisible = true;
-        }
-
-        if (topSideVisible) {
-          // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-          zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
-          h = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-          s = 1; // saturation
-
-          if (this.showShadow) {
-            v = Math.min(1 + (crossproduct.x / len) / 2, 1);  // value. TODO: scale
-            fillStyle = this._hsv2rgb(h, s, v);
-            strokeStyle = fillStyle;
-          }
-          else  {
-            v = 1;
-            fillStyle = this._hsv2rgb(h, s, v);
-            strokeStyle = this.axisColor; // TODO: should be customizable
-          }
-        }
-        else {
-          fillStyle = 'gray';
-          strokeStyle = this.axisColor;
-        }
-
-        ctx.lineWidth = this._getStrokeWidth(point);
-        ctx.fillStyle = fillStyle;
-        ctx.strokeStyle = strokeStyle;
-        ctx.beginPath();
-        ctx.moveTo(point.screen.x, point.screen.y);
-        ctx.lineTo(right.screen.x, right.screen.y);
-        ctx.lineTo(cross.screen.x, cross.screen.y);
-        ctx.lineTo(top.screen.x, top.screen.y);
-        ctx.closePath();
-        ctx.fill();
-        ctx.stroke(); // TODO: only draw stroke when strokeWidth > 0
-      }
-    }
-  }
-  else { // grid style
-    for (i = 0; i < this.dataPoints.length; i++) {
-      point = this.dataPoints[i];
-      this._drawGridLine(ctx, point, point.pointRight);
-      this._drawGridLine(ctx, point, point.pointTop);
-    }
-  }
-};
-
 Graph3d.prototype._getStrokeWidth = function(point) {
   if (point !== undefined) {
     if (this.showPerspective) {
@@ -1539,7 +1439,7 @@ Graph3d.prototype._getStrokeWidth = function(point) {
  * Draw a bar element in the view with the given properties.
  */
 Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
-  var i, j, surface, corners;
+  var i, j, surface;
 
   // calculate all corner points
   var me = this;
@@ -1605,16 +1505,40 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
   // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
   for (j = 2; j < surfaces.length; j++) {
     surface = surfaces[j];
-    corners = surface.corners;
-    ctx.beginPath();
-    ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
-    ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
-    ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
-    ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
-    ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
-    ctx.fill();
-    ctx.stroke();
+    this._polygon(ctx, surface.corners);
+  }
+};
+
+
+/**
+ * Draw a polygon using the passed points and fill it with the passed style and stroke.
+ *
+ * @param points      an array of points. 
+ * @param fillStyle   optional; the fill style to set
+ * @param strokeStyle optional; the stroke style to set
+ */
+Graph3d.prototype._polygon = function(ctx, points, fillStyle, strokeStyle) {
+  if (points.length < 2) {
+    return;
+  }
+
+  if (fillStyle !== undefined) {
+    ctx.fillStyle   = fillStyle;
+  }
+  if (strokeStyle !== undefined) {
+    ctx.strokeStyle = strokeStyle;
+  }
+  ctx.beginPath();
+  ctx.moveTo(points[0].screen.x, points[0].screen.y);
+
+  for (var i = 1; i < points.length; ++i) {
+    var point = points[i];
+    ctx.lineTo(point.screen.x, point.screen.y);
   }
+
+  ctx.closePath();
+  ctx.fill();
+  ctx.stroke(); // TODO: only draw stroke when strokeWidth > 0
 };
 
 
@@ -1796,6 +1720,96 @@ Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
 };
 
 
+/**
+ * Draw single datapoint for graph style 'surface'.
+ */
+Graph3d.prototype._redrawSurfaceGraphPoint = function(ctx, point) {
+  var right = point.pointRight;
+  var top   = point.pointTop;
+  var cross = point.pointCross;
+
+  if (point === undefined || right === undefined || top === undefined || cross === undefined) {
+    return;
+  }
+
+  var topSideVisible = true;
+  var fillStyle;
+  var strokeStyle;
+  var lineWidth;
+
+  if (this.showGrayBottom || this.showShadow) {
+    // calculate the cross product of the two vectors from center
+    // to left and right, in order to know whether we are looking at the
+    // bottom or at the top side. We can also use the cross product
+    // for calculating light intensity
+    var aDiff = Point3d.subtract(cross.trans, point.trans);
+    var bDiff = Point3d.subtract(top.trans, right.trans);
+    var crossproduct = Point3d.crossProduct(aDiff, bDiff);
+    var len = crossproduct.length();
+    // FIXME: there is a bug with determining the surface side (shadow or colored)
+
+    topSideVisible = (crossproduct.z > 0);
+  }
+
+  if (topSideVisible) {
+
+    // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+    var zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
+    var h    = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+    var s    = 1; // saturation
+    var v;
+
+    if (this.showShadow) {
+      v = Math.min(1 + (crossproduct.x / len) / 2, 1);  // value. TODO: scale
+      fillStyle = this._hsv2rgb(h, s, v);
+      strokeStyle = fillStyle;
+    }
+    else  {
+      v = 1;
+      fillStyle = this._hsv2rgb(h, s, v);
+      strokeStyle = this.axisColor; // TODO: should be customizable
+    }
+  }
+  else {
+    fillStyle = 'gray';
+    strokeStyle = this.axisColor;
+  }
+
+  ctx.lineWidth = this._getStrokeWidth(point);
+  // TODO: only draw stroke when strokeWidth > 0
+
+  var points = [point, right, cross, top];
+  this._polygon(ctx, points, fillStyle, strokeStyle);
+};
+
+
+/**
+ * Helper method for _redrawGridGraphPoint()
+ */
+Graph3d.prototype._drawGridLine = function(ctx, from, to) {
+  if (from === undefined || to === undefined) {
+     return;
+  }
+
+  // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
+  var zAvg = (from.point.z + to.point.z) / 2;
+  var h    = (1 - (zAvg - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
+
+  ctx.lineWidth   = this._getStrokeWidth(from) * 2;
+  ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
+  this._line(ctx, from.screen, to.screen);
+};
+
+
+/**
+ * Draw single datapoint for graph style 'Grid'.
+ */
+Graph3d.prototype._redrawGridGraphPoint = function(ctx, point) {
+  this._drawGridLine(ctx, point, point.pointRight);
+  this._drawGridLine(ctx, point, point.pointTop);
+};
+
+
 /**
  * Draw all datapoints for currently selected graph style.
  *

From ac1d6a6a96e6da5f29f0c7ffabb32a22a2186d5a Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Mon, 24 Oct 2016 11:08:40 +0300
Subject: [PATCH 07/14] Fix small timeline bug when defining timeline with no
 options and fix docs explanations (#2216)

* Add initial scroller without options
* Add initial scroll without an option
* Add verticalScroll option
* Fix scrollbar positions
* Add docs
* fix example
* remove jquery dependency
* Fix example
* Fix review comments
* Fix verticalScroll and horizontalScroll docs
* Fix bug in timeline option.rtl if otion is undefined
---
 docs/timeline/index.html | 4 ++--
 lib/timeline/Timeline.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 7cc75507..ecc0d74e 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -680,7 +680,7 @@ function (option, path) {
       <td>Boolean</td>
       <td>false</td>
       <td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
-       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
+       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>. Notice that defining this option as <code>true</code> will override <code>verticalScroll</code> scroll event but not eliminate the vertical scrollbar.
       </td>
     </tr>
 
@@ -1028,7 +1028,7 @@ function (option, path) {
       <td>verticalScroll</td>
       <td>Boolean</td>
       <td>false</td>
-      <td> Show a vertical scroll on the side of the group list.    
+      <td> Show a vertical scroll on the side of the group list and link it to the scroll event when zoom is not triggered. Notice that defining this option as <code>true</code> will NOT override <code>horizontalScroll</code>. The scroll event will be vertically ignored, but a vertical scrollbar will be visible    
       </td>
     </tr>
 
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index a397498e..439537e0 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -60,7 +60,7 @@ function Timeline (container, items, groups, options) {
     minHeight: null
   };
   this.options = util.deepExtend({}, this.defaultOptions);
-  this.options.rtl = options.rtl;
+  if (options) { this.options.rtl = options.rtl; }
 
   // Create the DOM, props, and emitter
   this._create(container);

From ecf1c6a7d3603fb6753c37429e0246d785e72d99 Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Mon, 24 Oct 2016 11:19:40 +0300
Subject: [PATCH 08/14] small improvements (#2217)

* Add initial scroller without options
* Add initial scroll without an option
* Add verticalScroll option
* Fix scrollbar positions
* Add docs
* fix example
* remove jquery dependency
* Fix example
* Fix review comments
* Fix verticalScroll and horizontalScroll docs
* Fix bug in timeline option.rtl if otion is undefined
* Remove hack
---
 lib/timeline/Timeline.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index 439537e0..43b7b583 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -60,7 +60,11 @@ function Timeline (container, items, groups, options) {
     minHeight: null
   };
   this.options = util.deepExtend({}, this.defaultOptions);
-  if (options) { this.options.rtl = options.rtl; }
+
+  // apply options
+  if (options) {
+    this.setOptions(options);
+  }
 
   // Create the DOM, props, and emitter
   this._create(container);
@@ -145,11 +149,6 @@ function Timeline (container, items, groups, options) {
     }
   });
 
-  // apply options
-  if (options) {
-    this.setOptions(options);
-  }
-
   // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
   if (groups) {
     this.setGroups(groups);

From cad071e136480fac82b67d45ba808e06cfca7f04 Mon Sep 17 00:00:00 2001
From: Alexander Wunschik <alex@wunschik.net>
Date: Mon, 24 Oct 2016 10:34:03 +0200
Subject: [PATCH 09/14] renamed some labels

---
 misc/how_to_help.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/misc/how_to_help.md b/misc/how_to_help.md
index f471b237..63514fa4 100644
--- a/misc/how_to_help.md
+++ b/misc/how_to_help.md
@@ -6,13 +6,13 @@ The company that developed vis.js for the main part, *almende* is [not able to m
 
 ### Answering questions
 
-There are new [issues with questions](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3Aquestion+sort%3Acreated-desc) how to use vis.js opened almost every day. Be part of the community and help answer them!
+There are new [issues with questions](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3AQuestion+sort%3Acreated-desc) how to use vis.js opened almost every day. Be part of the community and help answer them!
 
 A better way to ask questions on how to use vis.js is [stackoverflow](https://stackoverflow.com/tags/vis.js). Questions are posed here also and need to be answered by the community. [Please help answering questions](https://stackoverflow.com/tags/vis.js) here also.
 
 ### Closing old issues
 
-A new issue is often opened fast and then forgotten. Please help go trough [the old issues](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc) (especially the [questions](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc+label%3Aquestion)) and ask the creator of the issues if the problem still exists before closing the issue. The support team uses the **issue inactive** label to mark these issues.
+A new issue is often opened fast and then forgotten. Please help go trough [the old issues](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc) (especially the [questions](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc+label%3AQuestion)) and ask the creator of the issues if the problem still exists before closing the issue. The support team uses the **issue inactive** label to mark these issues.
 
 ### Improve the webpage
 
@@ -28,14 +28,14 @@ If you use vis.js to develop something beautiful feel free to create a pull-requ
 
 ### Confirming and fixing bugs
 
-Every software has bugs. We also have [quite a nice collection](https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Areactions-%2B1-desc) ;-)
+Every software has bugs. We also have [quite a nice collection](https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3ABug+sort%3Areactions-%2B1-desc) ;-)
 Feel free to fix as many bugs as you want!
 
 You can not only help by fixing bugs, but also by confirming the bug or even creating a minimal code example to prove this bug exists.
 
 ### Implementing Feature-Requests
 
-A lot of people have a lot of ideas for improving vis.js. [We label these issues as **enhancement**](https://github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement). Feel free to implement a new feature by creating a new Pull-Request.
+A lot of people have a lot of ideas for improving vis.js. [We label these issues as **Feature-Request**](https://github.com/almende/vis/labels/Feature-Request). Feel free to implement a new feature by creating a new Pull-Request.
 
 [Some issues are labeled **For everybody!**](//github.com/almende/vis/issues?q=is%3Aissue+is%3Aopen+label%3A%22For+everyone%21%22+sort%3Areactions-%2B1-desc). These are a good starting point.
 

From 3633bd9d56a992e4e1b9c915f4245f66dd1b86f8 Mon Sep 17 00:00:00 2001
From: Brad Hards <bradh@frogmouth.net>
Date: Mon, 24 Oct 2016 20:30:04 +1100
Subject: [PATCH 10/14] Trivial README fixes.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9b5f86d4..f4f1c188 100644
--- a/README.md
+++ b/README.md
@@ -154,7 +154,7 @@ slow, so when only the non-minified library is needed, one can use the
 
 ## Custom builds
 
-The folder `dist` contains bundled versions of vis.js for direct use in the browser. These bundles contain the all visualizations and includes external dependencies such as hammer.js and moment.js.
+The folder `dist` contains bundled versions of vis.js for direct use in the browser. These bundles contain all the visualizations and include external dependencies such as hammer.js and moment.js.
 
 The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application. 
 

From 7e342bd4f054754c62759f1d980e0f248b609614 Mon Sep 17 00:00:00 2001
From: Brad Hards <bradh@frogmouth.net>
Date: Mon, 24 Oct 2016 20:28:39 +1100
Subject: [PATCH 11/14] Remove stray reference to rangeoverflow in example
 comment.

---
 examples/timeline/items/pointItems.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/timeline/items/pointItems.html b/examples/timeline/items/pointItems.html
index 810a3144..68201801 100755
--- a/examples/timeline/items/pointItems.html
+++ b/examples/timeline/items/pointItems.html
@@ -49,7 +49,7 @@
 
   var options = {
     // Set global item type. Type can also be specified for items individually
-    // Available types: 'box' (default), 'point', 'range', 'rangeoverflow'
+    // Available types: 'box' (default), 'point', 'range'
     type: 'point',
     showMajorLabels: false
   };

From 1e55ee86403d961247302aa13fe2326bb4469062 Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Mon, 24 Oct 2016 13:26:12 +0300
Subject: [PATCH 12/14] Bugfix in timeline (#2219)

* Add initial scroller without options
* Add initial scroll without an option
* Add verticalScroll option
* Fix scrollbar positions
* Add docs
* fix example
* remove jquery dependency
* Fix example
* Fix review comments
* Fix verticalScroll and horizontalScroll docs
* Fix bug in timeline option.rtl if otion is undefined
* Remove hack
* Fix breaking of timeline
---
 lib/timeline/Timeline.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index 43b7b583..ef47d28f 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -61,11 +61,6 @@ function Timeline (container, items, groups, options) {
   };
   this.options = util.deepExtend({}, this.defaultOptions);
 
-  // apply options
-  if (options) {
-    this.setOptions(options);
-  }
-
   // Create the DOM, props, and emitter
   this._create(container);
 
@@ -109,6 +104,11 @@ function Timeline (container, items, groups, options) {
   // current time bar
   this.currentTime = new CurrentTime(this.body);
   this.components.push(this.currentTime);
+  
+  // apply options
+  if (options) {
+    this.setOptions(options);
+  }
 
   // item set
   this.itemSet = new ItemSet(this.body, this.options);

From a70edfb1b970fbb4b349b670c820f349aeb39b25 Mon Sep 17 00:00:00 2001
From: Brad Hards <bradh@frogmouth.net>
Date: Mon, 24 Oct 2016 21:48:00 +1100
Subject: [PATCH 13/14] Minor documentation cleanup.

---
 docs/graph2d/index.html  |  2 +-
 docs/timeline/index.html | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
index ed062202..8f07e20a 100644
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@@ -1202,7 +1202,7 @@ function (option, path) {
         <tr>
             <td>on(event, callback)</td>
             <td>none</td>
-            <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
+            <td>Create an event listener. The callback function is invoked every time the event is triggered. Available events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
         </tr>
 
         <tr>
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index ecc0d74e..c7051a57 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -1211,7 +1211,7 @@ document.getElementById('myTimeline').onclick = function (event) {
     <tr>
       <td>on(event, callback)</td>
       <td>none</td>
-      <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>, <code>itemover</code>, <code>itemout</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
+      <td>Create an event listener. The callback function is invoked every time the event is triggered. Available events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>, <code>itemover</code>, <code>itemout</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
     </tr>
 
     <tr>
@@ -1250,7 +1250,7 @@ document.getElementById('myTimeline').onclick = function (event) {
       <td>none</td>
       <td>Adjust the time of a custom time bar.
         Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
-        Parameter <code>id</code> is the idof the custom time bar, and is <code>undefined</code> by default.
+        Parameter <code>id</code> is the id of the custom time bar, and is <code>undefined</code> by default.
       </td>
     </tr>
 
@@ -1574,7 +1574,9 @@ var items = new vis.DataSet([
   </p>
   <ul>
     <li><code>item</code>: the item being manipulated</li>
-    <li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item or null)</code>. Here, <code>item</code> can contain changes to the passed item. Parameter `item` typically contains fields `content`, `start`, and optionally `end`. The type of `start` and `end` is determined by the DataSet type configuration and is `Date` by default.  When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
+    <li><code>callback</code>: a callback function which must be invoked to report back. The callback must be invoked as <code>callback(item)</code> or <code>callback(null)</code>.
+    Here, <code>item</code> can contain changes to the passed item. Parameter <code>item</code> typically contains fields `content`, `start`, and optionally `end`. The type of `start`
+    and `end` is determined by the DataSet type configuration and is `Date` by default.  When invoked as <code>callback(null)</code>, the action will be cancelled.</li>
   </ul>
 
   <p>
@@ -1600,7 +1602,7 @@ var items = new vis.DataSet([
   <h2 id="Templates">Templates</h2>
 
   <p>
-    Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:
+    Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML:
   </p>
 
 <pre class="prettyprint lang-js">var options = {
@@ -1697,7 +1699,7 @@ var options = {
 
   <h3>Create a new locale</h3>
 
-  To load a locale into the Timeline not supported by default, one can add a new locale to the option <code>locales</code>:
+  To load a locale (that is not supported by default) into the Timeline, one can add a new locale to the option <code>locales</code>:
 
 <pre class="prettyprint lang-js">var options = {
   locales: {
@@ -1753,7 +1755,7 @@ var options = {
 
   <h2 id="Time_zone">Time zone</h2>
   <p>
-    By default, the Timeline displays time in local time. To display a Timeline in an other time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
+    By default, the Timeline displays time in local time. To display a Timeline in another time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
   </p>
 
   <p>
@@ -1827,7 +1829,7 @@ var options = {
       <td>Days</td><td><code>vis-date1</code>, <code>vis-date2</code>, ..., <code>vis-date31</code></td>
     </tr>
     <tr>
-      <td>Months</td><td><code>vis-januari</code>, <code>vis-februari</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
+      <td>Months</td><td><code>vis-january</code>, <code>vis-february</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
     </tr>
     <tr>
       <td>Years</td><td><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td>

From 70f76a25b7ad6214ab07ee0976072b6160032b94 Mon Sep 17 00:00:00 2001
From: wimrijnders <wrijnders@gmail.com>
Date: Mon, 24 Oct 2016 15:14:37 +0200
Subject: [PATCH 14/14] Added point draw method for style 'line' (#2227)

---
 lib/graph3d/Graph3d.js | 102 ++++++++++++++++-------------------------
 1 file changed, 39 insertions(+), 63 deletions(-)

diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js
index f84908ef..10e5f5e8 100644
--- a/lib/graph3d/Graph3d.js
+++ b/lib/graph3d/Graph3d.js
@@ -804,6 +804,7 @@ Graph3d.prototype.setOptions = function (options) {
 
   Settings.setOptions(options, this);
 
+  this.setPointDrawingMethod();
   this.setSize(this.width, this.height);
 
   // re-load the data
@@ -819,42 +820,49 @@ Graph3d.prototype.setOptions = function (options) {
 
 
 /**
- * Determine which point drawing method to use
+ * Determine which point drawing method to use for the current graph style.
  */
-Graph3d.prototype.getPointDrawingMethod = function() {
-  var pointDrawingMethod = undefined;
+Graph3d.prototype.setPointDrawingMethod = function() {
+  var method = undefined;
 
   switch (this.style) {
     case Graph3d.STYLE.BAR:
-      pointDrawingMethod = Graph3d.prototype._redrawBarGraphPoint;
+      method = Graph3d.prototype._redrawBarGraphPoint;
       break;
     case Graph3d.STYLE.BARCOLOR:
-      pointDrawingMethod = Graph3d.prototype._redrawBarColorGraphPoint;
+      method = Graph3d.prototype._redrawBarColorGraphPoint;
       break;
     case Graph3d.STYLE.BARSIZE:
-      pointDrawingMethod = Graph3d.prototype._redrawBarSizeGraphPoint;
+      method = Graph3d.prototype._redrawBarSizeGraphPoint;
       break;
     case Graph3d.STYLE.DOT:
-      pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
+      method = Graph3d.prototype._redrawDotGraphPoint;
       break;
     case Graph3d.STYLE.DOTLINE:
-      pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
+      method = Graph3d.prototype._redrawDotLineGraphPoint;
       break;
     case Graph3d.STYLE.DOTCOLOR:
-      pointDrawingMethod = Graph3d.prototype._redrawDotColorGraphPoint;
+      method = Graph3d.prototype._redrawDotColorGraphPoint;
       break;
     case Graph3d.STYLE.DOTSIZE:
-      pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
+      method = Graph3d.prototype._redrawDotSizeGraphPoint;
       break;
     case Graph3d.STYLE.SURFACE:
-      pointDrawingMethod = Graph3d.prototype._redrawSurfaceGraphPoint;
+      method = Graph3d.prototype._redrawSurfaceGraphPoint;
       break;
     case Graph3d.STYLE.GRID:
-      pointDrawingMethod = Graph3d.prototype._redrawGridGraphPoint;
+      method = Graph3d.prototype._redrawGridGraphPoint;
+      break;
+    case Graph3d.STYLE.LINE:
+      method = Graph3d.prototype._redrawLineGraphPoint;
+      break;
+    default:
+      throw new Error('Can not determine point drawing method '
+                    + 'for graph style \'' + this.style + '\'');
       break;
   }
 
-  return pointDrawingMethod;
+  this._pointDrawingMethod = method;
 };
 
 
@@ -872,23 +880,7 @@ Graph3d.prototype.redraw = function() {
   this._redrawClear();
   this._redrawAxis();
 
-  var pointDrawingMethod = this.getPointDrawingMethod();
-
-  if (pointDrawingMethod !== undefined) {
-    // Use generic drawing loop
-    // Pass the method reference here
-    this._redrawDataGraph(pointDrawingMethod);
-  } else {
-    // Use the old style drawing methods
-
-    if (this.style === Graph3d.STYLE.LINE) {
-      this._redrawDataLine();
-    }
-    else {
-      // Should not be reached any more.
-      throw new Error('Unknown graph style \'' + this.style + '\'');
-    }
-  }
+  this._redrawDataGraph();
 
   this._redrawInfo();
   this._redrawLegend();
@@ -1810,12 +1802,26 @@ Graph3d.prototype._redrawGridGraphPoint = function(ctx, point) {
 };
 
 
+/**
+ * Draw single datapoint for graph style 'line'.
+ */
+Graph3d.prototype._redrawLineGraphPoint = function(ctx, point) {
+  if (point.pointNext === undefined) {
+    return;
+  }
+
+  ctx.lineWidth   = this._getStrokeWidth(point);
+  ctx.strokeStyle = this.dataColor.stroke;
+
+  this._line(ctx, point.screen, point.pointNext.screen);
+};
+
+
 /**
  * Draw all datapoints for currently selected graph style.
  *
- * @param pointDrawMethod - method reference to draw a point in a specific graph style.
  */
-Graph3d.prototype._redrawDataGraph = function(pointDrawMethod) {
+Graph3d.prototype._redrawDataGraph = function() {
   var ctx = this._getContext();
   var i;
 
@@ -1828,7 +1834,7 @@ Graph3d.prototype._redrawDataGraph = function(pointDrawMethod) {
     var point = this.dataPoints[i];
 
     // Using call() ensures that the correct context is used
-    pointDrawMethod.call(this, ctx, point);
+    this._pointDrawingMethod.call(this, ctx, point);
   }
 };
 
@@ -1838,36 +1844,6 @@ Graph3d.prototype._redrawDataGraph = function(pointDrawMethod) {
 // -----------------------------------------------------------------------------
 
 
-/**
- * Draw a line through all datapoints.
- * This function can be used when the style is 'line'
- */
-Graph3d.prototype._redrawDataLine = function() {
-  var ctx = this._getContext(),
-    point, i;
-
-  if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-    return;  // TODO: throw exception?
-
-  this._calcTranslations(this.dataPoints);
-
-  // start the line
-  if (this.dataPoints.length > 0) {
-    point = this.dataPoints[0];
-
-    ctx.lineWidth = this._getStrokeWidth(point);
-    ctx.strokeStyle = this.dataColor.stroke;
-
-    for (i = 0; i < this.dataPoints.length; i++) {
-      point = this.dataPoints[i];
-
-      if (point.pointNext !== undefined) {
-        this._line(ctx, point.screen, point.pointNext.screen);
-      }
-    }
-  }
-};
-
 /**
  * Start a moving operation inside the provided parent element
  * @param {Event}     event     The event that occurred (required for