From 89a0bfd36a833579f4e0f05bf1e153f584753cd4 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sun, 16 Oct 2016 11:54:01 +0300
Subject: [PATCH 01/12] Add element to templates options

---
 lib/timeline/component/Group.js     | 2 +-
 lib/timeline/component/item/Item.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index 512fac58..4927e034 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -88,7 +88,7 @@ Group.prototype.setData = function(data) {
   // update contents
   var content;
   if (this.itemSet.options && this.itemSet.options.groupTemplate) {
-    content = this.itemSet.options.groupTemplate(data);
+    content = this.itemSet.options.groupTemplate(data, this.dom.inner);
   }
   else {
     content = data && data.content;
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index ea5c7cbb..743e5944 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -190,7 +190,7 @@ Item.prototype._updateContents = function (element) {
   var content;
   if (this.options.template) {
     var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
-    content = this.options.template(itemData);
+    content = this.options.template(itemData, element);
   }
   else {
     content = this.data.content;

From b32f9428ff7725bc14e4e11ef5f8dc16336516a1 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sun, 16 Oct 2016 12:20:49 +0300
Subject: [PATCH 02/12] Fix comment typo

---
 lib/timeline/component/item/RangeItem.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 98614607..01c94ed2 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -45,11 +45,11 @@ RangeItem.prototype.isVisible = function(range) {
   // determine visibility
 var isVisible = 
 // determine horizontal visibillity
-  (this.data.start < range.end) && 
-  (this.data.end > range.start) && 
-// determine verticaltal visibillity
-  (this.parent.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
-  (this.parent.top + this.parent.height > - range.body.domProps.scrollTop)
+(this.data.start < range.end) && 
+(this.data.end > range.start) && 
+// determine vertical visibillity
+(this.parent.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
+(this.parent.top + this.parent.height > - range.body.domProps.scrollTop)
 return isVisible;};
 
 /**

From 092186857b8a35388f50911152d1cd373e9ae578 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sun, 16 Oct 2016 12:33:42 +0300
Subject: [PATCH 03/12] Add documentation for react mounting

---
 docs/timeline/index.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index f11d1c89..4ca5975e 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -640,7 +640,7 @@ function (option, path) {
       <td>groupTemplate</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as argument, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -970,7 +970,7 @@ function (option, path) {
       <td>template</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as the first argument and the item element as the second, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -1629,6 +1629,17 @@ var template = Handlebars.compile(source);
 };
 </pre>
 
+<h3>React templates</h3>
+
+You can use a React component for the templates by rendering them to the templates' element directly:
+
+<pre class="prettyprint lang-js">
+  template: function (item, element) {
+    return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element);
+  },
+</pre>
+
+
   <h3>Multiple templates</h3>
 
   In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:

From 06c264e5b627c320f2d7474b251b1ccaa285e04c Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:07:29 +0300
Subject: [PATCH 04/12] add react example

---
 examples/timeline/other/usingReact.html | 131 ++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 examples/timeline/other/usingReact.html

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
new file mode 100644
index 00000000..2e59d418
--- /dev/null
+++ b/examples/timeline/other/usingReact.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>React Hello World</title>
+  </head>
+  <body>
+
+    <div id='root'></div>
+    
+    <!--
+    For ease of use, we are including the React, ReactDOM and Babel CDN
+    builds to make getting started as fast as possible.
+    
+    In production, you'll want to instead look at using something 
+    like Gulp, Grunt or WebPack (my personal recommendation) 
+    to compile JSX into JavaScript. Also, check out:
+    http://facebook.github.io/react/docs/tooling-integration.html
+    -->
+    <script src="https://fb.me/react-15.0.1.js"></script>
+    <script src="https://fb.me/react-dom-15.0.1.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    
+    <!--
+    This is where you link to your React code. Can be .js or .jsx 
+    extension, doesn't really matter.
+    -->
+    <script type="text/babel">
+        var timeline;
+        
+        // create groups
+        var numberOfGroups = 25; 
+        var groups = new vis.DataSet()
+        for (var i = 0; i < numberOfGroups; i++) {
+            groups.add({
+              id: i,
+              content: 'Truck ' + i
+            })
+        }
+          
+        // create items
+        var numberOfItems = 1000;
+        var items = new vis.DataSet();
+        var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
+        for (var truck = 0; truck < numberOfGroups; truck++) {
+            var date = new Date();
+            for (var order = 0; order < itemsPerGroup; order++) {
+              date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
+              var start = new Date(date);
+              date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
+              var end = new Date(date);
+              items.add({
+                id: order + itemsPerGroup * truck,
+                group: truck,
+                start: start,
+                end: end,
+                content: 'Order ' + order
+              });
+            }
+        }
+
+        var GroupTemplate = React.createClass({
+          render: function() {
+            var { group } = this.props;
+            return <div>
+              <label>{group.content}</label>
+              <button>do stuff</button>
+            </div>
+          }
+        })
+
+        var ItemTemplate = React.createClass({
+          render: function() {
+            var { item } = this.props;
+            return <div>
+              <label>{item.content}</label>
+              <button>do stuff</button>
+            </div>
+          }
+        })
+
+        // specify options
+        var options = {
+          rtl: true,
+          stack: true,
+          maxHeight: 400,
+          start: new Date(),
+          end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+          editable: true,
+          margin: {
+            item: 10, // minimal margin between items
+            axis: 5   // minimal margin between items and the axis
+          },
+          template: function (item, element) {
+            ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(<ItemTemplate item={item} />, element);
+          },
+          groupTemplate: function (group, element) {
+            ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(<GroupTemplate group={group} />, element);
+          },
+          orientation: 'top'
+        }
+     
+
+        var VisTimeline = React.createClass({
+            componentDidMount: function() {
+                initTimeline()
+            },
+            render: function() {
+                return <div>
+                    <h1>Vis timline with React</h1>
+                    <h2>Using react components for items ang group templates</h2>      
+
+                    <div id="mytimeline"></div>
+                </div>
+            }
+        });
+
+        function initTimeline() {
+            var container = document.getElementById('mytimeline');
+            timeline = new vis.Timeline(container, items, groups, options);
+        } 
+
+        ReactDOM.render(<VisTimeline />, document.getElementById('root'));
+    </script>
+  </body>
+</html>
\ No newline at end of file

From 17c48c7967d2a5c3995133ae61d19173458dfeab Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:13:04 +0300
Subject: [PATCH 05/12] Fix typo

---
 examples/timeline/other/usingReact.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
index 2e59d418..dea32d95 100644
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@@ -113,7 +113,7 @@
             render: function() {
                 return <div>
                     <h1>Vis timline with React</h1>
-                    <h2>Using react components for items ang group templates</h2>      
+                    <h2>Using react components for items and group templates</h2>      
 
                     <div id="mytimeline"></div>
                 </div>
@@ -128,4 +128,4 @@
         ReactDOM.render(<VisTimeline />, document.getElementById('root'));
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

From 42c054ff540b15db8f91d01c7824b3f73b7c4208 Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:37:57 +0300
Subject: [PATCH 06/12] fix title

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

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
index dea32d95..4f7c2470 100644
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>React Hello World</title>
+    <title>React Components in templates</title>
   </head>
   <body>
 

From 342091d180ff6badfe2a1631adf809c3d326cb22 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 17:51:52 +0300
Subject: [PATCH 07/12] Fix review comments

---
 examples/timeline/other/usingReact.html | 50 +++++++++++--------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
index 2e59d418..1d276499 100644
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>React Hello World</title>
+    <title>React Components in templates</title>
   </head>
   <body>
 
@@ -17,8 +17,8 @@
     to compile JSX into JavaScript. Also, check out:
     http://facebook.github.io/react/docs/tooling-integration.html
     -->
-    <script src="https://fb.me/react-15.0.1.js"></script>
-    <script src="https://fb.me/react-dom-15.0.1.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 
     <script src="../../../dist/vis.js"></script>
@@ -30,7 +30,7 @@
     -->
     <script type="text/babel">
         var timeline;
-        
+
         // create groups
         var numberOfGroups = 25; 
         var groups = new vis.DataSet()
@@ -66,8 +66,7 @@
           render: function() {
             var { group } = this.props;
             return <div>
-              <label>{group.content}</label>
-              <button>do stuff</button>
+                <label>{group.content}</label>
             </div>
           }
         })
@@ -76,44 +75,37 @@
           render: function() {
             var { item } = this.props;
             return <div>
-              <label>{item.content}</label>
-              <button>do stuff</button>
+                <label>{item.content}</label>
             </div>
           }
         })
 
         // specify options
         var options = {
-          rtl: true,
-          stack: true,
-          maxHeight: 400,
-          start: new Date(),
-          end: new Date(1000*60*60*24 + (new Date()).valueOf()),
-          editable: true,
-          margin: {
-            item: 10, // minimal margin between items
-            axis: 5   // minimal margin between items and the axis
-          },
-          template: function (item, element) {
-            ReactDOM.unmountComponentAtNode(element);
-            return ReactDOM.render(<ItemTemplate item={item} />, element);
-          },
-          groupTemplate: function (group, element) {
-            ReactDOM.unmountComponentAtNode(element);
-            return ReactDOM.render(<GroupTemplate group={group} />, element);
-          },
-          orientation: 'top'
+            orientation: 'top',
+            maxHeight: 400,
+            start: new Date(),
+            end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+            editable: true,
+            template: function (item, element) {
+                ReactDOM.unmountComponentAtNode(element);
+                return ReactDOM.render(<ItemTemplate item={item} />, element);
+            },
+            groupTemplate: function (group, element) {
+                ReactDOM.unmountComponentAtNode(element);
+                return ReactDOM.render(<GroupTemplate group={group} />, element);
+            }
         }
      
 
         var VisTimeline = React.createClass({
             componentDidMount: function() {
-                initTimeline()
+                return initTimeline();
             },
             render: function() {
                 return <div>
                     <h1>Vis timline with React</h1>
-                    <h2>Using react components for items ang group templates</h2>      
+                    <h2>Using react components for items and group templates</h2>      
 
                     <div id="mytimeline"></div>
                 </div>

From 3addd510462bea9878764112dcb3d6f8c1d0f0d0 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 23:19:33 +0300
Subject: [PATCH 08/12] 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 2f2f5c4cc88e6874681be3de366174e389089c8e Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Tue, 25 Oct 2016 20:54:56 +0300
Subject: [PATCH 09/12] Commit before pull

---
 lib/timeline/Timeline.js            | 1 +
 lib/timeline/component/item/Item.js | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index ef47d28f..9b2576cd 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -111,6 +111,7 @@ function Timeline (container, items, groups, options) {
   }
 
   // item set
+  console.log("aaaaaaaaaa", this.options, options);
   this.itemSet = new ItemSet(this.body, this.options);
   this.components.push(this.itemSet);
 
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index c12a3203..27c90271 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -188,7 +188,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
 Item.prototype._updateContents = function (element) {
   var content;
   var templateFunction;
-
+  console.log(this.options);
   if (this.options.template) {
     var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
     templateFunction = this.options.template.bind(this);
@@ -197,7 +197,9 @@ Item.prototype._updateContents = function (element) {
     content = this.data.content;
   }
 
-  if (content instanceof Object) {
+  console.log(content);
+  console.log("content: " , content, content instanceof Object, !(content instanceof Element));
+  if ((content instanceof Object) && !(content instanceof Element)) {
     templateFunction(itemData, element)
   } else {
     var changed = this._contentToString(this.content) !== this._contentToString(content);

From 4f105a31279bcc8ea8093ef403dfd2e3d9004e34 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Tue, 25 Oct 2016 22:30:21 +0300
Subject: [PATCH 10/12] Fix templates

---
 lib/timeline/Core.js                | 49 +++++++++++++----------------
 lib/timeline/Timeline.js            | 43 ++++++++++++++++++-------
 lib/timeline/component/ItemSet.js   |  6 ++--
 lib/timeline/component/item/Item.js |  4 +--
 4 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 04c51ad6..eb9de7b3 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -112,7 +112,7 @@ Core.prototype._create = function (container) {
     }
   }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
-  this.on('panmove',         this._onDrag.bind(this));
+  this.on('pan',         this._onDrag.bind(this));
 
   var me = this;
   this.on('_change', function (properties) {
@@ -191,13 +191,8 @@ Core.prototype._create = function (container) {
 
     var current = this.props.scrollTop;
     var adjusted = current + delta * 120;
-
     if (this.isActive()) {
       this._setScrollTop(adjusted);
-      if (this.options.verticalScroll) {
-        this.dom.left.parentNode.scrollTop = -adjusted;
-        this.dom.right.parentNode.scrollTop = -adjusted;
-      }
       this._redraw();
       this.emit('scroll', event);
     }
@@ -207,29 +202,29 @@ Core.prototype._create = function (container) {
     event.preventDefault();
   }
 
-  if (this.dom.center.addEventListener) {
+  if (this.dom.root.addEventListener) {
     // IE9, Chrome, Safari, Opera
-    this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false);
+    this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false);
     // Firefox
-    this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
+    this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
   } else {
     // IE 6/7/8
-    this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this));
+    this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this));
   }
 
   function onMouseScrollSide(event) {
-    if (!me.options.verticalScroll) return;
-    event.preventDefault();
+    var current = this.scrollTop;
+    var adjusted = -current;
     if (me.isActive()) {
-      var adjusted = -event.target.scrollTop;
       me._setScrollTop(adjusted);
+
       me._redraw();
-      me.emit('scrollSide', event);
+      me.emit('scroll', event);
     }
   }
 
-  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
-  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
+  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide);
+  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide);
 
   this.customTimes = [];
 
@@ -367,7 +362,9 @@ Core.prototype.setOptions = function (options) {
   }
 
   // propagate options to all components
-  this.components.forEach(component => component.setOptions(options));
+  this.components.forEach(component => {
+    component.setOptions(options)
+  });
 
   // enable/disable configure
   if ('configure' in options) {
@@ -825,9 +822,10 @@ Core.prototype._redraw = function() {
 
   // update the scrollTop, feasible range for the offset can be changed
   // when the height of the Core or of the contents of the center changed
-  var offset = this._updateScrollTop();
+  this._updateScrollTop();
 
   // reposition the scrollable contents
+  var offset = this.props.scrollTop;
   if (options.orientation.item != 'top') {
     offset += Math.max(this.props.centerContainer.height - this.props.center.height -
       this.props.border.top - this.props.border.bottom, 0);
@@ -848,10 +846,12 @@ Core.prototype._redraw = function() {
   dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
   if (this.options.verticalScroll) {
-    dom.shadowTopRight.style.visibility     = "hidden";
-    dom.shadowBottomRight.style.visibility  = "hidden";
-    dom.shadowTopLeft.style.visibility      = "hidden";
-    dom.shadowBottomLeft.style.visibility   = "hidden";
+    this.dom.shadowTopRight.style.visibility     = "hidden";
+    this.dom.shadowBottomRight.style.visibility  = "hidden";
+    this.dom.shadowTopLeft.style.visibility      = "hidden";
+    this.dom.shadowBottomLeft.style.visibility   = "hidden";
+    document.getElementsByClassName('vis-left')[0].scrollTop = -offset;
+    document.getElementsByClassName('vis-right')[0].scrollTop = -offset;
   } else {
     dom.left.style.top    = offset + 'px';
     dom.right.style.top   = offset + 'px';
@@ -1072,7 +1072,6 @@ Core.prototype._onPinch = function (event) {
  * @private
  */
 Core.prototype._onDrag = function (event) {
-  if (!event) return
   // refuse to drag when we where pinching to prevent the timeline make a jump
   // when releasing the fingers in opposite order from the touch screen
   if (!this.touch.allowDragging) return;
@@ -1082,10 +1081,6 @@ Core.prototype._onDrag = function (event) {
   var oldScrollTop = this._getScrollTop();
   var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
-  if (this.options.verticalScroll) {
-    this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
-    this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
-  }
 
   if (newScrollTop != oldScrollTop) {
     this.emit("verticalDrag");
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index bb2e6015..e11f34ff 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -28,8 +28,8 @@ import Validator from '../shared/Validator';
  * @constructor
  * @extends Core
  */
-
 function Timeline (container, items, groups, options) {
+
   if (!(this instanceof Timeline)) {
     throw new SyntaxError('Constructor must be called with the new operator');
   }
@@ -45,22 +45,21 @@ function Timeline (container, items, groups, options) {
   this.defaultOptions = {
     start: null,
     end:   null,
-
     autoResize: true,
-
     orientation: {
       axis: 'bottom',   // axis orientation: 'bottom', 'top', or 'both'
       item: 'bottom'    // not relevant
     },
     moment: moment,
-
     width: null,
     height: null,
     maxHeight: null,
     minHeight: null
   };
   this.options = util.deepExtend({}, this.defaultOptions);
-
+  if (options) {
+    this.options.rtl = options.rtl
+  }
   // Create the DOM, props, and emitter
   this._create(container);
 
@@ -104,14 +103,9 @@ 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
-  console.log("aaaaaaaaaa", this.options, options);
+  var itemSetOptions = 
   this.itemSet = new ItemSet(this.body, this.options);
   this.components.push(this.itemSet);
 
@@ -150,6 +144,11 @@ function Timeline (container, items, groups, options) {
     }
   });
 
+  // apply options
+  if (options) {
+    this.setOptions(options);
+  }
+
   // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
   if (groups) {
     this.setGroups(groups);
@@ -195,7 +194,6 @@ Timeline.prototype.setOptions = function (options) {
   if (errorFound === true) {
     console.log('%cErrors have been found in the supplied options object.', printStyle);
   }
-
   Core.prototype.setOptions.call(this, options);
 
   if ('type' in options) {
@@ -546,4 +544,25 @@ Timeline.prototype.getEventProperties = function (event) {
   }
 };
 
+ /**
+ * Extend the drag event handler from Core, move the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+  Timeline.prototype._onDrag = function (event) {
+      // refuse to drag when we where pinching to prevent the timeline make a jump
+      // when releasing the fingers in opposite order from the touch screen, and refuse
+      // to drag when an item is already being dragged
+      if (!this.touch.allowDragging || this.itemSet.touchParams.itemIsDragging) return;
+
+      var delta = event.deltaY;
+
+      var oldScrollTop = this._getScrollTop();
+      var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+
+      if (newScrollTop != oldScrollTop) {
+          this.emit("verticalDrag");
+      }
+  };
+
 module.exports = Timeline;
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 9eb46393..f2020b09 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -95,7 +95,9 @@ function ItemSet(body, options) {
 
   // options is shared by this ItemSet and all its items
   this.options = util.extend({}, this.defaultOptions);
-  this.options.rtl = options.rtl;
+  if (options) {
+    this.options.rtl = options.rtl; // required to determine from the initial creation if rtl
+  }
 
   // options for getting items from the DataSet with the correct type
   this.itemOptions = {
@@ -318,7 +320,7 @@ ItemSet.prototype.setOptions = function(options) {
     // copy all options that we know
     var fields = ['type', 'rtl', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap'];
     util.selectiveExtend(fields, this.options, options);
-
+    
     if ('orientation' in options) {
       if (typeof options.orientation === 'string') {
         this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom';
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 27c90271..c1762805 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -188,7 +188,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
 Item.prototype._updateContents = function (element) {
   var content;
   var templateFunction;
-  console.log(this.options);
+
   if (this.options.template) {
     var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
     templateFunction = this.options.template.bind(this);
@@ -197,8 +197,6 @@ Item.prototype._updateContents = function (element) {
     content = this.data.content;
   }
 
-  console.log(content);
-  console.log("content: " , content, content instanceof Object, !(content instanceof Element));
   if ((content instanceof Object) && !(content instanceof Element)) {
     templateFunction(itemData, element)
   } else {

From 4b6a0d7f74bf0573076e5fdd4faf3261332f98dd Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Tue, 25 Oct 2016 22:41:45 +0300
Subject: [PATCH 11/12] Fix to Core.js to updated Core.js

---
 lib/timeline/Core.js     | 51 ++++++++++++++++++++++------------------
 lib/timeline/Timeline.js | 22 -----------------
 2 files changed, 28 insertions(+), 45 deletions(-)

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index eb9de7b3..1b4f1291 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -112,7 +112,7 @@ Core.prototype._create = function (container) {
     }
   }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
-  this.on('pan',         this._onDrag.bind(this));
+  this.on('panmove',         this._onDrag.bind(this));
 
   var me = this;
   this.on('_change', function (properties) {
@@ -191,8 +191,13 @@ Core.prototype._create = function (container) {
 
     var current = this.props.scrollTop;
     var adjusted = current + delta * 120;
+
     if (this.isActive()) {
       this._setScrollTop(adjusted);
+      if (this.options.verticalScroll) {
+        this.dom.left.parentNode.scrollTop = -adjusted;
+        this.dom.right.parentNode.scrollTop = -adjusted;
+      }
       this._redraw();
       this.emit('scroll', event);
     }
@@ -202,29 +207,29 @@ Core.prototype._create = function (container) {
     event.preventDefault();
   }
 
-  if (this.dom.root.addEventListener) {
+  if (this.dom.center.addEventListener) {
     // IE9, Chrome, Safari, Opera
-    this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false);
+    this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false);
     // Firefox
-    this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
+    this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
   } else {
     // IE 6/7/8
-    this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this));
+    this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this));
   }
 
   function onMouseScrollSide(event) {
-    var current = this.scrollTop;
-    var adjusted = -current;
+    if (!me.options.verticalScroll) return;
+    event.preventDefault();
     if (me.isActive()) {
+      var adjusted = -event.target.scrollTop;
       me._setScrollTop(adjusted);
-
       me._redraw();
-      me.emit('scroll', event);
+      me.emit('scrollSide', event);
     }
   }
 
-  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide);
-  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide);
+  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
+  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
 
   this.customTimes = [];
 
@@ -362,9 +367,7 @@ Core.prototype.setOptions = function (options) {
   }
 
   // propagate options to all components
-  this.components.forEach(component => {
-    component.setOptions(options)
-  });
+  this.components.forEach(component => component.setOptions(options));
 
   // enable/disable configure
   if ('configure' in options) {
@@ -822,10 +825,9 @@ Core.prototype._redraw = function() {
 
   // update the scrollTop, feasible range for the offset can be changed
   // when the height of the Core or of the contents of the center changed
-  this._updateScrollTop();
+  var offset = this._updateScrollTop();
 
   // reposition the scrollable contents
-  var offset = this.props.scrollTop;
   if (options.orientation.item != 'top') {
     offset += Math.max(this.props.centerContainer.height - this.props.center.height -
       this.props.border.top - this.props.border.bottom, 0);
@@ -846,12 +848,10 @@ Core.prototype._redraw = function() {
   dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
   if (this.options.verticalScroll) {
-    this.dom.shadowTopRight.style.visibility     = "hidden";
-    this.dom.shadowBottomRight.style.visibility  = "hidden";
-    this.dom.shadowTopLeft.style.visibility      = "hidden";
-    this.dom.shadowBottomLeft.style.visibility   = "hidden";
-    document.getElementsByClassName('vis-left')[0].scrollTop = -offset;
-    document.getElementsByClassName('vis-right')[0].scrollTop = -offset;
+    dom.shadowTopRight.style.visibility     = "hidden";
+    dom.shadowBottomRight.style.visibility  = "hidden";
+    dom.shadowTopLeft.style.visibility      = "hidden";
+    dom.shadowBottomLeft.style.visibility   = "hidden";
   } else {
     dom.left.style.top    = offset + 'px';
     dom.right.style.top   = offset + 'px';
@@ -1072,6 +1072,7 @@ Core.prototype._onPinch = function (event) {
  * @private
  */
 Core.prototype._onDrag = function (event) {
+  if (!event) return
   // refuse to drag when we where pinching to prevent the timeline make a jump
   // when releasing the fingers in opposite order from the touch screen
   if (!this.touch.allowDragging) return;
@@ -1081,6 +1082,10 @@ Core.prototype._onDrag = function (event) {
   var oldScrollTop = this._getScrollTop();
   var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
 
+  if (this.options.verticalScroll) {
+    this.dom.left.parentNode.scrollTop = -this.props.scrollTop;
+    this.dom.right.parentNode.scrollTop = -this.props.scrollTop;
+  }
 
   if (newScrollTop != oldScrollTop) {
     this.emit("verticalDrag");
@@ -1141,4 +1146,4 @@ Core.prototype._createConfigurator = function () {
   throw new Error('Cannot invoke abstract method _createConfigurator');
 };
 
-module.exports = Core;
+module.exports = Core;
\ No newline at end of file
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index e11f34ff..cc44f3b0 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -105,7 +105,6 @@ function Timeline (container, items, groups, options) {
   this.components.push(this.currentTime);
 
   // item set
-  var itemSetOptions = 
   this.itemSet = new ItemSet(this.body, this.options);
   this.components.push(this.itemSet);
 
@@ -544,25 +543,4 @@ Timeline.prototype.getEventProperties = function (event) {
   }
 };
 
- /**
- * Extend the drag event handler from Core, move the timeline vertically
- * @param {Event} event
- * @private
- */
-  Timeline.prototype._onDrag = function (event) {
-      // refuse to drag when we where pinching to prevent the timeline make a jump
-      // when releasing the fingers in opposite order from the touch screen, and refuse
-      // to drag when an item is already being dragged
-      if (!this.touch.allowDragging || this.itemSet.touchParams.itemIsDragging) return;
-
-      var delta = event.deltaY;
-
-      var oldScrollTop = this._getScrollTop();
-      var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
-
-      if (newScrollTop != oldScrollTop) {
-          this.emit("verticalDrag");
-      }
-  };
-
 module.exports = Timeline;

From 91c96ba38c3ce093573f6946f6f1e0a8d327dec4 Mon Sep 17 00:00:00 2001
From: CapitanMorgan <msmorga1@gmail.com>
Date: Tue, 25 Oct 2016 15:32:41 -0700
Subject: [PATCH 12/12] fixes #2100 and issues with edges when clustering
 (#2229)

* Should fix issue #2100 and fix another issue we discovered around clusterByConnection leaving phantom edges.
* fixed a wrong variable name
* fixed DataView.test.js assert
* Update Canvas.js
* remove whitespace; remove end of file newline on Canvas.js
* strip end of file newlines
* fixed styling. spacing, semicolons, line length
---
 lib/network/modules/Canvas.js                 |  6 +++++
 lib/network/modules/Clustering.js             | 16 +++++++++--
 .../modules/components/NavigationHandler.js   | 27 +++++++++++++++----
 test/DataView.test.js                         |  3 ++-
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/lib/network/modules/Canvas.js b/lib/network/modules/Canvas.js
index e0f15abb..c378c183 100644
--- a/lib/network/modules/Canvas.js
+++ b/lib/network/modules/Canvas.js
@@ -18,6 +18,7 @@ class Canvas {
     this.resizeFunction = this._onResize.bind(this);
     this.cameraState = {};
     this.initialized = false;
+    this.canvasViewCenter = {};
 
     this.options = {};
     this.defaultOptions = {
@@ -284,6 +285,11 @@ class Canvas {
       this.options.width = width;
       this.options.height = height;
 
+      this.canvasViewCenter = {
+        x: 0.5 * this.frame.clientWidth,
+        y: 0.5 * this.frame.clientHeight
+      };
+
       emitEvent = true;
     }
     else {
diff --git a/lib/network/modules/Clustering.js b/lib/network/modules/Clustering.js
index f67d0da1..3de5198e 100644
--- a/lib/network/modules/Clustering.js
+++ b/lib/network/modules/Clustering.js
@@ -235,7 +235,19 @@ class ClusterEngine {
         }
       }
     }
-
+    var childNodeIDs = Object.keys(childNodesObj).map(function(childNode){
+      return childNodesObj[childNode].id;
+    })
+
+    for (childNode in childNodesObj) {
+      var childNode = childNodesObj[childNode];
+      for (var y=0; y < childNode.edges.length; y++){
+        var childEdge = childNode.edges[y];
+        if (childNodeIDs.indexOf(this._getConnectedId(childEdge,childNode.id)) > -1){
+          childEdgesObj[childEdge.id] = childEdge;
+        }
+      }
+    }
     this._cluster(childNodesObj, childEdgesObj, options, refreshData);
   }
 
@@ -723,7 +735,7 @@ class ClusterEngine {
     let allEdgeIds = this.getClusteredEdges(startEdgeId);
     for (let i = 0; i < allEdgeIds.length; i++) {
       var edge = this.body.edges[allEdgeIds[i]];
-      edge.setOptions(newOptions);      
+      edge.setOptions(newOptions);
     }
     this.body.emitter.emit('_dataChanged');
   }
diff --git a/lib/network/modules/components/NavigationHandler.js b/lib/network/modules/components/NavigationHandler.js
index 2b081a14..14347814 100644
--- a/lib/network/modules/components/NavigationHandler.js
+++ b/lib/network/modules/components/NavigationHandler.js
@@ -150,12 +150,29 @@ class NavigationHandler {
   _moveDown() {this.body.view.translation.y -= this.options.keyboard.speed.y;}
   _moveLeft() {this.body.view.translation.x += this.options.keyboard.speed.x;}
   _moveRight(){this.body.view.translation.x -= this.options.keyboard.speed.x;}
-  _zoomIn()   {
-    this.body.view.scale         *= 1+this.options.keyboard.speed.zoom;
-    this.body.emitter.emit('zoom', {direction: '+', scale: this.body.view.scale});}
+  _zoomIn() {
+    var scaleOld = this.body.view.scale;
+    var scale = this.body.view.scale * (1 + this.options.keyboard.speed.zoom);
+    var translation = this.body.view.translation;
+    var scaleFrac = scale / scaleOld;
+    var tx = (1 - scaleFrac) * this.canvas.canvasViewCenter.x + translation.x * scaleFrac;
+    var ty = (1 - scaleFrac) * this.canvas.canvasViewCenter.y + translation.y * scaleFrac;
+
+    this.body.view.scale = scale;
+    this.body.view.translation = { x: tx, y: ty };
+    this.body.emitter.emit('zoom', { direction: '+', scale: this.body.view.scale });
+  }
   _zoomOut()  {
-    this.body.view.scale         /= 1+this.options.keyboard.speed.zoom;
-    this.body.emitter.emit('zoom', {direction: '-', scale: this.body.view.scale});
+    var scaleOld = this.body.view.scale;
+    var scale = this.body.view.scale / (1 + this.options.keyboard.speed.zoom);
+    var translation = this.body.view.translation;
+    var scaleFrac = scale / scaleOld;
+    var tx = (1 - scaleFrac) * this.canvas.canvasViewCenter.x + translation.x * scaleFrac;
+    var ty = (1 - scaleFrac) * this.canvas.canvasViewCenter.y + translation.y * scaleFrac;
+
+    this.body.view.scale = scale;
+    this.body.view.translation = { x: tx, y: ty };
+    this.body.emitter.emit('zoom', { direction: '-', scale: this.body.view.scale });
   }
 
 
diff --git a/test/DataView.test.js b/test/DataView.test.js
index 4d3c5f97..11d481c3 100644
--- a/test/DataView.test.js
+++ b/test/DataView.test.js
@@ -200,7 +200,8 @@ describe('DataView', function () {
       }]
     ]);
     assert.deepEqual(viewUpdates, [
-      ['update', {items: [2], data: [{id: 2, title: 'Item 2 (changed)'}]}]
+      ['update', {items: [2], data: [{id: 2, title: 'Item 2 (changed)'}],
+      oldData: [{"group": 2, "id": 2, "title": "Item 2"}]}]
     ]);
 
   });