Sindbad~EG File Manager

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #selectionBox 
  {
    position: absolute;
    outline: 1px solid blue; 
    background-color: rgba(117, 209, 243, 0.5); /* Use rgba notation with alpha = 0.5 for half transparency */
    display: none; 
  }
   #svgCanvas
  {
    cursor: crosshair;
  }
  </style>
</head>
<body>
  <div id="selectionBox"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
    const selectionBox = document.getElementById('selectionBox');
    let isMouseDown = false;
    let startX = -1, startY = -1, endX, endY;
    selectionBox.left = startX;
    selectionBox.right = startY;
    let svgCanvas = document.getElementById('svgCanvas');
    let width = 0, height = 0; 
    });


    window.addEventListener('mousedown', (e) => {
      isMouseDown = true;
      // e.preventDefault(); // Prevent default behavior
      startX = e.clientX;   // in window coordinates
      startY = e.clientY;
      const canvasRect = svgCanvas.getBoundingClientRect();
      selectionBox.style.left = startX;
      selectionBox.style.top = startY;
      selectionBox.style.width = '0';
      selectionBox.style.height = '0';
      selectionBox.style.display = 'block';
    });

    window.addEventListener('mousemove', (e) => {
      if (!isMouseDown) 
         return;

      endX = e.clientX;
      endY = e.clientY;
    

      const width = Math.abs(endX - startX);
      const height = Math.abs(endY - startY);

      selectionBox.style.width = width + 'px';
      selectionBox.style.height = height + 'px';
      selectionBox.style.left = (endX > startX ? startX : endX) + 'px';
      selectionBox.style.top = (endY > startY ? startY : endY) + 'px';
     
      
      /*  endX = e.clientX;
  endY = e.clientY;

  const canvasRect = svgCanvas.getBoundingClientRect();
  endX = Math.max(canvasRect.left, Math.min(endX, canvasRect.right));
  endY = Math.max(canvasRect.top, Math.min(endY, canvasRect.bottom));

  const newWidth = Math.abs(endX - startX);
  const newHeight = Math.abs(endY - startY);

  selectionBox.style.width = newWidth + 'px';
  selectionBox.style.height = newHeight + 'px';
  selectionBox.style.left = (endX > startX ? startX : endX) + 'px';
  selectionBox.style.top = (endY > startY ? startY : endY) + 'px';

  // Update width and height for the next mousemove event
  width = newWidth;
  height = newHeight;   */

    });

    window.addEventListener('mouseup', () => {
      isMouseDown = false;
      selectionBox.style.display = 'none';

      // The coordinates of the selected rectangle
      if (startX !== -1 && startY !== -1) {
        console.log('StartX:', startX, 'StartY:', startY);
        console.log('EndX:', endX, 'EndY:', endY);
      }

      // Reset start coordinates
      startX = -1;
      startY = -1;
    });
  </script>
</body>
</html>

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