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

[davidbejarcaceres]

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

[vagabondhoang]

@davidbejarcaceres do u have solution for this? Thanks

[vagabondhoang]

Thanks @davidbejarcaceres , item disappears if it is not in the range of visibleTimeStart and visibleTimeEnd

[davidbejarcaceres]

@vagabondhoang I did manage to fix the item disappear/jump when the item goes off-screen, but I had to modify the library.
This disappear/jump bug is happening because the "time" prop received in moveResizeValidator() is not always the right one, because we also move the timeline within this function with "this.timelineComponent.current.updateScrollCanvas(newFrom, newTo);".

To make sure the "time" is the correct you have to calculate it from the drag event (dragmove function in Item.js):
From here you can modify the function this.props.moveResizeValidator() and add the dragmove event "e" to this function, like this:

.on('dragmove', e => {
  if (this.state.dragging) {
    let dragTime = this.dragTime(e)
    let dragGroupDelta = this.dragGroupDelta(e)
    if (this.props.moveResizeValidator) {
      dragTime = this.props.moveResizeValidator(
        'move',
        this.props.item,
        dragTime,
        e // Add this event to function in Item.js (dragmove)
      )
    }
...

Now you can use this event moveResizeValidator(action, item, time, e) from your component, and do not use "time", calculate manually the time from the event using the Timeline.js function timeFromItemEvent(e):

const moveResizeValidator = (action, item, time, e) => {
  const fixedTime =  this.timelineComponent.current.timeFromItemEvent(e) // right time from timeline, DO NOT USE time "param"
  
  // YOUR CODE TO MOVE TIMELINE BELOW WHEN ITEM GETS CLOSE TO LEFT/RIGHT BORDERS
  ...
}

This way I solved the item disappear/jump because the "time" param received in function is not the exact position/time of the item been dragged while moving the timeline.

You can do something similar for resize items and when close to the left/right border, move the timeline.

[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