JSFiddle - React, Tailwind, and code Playground

by charleshimmer

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<html>
    <head>
        <title>Photo Test</title>
    </head>
    <body>
        <div id="editor"></div>
        <img id="image" src="http://www.pyrblu.com/assets/launchpad_resources/demo.jpg" style="display:none;">
    </body>
</html>

CSS

svg{
    border: 1px solid red;
    background:#fff;
    border-radius: 45px;
}

JavaScript

var Editor = {},
ctFactor = 7;
            
// create Rapheal canvas
Editor.paper = Raphael('editor', 582, 514.8);
    
// wait for image to load
$("#image").load(function(){
    
    Editor.image = Editor.paper.image("http://www.pyrblu.com/assets/launchpad_resources/demo.jpg", 25, 25, 282, 465.2);

    Editor.image.drag(Editor.dragging, Editor.dragStart, Editor.dragEnd);
    Editor.image.ready = true;
    Editor.image.mousemove(function (e) {
        // only do this if the user isn't currently moving / resizing image
        if( ! this.ready){
            return;
        }
        var side = Editor.sideDection(e, this);
        // if the user's mouse is along the edge we want resize
        if(side){
            Editor.image.state = 'resizable';
        }
        // else it's towards the middle and we want to move
        else{
            Editor.image.state = 'movable';
        }
        var cursor = (side) ? side + '-resize' : 'move';
        this.attr('cursor', cursor);
    });

});

Editor.sideDection = function(event, ct){
    // check north side
    var directions = {
        n: Math.abs(event.offsetY - ct.attr('y')) <= ctFactor,
        s: Math.abs(event.offsetY - (ct.attr('height') + ct.attr('y'))) <= ctFactor,
        e: Math.abs(event.offsetX - (ct.attr('width') + ct.attr('x'))) <= ctFactor,
        w: Math.abs(event.offsetX - ct.attr('x')) <= ctFactor
    },
    side = '';

    // loop through all 4 sides and concate the ones that are true
    for(var key in directions) {
        if(directions.hasOwnProperty(key)){
            if(directions[key]){
                side = side + key;
            }    
        }
    }

    return side;
};

Editor.dragStart = function () {
    console.log('at start');
    // grab original x, y coords        
    this.ox = this.attr("x");
    this.oy = this.attr("y");

    // toggle user is doing something
    // so other actions are blocked
    this.ready = false;

    this.animate({opacity: .65}, 500,...