Reimplement performance improvements

examples/timeline/other/localization.html

@@ -37,8 +37,8 @@
 
   // Create a DataSet (allows two way data-binding)
   var items = new vis.DataSet([
-    {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
-    {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
+    {id: 1, content: 'item 1', start: new Date(Date.now() - DAY)},
+    {id: 2, content: 'item 2', start: new Date(Date.now() + 2 * DAY)}
   ]);
 
   // Configuration for the Timeline
@@ -50,7 +50,7 @@
   var timeline = new vis.Timeline(container, items, options);
   timeline.addCustomTime(new Date());
 
-  timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
+  timeline.setCustomTime(new Date(Date.now() + DAY));
 
   // update the locale when changing the select box value
   var select = document.getElementById('locale');

lib/timeline/Core.js

@@ -897,12 +897,13 @@ class Core {
    */
   _redraw() {
     this.redrawCount++;
+    const dom = this.dom;
+
+    if (!dom || !dom.container || dom.root.offsetWidth == 0) return; // when destroyed, or invisible
+
     let resized = false;
     const options = this.options;
     const props = this.props;
-    const dom = this.dom;
-
-    if (!dom || !dom.container || dom.root.offsetWidth == 0) return; // when destroyed, or invisible
 
     DateUtil.updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);
 
@@ -929,21 +930,26 @@ class Core {
     dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
     dom.root.style.width = util.option.asSize(options.width, '');
 
+    const rootClientHeight = dom.root.clientHeight;
+    const rootOffsetHeight = dom.root.offsetHeight;
+    const rootOffsetWidth = dom.root.offsetWidth;
+    const centerContainerClientHeight =  dom.centerContainer.clientHeight;
+
     // calculate border widths
     props.border.left   = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
     props.border.right  = props.border.left;
-    props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
+    props.border.top    = (dom.centerContainer.offsetHeight - centerContainerClientHeight) / 2;
     props.border.bottom = props.border.top;
-    props.borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-    props.borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+    props.borderRootHeight = rootOffsetHeight - rootClientHeight;
+    props.borderRootWidth = rootOffsetWidth - dom.root.clientWidth;
 
     // workaround for a bug in IE: the clientWidth of an element with
     // a height:0px and overflow:hidden is not calculated and always has value 0
-    if (dom.centerContainer.clientHeight === 0) {
+    if (centerContainerClientHeight === 0) {
       props.border.left = props.border.top;
       props.border.right  = props.border.left;
     }
-    if (dom.root.clientHeight === 0) {
+    if (rootClientHeight  === 0) {
       props.borderRootWidth = props.borderRootHeight;
     }
 
@@ -974,24 +980,27 @@ class Core {
     props.rightContainer.height   = props.leftContainer.height;
 
     // calculate the widths of the panels
-    props.root.width = dom.root.offsetWidth;
+    props.root.width = rootOffsetWidth;
     props.background.width = props.root.width - props.borderRootWidth;
 
     if (!this.initialDrawDone) {
       props.scrollbarWidth = util.getScrollBarWidth();
     }
 
+    const leftContainerClientWidth = dom.leftContainer.clientWidth;
+    const rightContainerClientWidth = dom.rightContainer.clientWidth;
+
     if (options.verticalScroll) {
       if (options.rtl) {
-        props.left.width = dom.leftContainer.clientWidth || -props.border.left;
-        props.right.width = dom.rightContainer.clientWidth + props.scrollbarWidth || -props.border.right;
+        props.left.width = leftContainerClientWidth || -props.border.left;
+        props.right.width = rightContainerClientWidth + props.scrollbarWidth || -props.border.right;
       } else {
-        props.left.width = dom.leftContainer.clientWidth + props.scrollbarWidth || -props.border.left;
-        props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+        props.left.width = leftContainerClientWidth + props.scrollbarWidth || -props.border.left;
+        props.right.width = rightContainerClientWidth || -props.border.right;
       }
     } else {
-      props.left.width = dom.leftContainer.clientWidth  || -props.border.left;
-      props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+      props.left.width = leftContainerClientWidth  || -props.border.left;
+      props.right.width = rightContainerClientWidth || -props.border.right;
     }
 
     this._setDOM();
@@ -1005,7 +1014,7 @@ class Core {
       offset += Math.max(props.centerContainer.height - props.center.height -
         props.border.top - props.border.bottom, 0);
     }
-    dom.center.style.top  = `${offset}px`;
+    dom.center.style.transform  = `translateY(${offset}px)`;
 
     // show shadows when vertical scrolling is available
     const visibilityTop = props.scrollTop == 0 ? 'hidden' : '';
@@ -1035,8 +1044,8 @@ class Core {
       dom.right.style.top   = `${offset}px`;
       dom.rightContainer.className = dom.rightContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
       dom.leftContainer.className = dom.leftContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
-      props.left.width = dom.leftContainer.clientWidth  || -props.border.left;
-      props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+      props.left.width = leftContainerClientWidth  || -props.border.left;
+      props.right.width = rightContainerClientWidth || -props.border.right;
       this._setDOM();
     }
 
@@ -1229,14 +1238,16 @@ class Core {
       }
 
       if (me.dom.root) {
+        const rootOffsetHeight = me.dom.root.offsetHeight;
+        const rootOffsetWidth = me.dom.root.offsetWidth;
         // check whether the frame is resized
         // Note: we compare offsetWidth here, not clientWidth. For some reason,
         // IE does not restore the clientWidth from 0 to the actual width after
         // changing the timeline's container display style from none to visible
-        if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
-          (me.dom.root.offsetHeight != me.props.lastHeight)) {
-          me.props.lastWidth = me.dom.root.offsetWidth;
-          me.props.lastHeight = me.dom.root.offsetHeight;
+        if ((rootOffsetWidth != me.props.lastWidth) ||
+          (rootOffsetHeight != me.props.lastHeight)) {
+          me.props.lastWidth = rootOffsetWidth;
+          me.props.lastHeight = rootOffsetHeight;
           me.props.scrollbarWidth = util.getScrollBarWidth();
 
           me.body.emitter.emit('_change');

lib/timeline/Range.js

@@ -210,12 +210,12 @@ export default class Range extends Component {
         throw new Error(`Unknown easing function ${JSON.stringify(easingName)}. Choose from: ${Object.keys(util.easingFunctions).join(', ')}`);
       }
 
-      const initTime = new Date().valueOf();
+      const initTime = Date.now();
       let anyChanged = false;
 
       const next = () => {
         if (!me.props.touch.dragging) {
-          const now = new Date().valueOf();
+          const now = Date.now();
           const time = now - initTime;
           const ease = easingFunction(time / duration);
           const done = time > duration;
@@ -745,12 +745,8 @@ export default class Range extends Component {
     // calculate the time where the mouse is, check whether inside
     // and no scroll action should happen.
     const clientX = event.center ? event.center.x : event.clientX;
-    let x;
-    if (this.options.rtl) {
-      x = clientX - util.getAbsoluteLeft(this.body.dom.centerContainer);
-    } else {
-      x = util.getAbsoluteRight(this.body.dom.centerContainer) - clientX;
-    }
+    const centerContainerRect = this.body.dom.centerContainer.getBoundingClientRect();
+    const x = this.options.rtl ? clientX - centerContainerRect.left : centerContainerRect.right - clientX;
     const time = this.body.util.toTime(x);
 
     return time >= this.start && time <= this.end;
@@ -786,15 +782,16 @@ export default class Range extends Component {
    * @private
    */
   getPointer(touch, element) {
+    const elementRect = element.getBoundingClientRect();
     if (this.options.rtl) {
       return {
-        x: util.getAbsoluteRight(element) - touch.x,
-        y: touch.y - util.getAbsoluteTop(element)
+        x: elementRect.right - touch.x,
+        y: touch.y - elementRect.top
       };
     } else {
       return {
-        x: touch.x - util.getAbsoluteLeft(element),
-        y: touch.y - util.getAbsoluteTop(element)
+        x: touch.x - elementRect.left,
+        y: touch.y - elementRect.top
       };
     }
   }

lib/timeline/TimeStep.js

@@ -107,8 +107,8 @@ class TimeStep {
       throw  "No legal start or end date in method setRange";
     }
 
-    this._start = (start != undefined) ? this.moment(start.valueOf()) : new Date();
-    this._end = (end != undefined) ? this.moment(end.valueOf()) : new Date();
+    this._start = (start != undefined) ? this.moment(start.valueOf()) : Date.now();
+    this._end = (end != undefined) ? this.moment(end.valueOf()) : Date.now();
 
     if (this.autoScale) {
       this.setMinimumStep(minimumStep);
@@ -619,7 +619,7 @@ class TimeStep {
      * @returns {String}
      */
     function today(date) {
-      if (date.isSame(new Date(), 'day')) {
+      if (date.isSame(Date.now(), 'day')) {
         return ' vis-today';
       }
       if (date.isSame(_moment().add(1, 'day'), 'day')) {
@@ -637,7 +637,7 @@ class TimeStep {
      * @returns {String}
      */
     function currentWeek(date) {
-      return date.isSame(new Date(), 'week') ? ' vis-current-week' : '';
+      return date.isSame(Date.now(), 'week') ? ' vis-current-week' : '';
     }
 
     /**
@@ -646,7 +646,7 @@ class TimeStep {
      * @returns {String}
      */
     function currentMonth(date) {
-      return date.isSame(new Date(), 'month') ? ' vis-current-month' : '';
+      return date.isSame(Date.now(), 'month') ? ' vis-current-month' : '';
     }
 
     /**
@@ -655,7 +655,7 @@ class TimeStep {
      * @returns {String}
      */
     function currentYear(date) {
-      return date.isSame(new Date(), 'year') ? ' vis-current-year' : '';
+      return date.isSame(Date.now(), 'year') ? ' vis-current-year' : '';
     }
 
     switch (this.scale) {

lib/timeline/Timeline.js

@@ -670,14 +670,10 @@ export default class Timeline extends Core {
   getEventProperties(event) {
     const clientX = event.center ? event.center.x : event.clientX;
     const clientY = event.center ? event.center.y : event.clientY;
-    let x;
-    if (this.options.rtl) {
-      x = util.getAbsoluteRight(this.dom.centerContainer) - clientX;
-    } else {
-      x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
-    }
-    const y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
-
+    const centerContainerRect = this.dom.centerContainer.getBoundingClientRect();
+    const x = this.options.rtl ? centerContainerRect.right - clientX : clientX - centerContainerRect.left;
+    const y = clientY - centerContainerRect.top;
+
     const item  = this.itemSet.itemFromTarget(event);
     const group = this.itemSet.groupFromTarget(event);
     const customTime = CustomTime.customTimeFromTarget(event);

lib/timeline/component/CurrentTime.js

@@ -100,7 +100,7 @@ class CurrentTime extends Component {
         this.start();
       }
 
-      let now = this.options.moment(new Date().valueOf() + this.offset);
+      let now = this.options.moment(Date.now() + this.offset);
 
       if (this.options.alignCurrentTime) {
         now = now.startOf(this.options.alignCurrentTime);
@@ -120,9 +120,9 @@ class CurrentTime extends Component {
       title = title.charAt(0).toUpperCase() + title.substring(1);
 
       if (this.options.rtl) {
-        this.bar.style.right = `${x}px`;
+        this.bar.style.transform = `translateX(${x * -1}px)`;
       } else {
-        this.bar.style.left = `${x}px`;
+        this.bar.style.transform = `translateX(${x}px)`;
       }
       this.bar.title = title;
     }
@@ -183,7 +183,7 @@ class CurrentTime extends Component {
    */
   setCurrentTime(time) {
     const t = util.convert(time, 'Date').valueOf();
-    const now = new Date().valueOf();
+    const now = Date.now();
     this.offset = t - now;
     this.redraw();
   }
@@ -193,7 +193,7 @@ class CurrentTime extends Component {
    * @return {Date} Returns the current time.
    */
   getCurrentTime() {
-    return new Date(new Date().valueOf() + this.offset);
+    return new Date(Date.now() + this.offset);
   }
 }
 

lib/timeline/component/CustomTime.js

@@ -83,7 +83,11 @@ class CustomTime extends Component {
     const drag = document.createElement('div');
     drag.style.position = 'relative';
     drag.style.top = '0px';
-    this.options.rtl ? drag.style.right = '-10px' : drag.style.left = '-10px';
+    if(this.options.rtl) {
+      drag.style.right = '-10px';
+    } else  {
+       drag.style.left = '-10px';
+    }
     drag.style.height = '100%';
     drag.style.width = '20px';
 

lib/timeline/component/DataAxis.js

@@ -322,13 +322,15 @@ class DataAxis extends Component {
       const showMinorLabels = this.options.showMinorLabels;
       const showMajorLabels = this.options.showMajorLabels;
 
+      const backgroundHorizontalOffsetWidth = this.body.dom.backgroundHorizontal.offsetWidth;
+
       // determine the width and height of the elements for the axis
       props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
       props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
 
-      props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
+      props.minorLineWidth = backgroundHorizontalOffsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
       props.minorLineHeight = 1;
-      props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
+      props.majorLineWidth = backgroundHorizontalOffsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
       props.majorLineHeight = 1;
 
       //  take frame offline while updating (is almost twice as fast)

lib/timeline/component/Group.js

@@ -297,9 +297,7 @@ class Group {
    * @param {number} pixels
    */
   _calculateGroupSizeAndPosition() {
-    const offsetTop = this.dom.foreground.offsetTop;
-    const offsetLeft = this.dom.foreground.offsetLeft;
-    const offsetWidth = this.dom.foreground.offsetWidth;
+    const { offsetTop, offsetLeft, offsetWidth } = this.dom.foreground;
     this.top = offsetTop;
     this.right = offsetLeft;
     this.width = offsetWidth;
@@ -321,7 +319,7 @@ class Group {
     let bail = null;
     if (!this.itemSet.initialDrawDone) {
       if (bailOptions.shouldBailStackItems) { return true; }
-      if (Math.abs(new Date() - new Date(bailOptions.relativeBailingTime)) > bailOptions.bailTimeMs) {
+      if (Math.abs(Date.now() - new Date(bailOptions.relativeBailingTime)) > bailOptions.bailTimeMs) {
         if (bailOptions.userBailFunction && this.itemSet.userContinueNotBail == null) {
           bailOptions.userBailFunction(didUserContinue => {
             me.itemSet.userContinueNotBail = didUserContinue;