I am interested in converting a flat grid, represented as an array of items with coordinates and sizes, into a hierarchical grid structure where the children are organized into rows and columns.
UPDATE: I initially referred to the flat grid as a "matrix," which may have caused confusion. The main goal is to transition from a flat grid to a tree-like structure. It is possible to convert a matrix into a flat array, like the one I am using here, and then transform it into a tree.
Given a flat grid like this:
var grid = [
{x:0,y:1,w:1,h:3,id:'f'},
{x:0,y:0,w:9,h:1,id:'e'},
{x:1,y:1,w:4,h:2,id:'a'},
{x:5,y:1,w:2,h:1,id:'b'},
{x:5,y:2,w:2,h:1,id:'c'},
...
];
The desired result would be:
var grid = [
{
"w": 9,
"h": 4,
"children": [
{
"x": 0,
"y": 0,
"w": 9,
"h": 1,
"id": "e"
},
{
"w": 9,
...
],
"x": 0,
"y": 0
}
]