Estoy tratando de replicar un conjunto de pantallas de cuadrícula de arranque, para poder incrustar objetos en la posición exacta. Cada pantalla tiene un diseño personalizado, pero tenemos los datos para cada uno de los objetos en la pantalla, como la posición x, y, altura (valor en %), ancho (valor en %), fila, col, colspan y rowspan. Tenemos una matriz de objetos para cada pantalla con los datos. Cada objeto se identifica por el id único.

A continuación se muestra un ejemplo de pantalla y datos de matriz

 [{ bounds: {y: 0, x: 0, width: 100, height: 5.555555555555555} col: 0 colspan: 36 id: "kUpXjV" row: 0 rowspan: 1 }, { bounds: {y: 38.88888888888889, x: 50, width: 25, height: 61.111111111111114} col: 18 colspan: 9 id: "CfRCPp" row: 7 rowspan: 11 }, { bounds: {y: 38.88888888888889, x: 25, width: 25, height: 61.111111111111114} col: 9 colspan: 9 id: "XEUKJK" row: 7 rowspan: 11 },{ bounds: {y: 38.88888888888889, x: 0, width: 25, height: 61.111111111111114} col: 0 colspan: 9 id: "hgjft" row: 7 rowspan: 11 }, { bounds: {y: 22.22222222222222, x: 75, width: 25, height: 77.77777777777779} col: 27 colspan: 9 id: "mpaLGbj" row: 4 rowspan: 14 }, { bounds: {y: 5.555555555555555, x: 0, width: 25, height: 33.33333333333333} col: 0 colspan: 9 id: "LmXFRrD" row: 1 rowspan: 6 }, { bounds: {y: 5.555555555555555, x: 25, width: 25, height: 33.33333333333333} col: 9 colspan: 9 id: "emFBcBy" row: 1 rowspan: 6 }, { bounds: {y: 5.555555555555555, x: 75, width: 25, height: 16.666666666666664} col: 27 colspan: 9 id: "edjZmNm" row: 1 rowspan: 3 }, { bounds: {y: 5.555555555555555, x: 50, width: 25, height: 33.33333333333333} col: 18 colspan: 9 id: "bJvhbjb" row: 1 rowspan: 6 }

Un ejemplo de la pantalla que estoy tratando de replicar parece

Traté de organizar los elementos por la posición superior izquierda en orden ascendente y luego construí la cuadrícula a partir del objeto ordenado, pero la clasificación no funciona correctamente y la posición de representación de los objetos también está confundida. ¿Habría otra manera de lograr esto?

 odata.sort(function (a, b) { //sort by x and then by y return a.bounds.x == b.bounds.x ? a.bounds.y - b.bounds.y : a.bounds.x- b.bounds.x; });