JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/ElbertF/Raphael.FreeTransform/master/raphael.free_transform.js"></script>

JavaScript

var
        paper = Raphael(0, 0, 500, 500),
        red   = paper.rect(200, 200, 100, 100).attr('fill', '#f00'),
        blue  = paper.rect(260, 260, 100, 100).attr('fill', '#00f')
        ;

register(red);
register(blue);

function register(el) {
    el.data('dragged', false);

    el.click(function() {
            // Toggle handles on click if no drag occurred
            if ( !this.data('dragged') ) {
                    if ( this.freeTransform.handles.center === null ) {
                            this.toFront();

                            this.freeTransform.showHandles();
                    } else {
                            this.freeTransform.hideHandles();
                    }
            }
    });
    
    paper.freeTransform(el, {}, function(ft, events) {
            if ( events.indexOf('drag start') !== -1 ) {
                    el.data('dragged', false);
            }
    
            if ( events.indexOf('drag') !== -1 ) {
                    el.data('dragged', true);
            }
    }).hideHandles();
}