initial hiding of times, currently only one time is allowed

10 years ago · db06332925
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/examples/timeline/hiding_times.html
+++ b/examples/timeline/hiding_times.html
@ -0,0 +1,56 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Basic demo</title>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <div id="visualization"></div>

 <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2014-04-20'},
        {id: 2, content: 'item 2', start: '2014-04-14'},
        {id: 3, content: 'item 3', start: '2014-04-18'},
        {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
        {id: 5, content: 'item 5', start: '2014-04-26 12:00:00'},
        {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
    ]);

    // Configuration for the Timeline
    var options = {
        hide:{
            start: '2014-04-20 00:00:00',
            end: '2014-04-26 00:00:00'},
 //        } [
 //            {
 //                start: '2014-04-20 00:00:00',
 //                end: '2014-04-26 00:00:00'
 //            },
 //            {
 //                start: '2014-05-20 00:00:00',
 //                end: '2014-05-26 00:00:00'
 //            }
 //        ],
        start: '2014-04-01',
        end: '2014-05-10',
        height: '200px'
    };

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -173,7 +173,7 @@ Core.prototype._create = function (container) {
 Core.prototype.setOptions = function (options) {
  if (options) {
    // copy the known options
    var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes'];
    var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hide'];
    util.selectiveExtend(fields, this.options, options);

    if ('clickToUse' in options) {
@ -616,11 +616,24 @@ Core.prototype.getCurrentTime = function() {
 */
 // TODO: move this function to Range
 Core.prototype._toTime = function(x) {
  var conversion = this.range.conversion(this.props.center.width);
  return new Date(x / conversion.scale + conversion.offset);
 };
  var startDate = new Date(this.options.hide.start).getTime();
  var endDate = new Date(this.options.hide.end).getTime();
  var duration = endDate - startDate;
  if (!(startDate >= this.range.start && endDate < this.range.end)) {
    duration = 0;
  }

  var conversion = this.range.conversion(this.props.center.width, duration);
  var time = new Date(x / conversion.scale + conversion.offset);

  if (time >= endDate && startDate >= this.range.start && endDate < this.range.end) {
    time -= duration;
  }


  return time;
 };

 /**
 * Convert a position on the global screen (pixels) to a datetime
 * @param {int}     x    Position on the screen in pixels
@ -642,11 +655,23 @@ Core.prototype._toGlobalTime = function(x) {
 */
 // TODO: move this function to Range
 Core.prototype._toScreen = function(time) {
  var conversion = this.range.conversion(this.props.center.width);
  var startDate = new Date(this.options.hide.start).getTime();
  var endDate = new Date(this.options.hide.end).getTime();
  var duration = endDate - startDate;
  // if time after the cutout, and the
  if (time >= endDate && startDate >= this.range.start && endDate < this.range.end) {
    time -= duration;
  }
  else if (!(startDate >= this.range.start && endDate < this.range.end)) {
    duration = 0;
  }

  var conversion = this.range.conversion(this.props.center.width, duration);
  return (time.valueOf() - conversion.offset) * conversion.scale;
 };



 /**
 * Convert a datetime (Date object) into a position on the root
 * This is used to get the pixel density estimate for the screen, not the center panel
--- a/lib/timeline/Range.js
+++ b/lib/timeline/Range.js
@ -17,6 +17,7 @@ function Range(body, options) {
  this.end = now.clone().add(4, 'days').valueOf();   // Number

  this.body = body;
  this.deltaDifference = 0;

  // default options
  this.defaultOptions = {
@ -77,7 +78,7 @@ Range.prototype = new Component();
 Range.prototype.setOptions = function (options) {
  if (options) {
    // copy the options that we know
    var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate'];
    var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate','hide'];
    util.selectiveExtend(fields, this.options, options);

    if ('start' in options || 'end' in options) {
@ -301,8 +302,8 @@ Range.prototype.getRange = function() {
 * @param {Number} width
 * @returns {{offset: number, scale: number}} conversion
 */
 Range.prototype.conversion = function (width) {
  return Range.conversion(this.start, this.end, width);
 Range.prototype.conversion = function (width, totalHidden) {
  return Range.conversion(this.start, this.end, width, totalHidden);
 };

 /**
@ -313,11 +314,14 @@ Range.prototype.conversion = function (width) {
 * @param {Number} width
 * @returns {{offset: number, scale: number}} conversion
 */
 Range.conversion = function (start, end, width) {
 Range.conversion = function (start, end, width, totalHidden) {
  if (totalHidden === undefined) {
    totalHidden = 0;
  }
  if (width != 0 && (end - start != 0)) {
    return {
      offset: start,
      scale: width / (end - start)
      scale: width / (end - start - totalHidden)
    }
  }
  else {
@ -334,6 +338,8 @@ Range.conversion = function (start, end, width) {
 * @private
 */
 Range.prototype._onDragStart = function(event) {
  this.deltaDifference = 0;
  this.previousDelta = 0;
  // only allow dragging when configured as movable
  if (!this.options.moveable) return;

@ -366,10 +372,54 @@ Range.prototype._onDrag = function (event) {
  if (!this.props.touch.allowDragging) return;

  var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY;
  delta -= this.deltaDifference;
  var interval = (this.props.touch.end - this.props.touch.start);

  // normalize dragging speed if cutout is in between.
  var startDate = new Date(this.options.hide.start).getTime();
  var endDate = new Date(this.options.hide.end).getTime();
  var duration = endDate - startDate;
  if (startDate >= this.start && endDate < this.end) {
    interval -= duration;
  }

  var width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height;
  var diffRange = -delta / width * interval;
  this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);

  // snapping times away from hidden zones
  var start = this.props.touch.start + diffRange;
  var end = this.props.touch.end + diffRange;
  if (start >= startDate && start < endDate && this.previousDelta - delta > 0) { // if the start is entering the zone from the left
    this.deltaDifference += delta;
    this.props.touch.start = endDate + 1;
    this.props.touch.end = end + duration; // to cancel the time subtraction events;
    this._onDrag(event);
    return;
  }
  else if (start >= startDate && start < endDate && this.previousDelta - delta < 0) { // if the start is entering the zone from the right
    this.deltaDifference += delta;
    this.props.touch.start = startDate - 1;
    this.props.touch.end = end - duration; // to cancel the time subtraction events;
    this._onDrag(event);
    return;
  }
  else if (end >= startDate && end < endDate && this.previousDelta - delta > 0) { // if the start is entering the zone from the right
    this.deltaDifference += delta;
    this.props.touch.end = endDate + 1;
    this.props.touch.start = start; // to cancel the time subtraction events;
    this._onDrag(event);
    return;
  }
  else if (end >= startDate && end < endDate && this.previousDelta - delta < 0) { // if the start is entering the zone from the right
    this.deltaDifference += delta;
    this.props.touch.end = startDate-1;
    this.props.touch.start = start; // to cancel the time subtraction events;
    this._onDrag(event);
    return;
  }
  this.previousDelta = delta;

  this._applyRange(start, end);

  // fire a rangechange event
  this.body.emitter.emit('rangechange', {
--- a/lib/timeline/TimeStep.js
+++ b/lib/timeline/TimeStep.js
@ -26,7 +26,7 @@ var moment = require('../module/moment');
 * @param {Date} [end]           The end date
 * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
 */
 function TimeStep(start, end, minimumStep) {
 function TimeStep(start, end, minimumStep, hide) {
  // variables
  this.current = new Date();
  this._start = new Date();
@ -38,6 +38,11 @@ function TimeStep(start, end, minimumStep) {

  // initialize the range
  this.setRange(start, end, minimumStep);

  this.hide = hide;
  if (hide === undefined) {
    this.hide = [];
  }
 }

 /// enum scale
@ -190,6 +195,18 @@ TimeStep.prototype.next = function() {
  if (this.current.valueOf() == prev) {
    this.current = new Date(this._end.valueOf());
  }

  var startDate = new Date(this.hide.start).getTime();
  var endDate = new Date(this.hide.end).getTime();
  if (this.current.valueOf() >= startDate &&
    this.current.valueOf() < endDate &&
    this.current.valueOf() < this._end.valueOf() &&
    this.current.valueOf() != prev) {

    //this.current = endDate;
    this.next();
  }

 };


--- a/lib/timeline/component/TimeAxis.js
+++ b/lib/timeline/component/TimeAxis.js
@ -63,7 +63,7 @@ TimeAxis.prototype = new Component();
 TimeAxis.prototype.setOptions = function(options) {
  if (options) {
    // copy all options that we know
    util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels'], this.options, options);
    util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels','hide'], this.options, options);

    // apply locale to moment.js
    // TODO: not so nice, this is applied globally to moment.js
@ -178,7 +178,7 @@ TimeAxis.prototype._repaintLabels = function () {
      end = util.convert(this.body.range.end, 'Number'),
      minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
          -this.body.util.toTime(0).valueOf();
  var step = new TimeStep(new Date(start), new Date(end), minimumStep);
  var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.options.hide);
  this.step = step;

  // Move all DOM elements to a "redundant" list, where they
@ -199,9 +199,9 @@ TimeAxis.prototype._repaintLabels = function () {
  var max = 0;
  while (step.hasNext() && max < 1000) {
    max++;
    var cur = step.getCurrent(),
        x = this.body.util.toScreen(cur),
        isMajor = step.isMajor();
    var cur = step.getCurrent();
    var x = this.body.util.toScreen(cur);
    var isMajor = step.isMajor();

    // TODO: lines must have a width, such that we can create css backgrounds