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/Remove" onclick="Cancel()">
        <input type="button" value="Save Details" onclick="Save()">    
                       
</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

/* THis is a good working version with the following working - 
-- Lasso Tool is getting enabled and disabled properly
-- Temporary path elements are getting removed
-- Text values for a particular element are being stored & displayed properly
Next steps:
-- adding ability to Edit an element's values
*/

$.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;
      
  }
});

Enabled = true;
tmp_array = []; 

$(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 (!Enabled) return;
        
       log("Lasso Begins.. Here are the points");
       PrevPoint[0] = -1; 
       PrevPoint[1] = -1;
          		
    })
    .bind("new_lassoPoint_detected", function (e, lassoPoint) {
        if (!Enabled) return;
        
       if (PrevPoint[0] == -1 && PrevPoint[1] == -1) {
       		PrevPoint[0] =...