Currently, I am developing a feature on a canvas that covers the entire webpage's width and length. In this canvas, I have the ability to create boxes by clicking down anywhere on the canvas, dragging my mouse in any direction, and upon releasing the click, the box is created. This functionality is similar to how selection works on a desktop, with the difference being that when the mouse button is released, the selection box is drawn on the canvas.
The issue I am facing involves updating the cursor behavior when hovering over the boxes I have created. These boxes are stored in an array named panels.
function mouseOverPanels(e) {
var mouseX = e.clientX, mouseY = e.clientY;
// iterate through all the panels
for (var i = 0; i < panels.length; i++) {
// check if cursor is within the boundaries of a panel to update its appearance
if ((mouseX >= panels[i].x && mouseX <= panels[i].x + panels[i].width) && (mouseY >= panels[i].y && mouseY <= panels[i].y + panels[i].height)) {
canvas.style.cursor = "pointer";
}
// if not, set the cursor to "crosshair" (default)
else canvas.style.cursor = "crosshair";
}
}
The current implementation of this code is functional. Upon creating a panel, the cursor updates correctly when hovering over it, based on its position. However, the problem arises when multiple panels are created. The function seems to only update the cursor for the latest panel created, neglecting the previous ones. Although it detects the mouseover event on the previous panels, it fails to update the cursor within their boundaries.
Do you have any ideas or suggestions? A solution is required to be implemented solely using JavaScript without relying on external libraries.