JSFiddle - React, Tailwind, and code Playground

by pukster

HTML

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
   margin: 0px;
           padding: 0px;
}
canvas {
   border: 5px solid #9C9898;
   left: 10px;
   top: 10px;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
<script>

function zoomInOut ( evt )
{
   var zoomAmount = evt.wheelDeltaY * 0.001;
   stage.setScale ( stage.getScale ().x + zoomAmount);
   stage.setOffset ( evt.pageX, evt.pageY );
   stage.setX ( evt.pageX );
   stage.setY ( evt.pageY );
   stage.draw();
}

function getAbsPos ( shape )
{
   var x = 0;
   var y = 0;
   
   x = shape.getX ();
   y = shape.getY ();

   while ( typeof shape.getParent () !== 'undefined' )
   {
      shape = shape.getParent ();
      x = shape.getX ();
      y = shape.getY ();
   }

   return { x: x, y : y };
}

var stage;

window.onload = function() {
   var groups = {};
   var layer;
   var rect;
   var line;
   var line2;
   var i, j, k;
   var animation;
   var minimation;
   var amplitude = 150;
   var period = 2000;
   var bigW = 200;

   stage = new Kinetic.Stage({
      container: 'container',
      width: 3 * bigW,
      height: 3 * bigW
   });

   document.addEventListener('mousewheel', zoomInOut, false );
   document.addEventListener('DOMMouseScroll', zoomInOut, false );
   
   layer = new Kinetic.Layer();

   groups [ 0 ] = new Kinetic.Group ({
      x : 50, 
      y : bigW / 2,
      draggable: true
   });

   groups [ 1 ] = new Kinetic.Group ({
      x : 300, 
      y : bigW / 2,
      draggable: true
   });

   for ( i = 0; i < 2; i++ )
   {
      rect = new Kinetic.Rect({
         width: bigW,
         height: bigW,
         fill: 'green',
         stroke: 'black',
         strokeWidth: 4
      });

      groups [ i ].add ( rect );

      for ( j = 0; j < 2; j++ )
      {
         for ( k = 0; k < 2; k++ )
         {
            rect = new Kinetic.Rect({
               x: 40 + j * 2 * 40,
               y: 40 + k * 2 * 40,
               width: 40,
              ...