in shift + mouse rotation mode, when my mouse rotate to 0 degree, it automatically rotates back to the previously rotated angle. This only happens when it is rotated to 0 degree while holding the shift + mouse key, after releasing or rotated to other angle everything is working fine. During normal rotation mode, there is no such issue and I tried various ways to solve this but the issue just persists

rotHandler($event: MouseEvent) {
    $event.stopPropagation();
    /**
     * First calculate center of Bbox on screen
     * Calculate the offset between mouse position to center
     * use atan to calculate the angle denoted with ++ 
     * offset the angle to get real theta starting from 
     * center top counter-clockwise. 
     * 
     *              +ve
     *               │
     *    Quadrant 4 │  Quadrant 1
     *               │
     *              │    /
     *              │   /
     *              │  /
     *            + │ /+
     *            ++│/++
     * -ve───────────┼──────────────+ve
     *            ++/│++
     *            +/ │ +
     *            /  │  
     *           /   │   
     *          /    │    
     *               │
     *    Quadrant 3 │  Quadrant 2
     *               │
     *              -ve
     */ 
    const offsetX = $event.x - this.oriX;
    // y-axis is flipped on browser
    const offsetY = this.oriY - $event.y;
    const degree = Math.abs(this.radToDeg(Math.atan(offsetY / offsetX)));

    let r = 0;
    if ( offsetX > 0 && offsetY > 0 ) {
        // quadrant 1
        r = 270 + degree;
    } else if ( offsetX > 0 && offsetY < 0 ) {
        // quadrant 2
        r = 270 - degree;
    } else if ( offsetX < 0 && offsetY < 0 ) {
        // quadrant 3
        r = 90 + degree;
    } else if ( offsetX < 0 && offsetY > 0 ) {
        // quadrant 4
        r = 90 - degree;
    } 

    if ($event.shiftKey){
        this.deltaT = Math.ceil(r/5)*5;
    } else {
        this.deltaT = r;
    }

    this.deltaT += this.orientation;
    this.deltaT %= 360;

    this.ruler.display(null, null, +this.deltaT.toFixed(1));
}
rot($event) {
    $event.stopPropagation();
    const offsetX = $event.x - this.oriX;
    // y-axis is flipped on browser
    const offsetY = this.oriY - $event.y;
    const degree = Math.abs(this.radToDeg(Math.atan(offsetY / offsetX)));

    let r = 0;
    if ( offsetX > 0 && offsetY > 0 ) {
        // quadrant 1
        r = 270 + degree;
    } else if ( offsetX > 0 && offsetY < 0 ) {
        // quadrant 2
        r = 270 - degree;
    } else if ( offsetX < 0 && offsetY < 0 ) {
        // quadrant 3
        r = 90 + degree;
    } else if ( offsetX < 0 && offsetY > 0 ) {
        // quadrant 4
        r = 90 - degree;
    } 

    if ($event.shiftKey){
        this.theta = Math.ceil(r/5)*5;
    } else {
        this.theta = r;
    }
    this.theta += this.orientation;
    this.theta %= 360;

    this.update();
}

HTML code:

    <!-- Rotation Handler -->
<svg:circle *ngIf="allowRotate" 
        style="cursor: grab"
        app-box-rotate
        [attr.r]="(10/scale)/2" 
        [x]="x + deltaX"
        [y]="y + deltaY"
        [w]="w + deltaW"
        [h]="h + deltaH"
        [theta]="deltaT || theta"
        [attr.fill]="color"
        stroke="white"
        [attr.stroke-width]="1/scale"
        (startDrag)="startRot($event)"
        (moveDrag)="rotHandler($event)"
        (endDrag)="rot($event)"
        (dblclick)="rot90()"
        [voltaDraggable]="edit"
        [voltaDraggableStop]="true">
</svg:circle>

As you can see in the picture, my mouse is pointing at 90 degree but the box has been automatically rotated back to its previously placed position.