All files / roosterjs-content-model-plugins/lib/imageEdit/Rotator updateRotateHandle.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
15x
 
 
 
 
15x
15x
15x
15x
15x
15x
15x
15x
 
15x
5x
5x
10x
 
 
 
 
 
 
10x
 
 
 
 
 
 
10x
 
 
 
 
 
 
 
15x
15x
15x
15x
15x
 
 
 
 
import { DEG_PER_RAD, RESIZE_HANDLE_MARGIN, ROTATE_GAP, ROTATE_SIZE } from '../constants/constants';
import type { Rect } from 'roosterjs-content-model-types';
 
/**
 * @internal
 * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
 * Fix it by reduce the distance from image to rotate handle
 */
export function updateRotateHandle(
    editorRect: Rect,
    angleRad: number,
    wrapper: HTMLElement,
    rotateCenter: HTMLElement,
    rotateHandle: HTMLElement,
    isSmallImage: boolean
) {
    Iif (isSmallImage) {
        rotateCenter.style.display = 'none';
        rotateHandle.style.display = 'none';
        return;
    } else {
        rotateCenter.style.display = '';
        rotateHandle.style.display = '';
        const rotateCenterRect = rotateCenter.getBoundingClientRect();
        const wrapperRect = wrapper.getBoundingClientRect();
        const ROTATOR_HEIGHT = ROTATE_SIZE + ROTATE_GAP + RESIZE_HANDLE_MARGIN;
        Eif (rotateCenterRect && wrapperRect) {
            let adjustedDistance = Number.MAX_SAFE_INTEGER;
            const angle = angleRad * DEG_PER_RAD;
 
            if (angle < 45 && angle > -45 && wrapperRect.top - editorRect.top < ROTATOR_HEIGHT) {
                const top = rotateCenterRect.top - editorRect.top;
                adjustedDistance = top;
            } else Iif (
                angle <= -80 &&
                angle >= -100 &&
                wrapperRect.left - editorRect.left < ROTATOR_HEIGHT
            ) {
                const left = rotateCenterRect.left - editorRect.left;
                adjustedDistance = left;
            } else Iif (
                angle >= 80 &&
                angle <= 100 &&
                editorRect.right - wrapperRect.right < ROTATOR_HEIGHT
            ) {
                const right = rotateCenterRect.right - editorRect.right;
                adjustedDistance = Math.min(editorRect.right - wrapperRect.right, right);
            } else Iif (
                (angle <= -160 || angle >= 160) &&
                editorRect.bottom - wrapperRect.bottom < ROTATOR_HEIGHT
            ) {
                const bottom = rotateCenterRect.bottom - editorRect.bottom;
                adjustedDistance = Math.min(editorRect.bottom - wrapperRect.bottom, bottom);
            }
 
            const rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);
            const rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
            rotateCenter.style.top = -rotateGap - RESIZE_HANDLE_MARGIN + 'px';
            rotateCenter.style.height = rotateGap + 'px';
            rotateHandle.style.top = -rotateTop + 'px';
        }
    }
}