OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Box not rotated at the right position

  • Thread starter Thread starter user19766923
  • Start date Start date
U

user19766923

Guest
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

Code:
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:

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>

enter image description here

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.
<p>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</p>
<pre><code>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();
}
</code></pre>
<p>HTML code:</p>
<pre><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>
</code></pre>

<p><a href="https://i.sstatic.net/8N1Kc8TK.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/8N1Kc8TK.png" alt="enter image description here" /></a></p>
<p>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.</p>
Continue reading...
 

Latest posts

D
Replies
0
Views
1
Damiano Miazzi
D
Top