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

问题并不是真正的二维问题，如果将范围表示为

，事情就会变得容易得多

{
  rangeStart: 29,
  rangeEnd:48
}

您可以通过计算转换为这种表示形式

lineIndex * COLUMN_NUMBER + columnIndex.

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

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