Simple check if two rectangles overlap
-
Using Selectors:
// Check if two rectangles overlap using CSS selectors if (hypeDocument.doRectanglesOverlap('.rect1', '.rect2')) { console.log('Rectangles overlap!'); } else { console.log('Rectangles do not overlap.'); }
-
Using HTMLElements:
// Get elements by their unique IDs var element1 = hypeDocument.getElementById('rect1'); var element2 = hypeDocument.getElementById('rect2'); // Check if the elements overlap if (hypeDocument.doRectanglesOverlap(element1, element2)) { console.log('Rectangles overlap!'); } else { console.log('Rectangles do not overlap.'); }
-
Using the new
querySelector
method:// Use hypeDocument.querySelector to find elements within the current scene var rect1 = hypeDocument.querySelector('.rect1'); var rect2 = hypeDocument.querySelector('.rect2'); // Check if the elements overlap if (hypeDocument.doRectanglesOverlap(rect1, rect2)) { console.log('Rectangles overlap!'); } else { console.log('Rectangles do not overlap.'); }
-
Using the new
querySelectorAll
method:// Get all elements with the class 'rect' in the current scene var rects = hypeDocument.querySelectorAll('.rect'); // Loop through each rectangle for (var i = 0; i < rects.length; i++) { // Compare the current rectangle with every other rectangle for (var j = 0; j < rects.length; j++) { // Ensure we don't compare the rectangle with itself if (i !== j && hypeDocument.doRectanglesOverlap(rects[i], rects[j])) { console.log('Rectangles overlap between', rects[i], 'and', rects[j]); } } }
-
Element Visibility:
- The extension checks for overlap based on the bounding rectangles of the elements. If the elements are hidden (e.g.,
display: none
), they won't be considered for overlap checking.
- The extension checks for overlap based on the bounding rectangles of the elements. If the elements are hidden (e.g.,
-
Element Transformations:
- CSS transformations (like
scale
,rotate
, etc.) applied to elements might affect the bounding rectangle calculation, potentially leading to inaccurate overlap detection.
- CSS transformations (like