search

thisbeyond / solid-dnd

A lightweight, performant, extensible drag and drop toolkit for Solid JS.
https://solid-dnd.com
MIT License
505 stars 35 forks source link

Fix offset #90

Closed VeryLittle closed 1 year ago

VeryLittle commented 1 year ago

https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--basic-setup image When trying to repeat the behavior, a bug appeared with an offset

martinpengellyphillips commented 1 year ago

Hey, thanks, but what's the specific issue you are experiencing? Please share a reproducible test case with your code.

Note that the proposed fix would cause layout to be continuously re-evaluated likely leading to poor performance and removing the benefit of css transforms.

VeryLittle commented 1 year ago

@martinpengellyphillips https://codesandbox.io/s/zen-river-3zvtmo?file=/src/Test.tsx Hi, you can try to drag "1" to the bottom of the list. This PR shows that layout value is outdated. I guess that there is more beautiful way.

martinpengellyphillips commented 1 year ago

Ah, so you are changing the sortable elements dynamically after drag has started. And in this case are only removing elements, not adding any.

I think a cleaner solution could be to recompute layouts when a draggable/droppable is removed and there is an active draggable (similar to what is done when adding) in drag-drop-context.tsx. I'll need to check for unintended side-effects there.

In the meantime, recomputeLayouts is exposed as part of the drag drop context so you can call it manually yourself in response to the change. E.g. https://codesandbox.io/s/competent-lovelace-kzpw9n?file=/src/Test.tsx

Note to self: this currently requires using a nested component to grab the context, we should probably expose the context in the top level callbacks (onDragStart etc) for ease.

VeryLittle commented 1 year ago

Thank you for your answer.