Better program separation for different channels

[stichiboi]

I'm implementing a sortable drag and drop on the timeline, using dnd-kit
I want to be able to reorded my timeline items in the channel row (not across channels)

This is how I currently implemented it:

            <DndContext
                sensors={sensors}
                collisionDetection={closestCenter}
                // onDragEnd={recalculateRoutes}
                modifiers={[restrictToHorizontalAxis]}
            >
                <SortableContext items={epg} strategy={horizontalListSortingStrategy}>
                    <Epg {...getEpgProps()} isLoading={loading}>
                        <Layout
                            {...getLayoutProps()}
                            renderProgram={
                                ({ program, ...rest }) => (
                                    <TimelineItem
                                        key={program.data.id}
                                        program={program}
                                        {...rest}/>
                                )
                            }
                        />
                    </Epg>
                </SortableContext>
            </DndContext>

TimelineItem is a simple component that follows the dnd-kit docs, with the useSortable hook

The problem is that I can only create one SortableContext, that includes the entire epg: so when I try to rearrange one item, it jumps the items from the other channels

Here is an image of my timeline, with no interaction:

Here is an image when I'm moving an item from the second channel. Note how the items from the first channel jumped to the beginning:

Note: all the items have different ids

Basically if I could implement a per-channel wrapper, to which I pass in the TimelineItems as children, I would be able to create one context per channel.
Around the same lines as the other render props on layout, a renderChannelRow:

const renderChannelRow: (({children}: {children: ReactNode}) => ReactNode)

What do you think?

[karolkozer]

Hi @stichiboi,

I plan to add DnD to the component. I have some ideas for that but also I need to think about your solution.
I need to see and read the docs how the dnd-kit you are using works.

[karolkozer]

Also, I have some ideas about functionalities which can be provided by Planby

[karolkozer]

@stichiboi can you send the link to Codesandbox?

[stichiboi]

Codesandbox

The original issue is not relevant anymore, I manage to solve the movement on different rows by:

• Restricting to horizontal axis
• Using the rectIntersection as the collision detection algorithm

You can recreate the bug by changing the collision detection to closestCenter (the one suggested by the dnd-kit tutorial).

I still think, from a user point of view, that having the channel rows separated into different components makes more sense than having just a huge list.
This also impacts performance, since every change with the DND triggers a render of all the items, even if I just changed one row.

Having a wrapper component means that you can also style every row differently.

[stichiboi]

Small note: the scrolling while dragging the element is very bad. Probably it's dnd-kit's fault, I'm working on improving it.
It's something you might want to pay attention to if you want to implement it in planby

[stichiboi]

Online I see a lot of examples for dnd libraries that implement Kanban Boards: I'm thinking that planby could implement something like that.

Examples (think of them as horizontal instead of vertical: each section is a channel, each task is a program)
dnd-kit
react-beautiful-dnd

Every row is a different board, and you can move programs between different boards.
Then you can rearrange the programs or the channels.

But you need row separation to do this.

There is actually another option with dnd-kit, which is to implement a custom sortingStrategy. I've tried writing something starting from the horizontal scrolling strategy, but definitely don't have the head to do it on a Friday afternoon 😅.