JSFiddle - React, Tailwind, and code Playground

by mharrisn

HTML

<script src="http://www.kineticjs.com/download/kinetic-v4.0.1.js"></script>
<link rel="stylesheet" href="http://www.magicfuture.com/wp-content/themes/magicfuture/css/buttons.css">
<link rel="stylesheet" href="http://www.magicfuture.com/wp-content/themes/magicfuture/css/menu.css">
<div id="topNav">
    <a id="examplesBtn" class="navButton btn white chubby">Examples</a>
    <a id="shareBtn" class="navButton btn white chubby">Share</a>
    <a id="downloadBtn" class="navButton btn white chubby">Download</a>
    <a id="printBtn" class="navButton btn white chubby">Print</a>
    <a id="saveBtn" class="navButton btn white chubby">Save</a>
</div>
<div id="leftNav">
    <a id="addImage" class="leftNavButton goal-photo btn white chubby">Add Image</a>
    <a id="addText" class="leftNavButton btn white chubby">Add Text</a>
    <a id="addBackground" class="leftNavButton btn white chubby">Add Background</a>
    <div id="controlsContainer">
        <div id="commonEditControls">
            <a id="removeControl" class="btn pink inset medium">Remove</a>
            <div id="alphaControl" class="controlItem"></div>
            <div class="controlItem-last">Arrange Layers
                <button id="bringForwardControl" alt="Bring Forward"></button>
                <button id="sendBackwardControl" alt="Send Backward"></button>
            </div>
        </div>
    <div id="textEditControls">
        <textarea id="text-area" class="controlItem"></textarea>
        <input id="dropShadowControl" type="checkbox" class="controlItem">Apply Drop Shadow</input>
        <select id="fontFamilySelect" class="controlItem">
            <option value="Asap">Asap</option>
            <option value="LobsterTwo">Lobster Two</option>
            <option value="Museo">Museo</option>
            <option value="MyriadPro">Myriad Pro</option>
            <option value="PTSerif">PT Serif</option>
            <option value="VagRounded">VAG Rounded</option>
        </select>
        <select...

CSS

#boardContainer {
    border: 1px solid #333;
}

JavaScript

var stage;
var selectionBox;
var selectedGroup;

function getDistance(touch1, touch2){
            var x1 = touch1.clientX;
            var x2 = touch2.clientX;
            var y1 = touch1.clientY;
            var y2 = touch2.clientY;
 
            return Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
        }

function update(group, activeAnchor) {
        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 = selectedGroup.get(".image")[0];
        var ratio = image.getWidth()/image.getHeight();

        var angle = Math.atan2(activeAnchor.attrs.y - image.getHeight(), activeAnchor.attrs.x - image.getWidth()) * 180 / Math.PI;

        image.setRotation(angle);

        // update anchor positions
        switch (activeAnchor.getName()) {
          case "topLeft":
            topRight.attrs.y = activeAnchor.attrs.y;
            bottomLeft.attrs.x = activeAnchor.attrs.x;
            break;
          case "topRight":
            topLeft.attrs.y = activeAnchor.attrs.y;
            bottomRight.attrs.x = activeAnchor.attrs.x;
            break;
          case "bottomRight":
            bottomLeft.attrs.y = activeAnchor.attrs.y;
            topRight.attrs.x = activeAnchor.attrs.x;
            break;
          case "bottomLeft":
            bottomRight.attrs.y = activeAnchor.attrs.y;
            topLeft.attrs.x = activeAnchor.attrs.x;
            break;
        }

        image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
        
        var width = topRight.attrs.x - topLeft.attrs.x;
        var height = width*ratio;//bottomLeft.attrs.y - topLeft.attrs.y;
        //topLeft.attrs.x = 
        //if(width && height) {
          //image.setSize(width, height);
        //}
      }

      function updateSelectionBox(group) {
        var layer = stage.get("#selectionLayer")[0];
       ...