Feature request: DropZones support horizontal direction

[abird]

I'm developing a Layout component that positions subcomponents horizontally and supports flex "justify-content" and "align-items." The rendering portion works great, but editing only supports adding and displaying components vertically. The underlying "dnd" library supports a horizontal direction.
It would be great if DropZone allowed specifying a horizontal direction. Support for flex positioning would be icing on the cake.

[chrisvxd]

Hi @abird - I suspect this will be resolve as part of #123 or #455. I'll leave it open for tracking purposes.

[abird]

I found a solution that works great for me. I've found that if you pass a "style" prop (undocumented) to DropZone, it's passed on to the container for all of the draggable children. So I do this:

<DropZone zone="layout" style={{ display: 'flex', justifyContent: justify }} />

This lays out the children horizontally within the drop zone. I can specify any justify-content value, such as 'space-between'.

However, when dropping onto the drop zone, it still does it vertically, so I patched Puck to fix this. The file is: node_modules/@measured/puck/dist/index.js. For my version, the line number is 31374 where I replaced direction: "vertical" with direction: style?.display === "flex" ? "horizontal" : "vertical". So when flex display is specified, it uses a horizontal drag and drop.

Patching an NPM module can be tricky, so I use "patch-package" to manage my patch. (See https://scottspence.com/posts/patching-packages or https://www.npmjs.com/package/patch-package)

The patch works for editing, but not when rendering. The solution that works for me is to wrap the <DropZone .../> in a div with { display: 'flex', justifyContent: justify }.

[chrisvxd]

Nice solution @abird!