根据对象的（x0，x1）和（y0，y1）坐标| Java脚本

Question

我有一个对象数组：

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,}},
]

请注意，某些“矩形”可能在另一些内部，使它们成为孩子。

所以，我需要：

• 检查一列有多少行（从根开始）
• 检查一行中有多少列
• 根据对象的层次结构定义parent_id
• 定义新对象的类型（行还是列？）
• 根据父母和兄弟姐妹向列添加左右边距

这是假装的视觉示例： 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
    };
  }
}

我觉得这可以简化...