JSFiddle - React, Tailwind, and code Playground

by Dariusz F

HTML

<div class="canvas">
    <div style="top: 50px; left: 50px; width: 700px; height: 500px"class="element"></div>
    <div class="group">
        <div style="top: 100px; left: 100px; width: 100px; height: 50px"class="element"></div>
        <div style="top: 130px; left: 130px; width: 100px; height: 50px"class="element"></div>
    </div>
    <div style="top: 200px; left: 100px; width: 200px; height: 100px"class="element"></div>
    <div style="top: 220px; left: 120px; width: 160px; height: 60px"class="element"></div>
    <div style="top: 250px; left: 200px; width: 100px; height: 100px"class="element circle"></div>
</div>

CSS

.canvas {
    width: 800px;
    height: 600px;
    border: 1px solid black;
}
.element {
    position: absolute;
    border: 1px solid black;
    background-color: lightgrey;
}
.circle {
    border-radius: 500px;
}

.mark {
  background: red;
}

JavaScript

$(document).ready(function() {
  var mainSelector      = '.canvas', 
      selectedElemClass = 'mark',
      groupClass        = 'group';  

  function toogleMark(element) {
    if( $(element).children().length > 0 ) {
      $(el).children().each(function(index, el) {
        toogleMark(el);
      });
    }
    else {
      if( $(element).hasClass(selectedElemClass) ) 
        $(element).removeClass(selectedElemClass)
      else $(element).addClass(selectedElemClass);
    }
  }

  function insideCheck(el,pos) {
    res =  (
      pos.left >= $(el).position().left &&
      pos.left <= $(el).position().left + $(el).width() &&
      pos.top >= $(el).position().top &&
      pos.top <= $(el).position().top + $(el).height()
      );
    return res;
  }

  function getElem(pos) {
    var element = null;
    $(mainSelector).children().each(function(index, el) {
      if( $(el).hasClass(groupClass) )  {
        $(el).children().each(function(index2, el2) {
          if(insideCheck(el2,pos)) {
            element = el2;
            return
          }
        });
      } 
      else {
        if(insideCheck(el,pos)) {
          element = el;
        }
      }
    });
    return element;  
  }

  $(mainSelector).click(function(e) {
      var posX = $(this).position().left,
          posY = $(this).position().top;
      var elem = getElem({ left:e.pageX - posX, top: e.pageY - posY });
      if( elem ) {
        if( $(elem).parent().hasClass(groupClass) ) { 
          $(elem).parent().children().each(function(index, el) {
            toogleMark(el);
          });  
        }
        else toogleMark(elem);
      }
  });
});