Bug: Timeline control 'setDate' not work correctly

[Abdullah0991]

Hello,

When use setDate, the timeline will not go to the date perfectly, it will go to older date with (some sec and even some minutes) shift. Example: setDate(new Date(2019,9,1)) will make the time at 2019-8-31 23:25:08.

Timeline setup:

var startDate = new Date(2019,09,01);
var endDate = new Date(2019,10,31);
var ctrl = new Timeline({
  className: 'ol-pointer',
  features: [{
    text: 2019,
    date: startDate,
    endDate: endDate
  }],
  graduation: 'month',
  minDate: startDate,
  maxDate: endDate,
  getHTML: (f) => {
    return `Events between .............`;
  },
  getFeatureDate: (f) => {
    return f.date;
  },
  endFeatureDate: (f) => {
    return f.endDate
  }
});

• Ol-ext: 3.1.6
• Angular: 8.2.2
• Chrome: 77.0.3865.90 (64-bit)

See this GIF, I think it will clearly show the problem.

[Viglino]

I think it's a rounding problem. I'll try to investigate on it.

[Abdullah0991]

@Viglino Any updates on this ?

[Viglino]

I think it's a rounding problem...

[Abdullah0991]

I think it's a rounding problem...

So ? Is there anything can I do to solve this ?

[Viglino]

Do you have an online example (jsFiddle/codepen/codesandbox or so) ?

[Abdullah0991]

Do you have an online example (jsFiddle/codepen/codesandbox or so) ?

Currently no!

[Abdullah0991]

Hi, what the status now ? is it bug in the library ? or in my code ?

[Viglino]

Can't say till I get a code to test...

[Abdullah0991]

The problem is this issue is part of big project and my map relay on private geoserver, I tried to do my best to prepare an example that is close to my real code:

https://stackblitz.com/edit/angular-44bssk

If you open it, you will see first the slider is not on the first day of the period which specified by the startDate and endDate, and when you press Go button, the slider will move more the one day, whereas the code says move only 1 day.

[Viglino]

The problem is getDate() returns the date at the cursor position but this position may be rounded at pixel and thus is not the date set before... It will cumulate on each step...
In your example there is a 14 mn gap. Just log the gap between dates:

console.log((date - this.timelineCtrl.getDate())/1000/60);
// > 14.4

You have to store the date to make sure it's the one you expect.
You can also round the date to fit to an hour:

// let date = this.timelineCtrl.getDate();
  let date = new Date(Math.round(this.timelineCtrl.getDate()/1000/60/60/24)*1000*60*60*24);

or rounddate to 1h00 (that stick to the day separation)

  let date = this.timelineCtrl.getDate();
  date.setHours(1,0,0,0);

[Abdullah0991]

The problem is getDate() returns the date at the cursor position but this position may be rounded at pixel and thus is not the date set before... It will cumulate on each step...

First, I think the control must snap to slider ticks, there is no point for allowing the user to move the slider a couple mins or hours, if graduation is day, the slider must allow move from day to day, an so for month.

Second, I test your suggestions on the example, it doesn't fix the problem.

[Abdullah0991]

Up?

[Viglino]

Sticking to graduation would be a little constraining (some may not want to stick or stick to other intervals).
There should be another option sticking for that.
I'll try to see if I can make the rounding more accurate and add a new option.

[Abdullah0991]

@Viglino Any good news on this?

[Viglino]

No time yet to work on it...

[Abdullah0991]

Hi @Viglino, any news ? I need this fix badly.

[Viglino]

Hi
I finally spend some time to fix this issue.
Now dates should use the same rounding as the graduation.

NB: when scrolling the date is sticked to nearest pixel and one pixel is a fraction of date.
You can get the current date using a stick value (mn, hour, day...).
timeline.getDate('day')

[Abdullah0991]

Nice! I will give it a try. Thanks.