我有一个对象数组:
elements: [
{id: 1, type: "rectangle", x: 10, y: 10, w: 100, h: 60},
{id: 2, type: "rectangle", x: 200, y: 30, w: 100, h: 100},
{id: 3, type: "rectangle", x: 400, y: 0, w: 300, h: 200},
{id: 4, type: "rectangle", x: 10, y: 10, w: 100, h: 60},
{id: 5, type: "rectangle", x: 150, y: 30, w: 100, h: 100},
{id: 6, type: "rectangle", x: 150, y: 270, w: 300, h: 60},
]
我需要遍历每个对象,并根据它们的坐标对其进行分组。目标是将它们垂直(添加行)和水平(添加列)分组。
从那些对象中,我需要得到这个:
filteredElements: [
{id: 1, type: "row", parent_id: null, data: {}},
{id: 2, type: "row", parent_id: null, data: {}},
{id: 3, type: "column", parent_id: 1, data: {marginLeft: ?, marginTop: ?}},
{id: 4, type: "column", parent_id: 1, data: {marginLeft: ?, marginTop: ?}},
{id: 5, type: "column", parent_id: 1, data: {marginLeft: ?, marginTop: ?}},
{id: 6, type: "rectangle", parent_id: 3, data: {x: 10, y: 10, w: 100, h: 60,}},
{id: 7, type: "rectangle", parent_id: 4, data: {x: 200, y: 30, w: 100, h: 100,}},
{id: 8, type: "rectangle", parent_id: 5, data: {x: 400, y: 0, w: 300, h: 200,}},
{id: 9, type: "row", parent_id: 8, data: {}},
{id: 10, type: "column", parent_id: 9, data: {marginLeft: ?, marginTop: ?}},
{id: 11, type: "column", parent_id: 9, data: {marginLeft: ?, marginTop: ?}},
{id: 12, type: "rectangle", parent_id: 10, data: {x: 10, y: 10, w: 100, h: 60,}},
{id: 13, type: "rectangle", parent_id: 11, data: {x: 150, y: 30, w: 100, h: 100,}},
{id: 14, type: "rectangle", parent_id: 2, data: {x: 150, y: 270, w: 300, h: 60,}},
]
请注意,某些“矩形”可能在另一些内部,使它们成为孩子。
所以,我需要:
这是假装的视觉示例: visual example
我知道这更多是数学上的挑战,但我无法全神贯注。
预先感谢您的帮助。
编辑:
这是我当前用于计算列的逻辑:
elements: [{
id: 1,
type: "rectangle",
x: 10,
y: 10,
w: 100,
h: 60
},
{
id: 2,
type: "rectangle",
x: 200,
y: 30,
w: 100,
h: 100
},
{
id: 3,
type: "rectangle",
x: 400,
y: 0,
w: 300,
h: 200
},
{
id: 4,
type: "rectangle",
x: 10,
y: 10,
w: 100,
h: 60
},
{
id: 5,
type: "rectangle",
x: 150,
y: 30,
w: 100,
h: 100
},
{
id: 6,
type: "rectangle",
x: 150,
y: 270,
w: 300,
h: 60
},
]
for (var element of elements) {
if (!inserted_first) var compare = {
id: 1,
type: "column",
x0: element.x0,
x1: element.x1,
y0: element.y0,
y1: element.y1,
elements: []
};
inserted_first = true;
index++;
if (this.isBetween(element.x0, compare.x0, compare.x1)) {
(element.x1 > compare.x1) ? compare = {
type: "column",
x0: compare.x0,
x1: element.x1,
y0: element.y0,
y1: element.y1
}: compare = {
type: "column",
x0: compare.x0,
x1: compare.x1,
y0: element.y0,
y1: element.y1
};
if (index == length) this.pushCompareArray(compare, compare_index, destiny_array);
} else if (this.isOutside(element.x1, compare.x1, compare.x0)) {
(element.x0 < compare.x0) ? compare = {
type: "column",
x0: element.x0,
x1: compare.x1,
y0: element.y0,
y1: element.y1
}: compare = {
type: "column",
x0: compare.x0,
x1: compare.x1,
y0: element.y0,
y1: element.y1
};
if (index === length) this.pushCompareArray(compare, compare_index, destiny_array);
} else {
compare.id = compare_index;
compare.elements = [];
destiny_array.push(compare);
compare = {
type: "column",
x0: element.x0,
x1: element.x1,
y0: element.y0,
y1: element.y1
};
compare_index++;
if (index === length) this.pushCompareArray(compare, compare_index, destiny_array);
compare = {
type: "column",
x0: element.x0,
x1: element.x1,
y0: element.y0,
y1: element.y1
};
}
}
我觉得这可以简化...