JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<div id="container"></div>
<a id="save" href="#">Save</a>
<img id="saved">

CSS

#container {
    border: 1px solid #aaa;
    -moz-box-shadow: 3px 3px 8px #222;
    -webkit-box-shadow: 3px 3px 8px #222;
    box-shadow: 3px 3px 8px #222;
    width: 476px;
    height: 308px;
}

JavaScript

var height_mm = 55;
var width_mm = 85;
selectedGroup = new Kinetic.Shape({name:'emptyNode'});



$(function() {
	$('#save').click(function(){
        stage.toDataURL({
        callback: function(dataUrl) {       
            $('#saved').attr("src",dataUrl);
        }});
	});	
});

function update(group, activeHandle) {
    var topLeft = group.get(".topLeft")[0],
        topRight = group.get(".topRight")[0],
        bottomRight = group.get(".bottomRight")[0],
        bottomLeft = group.get(".bottomLeft")[0],
        image = group.get(".image")[0],
        activeHandleName = activeHandle.getName(),
        newWidth,
        newHeight,
        imageX,
        imageY;

    // Update the positions of handles during drag.
    // This needs to happen so the dimension calculation can use the
    // handle positions to determine the new width/height.
    switch (activeHandleName) {
        case "topLeft":
            topRight.setY(activeHandle.getY());
            bottomLeft.setX(activeHandle.getX());
            break;
        case "topRight":
            topLeft.setY(activeHandle.getY());
            bottomRight.setX(activeHandle.getX());
            break;
        case "bottomRight":
            bottomLeft.setY(activeHandle.getY());
            topRight.setX(activeHandle.getX());
            break;
        case "bottomLeft":
            bottomRight.setY(activeHandle.getY());
            topLeft.setX(activeHandle.getX());
            break;
    }

    // Calculate new dimensions. Height is simply the dy of the handles.
    // Width is increased/decreased by a factor of how much the height changed.
    newHeight = bottomLeft.getY() - topLeft.getY();
    newWidth = image.getWidth() * newHeight / image.getHeight();

    // Move the image to adjust for the new dimensions.
    // The position calculation changes depending on where it is anchored.
    // ie. When dragging on the right, it is anchored to the top left,
    //     when dragging on the left, it is anchored to the...