JSFiddle - React, Tailwind, and code Playground

by theacadian

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<html>
<body>
    <div id="SelectShapeDiv" style="display:none; width:200px">
        Select Shape:<br>
        <input type="radio" name="shape11" id="polygon_shape" value="polygon" onclick="SelectShape();" />Free Hand<br>
        <input type="radio" name="shape11" id="circle_shape"  value="circle" onclick="SelectShape();" />Circle<br>
        <input type="radio" name="shape11" id="rectangle_shape"  value="rectangle" onclick="SelectShape();" />Rectangle
         <br>
             <input type = "button" value = "Enable Drawing" id="btnEnableDrawing" onclick="EnableDrawing();" />
    </div>
         
	<div id="SaveDialog" style="display:none;width:340px">
        <table>
            <tr><td> Name </td><td><input type="text" id="txtName"></td></tr>
            <tr><td> Description </td><td><input type="text" id="txtDescription"></td></tr>
            <tr><td> Price </td><td><input type="text" id="txtPrice"></td></tr>
        </table>
        <input type="button" value="Cancel" onclick="Cancel()">
        <input type="button" value="Save Details" onclick="Save()">  
        <input type="button" value="Remove Shape" onclick="Remove()">               
    </div>
	<div id="DisplayDialog" style="display:none;">
        <table>
            <tr><td> Name </td><td><input type="text" id="txtName_Display" readonly></td></tr>
            <tr><td> Description </td><td><input type="text" id="txtDescription_Display"></td></tr>
            <tr><td> Price </td><td><input type="text" id="txtPrice_Display"></td></tr>
        </table>           
	</div>
    
<script type="text/javascript">
    function log(s) {
    	//$('#log').append(s + "<br>"); 
    }    
</script>
</body>
</html>

CSS

/*-------------------------------
---------------------------------
------------NEEDED--------------- 
*/
svg { 
    position: absolute !important; 
}

html { 
    position:relative;
}
/* 
Above is From - 
1) http://stackoverflow.com/questions/3910676/body-tag-as-root-level-containing-block 
which refers to 
http://www.quirksmode.org/css/position.html


---------------------------------
---------------------------------
*/

/* 
----------NOT NEEDED------------- 
Below is just for this example -
*/
body {
     background: url('http://blog.cognac-expert.com/wp-content/uploads/2010/12/top10-cognac-2011.jpg') no-repeat;
}

JavaScript

$.fn.extend({
  lasso: function () {
     this.mousedown(function (e) {
        // left mouse down switches on "capturing mode"
        if (e.which === 1 && !$(this).is(".lassoRunning")) {
          $(this).addClass("lassoRunning");
          $(this).data("lassoPoints", []);
          $(this).trigger("lassoBegin");
        }
        
      });
      this.mouseup(function (e) {
        // left mouse up ends "capturing mode" + triggers "Done" event
        if (e.which === 1 && $(this).is(".lassoRunning")) {
          $(this).removeClass("lassoRunning");
          $(this).trigger("lassoDone", [$(this).data("lassoPoints")]);
        }
      });
      this.mousemove(function (e) {
        // mouse move captures co-ordinates + triggers "Point" event
        if ($(this).is(".lassoRunning")) {
          
          //var offsetX, offsetY;
          /////////////////////////////////////////////
          // Below if-block-code is to make e.offsetX, e.offsetY work in Firefox
          //
          
          // Below if-block-code is from - http://bugs.jquery.com/ticket/8523
          //	-- this is working partially
          /*
          if(typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") {
          	var targetOffset = $(e.target).offset();
           	offsetX = e.pageX - targetOffset.left;
           	offsetY = e.pageY - targetOffset.top;
          }
          */
          var offsetX = (e.offsetX || e.pageX - $(e.target).offset().left);
          var offsetY = (e.offsetY || e.pageY - $(e.target).offset().top);
          /*
          // Below if-code-block is from - http://www.codewrecks.com/blog/index.php/2009/01/02/firefox-and-missing-offsetx-value-from-event-object/
          // -- this is not working at all
          if (typeof e.offsetX === "undefined") {
              //e.offsetX = (e.pageX - $(element).offset().left);
              //e.offsetY = (e.pageY - $(element).offset().top);
              e.offsetX = e.layerX -...