JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<div id="container"></div>

CSS

#container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 300px;
    background-color: transparent;
    border: 1px solid #ccc;
}

JavaScript

function update(activeAnchor) {
    var group 		= activeAnchor.getParent();
    var topLeft 	= group.get('.topLeft')[0];
    var topRight 	= group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft 	= group.get('.bottomLeft')[0];
    var image 		= group.get('.image')[0];
    var stage		= group.getStage();
    
    var anchorX = activeAnchor.getX();
    var anchorY = activeAnchor.getY();
    
    // update anchor positions
    switch (activeAnchor.getName()) {
        case 'topLeft':
            topRight.setY(anchorY);
            bottomLeft.setX(anchorX);
            break;
        case 'topRight':
            topLeft.setY(anchorY);
            bottomRight.setX(anchorX);
            break;
        case 'bottomRight':
            bottomLeft.setY(anchorY);
            topRight.setX(anchorX); 
            break;
        case 'bottomLeft':
            bottomRight.setY(anchorY);
            topLeft.setX(anchorX); 
            break;
    }
    image.setPosition(topLeft.getPosition());
    
    var height = bottomLeft.attrs.y - topLeft.attrs.y;
    var width  = image.getWidth()*height/image.getHeight();
    
    topRight.attrs.x = topLeft.attrs.x + width
    topRight.attrs.y = topLeft.attrs.y;
    bottomRight.attrs.x = topLeft.attrs.x + width;
    bottomRight.attrs.y = topLeft.attrs.y + height;
    
    if(width && height) {
        image.setSize(width, height);
    }
}

function rotate(activeAnchor){
    var group 		= activeAnchor.getParent();
    var topLeft 	= group.get('.topLeft')[0];
    var topRight 	= group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft 	= group.get('.bottomLeft')[0];
    var image 		= group.get('.image')[0];
    var stage		= group.getStage();
    
    var pos 	= stage.getMousePosition();
    var xd  	= 150 - pos.x ;
    var yd  	= 150 - pos.y ;
    var theta   = Math.atan2(yd, xd);
    var degree  = theta / (Math.PI / 180) - 45;
    
    var height  =...