Support dragging between DropZone areas

[chrisvxd]

#37 introduced the DropZone component, but it is not possible to drag between DropZone areas (or parents), per the "Rules of DropZones" detailed in the PR:

1. You can drag from the component list on the LHS into any DropZone
2. You can drag components between DropZones, so long as those DropZones share a parent (also known as area)
3. You can't drag between DropZones that don't share a parent (or area)
4. Your mouse must be directly over a DropZone for a collision to be detected

This restriction was implemented to overcome some of the limitations of react-beautiful-dnd (and drag-and-drop in general). I've been exploring this over the last few days but it is non-trivial. I'm breaking this issue out from #100 to keep things moving forwards, and may pause work on this for the time-being.

Challenges

Issues that I've encountered:

1. After switching between areas, react-beautiful-dnd incorrectly offsets for the change of height during the dropping animation - Solved by correcting the transform produced by react-beautiful-dnd during the drop animation
2. Items need dynamically resizing during drag (which technically also affects dragging items between DropZones, not just areas) - Solved by correcting the transform produced by react-beautiful-dnd whilst dragging based on the size of the destination DropZone
3. After switching between areas and moving above the source area to the parent area, react-beautiful-dnd offsets the dragged item by the relative position of the source Droppable to the parent Droppable - Not solved (see below)

Issues with patching 3

Unfortunately issue 3 is particularly challenging. I explored different approaches to correct this issue:

1. Modify the transform (again) - however, it is not clear how the offset is even being applied, making it difficult to calculate a valid correction
2. Reparent the element using the renderClone API - this solves the offset issue completely but breaks dragging of components that contain DropZones (nested Droppables are technically unsupported by react-beautiful-dnd). This API unmounts the Draggable on render, which causes the nested Droppables to unmount and react-beautiful-dnd to freak out.
3. Reparent the element using portals (instead of renderClone) to avoid unmounting - this introduces further positioning issues, but they may be solvable. Further exploration is required.
4. Migrating to dnd-kit - this is not a simple swap and introduces regressions that have already been resolved.

Current state

Kapture.2023-10-03.at.12.38.55.mp4

[JakeSidSmith]

@chrisvxd was/is there any particular reason(s) puck uses (or would use) a library for drag and drop as opposed to the HTML 5 drag and drop API? It's supported by all major browsers excluding mobile ones. Do you aim to support drag and drop on mobile?

[JakeSidSmith]

If you guys would like it, I could build a drag and drop interface that is similar enough to beautiful dnd that it should be easy to swap out, but it'll use portals by default, allow dragging to different depths, handle mobile drag and drop a bit nicer, and you'll have full control over it... Or I could publish it to NPM.

I have plenty of experience with writing drag and drop stuff e.g. https://github.com/jakesidsmith/react-reorder

I've actually been meaning to re-write the API for the above for ages, and already have a decent starting point.

[chrisvxd]

@JakeSidSmith Re your first question - time. We don't have a huge interest in maintaining our own dnd implementation when react-beautiful-dnd and dnd-kit exist. You get a lot of stuff for free with both (especially beautiful-dnd), including great animations, mobile (which we don't really support that right now anyway, but don't want to lock ourselves out of) and great accessibility (which might actually be better with HTML5).

However, I think that most likely the only way to robustly overcome the issues outlined here are with a custom implementation using dnd-kit or HTML5.

We have been considering dnd-kit rather than rolling our own entirely, but you still lose a lot of the free stuff from beautiful-dnd.

And your offer! Very generous and interesting. My concerns would still remain somewhat. I don't want Puck 1) relying on an immature external library or 2) taking on a load of additional maintenance. These risks need to be balanced with the dancing we currently do around react-beautiful-dnd, and feature restrictions.

Would defo be open to chatting about it. Shall we chat more about it via discord?

[mgreenw]

Very excited about this feature now that #211 is merged!

[chrisvxd]

Hey @mgreenw - this has dropped way down our priority list for the time-being. There are still several major UI/UX and technical challenges we'd need to solve.

[mgreenw]

Thanks for the update @chrisvxd! Really appreciate all the awesome work y'all are doing on this tool 👏

[axyz]

Just wondering if it would be easy to enable this feature on the outline, rather than the preview. It could be a good intermediate step towards a more complex solution.

Also in general being able to drag from the component list to the outline directly could be useful in many cases where the DOM structure starts to get more complex.

[chrisvxd]

@axyz outline dnd (#126) is definitely easier and should be implemented regardless of this, yeah! Just haven't gotten around to that yet.

We've actually forked the DND lib to support iframes (#353), so the more complex implementation might start to become more viable now.

[ZafarKamal123]

Hi @chrisvxd,

Looks like this haven't been fixed yet. I'm going to use puck editor in a project and resolving this issue is crucial for that. Do you have any plans for this particular issue being fixed in the future? If this isn't in your priority list at the moment. Could you give me some pointers and i may try fixing this on a forked version.

[chrisvxd]

@ZafarKamal123 we're currently rebuilding the underlying dnd core as the existing library is just not suitable and hard to maintain. I'm hoping to have something over the next few months, but can't give a time-frame just yet.

This is not trivial and patching it in is probably going to be a bad time. You'd have to fork our fork of the underlying dnd library and solve for some thorny UX challenges. Awesome if you can solve it, but there be dragons 🐉

[mgreenw]

@chrisvxd Sounds like a huge project! 😳 Out of curiosity, does the new Atlassian "Pragmatic Drag and Drop" library meet some of your requirements?

[chrisvxd]

@mgreenw We did explore Pragmatic Drag and Drop. It meets the iframe requirements, but dropped animations, which we feel are a key part of the Puck experience.

[xylish7]

I want to say you did a great job with this project. Really nice! I'm also thinking using this for some of the products I want to develop and this feature (dragging between drop zones) will make the user experience way better. Hope you can deliver it soon 🤞🏻❤️

[prashanthvdckap]

Hi @chrisvxd
Any update on this?

[chrisvxd]

@prashanthvdckap working on it but it's a massive lift that's using up all Puck capacity I have rn. Trying to close it off ASAP.