Merge branch 'develop' of https://github.com/almende/vis into develop

HISTORY.md

@@ -1,6 +1,93 @@
 # vis.js history
 http://visjs.org
 
+
+## 2017-01-15, version 4.18.0
+
+### General
+
+- Readme improvements (#2520)
+- Babel updates and fixes (#2466, #2513, #2566)
+- Removed dist folder from the develop-branch (#2497)
+- updated and cleaned-up npm dependencies (#2518, #2406)
+- FEAT: Added CodeClimate tests (#2411)
+- FEAT: Added initial Travis-CI support: https://travis-ci.org/almende/vis (#2550)
+- FIX #2500: Replace { bool } with { boolean: bool } (#2501, #2506, #2581)
+- FIX #2445: Fix YUI Compressor incompatibilities (#2452)
+- FIX #2402: make sure a given element isn’t undefined before accessing properties (#2403)
+- FIX #2560: IE11 issue 'Symbol' is undefined with babel-polyfill (#2566)
+- FIX #2490: Don't pass non-string values to Date.parse (#2534)
+
+### DataSet
+
+- FIX: Removed event oldData items (#2535)
+- FIX #2528: Fixed deleting item with id 0 (#2530)
+
+### Network
+
+- FIX #1911: Fix missing blur edge event (#2554)
+- FIX #2478: Fix tooltip issue causing exception when node becomes cluster (#2555)
+- FEAT: Change styles if element is selected (#2446)
+- FEAT #2306: Add example for network onLoad animation. (#2476)
+- FEAT #1845: Adding example of cursor change (#2463)
+- FEAT #1603 #1628 #1936 #2298 #2384: Font styles, width and height of network nodes (#2385)
+- FEAT: Add pointer position to zoom event (#2377)
+- FEAT #1653 #2342: label margins for box, circle, database, icon and text nodes. (#2343)
+- FEAT #2233 #2068 #1756: Edit edge without endpoint dragging, and pass label in data (#2329)
+
+### Timeline / Graph2D
+
+- FIX: #2522 Right button while dragging item makes items uneditable (#2582)
+- FIX #2538: Major axis labels displaying wrong value (#2551)
+- FEAT #2516: Added followMouse & overflowMethod to tooltip options (#2544)
+- FIX: Fixed tool-tip surviving after item deleted (#2545)
+- FIX #2515: Fixed hover events for HTML elements (#2539)
+- FIX: Timeline.setGroups for Array (#2529)
+- FIX: Error in React example when adding a ranged item (#2521)
+- FEAT #226 #2421 #2429: Added mouse events for the timeline (#2473)
+- FEAT #497: new stackSubgroups option (#2519, #2527)
+- FEAT #338: Added HTML tool-tip support (#2498)
+- FIX #2511: readded throttleRedraw option; added DEPRECATED warning (#2514)
+- FEAT #2300: Added nested groups (#2416)
+- FEAT #2464: Add template support for minor/major labels (#2493)
+- FIX #2379: Fix initial drag (#2474)
+- FIX #2102: Fix error on click for graph2D when no data is provided (#2472)
+- FIX #2469: Fix graph2D render issue (#2470)
+- FIX #1126: Add visibleFrameTemplate option for higher item dom content (#2437)
+- FIX #2467: Fix Range ctor with optional options parameter (#2468)
+- FEAT #1746: Rolling mode (#2439, #2486)
+- FIX #2422: Timeline onMove callback (#2427)
+- FIX #2370: IE10 drag-and-drop support (#2426)
+- FIX #1906: Pass through original hammer.js events (#2420)
+- FIX #2327: Add support to fixed times drag and drop (#2372)
+- FIX: \_origRedraw sometimes undefined (#2399)
+- FIX #2367 #2328: Group editable bug (#2368)
+- FIX #2336: Mouse wheel problem on custom time element (#2366)
+- FIX #2307: Timeline async initial redraw bug (#2386)
+- FIX #2312: Vertical scroll bug with groups and fixed height (#2363)
+- FIX #2333: Scrollbar width on browser zoom (#2344)
+- Fixed #2319: Bug in TimeStep.prototype.getClassName (#2335)
+- FEAT #257: Added option to change the visibility of a group (#2315)
+- FEAT: More editable control of timeline items (#2305)
+- FIX #2273: Cannot scroll page when zoomKey is enabled (#2301)
+- FIX #2295, 2263: Issues with vertical scroll and maxHeight (#2302)
+- FIX #2285: onUpdate event (#2304)
+- FIX: Timeline-docs: updated group.content description to show that it can be an element (#2296)
+- FIX #2251: No axis after daylight saving (#2290)
+- FEAT #2256: Timeline editable can override items (#2284)
+- FEAT: Graph2d performance enhancement (#2281)
+
+### Graph3D
+
+- FEAT #2451: Allow pass the color of points in 'dot-color' mode of Graph3D (#2489)
+- FEAT: Improvement for camera 3d moving (#2340)
+- FEAT: Add ability to move graph3d by left mouse button while pressing ctrl key and rotate like before (#2357)
+- FIX: Fixed label disappearing bug for large axis values in graph3d (#2348)
+- FIX: Fixed Grpah3D-docs: Changed "an" to "and" in graph3D docs (#2313)
+- FIX #2274: Graph3d disappears when setSize is called (#2293)
+- FIX: Fixed typo in index.html of Graph3D (#2286)
+
+
 ## 2016-11-05, version 4.17.0
 
 ### General

README.md

@@ -265,10 +265,6 @@ var options = {};
 var timeline = new Timeline(container, data, options);
 ```
 
-Install the application dependencies via npm:
-
-    $ npm install vis moment
-
 The application can be bundled and minified:
 
     $ browserify app.js -o dist/app-bundle.js -t babelify
@@ -289,6 +285,39 @@ And loaded into a webpage:
 </html>
 ```
 
+#### Example 4: Integrate vis.js components directly in your webpack build
+
+You can integrate e.g. the timeline component directly in you webpack build.
+Therefor you just import the component-files from root direcory (starting with "index-").
+
+```js
+var visTimeline = require('vis/index-timeline-graph2d');
+
+var container = document.getElementById('visualization');
+var data = new DataSet();
+var timeline = new Timeline(container, data, {});
+```
+
+To get this to work you'll need to add the some babel-loader-setting:
+
+```js
+module: {
+	loaders: [{
+		test: /node_modules[\\\/]vis[\\\/].*\.js$/,
+		loader: 'babel',
+		query: {
+			cacheDirectory: true,
+			presets: ["es2015"],
+			plugins: [
+				"transform-es3-property-literals",
+				"transform-es3-member-expression-literals",
+				"transform-runtime"
+			]
+		}
+	}]
+}
+```
+
 ## Test
 
 To test the library, install the project dependencies once:

docs/network/index.html

@@ -1401,7 +1401,7 @@ var options = {
             </tr>
             <tr><td id="event_zoom">zoom</td>
                 <td>Object</td>
-                <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(), Passes an object with properties structured as:
+                <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(). When fired by clicking the zoom in or zoom out navigation buttons, the pointer property of the object passed will be null.  Passes an object with properties structured as:
 <pre class="prettyprint lang-js">{
   direction: '+'/'-',
   scale: Number,

docs/timeline/index.html

@@ -1592,7 +1592,7 @@ timeline.off('select', onSelect);
         </ul>
       </td>
       <td>Fired after the user selects or deselects items by tapping or holding them.
-        When a use taps an already selected item, the select event is fired again.
+        When a user taps an already selected item, the select event is fired again.
         Not fired when the method <code>setSelection</code>is executed.
       </td>
     </tr>

examples/graph2d/08_performance.html

@@ -147,4 +147,4 @@
     var graph2d = new vis.Graph2d(container, dataset, options);
 </script>
 </body>
-</html>
+</html>

examples/network/basicUsage.html

@@ -37,7 +37,8 @@
     {from: 1, to: 3},
     {from: 1, to: 2},
     {from: 2, to: 4},
-    {from: 2, to: 5}
+    {from: 2, to: 5},
+    {from: 3, to: 3}
   ]);
 
   // create a network

examples/network/edgeStyles/colors.html

@@ -30,14 +30,14 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = new vis.DataSet([
-    {id: 1, label: 1, color:'#97C2FC'},
-    {id: 2, label: 2, color:'#FFFF00'},
-    {id: 3, label: 3, color:'#FB7E81'},
-    {id: 4, label: 4, color:'#7BE141'},
-    {id: 5, label: 5, color:'#6E6EFD'},
-    {id: 6, label: 6, color:'#C2FABC'},
-    {id: 7, label: 7, color:'#FFA807'},
-    {id: 8, label: 8, color:'#6E6EFD'}
+    {id: 1, label: 'node\none', shape: 'box', color:'#97C2FC'},
+    {id: 2, label: 'node\ntwo', shape: 'circle', color:'#FFFF00'},
+    {id: 3, label: 'node\nthree', shape: 'diamond', color:'#FB7E81'},
+    {id: 4, label: 'node\nfour', shape: 'dot', size: 10, color:'#7BE141'},
+    {id: 5, label: 'node\nfive', shape: 'ellipse', color:'#6E6EFD'},
+    {id: 6, label: 'node\nsix', shape: 'star', color:'#C2FABC'},
+    {id: 7, label: 'node\nseven', shape: 'triangle', color:'#FFA807'},
+    {id: 8, label: 'node\neight', shape: 'triangleDown', color:'#6E6EFD'}
   ]);
 
   // create an array with edges
@@ -58,7 +58,11 @@
     nodes: nodes,
     edges: edges
   };
-  var options = {};
+  var options = {
+    nodes: {
+      shape: 'circle'
+    }
+  };
   var network = new vis.Network(container, data, options);
 </script>
 

lib/DataSet.js

@@ -730,7 +730,7 @@ DataSet.prototype.clear = function (senderId) {
   var i, len;
   var ids = Object.keys(this._data);
   var items = [];
-  
+
   for (i = 0, len = ids.length; i < len; i++) {
     items.push(this._data[ids[i]]);
   }
@@ -912,7 +912,7 @@ DataSet.prototype._getItem = function (id, types) {
   }
 
   if (!converted[this._fieldId]) {
-    converted[this._fieldId] = id;
+    converted[this._fieldId] = raw.id;
   }
 
   return converted;

lib/network/modules/LayoutEngine.js

@@ -381,9 +381,11 @@ class LayoutEngine {
     // the main method to shift the trees
     let shiftTrees = () => {
       let treeSizes = getTreeSizes();
+      let shiftBy = 0;
       for (let i = 0; i < treeSizes.length - 1; i++) {
         let diff = treeSizes[i].max - treeSizes[i+1].min;
-        shiftTree(i + 1, diff + this.options.hierarchical.treeSpacing);
+        shiftBy += diff + this.options.hierarchical.treeSpacing;
+        shiftTree(i + 1, shiftBy);
       }
     };
 
@@ -1358,4 +1360,4 @@ class LayoutEngine {
 
 }
 
-export default LayoutEngine;
+export default LayoutEngine;

lib/network/modules/components/NavigationHandler.js

@@ -160,7 +160,8 @@ class NavigationHandler {
 
     this.body.view.scale = scale;
     this.body.view.translation = { x: tx, y: ty };
-    this.body.emitter.emit('zoom', { direction: '+', scale: this.body.view.scale, pointer: pointer });
+    this.body.emitter.emit('zoom', { direction: '+', scale: this.body.view.scale, pointer: null });
+
   }
   _zoomOut()  {
     var scaleOld = this.body.view.scale;
@@ -172,7 +173,7 @@ class NavigationHandler {
 
     this.body.view.scale = scale;
     this.body.view.translation = { x: tx, y: ty };
-    this.body.emitter.emit('zoom', { direction: '-', scale: this.body.view.scale, pointer: pointer });
+    this.body.emitter.emit('zoom', { direction: '-', scale: this.body.view.scale, pointer: null });
   }
 
 
@@ -226,4 +227,4 @@ class NavigationHandler {
 }
 
 
-export default NavigationHandler;
+export default NavigationHandler;

lib/network/modules/components/edges/util/EdgeBase.js

@@ -57,7 +57,7 @@ class EdgeBase {
       this._line(ctx, values, viaNode, fromPoint, toPoint);
     }
     else {
-      let [x,y,radius] = this._getCircleData(ctx, values);
+      let [x,y,radius] = this._getCircleData(ctx);
       this._circle(ctx, values, x, y, radius);
     }
   }
@@ -83,7 +83,7 @@ class EdgeBase {
         this._line(ctx, values, viaNode);
       }
       else {
-        let [x,y,radius] = this._getCircleData(ctx, values);
+        let [x,y,radius] = this._getCircleData(ctx);
         this._circle(ctx, values, x, y, radius);
       }
 
@@ -98,7 +98,7 @@ class EdgeBase {
         ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
       }
       else {
-        let [x,y,radius] = this._getCircleData(ctx, values);
+        let [x,y,radius] = this._getCircleData(ctx);
         this._circle(ctx, values, x, y, radius);
       }
       // draw shadow if enabled
@@ -331,7 +331,7 @@ class EdgeBase {
       returnValue = this._getDistanceToEdge(x1, y1, x2, y2, x3, y3, via)
     }
     else {
-      let [x,y,radius] = this._getCircleData(undefined, values);
+      let [x,y,radius] = this._getCircleData(undefined);
       let dx = x - x3;
       let dy = y - y3;
       returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);

lib/network/modules/components/nodes/shapes/Circle.js

@@ -35,7 +35,7 @@ class Circle extends CircleImageBase {
 
     this.updateBoundingBox(x,y);
     this.labelModule.draw(ctx, this.left + this.textSize.width / 2 + this.margin.left,
-                               this.top + this.textSize.height / 2 + this.margin.top, selected, hover);
+                               y, selected, hover);
   }
 
   updateBoundingBox(x,y) {

lib/network/modules/components/nodes/shapes/Diamond.js

@@ -7,7 +7,7 @@ class Diamond extends ShapeBase {
     super(options, body, labelModule)
   }
 
-  resize(ctx, values, selected = this.selected, hover = this.hover) {
+  resize(ctx, selected = this.selected, hover = this.hover, values) {
     this._resizeShape(selected, hover, values);
   }
 

lib/network/modules/components/nodes/shapes/Dot.js

@@ -7,7 +7,7 @@ class Dot extends ShapeBase {
     super(options, body, labelModule)
   }
 
-  resize(ctx, values, selected = this.selected, hover = this.hover) {
+  resize(ctx, selected = this.selected, hover = this.hover, values) {
     this._resizeShape(selected, hover, values);
   }
 

lib/network/modules/components/nodes/shapes/Image.js

@@ -42,11 +42,11 @@ class Image extends CircleImageBase {
       ctx.save();
       // if borders are zero width, they will be drawn with width 1 by default. This prevents that
       if (borderWidth > 0) {
-        this.enableBorderDashes(ctx);
+        this.enableBorderDashes(ctx, values);
         //draw the border
         ctx.stroke();
         //disable dashed border for other elements
-        this.disableBorderDashes(ctx);
+        this.disableBorderDashes(ctx, values);
       }
       ctx.restore();
 

lib/network/modules/components/nodes/shapes/Star.js

@@ -7,7 +7,7 @@ class Star extends ShapeBase {
     super(options, body, labelModule)
   }
 
-  resize(ctx, values, selected, hover) {
+  resize(ctx, selected, hover, values) {
     this._resizeShape(selected, hover, values);
   }
 

lib/timeline/Range.js

@@ -15,7 +15,7 @@ var DateUtil = require('./DateUtil');
 function Range(body, options) {
   var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
   var start = now.clone().add(-3, 'days').valueOf();
-  var end = now.clone().add(-3, 'days').valueOf(); 
+  var end = now.clone().add(3, 'days').valueOf(); 
 
   if(options === undefined) {
     this.start = start;
@@ -256,6 +256,13 @@ Range.prototype.setRange = function(start, end, animation, byUser, event) {
   }
 };
 
+/**
+ * Get the number of milliseconds per pixel.
+ */
+Range.prototype.getMillisecondsPerPixel = function() {
+  return (this.end - this.start) / this.body.dom.center.clientWidth;
+}
+
 /**
  * Stop an animation
  * @private
@@ -291,7 +298,7 @@ Range.prototype._applyRange = function(start, end) {
     throw new Error('Invalid end "' + end + '"');
   }
 
-  // prevent start < end
+  // prevent end < start
   if (newEnd < newStart) {
     newEnd = newStart;
   }

lib/timeline/component/ItemSet.js

@@ -256,6 +256,8 @@ ItemSet.prototype._create = function(){
   this.body.dom.centerContainer.addEventListener('mouseover', this._onMouseOver.bind(this));
   this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this));
   this.body.dom.centerContainer.addEventListener('mousemove', this._onMouseMove.bind(this));
+  // right-click on timeline 
+  this.body.dom.centerContainer.addEventListener('contextmenu', this._onDragEnd.bind(this));
 
   // attach to the DOM
   this.show();
@@ -1590,6 +1592,7 @@ ItemSet.prototype._moveToGroup = function(item, groupId) {
  * @private
  */
 ItemSet.prototype._onDragEnd = function (event) {
+  this.touchParams.itemIsDragging = false;
   if (this.touchParams.itemProps) {
     event.stopPropagation();
 
@@ -1597,7 +1600,6 @@ ItemSet.prototype._onDragEnd = function (event) {
     var dataset = this.itemsData.getDataSet();
     var itemProps = this.touchParams.itemProps ;
     this.touchParams.itemProps = null;
-    this.touchParams.itemIsDragging = false;
 
     itemProps.forEach(function (props) {
       var id = props.item.id;

lib/timeline/component/item/BoxItem.js

@@ -37,15 +37,14 @@ BoxItem.prototype = new Item (null, null, null);
 
 /**
  * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @param {{start: Number, end: Number}} range with a timestamp for start and end
  * @returns {boolean} True if visible
  */
 BoxItem.prototype.isVisible = function(range) {
   // determine visibility
   var isVisible;
   var align = this.options.align;
-  var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
-  var widthInMs = this.width * msPerPixel;
+  var widthInMs = this.width * range.getMillisecondsPerPixel();
 
   if (align == 'right') {
     isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end);

lib/timeline/component/item/PointItem.js

@@ -38,13 +38,12 @@ PointItem.prototype = new Item (null, null, null);
 
 /**
  * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
+ * @param {{start: Number, end: Number}} range with a timestamp for start and end
  * @returns {boolean} True if visible
  */
 PointItem.prototype.isVisible = function(range) {
   // determine visibility
-  var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
-  var widthInMs = this.width * msPerPixel;
+  var widthInMs = this.width * range.getMillisecondsPerPixel();
   
   return (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start < range.end);
 };

lib/timeline/optionsGraph2d.js

@@ -18,90 +18,90 @@ let any = 'any';
 
 let allOptions = {
   configure: {
-    enabled: {bool},
-    filter: {bool,'function': 'function'},
+    enabled: {'boolean': bool},
+    filter: {'boolean': bool,'function': 'function'},
     container: {dom},
-    __type__: {object,bool,'function': 'function'}
+    __type__: {object,'boolean': bool,'function': 'function'}
   },
 
   //globals :
   yAxisOrientation: {string:['left','right']},
   defaultGroup: {string},
-  sort: {bool},
-  sampling: {bool},
-  stack:{bool},
+  sort: {'boolean': bool},
+  sampling: {'boolean': bool},
+  stack:{'boolean': bool},
   graphHeight: {string, number},
   shaded: {
-    enabled: {bool},
+    enabled: {'boolean': bool},
     orientation: {string:['bottom','top','zero','group']}, // top, bottom, zero, group
     groupId: {object},
-    __type__: {bool,object}
+    __type__: {'boolean': bool,object}
   },
   style: {string:['line','bar','points']}, // line, bar
   barChart: {
     width: {number},
     minWidth: {number},
-    sideBySide: {bool},
+    sideBySide: {'boolean': bool},
     align: {string:['left','center','right']},
     __type__: {object}
   },
   interpolation: {
-    enabled: {bool},
+    enabled: {'boolean': bool},
     parametrization: {string:['centripetal', 'chordal','uniform']}, // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
     alpha: {number},
-    __type__: {object,bool}
+    __type__: {object,'boolean': bool}
   },
   drawPoints: {
-    enabled: {bool},
+    enabled: {'boolean': bool},
     onRender: { 'function': 'function' },
     size: {number},
     style: {string:['square','circle']}, // square, circle
-    __type__: {object,bool,'function': 'function'}
+    __type__: {object,'boolean': bool,'function': 'function'}
   },
   dataAxis: {
-    showMinorLabels: {bool},
-    showMajorLabels: {bool},
-    icons: {bool},
+    showMinorLabels: {'boolean': bool},
+    showMajorLabels: {'boolean': bool},
+    icons: {'boolean': bool},
     width: {string, number},
-    visible: {bool},
-    alignZeros: {bool},
+    visible: {'boolean': bool},
+    alignZeros: {'boolean': bool},
     left:{
-      range: {min:{number},max:{number},__type__: {object}},
+      range: {min:{number,'undefined': 'undefined'},max:{number,'undefined': 'undefined'},__type__: {object}},
       format: {'function': 'function'},
-      title: {text:{string,number},style:{string},__type__: {object}},
+      title: {text:{string,number,'undefined': 'undefined'},style:{string,'undefined': 'undefined'},__type__: {object}},
       __type__: {object}
     },
     right:{
-      range: {min:{number},max:{number},__type__: {object}},
+      range: {min:{number,'undefined': 'undefined'},max:{number,'undefined': 'undefined'},__type__: {object}},
       format: {'function': 'function'},
-      title: {text:{string,number},style:{string},__type__: {object}},
+      title: {text:{string,number,'undefined': 'undefined'},style:{string,'undefined': 'undefined'},__type__: {object}},
       __type__: {object}
     },
     __type__: {object}
   },
   legend: {
-    enabled: {bool},
-    icons: {bool},
+    enabled: {'boolean': bool},
+    icons: {'boolean': bool},
     left: {
-      visible: {bool},
+      visible: {'boolean': bool},
       position: {string:['top-right','bottom-right','top-left','bottom-left']},
       __type__: {object}
     },
     right: {
-      visible: {bool},
+      visible: {'boolean': bool},
       position: {string:['top-right','bottom-right','top-left','bottom-left']},
       __type__: {object}
     },
-    __type__: {object,bool}
+    __type__: {object,'boolean': bool}
   },
   groups: {
     visibility: {any},
     __type__: {object}
   },
 
-  autoResize: {bool},
+  autoResize: {'boolean': bool},
   throttleRedraw: {number}, // TODO: DEPRICATED see https://github.com/almende/vis/issues/2511
-  clickToUse: {bool},
+  clickToUse: {'boolean': bool},
   end: {number, date, string, moment},
   format: {
     minorLabels: {
@@ -146,12 +146,12 @@ let allOptions = {
   maxMinorChars: {number},
   min: {date, number, string, moment},
   minHeight: {number, string},
-  moveable: {bool},
-  multiselect: {bool},
+  moveable: {'boolean': bool},
+  multiselect: {'boolean': bool},
   orientation: {string},
-  showCurrentTime: {bool},
-  showMajorLabels: {bool},
-  showMinorLabels: {bool},
+  showCurrentTime: {'boolean': bool},
+  showMajorLabels: {'boolean': bool},
+  showMinorLabels: {'boolean': bool},
   start: {date, number, string, moment},
   timeAxis: {
     scale: {string,'undefined': 'undefined'},
@@ -159,7 +159,7 @@ let allOptions = {
     __type__: {object}
   },
   width: {string, number},
-  zoomable: {bool},
+  zoomable: {'boolean': bool},
   zoomKey: {string: ['ctrlKey', 'altKey', 'metaKey', '']},
   zoomMax: {number},
   zoomMin: {number},

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "4.17.0-SNAPSHOT",
+  "version": "4.18.0-SNAPSHOT",
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",
   "license": "(Apache-2.0 OR MIT)",
@@ -29,8 +29,14 @@
     "watch-dev": "gulp watch --bundle"
   },
   "dependencies": {
+		"babel-core": "^6.21.0",
+		"babel-loader": "^6.2.10",
     "babel-polyfill": "^6.20.0",
-    "babel-runtime": "^6.20.0",    
+		"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
+		"babel-plugin-transform-es3-property-literals": "^6.8.0",
+		"babel-plugin-transform-runtime": "^6.15.0",
+		"babel-preset-es2015": "^6.18.0",
+		"babel-runtime": "^6.20.0",
     "emitter-component": "^1.1.1",
     "moment": "^2.12.0",
     "propagating-hammerjs": "^1.4.6",
@@ -39,12 +45,6 @@
   },
   "devDependencies": {
     "async": "^2.0.0-rc.2",
-    "babel-core": "^6.21.0",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
-    "babel-plugin-transform-es3-property-literals": "^6.8.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-es2015": "^6.18.0",
     "babelify": "^7.3.0",
     "clean-css": "^3.4.10",
     "gulp": "^3.9.1",
@@ -52,7 +52,9 @@
     "gulp-concat": "^2.6.0",
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.7",
+    "jsdom": "9.9.1",
     "mocha": "^3.1.2",
+    "mocha-jsdom": "^1.1.0",
     "rimraf": "^2.5.2",
     "uglify-js": "^2.6.2",
     "uuid": "^3.0.1",

test/TimelineRange.test.js

@@ -0,0 +1,61 @@
+var assert = require('assert');
+var vis = require('../dist/vis');
+var jsdom = require('mocha-jsdom')
+var moment = vis.moment;
+var timeline = vis.timeline;
+var Range = timeline.Range;
+
+function buildSimpleBody() {
+  var body = {
+      dom: {
+        center: {
+          clientWidth: 1000
+        }
+      },
+      domProps: this.props,
+      emitter: {
+        on: function() {},
+        off: function() {},
+        emit: function() {}
+      },
+      hiddenDates: [],
+      util: {}
+    };
+    body.dom.rollingModeBtn = document.createElement('div');
+    return body;
+}
+
+describe('Timeline Range', function () {
+  
+  jsdom();
+
+  it('should have start default before now', function () {
+    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf();
+    var range = new Range(buildSimpleBody());
+    assert(range.start < now, "Default start is before now");
+  });
+
+  it('should have end default after now', function () {
+    var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf();
+    var range = new Range(buildSimpleBody());
+    assert(range.end > now, "Default end is after now");
+  });
+
+  it('should support custom start and end dates', function () {
+    var range = new Range(buildSimpleBody());
+    range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 3, 11, 0, 23, 35, 0), false, false, null);
+    assert.equal(range.start, new Date(2017, 0, 26, 13, 26, 3, 320).valueOf(),  "start is as expected");
+    assert.equal(range.end, new Date(2017, 3, 11, 0, 23, 35, 0).valueOf(),  "end is as expected");
+  });
+
+  it('should calculate milliseconds per pixel', function () {
+    var range = new Range(buildSimpleBody());
+    assert(range.getMillisecondsPerPixel() > 0, "positive value for milliseconds per pixel");
+  });
+
+  it('should calculate 1 millisecond per pixel for simple range', function () {
+    var range = new Range(buildSimpleBody());
+    range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 0, 26, 13, 26, 4, 320), false, false, null);
+    assert.equal(range.getMillisecondsPerPixel(), 1, "one second over 1000 pixels");
+  });
+});