Question

I’m working on a portal/dashboard type interface which has panels/widgets that can be freely dragged around the dashboard space as long as they don’t overlay any other panels. New panels can be added to the dashboard via a menu containing all available panels, and when a menu item is clicked, the panel is placed into the dashboard. The panels currently occupying the dashboard space are all represented in an object like this:

{
    'panel_1': { top: 0, left: 0, width: 300, height: 350 },
    'panel_2': { top: 0, left: 370, width: 200, height: 275 },
    'panel_3': { top: 370, left: 0, width: 275, height: 400 },
    ...
}

My question is, what is a valid algorithm that would, when the user clicks one in the menu, correctly place a new panel (of a given width and height) in unoccupied space that is closest to a left and top (x and y) value of 0, 0, without overlapping any of the existing panels?

Answer 1

I think, simple bruteforce algorithm will fit you. As I remember, fit rectangle solve another problem

Iterate over your dashboard axis to find out, whether you can place your rectangle, until X < rectangle.widh + dashboard.width, same for Y.

Foreach X,Y on dashboard iterate over every panel to find whether they overlap. You can apply some optimization, to decrease amount of iteration. If panel overlap rectangle, you can increase X or Y(which is in nested loop) not by 1, but by width or height of panel.

In most cases, you will not make dashboard.width*dashboard.height*panel.count iteration. With some optimization, it will find best fit rather quick