根据宽度、高度和位置确定对象在网格视图中的位置

问：

我有一个 3 列的网格视图，我正在尝试找出一种方法来计算所有参数，以确定条目的位置。

我有以下数据

[
{
  id: 123,
  size: { width: 1, height: 1 },
  position: { x: 0, y: 0 },
},
{
  id: 222,
  size: { width: 2, height: 1 },
  position: { x: 1, y: 0 },
},
{
  id: 333,
  size: { width: 1, height: 2 },
  position: { x: 0, y: 1 },
}
]

Width size can vary 1 - 3

Height size can vary 1 - 2

X position can very 0 - 2

Y position can be infinite for as long as the user wants

到目前为止，如果正在添加当前条目，这就是我所拥有的信息data

export const getNewPosition = (data) => {
  if (data.length === 0) return { y: 0, x: 0 }

  let y = Math.max(...data.map(d => d.position.y))
  let x = getX(data, y)

  if (x === -1) {
    y = y + 1
    x = getX(data, y)
  }

  return { y, x }
}

export const getX = (data, y) => {
  const isFirst = data.find(d => d.position.x === 0 && d.position.y === y)
  const isSecond = data.find(d => d.position.x === 1 && d.position.y === y)
  const isLast = data.find(d => d.position.x === 2 && d.position.y === y)

  if (!isFirst) return 0
  if (!isSecond) return 1
  if (!isLast) return 2

  return -1
}

当我添加 1 x 1 的新条目时，这非常有用，但其他一切都会破坏我，我只是无法找出最有效的解决方案。

任何帮助将不胜感激。