JSFiddle - React, Tailwind, and code Playground

by Arjun Srinivasan

JavaScript

var svg, frameGroup, dragRect, dragBarTop, dragBarRight, rotateHandler,
    x = 100, y = 100,
    angle = 0,
    width = 200, height = 100,
    bar = 6,
    that = this;

svg = d3.select('body').append('svg').attr({
    width: 800,
    height: 800
});

frameGroup = svg.append('g')
.attr({
    'pointer-events': 'all',
    'class': 'dummy frameGroup'
});

dragRect = frameGroup.append('rect')
.attr('class', 'dummy dragRect')
.attr('fill', 'black')
.attr('fill-opacity', 0.3)
.attr('cursor', 'move')
.call(d3.behavior.drag().origin(function() {
    return {x: 0, y: 0}
}).on('drag', function() {
    x = x + d3.event.dx;
    y = y + d3.event.dy;
    
    positionate();
}));

dragBarTop = frameGroup.append('rect')
.attr('class', 'dummy dragBarTop')
.attr('fill', 'black')
.attr('fill-opacity', 0.6)
.attr('cursor', 'ns-resize')
.call(d3.behavior.drag().on('drag', function() {
    height = height + (y - d3.event.y);
    y = d3.event.y;
    if (height < bar) {
        return;
    }
    
    positionate();
}));

dragBarRight = frameGroup.append('rect')
.attr('class', 'dummy dragBarRight')
.attr('fill', 'black')
.attr('fill-opacity', 0.6)
.attr('cursor', 'ew-resize')
.call(d3.behavior.drag().on('drag', function() {
    width = width + d3.event.dx;
    if (width < bar) {
        return;
    }
    
    positionate();
}));

rotateHandler = frameGroup.append('circle')
.attr('class', 'dummy rotateHandler')
.attr('r', bar)
.attr('fill', 'black')
.attr('fill-opacity', 1)
.attr('stroke-width', 1)
.attr('stroke', 'white')
.call(d3.behavior.drag().on('drag', function() {
    var pointerX = d3.event.sourceEvent.x,
        pointerY = d3.event.sourceEvent.y,
        centerX = x + width / 2,
        centerY = y + height / 2;
    
    angle = Math.atan2(pointerY - centerY, pointerX - centerX) * (180 / Math.PI);
    
    positionate();
}));

positionate();

function positionate() {
    var rotate, translate;
    rotate = ' rotate(' + angle + ', ' + (width / 2) + ', ' + (height / 2) + ')';
   ...