search

onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
2.85k stars 175 forks source link

[feat] Add grid drag-and-drop support #584

Open Kitenite opened 3 days ago

Kitenite commented 3 days ago

Describe the feature

Currently, we're handing drag positioning for flex or block only. We need to handle grid.

Here is where we're handling the drag logic. The stub is the gray box that represents the future drop position. We need to calculate the correct position for the stub element in order to implement drag.

I think this is a well-scoped problem (though difficult) so would be good for first-time contributor

https://github.com/onlook-dev/onlook/blob/d00ac57a865e853dfa8dabc7f13f3ab05675bd24/app/electron/preload/webview/elements/move/stub.ts#L20

Screenshot 2024-10-17 at 6 20 22 PM
Ashutoshdas-dev commented 2 days ago

hey @Kitenite assign me this issue under the label

Kitenite commented 2 days ago

Go for it @Ashutoshdas-dev