centeredRotation issue

by Andrea Bogazzi

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
  <canvas id="c" width="500" height="300" style="border: 1px solid #00ffff;"></canvas>
</body>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

CANVAS = window._canvas = new fabric.Canvas('c');

let rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 200,
    height: 100, 
    originX: 'center',
    originY: 'center',
    fill: 'blue'
});
CANVAS.add(rect);

// Rotate 90 degrees when 'Alt' is pressed
window.addEventListener("keydown", eventListenerKeydown);
function eventListenerKeydown(evt) {
    if (evt.key == "Alt") {
        // Saving pre-rotation [x,y] to use in bugFix()
    		rect._left = rect.left;
        rect._top = rect.top;
        
	      rect.rotate(rect.angle + 90);
        bugFix();
        
        CANVAS.renderAll();
        evt.preventDefault();
		}
}

// Update the current transform used in dragging the object to account for the rotation
// Determined by code in _setupCurrentTransform()
function bugFix() {
    if (CANVAS._currentTransform?.target == rect) {
        // [x,y] shift due to rotate
        let diffLeft = rect._left - rect.left;
        let diffTop = rect._top - rect.top;

        // Original [x,y] upon piece being picked up
        let origLeft = CANVAS._currentTransform.ex - CANVAS._currentTransform.offsetX;
        let origTop = CANVAS._currentTransform.ey - CANVAS._currentTransform.offsetY;

        // Recalc the original offsets accounting for the rotation difference
        CANVAS._currentTransform.offsetX = CANVAS._currentTransform.ex - (origLeft - diffLeft);
        CANVAS._currentTransform.offsetY = CANVAS._currentTransform.ey - (origTop - diffTop);

        // Update the angle
        CANVAS._currentTransform.theta = fabric.util.degreesToRadians(CANVAS._currentTransform.target.angle);
    }
}