"Grid" drag and drop interactive layouts

[aptkingston]

Description

This PR adds a new way to lay out your components - a drag and drop grid system. This makes it easier, faster and more intuitive to design your screens.

I'd really appreciate it if you could give this a try on the feature branch - all feedback is welcome.
Some of these videos are now outdated - please use the feature branch for the most up to date code.

How to use grid layout

Grid layout can be used in 2 ways: either on your screen as a whole, or in any container.

To change your screen or container to grid layout, use the new action button setting setting:

Grid layout basics

Any components put inside a grid container or screen can be resized using anchors on all corners and sides:

Screen.Recording.2024-08-05.at.19.03.57.mov

They can be moved around by dragging:

Screen.Recording.2024-08-05.at.19.04.31.mov

Some components take up the full size that you specify, like the table in the videos above, but this doesn't make sense for all components. Take a button for example - you wouldn't want your button to ever be that size. Components like this instead are positioned inside the bounds you define, and can be aligned whatever way you want:

Screen.Recording.2024-08-05.at.19.06.28.mov

Designing for mobile

The biggest limitation of drag and drop layout systems (especially compared to Budibase's normal layout system) is the lack of responsiveness - i.e. they don't automatically work on mobile.

To solve this, the new grid layout system "remembers" the position and size of your components for both large (desktop/tablet) and small (mobile) previews. So to design a screen for mobile, just swap to the mobile preview and move your components around to design the screen as you want on mobile.

Here's a quick example of building a very basic screen:

Screen.Recording.2024-08-05.at.19.13.59.mov

A few other clarifications about how this feature works:

• Grids have 12 columns, which are dynamically sized depending on the width of your component.
• Grids have rows that are 24px tall - so the taller your grid is, the more rows you have.
• Grid lines are only shown when resizing or dragging a component inside your grid.
• There is a fixed 5px margin and 5px padding around all components to provide natural spacing and allow anchors to render properly.
• You can overlap things without restrictions. Components rendered lower down your tree go on top.
• You can nest grids inside grids as many times as you want. But should you?
• Nothing can ever overflow outside the bounds you define. So yes you can make a form block that is 10px tall. Overflow will cause scrolling within the bounds of your component.
• All components should appear with a sensible amount of rows and columns predetermined for you.
• When used at a screen level, the screen width setting is still respected. If you want a full screen grid (ignoring the width of your nav) then use the "Max" width setting.

Addresses

• https://linear.app/budibase/issue/BUDI-8490/grid-layout

For plugin authors

When adding a component inside grids, we use metadata defined in the manifest to determine how big a component should initially be, and what way it should be laid out.

The size key is used to define what size (in pixels) an instance of your component should be by default. Please use a reasonably small size here. If this is undefined, we will use 200x200. For our table component for example, we use:

"size": {
  "width": 600,
  "height": 400
},

The grid key defines how your component should be aligned when used inside a grid. There are 2 properties - hAlign for horizontal alignment and vAlign for vertical alignment. Each of these can be either start, center, end or stretch and behaves exactly like their CSS flexbox equivalents. The defaults are stretch horizontally and start vertically. These can be controlled by the end user in the settings bar rendered in the preview. The one exception to this is if you specify stretch for both. In that case, the user will not see the settings in the bar and the component will always fill the space, like for our table component.
Here's an example of how this metadata looks for our form block:

"grid": {
  "hAlign": "stretch",
  "vAlign": "start"
},

Other stuff

• Fixed the Tag component which was completely broken and didn't have styles at all
• Improve alignment of indicators when in the builder, and improve app preview styles and alignment which could be offset slightly

Launchcontrol

Added a new way to lay out your components - a drag and drop grid system. This makes it easier, faster and more intuitive to design your screens.

Feature branch env

Feature Branch Link

[aptkingston]

Yes, I'm actually using CSS here to calculate default sizes and then round it to get a valid integer to use later for CSS grid column/row positions.

[aptkingston]

Most of the new metadata required to use this feature is handled by this new svelte action. This keeps it all nicely scoped inside one file and means we don't need to make this core Component file any more complicated than it already is.

[poirazis]

this looks really neat !
cant wait !

[aptkingston]

Closing in favour of #14360.