Autoscroll timeline when dragging an item when close to left/right borders

Is your feature request related to a problem? Please describe. I´m trying to move/drag items from left to right, but it is limited by the visible time, between defaultTimeStart and defaultTimeEnd. But I´m trying to drag/move those items out of the boundaries when the moving/dragging item is closed to the left/right borders.

Describe the solution you’d like

• Start moving/dragging item close to the left or right border.
• Once the startTime/endTime of item is close enought (sensibleAreaFromBorder millis) to a border, the timeline changes time (timeJump in millis) defaultTimeStart/defaultTimeEnd towards the past/future.
• The item also makes a jump equivalent to the time moved in the visible timline without loosing the dragging/moving state so the user can keen moving to past/future if repeats the process.

Describe alternatives you’ve considered I tried to implement it by myself using the moveResizeValidator() function, I replaced the content of this function in the demo-custom-items in the latest beta branch. By using the following code in the moveResizeValidator() function you can get the intended feature, but very often I get the items disappearing from the timeline, and after stop moving/dragging (onmouseup) it appears again in a different location of the mouse. You can replicate this using my solution with the following code:

` moveResizeValidator = (action, item, time, resizeEdge, newGroupIndex) => {

if (action === 'move' && this.timelineComponent && this.timelineComponent.current && this.timelineComponent.current.state) {  
  const stateFrom = this.timelineComponent.current.state.visibleTimeStart;  
  const stateTo = this.timelineComponent.current.state.visibleTimeEnd;  

  const zoomMinutes = Math.round((stateTo - stateFrom) / 60000);  
  const MOVEMENTWINDOW = 4;  

  // 5 % Percent of the window area will be used for activanting the move Time window, will change base on zoom level  
  // For Zoom level 2 hours, area 6 minutes  
  const percetageTolerance = (zoomMinutes * 5) / 100;  
  const timeBorderArea = Math.round(percetageTolerance * 60000);  
  const duration = item.end - item.start; 

  // Moves to right  
  if (time + duration > stateTo - timeBorderArea) {  
    const newFrom = stateFrom + (timeBorderArea * MOVEMENTWINDOW); // Moves 20 percent  
    const newTo = stateTo + (timeBorderArea * MOVEMENTWINDOW); // Moves 20 percent  

    // onChangeVisibleTime(newFrom, newTo);  
    console.log(moment(newTimeForItem).format('HH:mm') + "  Moved with window range");  
    const newTimeForItem = time + (timeBorderArea * MOVEMENTWINDOW);  
    this.timelineComponent.current.updateScrollCanvas(newFrom, newTo); 
    return newTimeForItem;  
  }  

  // Moves to left  
  if (time < stateFrom + timeBorderArea) {  
    const newFrom = stateFrom - (timeBorderArea * MOVEMENTWINDOW); // Moves 20 percent  
    const newTo = stateTo - (timeBorderArea * MOVEMENTWINDOW); // Moves 20 percent  

    // onChangeVisibleTime(newFrom, newTo);  
    this.timelineComponent.current.updateScrollCanvas(newFrom, newTo);  
    return time - (timeBorderArea * (MOVEMENTWINDOW));  
  }  
  }  
console.log(moment(time).format('HH:mm')); 
return time;  

} `

Quick demo with the code above in the latest beta

Bug encountered very often since the library was not intender for this feature

[davidbejarcaceres]

@vagabondhoang You can check my solution for this issue in my new PR. Let’s see if they accept it so anyone can use it.

[vagabondhoang]

Bro @davidbejarcaceres , does it work for auto scroll vertically when drag item ups/downs? Thanks