JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="container"></div>

JavaScript

var ui = {
		stage: null,
		scale: 1,
		zoomFactor: 1.1,
		origin: {
			x: 0,
			y: 0
		},
		originalSize: {
			x: 0,
			y: 0
		},
		zoom: function(event) {
			event.preventDefault();
			var evt = event.originalEvent,
				mx = evt.clientX /* - canvas.offsetLeft */
				,
				my = evt.clientY /* - canvas.offsetTop */
				,
				wheel = evt.wheelDelta * 10; //n or -n
			var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));

			if( (ui.scale * zoom) < 1 )
			{
				ui.scale = 1;
			}
			else
			{
				if( ui.scale >= 1 )
				{
					var newscale = ui.scale * zoom;
					ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
					ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;
					ui.stage.setScale(newscale);
					ui.stage.setOffset(ui.origin.x, ui.origin.y);
					ui.stage.draw();
					ui.scale *= zoom;
				}
			}

			
			
			
		}
	};
	
	var totalOffsetX = 0;
	var totalOffsetY = 0;
	
	$(function() {
		var width = $(document).width() - 2,
			height = $(document).height() - 5;
		var stage = ui.stage = new Kinetic.Stage({
			container: 'container',
			width: width,
			height: height,
			draggable: true,
    		dragBoundFunc: function(pos) {
				return {
					x: ((ui.stage.getOffset().x+pos.x) < 0 ? 0 : pos.x > width ? width : pos.x),
					y: ((ui.stage.getOffset().y+pos.y) < 0 ? 0 : pos.y > height ? height : pos.y)
				};
			}
		});
		
		var layer = new Kinetic.Layer({
		});
		var rectX = stage.getWidth() / 2 - 50;
		var rectY = stage.getHeight() / 2 - 25;

		var box = new Kinetic.Circle({
			x: 100,
			y: 100,
			radius: 50,
			fill: '#00D200',
			stroke: 'black',
			strokeWidth: 2,
			draggable: true
		});
		
		var box2 = new Kinetic.Circle({
			x: 500,
			y: 500,
			radius: 50,
			fill: '#00D200',
			stroke: 'black',
			strokeWidth: 2,
		});

		// add cursor styling
		box.on('mouseover', function() {
			document.body.style.cursor = 'pointer';
		});
		box.on('mouseout', function() {
			document.body.style.cursor =...