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="SaveDialog" style="display:none;">
    <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>
<div id="myDiv2" style="width:300px;height:300px; border:1px solid"></div>
<div id="myDiv" style="width:300px;height:300px; border:1px solid">
    <div id="div1" style="width:100px;height:100px; border:1px solid;background-color:red">
    &nbsp;
    </div>
    <div id="div2" style="width:100px;height:100px; border:1px solid;background-color:red">
    &nbsp;
    </div>
    &nbsp;
</div>
<div id="log"></div><input type="button" value="Clear Log" onclick="ClearLog()"/>

<script type="text/javascript">
   function log(s) {$('#log').append(s + "<br>"); }
   function ClearLog() {$('#log').empty();}
</script>
    <div></div>

CSS

svg { position: absolute !important }

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 point = [e.offsetX, e.offsetY];
          var point = [e.pageX, e.pageY];
          $(this).data("lassoPoints").push(point);
          $(this).trigger("new_lassoPoint_detected", [point]);
        }
      });
      return this;
      
  }
});

Tool_Enabled = true;
tmp_array = [];  // will hold 'element' objects created as user is drawing something
main_array = []; // will hold all the FULL 'element' objects created using Raphael

shape_selected = 'polygon';
//shape_selected = 'circle';

$(document).ready(function() {
    //paper = Raphael("#myDiv", 0,0);
    $('html > body').attr("id","body_id");
    paper = Raphael("body_id");
    var PrevPoint = [-1,-1];
    
   
    $('body').lasso()
    .on("lassoBegin", function(e, lassoPoints) {
        if (!Tool_Enabled) return;
        
       switch(shape_selected) {
           case 'polygon':
           		log("Lasso Begins.. Here are the points");
       			PrevPoint[0] = -1; 
       			PrevPoint[1] = -1;
               	break;
           case 'circle' :
               break;
           case 'rectangle' :
               break;
           default:
               break;
              
       }  		
    })
   ...