Problem Statement

I have a grid, the corners of the elements may or may not be aligned, but all the edges touch so that there are no gaps. There are also no matches. For example, it is possible to have something like this:

+----+-------+
|    |   B   |
|    +---+---+
| A  | C |   |
|    |---| D |
|    | E |   |
+----+---+---+

      

        
        
        
      

    

The grid is created through absolutely positioned elements. (I understand it's easier to create a grid like this through a tree where the parent node is a container that forms a rectangle with the sibling element (s), but I think this might limit the ways I could be able to resize the elements - I'll explain later).

I want to be able to resize one element and have adjacent elements, resize them so that they snap to the new sizes of the elements without leaving any gaps. For example, let's say we are resizing an element C

:

• If I resize the left edge of C towards A, I want A to shrink horizontally. As A contracts, B and E must expand in the direction of A to fill this void.
• If I change the bottom edge of C downward, E should shrink, no other elements should be affected.
• If I resize the right edge of C to D, D should shrink, E and C should grow into that void.
• If I resize the top edge of C to B, B should shrink vertically and D should expand with C.

Why tree structure doesn't work

Now, as mentioned earlier, I understand that nesting these elements inside container elements (tree structure) will make handling the above case much easier. The reason why I think the tree structure won't work for me (besides the fact that I already have too much code based on absolute positions) is because I don't want the next size to be based on the base tree structure that is at the bottom:

+---+---+---+
|   |   |   |
+---+---+---+
|   |   |   |
+---+---+---+
|   |   |   |
+---+---+---+

      

        
        
        
      

    

With a tree, this example will not work, as resizing the middle tile will resize elements that have the same parent / container, even if they don't need to be resized.

Current thoughts / work

I am trying to figure out how to calculate which additional elements should be effectively changed for my absolute elements. I am thinking about something along the following lines:

• After resizing, increasing the element in a given direction, take the corresponding edge and document.elementsFromPoint()
  
  search along that edge in a binary pattern from one corner to another until the element returned for the min point is the same as for the maximum point for each sample point ( if they don't match, draw a new point in the middle and continue recursively). This stencil will contain all the elements that the element has invaded as a result of the resizing (so they need to be shrunk using the opposite edge)
• After resizing that shrinks the element, do the same kind of binary traversal along the original edge (before resizing), but a couple of pixels in the opposite direction from the size (this should hit elements that need to grow to fill the gap)
• For the main element it will be either one or the other bullet higher (shrinking or growing), but the next step now finds "side effects", if the edge of the neighboring element goes beyond the edge of the original element, the same analysis should be done along this expansion. This, in turn, can cause new side effects to appear along one edge if we have a brick pattern.

The search described in the first pool would be something like this and then I will check for side effects after:

function binarySearch(min, max, resizedElement, otherCoord, vertical=false) {

    function getElement(x, y) {
        if (vertical) {
            let tmp = x;
            x = y;
            y = tmp;
        }
        // we know there will always be an element touching, so this
        // should only throw an error if we pass bad otherCoord
        return document.elementsFromPoint(x, y).filter(e => e !== resizedElement)[0];
    }

    let elements    = new Set(),
        startIndex  = min,
        startElement= getElement(min, otherCoord),
        stopIndex   = max,
        stopElement = getElement(max, otherCoord);

    if (startElement === stopElement) {
        elements.add(startElement);
    } else {
        let middle = Math.floor((stopIndex + startIndex)/2),
            left   = binarySearch(min, middle, resizedElement, otherCoord, vertical),
            right  = binarySearch(middle, max, resizedElement, otherCoord, vertical);
        elements   = new Set([...elements, ...left, ...right]);
    }

    return elements;
}

      

        
        
        
      

    

Am I overcomplicating this? Is there a better approach? Is this doable through trees and I just can't see it?