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
122
123
|
const isContentEditable = (element: Element): boolean => {
const value = element.getAttribute('contenteditable');
if (value === null) {
return false;
}
return value.toLowerCase() === 'true' || value.toLowerCase() === '';
};
interface Rect {
left: number;
top: number;
right: number;
bottom: number;
}
const rectangleCoordsRect = (coords: string): Rect => {
const [left, top, right, bottom] = coords.split(',').map(n => Number(n));
return { left, top, right, bottom };
};
const circleCoordsRect = (coords: string): Rect => {
const [x, y, r] = coords.split(',').map(n => Number(n));
return {
left: x - r,
top: y - r,
right: x + r,
bottom: y + r,
};
};
const polygonCoordsRect = (coords: string): Rect => {
const params = coords.split(',');
let minx = Number(params[0]),
maxx = Number(params[0]),
miny = Number(params[1]),
maxy = Number(params[1]);
const len = Math.floor(params.length / 2);
for (let i = 2; i < len; i += 2) {
const x = Number(params[i]),
y = Number(params[i + 1]);
if (x < minx) {
minx = x;
}
if (x > maxx) {
maxx = x;
}
if (y < miny) {
miny = y;
}
if (y > maxy) {
maxy = y;
}
}
return { left: minx, top: miny, right: maxx, bottom: maxy };
};
const viewportRect = (e: Element): Rect => {
if (e.tagName !== 'AREA') {
return e.getBoundingClientRect();
}
const mapElement = e.parentNode as HTMLMapElement;
const imgElement = document.querySelector(
`img[usemap="#${mapElement.name}"]`
) as HTMLImageElement;
const {
left: mapLeft,
top: mapTop
} = imgElement.getBoundingClientRect();
const coords = e.getAttribute('coords');
if (!coords) {
return e.getBoundingClientRect();
}
let rect = { left: 0, top: 0, right: 0, bottom: 0 };
switch (e.getAttribute('shape')) {
case 'rect':
case 'rectangle':
rect = rectangleCoordsRect(coords);
break;
case 'circ':
case 'circle':
rect = circleCoordsRect(coords);
break;
case 'poly':
case 'polygon':
rect = polygonCoordsRect(coords);
break;
}
return {
left: rect.left + mapLeft,
top: rect.top + mapTop,
right: rect.right + mapLeft,
bottom: rect.bottom + mapTop,
};
};
const isVisible = (element: Element): boolean => {
const rect = element.getBoundingClientRect();
const style = window.getComputedStyle(element);
if (style.overflow !== 'visible' && (rect.width === 0 || rect.height === 0)) {
return false;
}
if (rect.right < 0 && rect.bottom < 0) {
return false;
}
if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
return false;
}
if (element instanceof HTMLInputElement &&
element.type.toLowerCase() === 'hidden') {
return false;
}
const { display, visibility } = window.getComputedStyle(element);
if (display === 'none' || visibility === 'hidden') {
return false;
}
return true;
};
export { isContentEditable, viewportRect, isVisible };
|
