All files / roosterjs-content-model-plugins/lib/imageEdit/utils imageEditUtils.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
1x
 
 
 
 
1x
91x
 
 
 
 
 
1x
58x
 
 
 
 
 
 
 
 
 
 
 
1x
82x
 
 
82x
82x
82x
 
 
 
 
 
1x
 
 
 
 
22x
20x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
22x
22x
1x
1x
1x
1x
 
21x
21x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
1x
1x
1x
1x
1x
1x
 
 
 
 
 
 
 
 
1x
21x
 
21x
21x
 
 
 
1x
 
20x
 
 
 
 
 
 
1x
21x
 
 
 
37x
37x
 
 
import { MIN_HEIGHT_WIDTH } from '../constants/constants';
 
/**
 * @internal
 */
export function getPx(value: number): string {
    return value + 'px';
}
 
/**
 * @internal
 */
export function isASmallImage(widthPx: number, heightPx: number): boolean {
    return widthPx && heightPx && (widthPx < MIN_HEIGHT_WIDTH || heightPx < MIN_HEIGHT_WIDTH)
        ? true
        : false;
}
 
/**
 * @internal Calculate the rotated x and y distance for mouse moving
 * @param x Original x distance
 * @param y Original y distance
 * @param angle Rotated angle, in radian
 * @returns rotated x and y distances
 */
export function rotateCoordinate(x: number, y: number, angle: number): [number, number] {
    Iif (x == 0 && y == 0) {
        return [0, 0];
    }
    const hypotenuse = Math.sqrt(x * x + y * y);
    angle = Math.atan2(y, x) - angle;
    return [hypotenuse * Math.cos(angle), hypotenuse * Math.sin(angle)];
}
 
/**
 * @internal
 */
export function setFlipped(
    element: HTMLElement | null,
    flippedHorizontally?: boolean,
    flippedVertically?: boolean
) {
    if (element) {
        element.style.transform = `scale(${flippedHorizontally ? -1 : 1}, ${
            flippedVertically ? -1 : 1
        })`;
    }
}
 
/**
 * @internal
 */
export function setWrapperSizeDimensions(
    wrapper: HTMLElement,
    image: HTMLImageElement,
    width: number,
    height: number
) {
    const hasBorder = image.style.borderStyle;
    if (hasBorder) {
        const borderWidth = image.style.borderWidth ? 2 * parseInt(image.style.borderWidth) : 2;
        wrapper.style.width = getPx(width + borderWidth);
        wrapper.style.height = getPx(height + borderWidth);
        return;
    }
    wrapper.style.width = getPx(width);
    wrapper.style.height = getPx(height);
}
 
/**
 * @internal
 */
export function setSize(
    element: HTMLElement,
    left: number | undefined,
    top: number | undefined,
    right: number | undefined,
    bottom: number | undefined,
    width: number | undefined,
    height: number | undefined
) {
    element.style.left = left !== undefined ? getPx(left) : element.style.left;
    element.style.top = top !== undefined ? getPx(top) : element.style.top;
    element.style.right = right !== undefined ? getPx(right) : element.style.right;
    element.style.bottom = bottom !== undefined ? getPx(bottom) : element.style.bottom;
    element.style.width = width !== undefined ? getPx(width) : element.style.width;
    element.style.height = height !== undefined ? getPx(height) : element.style.height;
}
 
/**
 * @internal
 * Check if the current image was resized by the user
 * @param image the current image
 * @returns if the user resized the image, returns true, otherwise, returns false
 */
export function checkIfImageWasResized(image: HTMLImageElement): boolean {
    const { style } = image;
    const isMaxWidthInitial =
        style.maxWidth === '' || style.maxWidth === 'initial' || style.maxWidth === 'auto';
    if (
        isMaxWidthInitial &&
        (isFixedNumberValue(style.height) || isFixedNumberValue(style.width))
    ) {
        return true;
    } else {
        return false;
    }
}
 
/**
 * @internal
 */
export function isRTL(image: HTMLImageElement): boolean {
    return window.getComputedStyle(image).direction === 'rtl';
}
 
function isFixedNumberValue(value: string | number) {
    const numberValue = typeof value === 'string' ? parseInt(value) : value;
    return !isNaN(numberValue);
}