Какой лучший (самый быстрый) способ получить элементы DOM в заданной области c

Question

Я хочу получить все элементы DOM в области селектора (создается при нажатии и перетаскивании левой кнопкой мыши, например, фотошоп, иллюстратор, селектор фигуры). как показано ниже:

Все элементы имеют абсолютную позицию с атрибутами left, top, width, height. И селектору дан прямоугольник с left, top, bottom, right, width, height. И, пожалуйста, обратите внимание, что у нас есть много элементов (например, 10 000 элементов DOM), поэтому, если мы пропустим oop через все 10000 элементов, чтобы проверить, находится ли он в области селектора, это не очень хорошая идея.

I ' Мы испробовали 2 решения:

1. Используя intersection-observer для наблюдения за видимыми элементами на экране, нам нужно только проверить эти элементы.
2. Кэшировать все элементы с 4 объектами:
   • byTops: сохранить все элементы с порядком top по возрастанию
   • byBottoms: сохранить все элементы с порядком bottom по возрастанию
   • byLefts: сохранить все элементы с порядком left по возрастанию
   • byRights: хранить все элементы в порядке top по возрастанию

И когда мы проверяем, это может быть быстрее

И это ДЕМО для решения 1: Демонстрация для решения 1

У кого-нибудь есть лучшее решение для этой сцены? Пожалуйста, помогите мне!

Большое спасибо!

Answer 1

Если вы знаете минимальный размер каждого элемента, который они могут выбрать, вы можете потенциально использовать document.elementFromPoint, чтобы выбрать элементы.

Я имею в виду, что они нарисовали выбор, и каждая вещь, которую они могут выбрать, составляет не менее 40px x 60px. Затем вы можете сделать что-то вроде:

let {top, left, right, bottom} = rectangleCoords;
const selectedElements = new Set();
for (let x = left; x <= right; x += 40) {
    for (let y = top; y <= bottom; y+= 60) {
        const el = document.elementFromPoint(x, y).closest('.thing-you-want');
        if (el) {
            selectedElements.add(el);
        }
    }
}