javascript - 如何确定 Javascript 项目网格中选择范围之间的重叠

Question

想象一下类似项目网格的东西。用户可以在网格中选择多个项目范围。当有多个范围(选择)时，我想确定最后创建的范围是否与现有范围重叠。网格系统可以与文本区域中的字符进行比较，其中可以突出显示多个文本范围。

• 每个范围总是存在相邻的项目，紧挨着每个项目其他，或网格中下一行的第一项。 (也完全类似于在文本文档中选择文本。)
• 当用户创建范围时，它可以与现有范围重叠，甚至完全适合现有范围。

范围在内存中存储为:

{
    'rangeStartLineIndex': 2,
    'rangeStartColIndex': 9,
    'rangeEndLineIndex': 4,
    'rangeEndColIndex': 7
}

以上范围可以在图像中可视化。但注意网格的行数和列数不是恒定的。

目标是遍历现有范围，并查看刚刚创建的范围是否与现有范围重叠(或完全适合)。如果是这样，则采用现有范围并扩展它，以便创建的范围与其重叠的范围合并。所以，这是一种规范化数据。

代码中的另一个例子:

var ranges = []; // stores the range objects that are created earlier.
var createdRange = {...}; // range object just created.

for(var i = 0; i < ranges; i++) {
    var overlap = doesThisOverlap(createdRange, ranges[i]);

    if(overlap) {

        // overlaps, which means we extend the existing range.
        range[i].rangeStartLineIndex = Math.min(range[i].rangeStartLineIndex, createdRange.rangeStartLineIndex);
        range[i].rangeStartColIndex = Math.min(range[i].rangeStartColIndex, createdRange.rangeStartColIndex);
        range[i].rangeEndLineIndex = Math.max(range[i].rangeEndLineIndex, createdRange.rangeEndLineIndex);
        range[i].rangeEndColIndex = Math.max(range[i].rangeEndColIndex, createdRange.rangeEndColIndex);

    } else {
        // means the new range does not extend an existing range, so add it.
        ranges.push(createdRange);
    }
}

function doesThisOverlap(rangeA, rangeB) {
    // ???
}

当尝试实现函数 doesThisOverlap 时，我最终遇到了过多的 if block 。我很困惑，也是因为我觉得有一种算法可以解决这个问题。

我还尝试将范围起点的行和列索引相加，为其提供“分数”(并对其端点的行和列索引执行相同操作)。然后比较范围之间的起点/终点得分。

Answer 1

问题不是真正的 2D，如果将范围表示为

{
  rangeStart: 29,
  rangeEnd:48
}

可以通过计算转换成这种表示

lineIndex * COLUMN_NUMBER + columnIndex.

您基本上应该遍历所有范围并找到最小范围开始和范围结束。然后您可以使用以下方法将结果转换为列/行:

columnIndex = x % COLUMN_NUMBER;
lineIndex = parseInt(x / COLUMN_NUMBER).