JSFiddle - React, Tailwind, and code Playground

by Anuraj MS

HTML

<script src="http://www.millinfo.net/Transform/Utils.js"></script>
<script src="http://www.millinfo.net/Transform/js/TransformTool.js"></script>
<script src="http://www.millinfo.net/Transform/js/DOMTransformTool.js"></script>
<script src="http://www.millinfo.net/Transform/TransformDOMPictures.js"></script>
    <div id="dom">    
		<svg id="svg-tool" xmlns="http://www.w3.org/2000/svg"></svg>
	</div>
     <button id="AddImage">Add Image</button>
    <button id="AddText">Add Text</button>

CSS

#dom { background-color:#FFE; border:1px solid black; position:relative; overflow: hidden; width:500px; height:300px; }
		
		#dom div,  #dom svg { position:absolute;}
		#dom img {}

		#svg-tool {width:100%; height:100%; }

JavaScript

$('#AddImage').click(function(id){				
					var itemLength = $('#dom .trans').size()+1;
					$('#dom').prepend("<div id="+itemLength+" class='trans'><img  src='http://www.millinfo.net/Transform/images/dunny.png' /></div>");
					var id = $("#dom .trans").first().attr("id");
					
					$('#dom .trans img').first().load(function(){    				
						var imageWidth = $(this).width();
						var imageHeight = $(this).height();
						$(this).attr("width",imageWidth);
						$(this).attr("height",imageHeight);			
						
						App.create(id);
						
  					});		
				});
				$('#AddText').click(function(id){				
					var itemLength = $('#dom .trans').size()+1;
					$('#dom').prepend("<div id="+itemLength+" contenteditable='true' class='trans'>Demo<br/>Text</div>");
					var id = $("#dom .trans").first().attr("id");
					App.create(id);
					
				});