Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/Examples/
Upload File :
Current File : //home/beeson/public_html/WebMathXpert/Examples/SelectRectangle.html

<!DOCTYPE html>
<html>
<head>
    <title>Rectangle Selection</title>
    <style>
        #container {
            position: relative;
            width: 600px; /* Adjust as needed */
            height: 400px; /* Adjust as needed */
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
        #selectionRectangle {
            position: absolute;
            border: 1px solid red;  
            pointer-events: none; /* Ignore this element during mouse events */
        }
    </style>
</head>
<body>

<div id="container"></div>

<script>
let container = document.getElementById('container');
let selectionRectangle = document.createElement('div');
selectionRectangle.id = 'selectionRectangle';
container.appendChild(selectionRectangle);

let startX, startY, isSelecting = false;

container.addEventListener('mousedown', function(e) {
    // Check if the click is within the specified rectangle R
    let rect = container.getBoundingClientRect();
    let withinBounds = e.clientX >= rect.left && e.clientX <= rect.right &&
                       e.clientY >= rect.top && e.clientY <= rect.bottom;
    if (!withinBounds) return;

    isSelecting = true;
    startX = e.clientX - rect.left; // Adjust mouse position relative to container
    startY = e.clientY - rect.top;
    updateSelectionRectangle(startX, startY, 0, 0);
});

container.addEventListener('mousemove', function(e) {
    if (!isSelecting) return;

    let rect = container.getBoundingClientRect();
    let currentX = e.clientX - rect.left;
    let currentY = e.clientY - rect.top;
    let width = Math.abs(currentX - startX);
    let height = Math.abs(currentY - startY);
    let newX = (currentX < startX) ? currentX : startX;
    let newY = (currentY < startY) ? currentY : startY;

    updateSelectionRectangle(newX, newY, width, height);
});

container.addEventListener('mouseup', function(e) {
    if (!isSelecting) return;
    isSelecting = false;

    // The final selected rectangle is available here
    // Use selectionRectangle's properties as needed
    console.log(selectionRectangle.style.left, selectionRectangle.style.top, selectionRectangle.style.width, selectionRectangle.style.height);
});

function updateSelectionRectangle(x, y, width, height) {
    selectionRectangle.style.left = x + 'px';
    selectionRectangle.style.top = y + 'px';
    selectionRectangle.style.width = width + 'px';
    selectionRectangle.style.height = height + 'px';
}
</script>


</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists