Sindbad~EG File Manager

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw and Select Multiple Rectangles</title>
<style>
  .canvas {
    border: 1px solid black;
    position: relative;
  }
  .rectangle {
    position: absolute;
    border: 1px solid red;
  }
  .selected {
    border-color: red;
  }
</style>
</head>
<body>

<div id="canvas" class="canvas" style="width: 800px; height: 600px;"></div>

<script>
  const canvas = document.getElementById('canvas');
  let rectangles = [];
  let selectedRectangles = new Set();
  let isDrawing = false;
  let startX, startY, newRect;
  let continueDrawing = false;
  let mouseIsDown = false

  canvas.addEventListener('mousedown', (e) => {
    if (e.target === canvas) {
      startX = e.offsetX;
      startY = e.offsetY;
      isDrawing = true;

      // Create new rectangle element
      newRect = document.createElement('div');
      newRect.classList.add('rectangle');
      newRect.style.left = `${startX}px`;
      newRect.style.top = `${startY}px`;
      canvas.appendChild(newRect);
	  mouseIsDown = true;
    }
  });
  
  canvas.addEventListener('mousemove', (e) => {
      e.stopPropagation();
      e.preventDefault();
    if (!isDrawing) return;

    const currentX = e.offsetX;
    const currentY = e.offsetY;

    const width = Math.abs(currentX - startX);
    const height = Math.abs(currentY - startY);

    newRect.style.width = `${width}px`;
    newRect.style.height = `${height}px`;
	newRect.style.pointerEvents = 'none'; // Prevent the rectangle from capturing mouse events
	

    if (currentX < startX) {
      newRect.style.left = `${currentX}px`;
    } else {
      newRect.style.left = `${startX}px`;
    }

    if (currentY < startY) {
      newRect.style.top = `${currentY}px`;
    } else {
      newRect.style.top = `${startY}px`;
    } 

   // console.log(e.offsetX, e.offsetY);
  });


  canvas.addEventListener('mouseup', (e) => {
    if (isDrawing) {
      isDrawing = false;
      rectangles.push(newRect);
	  mouseIsDown = false;
	  console.log("pushing ",newRect);
      selectedRectangles.add(newRect);
      newRect.classList.add('selected');

      if (e.shiftKey) {
        continueDrawing = true;
      } else {
        continueDrawing = false;
      }

      if (!continueDrawing) {
        endDrawingSession();
      }
    }
  });

  document.addEventListener('keyup', (e) => {
    if (e.key === 'Shift' && continueDrawing && mouseIsDown == false) {
      continueDrawing = false;
      endDrawingSession();
    }
  });

  function endDrawingSession() {
    console.log('Drawing session ended. Selected rectangles:', selectedRectangles);
  }

  // Deselect all rectangles when clicking on the canvas background (outside of any rectangle)
  canvas.addEventListener('click', (e) => {
    if (e.target === canvas) {
      selectedRectangles.forEach(rect => rect.classList.remove('selected'));
      selectedRectangles.clear();
    }
  });
</script>

</body>
</html>

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