feat: add capability to control resizing animation

[arwtyxouymz]

Related to #44

Hi, let me suggest to add the feature to control resize animation.
Currently, dnd-timeline doesn't allow us to control the resize animation during pointer move, it only allows when onResizeEnd.
So user can resize invalid and they notice it on pointerup event.
I needed to control resize only by specific tick (in my case, 1 day tick) and I implemented it.
The demo movie is here:

2024-09-29.21.31.52.mov

My code is here:

const tick = hoursToMilliseconds(24);
const dailyResizer: CalculateNewSpan = ({ span, direction ,deltaX }) => {
  if (direction === 'start') {
    // omit
  } else {
    const threshold = 0.5 * tick;
    const newEnd = span.end + deltaX;
    const prevTarget = Math.floor(newEnd / tick) * tick;
    const nextTarget = Math.ceil(newEnd / tick) * tick;

    return {
      ...span,
      end: Math.max(
        span.start,
        prevTarget + threshold <= newEnd ? nextTarget : prevTarget
      ),
    };
  }
}

export function Item(props) {
  const { /* hook return */ } = useItem({
    id: props.id,
    span: props.span,
    calcNewSpan: dailyResizer,
  })
}

Thank you for your great library and review!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dnd-timeline-external	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 29, 2024 0:45am
dnd-timeline-sortable	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 29, 2024 0:45am
dnd-timeline-virtual	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 29, 2024 0:45am

[samuelarbibe]

Hey!
Will take a look on the weekend :)

[samuelarbibe]

Generally, we have 3 options:

1. Allow the customer to choose a behavior specific to resizing items.
2. Allow the customer to global strategy for dragging and resizing items.
3. Use the existing "snap-to-grid" functionality and apply it to resizing.

I would like us to exhaust the 3rd option before moving on

[samuelarbibe]

deltaX is in pixels, and Span's start and end values should be transformed values, relative to the current range.

Make it so the function receives translated values. You can name it delta, just make sure it receives translated values. You can do so by calling the getValueFromScreenX and calculating the delta.

[samuelarbibe]

For your particular use case, I suggest you to try and use the existing getValueFromScreenX function, which already implements "snap-to-grid" behavior.
Maybe calculate the delta.
Or maybe even export snapValueToRangeGrid function from useTimeline and use it here?

[samuelarbibe]

Typo in calcNewSan

[arwtyxouymz]

Generally, we have 3 options:

1. Allow the customer to choose a behavior specific to resizing items.
2. Allow the customer to global strategy for dragging and resizing items.
3. Use the existing "snap-to-grid" functionality and apply it to resizing.

I would like us to exhaust the 3rd option before moving on

Thank you for your review, but I don't have enough time to working on this PR now.
Let me work on this later!
I was planning to use this lib on my project, but the priority changed.
The feature development was postponed.

[khanzzirfan]

I would rather allow the custom modifiers from user to inject into the timeline context if possible. something like these.
user can create modifiers based on experience. The out of the box modifiers are restrict to x and y axis available.

https://docs.dndkit.com/api-documentation/modifiers

[samuelarbibe]

I would rather allow the custom modifiers from user to inject into the timeline context if possible. something like these.

user can create modifiers based on experience. The out of the box modifiers are restrict to x and y axis available.

https://docs.dndkit.com/api-documentation/modifiers

I agree, this may be the most flexible option.

I am currently unsure as to what should be the appropriate implementation, and currently have no spare time to investigate this.

Suggestions will be appreciated 🙏