All files / roosterjs-content-model-plugins/lib/imageEdit/utils updateHandleCursor.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1x
1x
1x
1x
 
 
129x
129x
 
 
129x
129x
129x
129x
129x
129x
 
 
 
 
 
 
 
1x
17x
129x
129x
 
 
 
const PI = Math.PI;
const DIRECTIONS = 8;
const DirectionRad = (PI * 2) / DIRECTIONS;
const DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
 
function handleRadIndexCalculator(angleRad: number): number {
    const idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
    return idx < 0 ? idx + DIRECTIONS : idx;
}
 
function rotateHandles(angleRad: number, Iy: string = '', Ix: string = ''): string {
    const radIndex = handleRadIndexCalculator(angleRad);
    const originalDirection = y + x;
    const originalIndex = DirectionOrder.indexOf(originalDirection);
    const rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;
    return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';
}
/**
 * @internal
 * Rotate the resizer and cropper handles according to the image position.
 * @param handles The resizer handles.
 * @param angleRad The angle that the image was rotated.
 */
export function updateHandleCursor(handles: HTMLElement[], angleRad: number) {
    handles.forEach(handle => {
        const { y, x } = handle.dataset;
        handle.style.cursor = `${rotateHandles(angleRad, y, x)}-resize`;
    });
}