JSFiddle - React, Tailwind, and code Playground
HTML
<div id="canvas">
</div>
JavaScript
const canvas = document.getElementById('canvas')
d3.select(canvas).append('svg')
.attr('width', '500')
.attr('height', '500')
.append('g')
.attr('id', 'group')
.append('rect')
.attr('width', '100')
.attr('height', '100')
.attr('x', '100')
.attr('y', '100')
d3.select('#group').append('circle')
.attr('r', '10')
.attr('cx', '150')
.attr('cy', '80')
.call(d3.drag()
.on('start', startRotation)
.on('drag', rotate)
.container(function() { return this.parentNode.parentNode; })
)
let rotateHandleStartPos,
r = { angle: 0, cx: 0, cy: 0 }
function startRotation () {
const target = d3.select(d3.event.sourceEvent.target)
r.cx = getElementCenter().x
r.cy = getElementCenter().y
let updatedRotateCoordinates = r
// updates the rotate handle start posistion object with
// basic information from the model and the handles
rotateHandleStartPos = {
angle: r.angle, // the current angle
x: parseFloat(target.attr('cx')), // the current cx value of the target handle
y: parseFloat(target.attr('cy')), // the current cy value of the target handle
};
// calc the rotated top & left corner
if (rotateHandleStartPos.angle > 0) {
var correctsRotateHandleStartPos = getHandleRotatePosition(
rotateHandleStartPos
);
rotateHandleStartPos.x = correctsRotateHandleStartPos.x;
rotateHandleStartPos.y = correctsRotateHandleStartPos.y;
}
// adds the initial angle in degrees
rotateHandleStartPos.iniAngle = calcAngleDeg(
updatedRotateCoordinates,
rotateHandleStartPos
);
}
function rotate () {
dragPointRotate(rotateHandleStartPos)
}
...