Box Draw Scriptlet

Box-Draw-Scriptlet.markdown

Box Draw Scriptlet

Simply jquery code for drawing boxes on an image that store their coordinates into hidden inputs for form submit.

A Pen by Jarvis Badgley on CodePen.

License.

index.html

<div class="boxdraw">
  <img src="http://i.imgur.com/jFXMvUd.png">
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>

script.js

jQuery(function ($) {
  
  var $el = $('.boxdraw');
  var $img = $el.find('img');
  var $selected = null;
  var handlesize = 8;
  
  var x,y, bx, by;
  var mode;
  
  $el.on('mousedown', function (ev) {
    ev.preventDefault();
    ev.stopPropagation();
    
    var offset = $el.offset();
 	 x = ev.pageX - offset.left;
  	y = ev.pageY - offset.top;

    if ($(ev.target).is('.boxdraw-box')) {
      // mouse landed on a current box
      $selected = $(ev.target);
      
      var w = $selected.outerWidth();
      var h = $selected.outerHeight();

      var l = parseFloat($selected.css('left'));
      var t = parseFloat($selected.css('top'));

      if (x - l <= w && x - l >= w - handlesize && y - t <= h && y - t >= h - handlesize) {
        mode = 'resize';
        bx = $selected.width();
        by = $selected.height();
      } else {
        mode = 'move';
        bx = l
        by = t
      }
    } else if ($(ev.target).is('.boxdraw-close')) {
      $selected = $(ev.target).closest('.boxdraw-box');
      mode = 'delete';
    } else {
      // mouse landed on backdrop or image
      $selected = $('<div class="boxdraw-box"><a class="boxdraw-close">&times</a><input type="hidden" name="box[]"></div>');
            
      $selected.css({left: x, top: y, width: handlesize * 2, height: handlesize * 2}).appendTo($el);
      bx = 0;
      by = 0;

      mode = 'resize';
    }
    
  });
  
  $el.on('mousemove', function (ev) {
    if (!$selected) return;
    
    var offset = $el.offset();
 	 var cx = ev.pageX - offset.left;
  	var cy = ev.pageY - offset.top;
    
    var dx = cx - x;
    var dy = cy - y;
    
    switch (mode) {
      case 'resize':
        $selected.css({
          width:  Math.max(handlesize * 2, bx + dx),
          height: Math.max(handlesize * 2, by + dy)
        });
        updateInput($selected);
        break;
      case 'move':
        $selected.css({
          left:  bx + dx,
          top: by + dy
        });
        updateInput($selected);
        break;
    }
  });
  
  $el.on('mouseup', function (ev) {
    if (!$selected) return;
    
    var offset = $el.offset();
 	 var cx = ev.pageX - offset.left;
  	var cy = ev.pageY - offset.top;
    
    var dx = cx - x;
    var dy = cy - y;
      
    switch (mode) {
      case 'resize':
        $selected.css({
          width:  Math.max(handlesize * 2, bx + dx),
          height: Math.max(handlesize * 2, by + dy)
        });
        updateInput($selected);
        break;
      case 'move':
        $selected.css({
          left:  bx + dx,
          top: by + dy
        });
        updateInput($selected);
        break;
      case 'delete':
        if ($(ev.target).is('.boxdraw-close')) {
          $selected.remove();
        }
        break;
    }
    
    $selected = null;
  });
  
  function updateInput($box) {
    var w = $box.outerWidth();
    var h = $box.outerHeight();

    var l = parseFloat($box.css('left'));
    var t = parseFloat($box.css('top'));
    
    $box.find('input').val(JSON.stringify({x: l, y: t, w: w, h:h}));
  }
  
});

style.css

.boxdraw {
  display: inline-block;
  position: relative;
}

.boxdraw .boxdraw-box {
  position: absolute;
  border: 1px solid blue;
  
  box-sizing: border-box;
  
  background-color: white;
  
  box-shadow: inset  1px  1px 0px white, 
              inset -1px -1px 0px white;
  
  
}

.boxdraw .boxdraw-box:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 8px;
  width: 8px;
  content: ' ';
  background-color: blue;
}

.boxdraw .boxdraw-close {
  font-size: 16px;
  line-height: 16px;
  position: relative;
  top: -4px;
  left: 1px;
  cursor: pointer;
}