Improve visual editor UX

[apedroferreira]

https://www.notion.so/mui-org/App-Editor-Enhancements-070bf8ba0e2145a2aaaf50d67a24983e

Related to #101

This is an improvement proposal for our drag & drop. It may not be perfect yet but I feel like it's an improvement and a step in the right direction.
There might still be uncaught bugs or small UX issues, but overall seems fine from what has been tested. The rest can be fixed and improved after receiving feedback.

Refactored drag & drop with several features:

• replace old slots system with "quadrants" over every element to determine where the new element will be placed. A center area in container elements is also accounted for besides top, right, bottom and left.
• remove ability to add row and columns - those are automatically created and can only be placed at the top level (can be changed, it's just a proposal to experiment with)
• restored some of the previous defaults for page rows and columns, since I felt like I should not have changed them in previous PRs

Video example:

Screen.Recording.2022-06-08.at.18.33.12.mov

@Janpot I tried to be careful but let me know if I deleted something I shouldn't, or if some of the new utility methods I created would be better in some other place.

[render]

Your Render PR Server URL is https://toolpad-pr-466.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-ca7qerpg7hp7rgt1p1jg.

[render]

Your Render PR Server URL is https://toolpad-pr-466.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-caaviv4gqg44u0360gvg.

[apedroferreira]

@Janpot I've made all the changes and added all the fixes we talked about yesterday, hopefully it's better now.
The next step would be implicit element containers that take up all remaining space in a row, but that will be a separate PR.

[Janpot]

The space between two elements is not behaving the best

Screen.Recording.2022-06-08.at.20.12.51.mov

[apedroferreira]

The space between two elements is not behaving the best

Screen.Recording.2022-06-08.at.20.12.51.mov

i see what happened there, you dragged to the space between two elements which means you were hovering over the parent, and you dropped the new element in the parent, which adds an element as the last element in the parent...

i can try to handle situations like this but will have to change to logic to somehow not consider exactly the element you're hovering over - and be able to see which elements are close to the cursor in some way

[apedroferreira]

The space between two elements is not behaving the best
Screen.Recording.2022-06-08.at.20.12.51.mov

i see what happened there, you dragged to the space between two elements which means you were hovering over the parent, and you dropped the new element in the parent, which adds an element as the last element in the parent...

i can try to handle situations like this but will have to change to logic to somehow not consider exactly the element you're hovering over - and be able to see which elements are close to the cursor in some way

i guess i can create some kind of subsystem inside containers that works like the slots that were implemented previously

[Janpot]

I think a misconception that this implementation makes is that slots go on the edges of the components. Components are laid out in a structure that can have a configurable gap. If the slot goes on the edge, that makes it so there are two slots in between two consecutive children.

I think a better mental model would be that the layout components (rows, columns) divide the page in rectangles that the user components (button, input, table,...) occupy. Insert slots appear on the edges of these rectangles. For the drag&drop algorithm, these rectangles don't have spacing, the spacing only applies to the components that occupy the grid.

[apedroferreira]

@Janpot this might be mergeable now, i thing the UX is feeling alright in general, lmk if you find any more issues!
i've seen just a few minor issues in some rare cases, i can handle those later along with everyone's feedback

[prakhargupta1]

When dropping a component, the default alignment on the left felt better than the central alignment.
It could be a personal choice also I don't know how much rework would it require, so just sharing my view.

[apedroferreira]

When dropping a component, the default alignment on the left felt better than the central alignment. It could be a personal choice also I don't know how much rework would it require, so just sharing my view.

it's an easy change, we just need to decide if we want this current behavior or if we want new elements to take up the minimum width possible. this current approach is similar to Makeswift.
another option would be to re-enable the Stack component and it could be used to put elements close together in a row or column.

[Janpot]

👍 Great work! Let's merge this and continue polishing in follow-up PRs