Как преобразовать плоскую сетку во вложенную сетку?

Question

Я хотел бы преобразовать плоскую сетку, описанную как массив элементов, имеющих координаты и размеры, в вложенную сетку, заполненную детьми, организованную в строки и столбцы.

EDIT: В первой версии этого вопроса я использовал термин «матрица», чтобы говорить о сетке в ее плоском состоянии. Вероятно, это путано, реальная цель этого вопроса состояла в том, чтобы перейти от плоского к дереву. В любом случае, можно легко преобразовать матрицу в плоский массив, такой как тот, который я использую, чтобы преобразовать его в дерево.

Наличие плоской сетки, такие как:

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'}, 
    {x:5,y:3,w:2,h:1,id:'h'}, 
    {x:1,y:3,w:4,h:1,id:'g'}, 
    {x:7,y:1,w:2,h:1,id:'i'}, 
    {x:7,y:2,w:2,h:1,id:'j'}, 
    {x:7,y:3,w:2,h:1,id:'k'}, 
]; 

Результат будет выглядеть так:

var grid = [ 
    { 
    "w": 9, 
    "h": 4, 
    "children": [ 
     { 
     "x": 0, 
     "y": 0, 
     "w": 9, 
     "h": 1, 
     "id": "e" 
     }, 
     { 
     "w": 9, 
     "h": 3, 
     "children": [ 
      { 
      "w": 8, 
      "h": 3, 
      "children": [ 
       { 
       "w": 8, 
       "h": 1, 
       "children": [ 
        { 
        "x": 7, 
        "y": 3, 
        "w": 2, 
        "h": 1, 
        "id": "k" 
        }, 
        { 
        "x": 1, 
        "y": 3, 
        "w": 4, 
        "h": 1, 
        "id": "g" 
        }, 
        { 
        "x": 5, 
        "y": 3, 
        "w": 2, 
        "h": 1, 
        "id": "h" 
        } 
       ], 
       "x": 1, 
       "y": 3 
       }, 
       { 
       "w": 8, 
       "h": 2, 
       "children": [ 
        { 
        "w": 4, 
        "h": 2, 
        "children": [ 
         { 
         "w": 4, 
         "h": 1, 
         "children": [ 
          { 
          "x": 7, 
          "y": 2, 
          "w": 2, 
          "h": 1, 
          "id": "j" 
          }, 
          { 
          "x": 5, 
          "y": 2, 
          "w": 2, 
          "h": 1, 
          "id": "c" 
          } 
         ], 
         "x": 5, 
         "y": 2 
         }, 
         { 
         "w": 4, 
         "h": 1, 
         "children": [ 
          { 
          "x": 7, 
          "y": 1, 
          "w": 2, 
          "h": 1, 
          "id": "i" 
          }, 
          { 
          "x": 5, 
          "y": 1, 
          "w": 2, 
          "h": 1, 
          "id": "b" 
          } 
         ], 
         "x": 5, 
         "y": 1 
         } 
        ], 
        "x": 5, 
        "y": 1 
        }, 
        { 
        "x": 1, 
        "y": 1, 
        "w": 4, 
        "h": 2, 
        "id": "a" 
        } 
       ], 
       "x": 1, 
       "y": 1 
       } 
      ], 
      "x": 1, 
      "y": 1 
      }, 
      { 
      "x": 0, 
      "y": 1, 
      "w": 1, 
      "h": 3, 
      "id": "f" 
      } 
     ], 
     "x": 0, 
     "y": 1 
     } 
    ], 
    "x": 0, 
    "y": 0 
    } 
] 

Answer 1

я решил пойти и попытаться выяснить это сам.

Я признаю, что вопрос был плохо сформулирован, поэтому я отредактировал его, чтобы сделать его более точным.

Чтобы уменьшить плоскую сетку для вложенной сетки, необходимые шаги:

• Цикл по всем детям.
• Проверьте соседи во всех направлениях, чтобы увидеть, находятся ли они рядом.
• Группируйте предмет и его соседей в новый предмет.
• Подсчитайте размер группы.
• Продолжайте, пока не останется только один ребенок.

Я сделал GitHub репо с моим модулем: https://github.com/jide/GridPack