javascripttimelinevis.jsvis.js-timeline

How to get the latest end date in DataSet Items withe vis.js Timeline


I have implemented a timeline using vis.js with the following options :

  var timeline_items = new vis.DataSet();
  var timeline_groups = new vis.DataSet();

  var start = new Date(1970, 0, 1, 0, 0, 0, 0);
  var end = new Date(1970, 00, 01, 0, 1, 0, 0);

  var options = {
      zoomKey: "ctrlKey",
      horizontalScroll: true,
      verticalScroll: true,
      orientation: "top",
      moveable: true,
      zoomable : true,
      editable: true,
      min: start,
      max: end,
      start: start,
      end: end,
      zoomMax: 10000000,
      zoomMin: 1000,
      stack:false,
      showCurrentTime: true,
      multiselect: true,
      multiselectPerGroup: true,
  };

The timeline works perfectly for a video editor timeline with the options. Now I intend to get the latest available date in the timeline for the case of a drag & drop action :

function handleDragStart(event) {
  event.target.id = event.currentTarget.id;
  event.target.addEventListener('dragend', handleDragEnd, false);
}

function handleDragEnd(event) {
  newItem_dropped = $("#" + event.target.id);
  var latest_date  = options.min;
  for (var i = 0; i < timeline_items.get().length; i++) {
    if (latest_date < timeline_items.get()[i].end) {
      latest_date = timeline_items.get()[i].end;
    }
  }

  var start = Math.round((latest_date - options.min));
  var end   = Math.round((latest_date - options.min)) + 
                $(newItem_dropped).attr('data-entity-segment-end') - 
                $(newItem_dropped).attr('data-entity-segment-start');
  var link  = $(newItem_dropped).attr('data-src');

  parsed_start = parseMillisecondsIntoReadableTime(start);
  parsed_end   = parseMillisecondsIntoReadableTime(end);

  timeline_items.add({
    id: $(newItem_dropped).attr('id'),
    group: "timeline_video_group_id", // truck,
    start: new Date(1970, 0, 1, parsed_start[0], parsed_start[1], parsed_start[2], 
                    parsed_start[3]),
    end: new Date(1970, 0, 1, parsed_end[0], parsed_end[1], parsed_end[2], 
                  parsed_end[3]),
    content: "<img src='" + link + "'></img>",
    className: 'imagecontainer'
  });
}

Particularly, in the DragEnd function I try to to calculate latest date for the items in the DataSet for the timeline, but it does not calculate it correctly.

How should I get the latest available date in the timeline ?


Solution

  • Adding this function for getting latest date available solved my problem :

    function rearrange_timeline_min_max_value()
    {
        console.log("timeline_get_latest_date start");
        var rearranged_timeline_date = timeline_get_latest_date();
    
        if (rearranged_timeline_date < new Date(1970, 0, 1, 00, 01, 00, 000)) {
            rearranged_timeline_date.setSeconds(60);
        } else if (options.max < timeline_get_latest_date()) {
            console.log("timeline_get_latest_date atest data before : " + timeline_get_latest_date());
    
            rearranged_timeline_date.setSeconds(
                rearranged_timeline_date.getSeconds() + 30
            );
    
            console.log("timeline_get_latest_date atest data after : " + timeline_get_latest_date());
        }
    
        timeline.setOptions({min: new Date(1970, 0, 1, 00, 00, 00, 000),
                             max: rearranged_timeline_date});
        timeline.fit();
        timeline.redraw();
        console.log("timeline_get_latest_date end");
    }