2023-06-13 12:46:37 +03:00
|
|
|
import mem from 'mem';
|
|
|
|
|
|
|
|
const root = document.documentElement;
|
2023-06-14 06:15:40 +03:00
|
|
|
const style = getComputedStyle(root);
|
2023-06-13 12:46:37 +03:00
|
|
|
const defaultBoundingBoxPadding = 8;
|
2023-06-15 13:03:37 +03:00
|
|
|
function _safeBoundingBoxPadding(paddings = []) {
|
|
|
|
// paddings = [top, right, bottom, left]
|
2023-06-13 12:46:37 +03:00
|
|
|
// Get safe area inset variables from root
|
|
|
|
const safeAreaInsetTop = style.getPropertyValue('--sai-top');
|
|
|
|
const safeAreaInsetRight = style.getPropertyValue('--sai-right');
|
|
|
|
const safeAreaInsetBottom = style.getPropertyValue('--sai-bottom');
|
|
|
|
const safeAreaInsetLeft = style.getPropertyValue('--sai-left');
|
|
|
|
const str = [
|
|
|
|
safeAreaInsetTop,
|
|
|
|
safeAreaInsetRight,
|
|
|
|
safeAreaInsetBottom,
|
|
|
|
safeAreaInsetLeft,
|
|
|
|
]
|
2023-06-15 13:03:37 +03:00
|
|
|
.map(
|
|
|
|
(v, i) =>
|
|
|
|
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
|
|
|
|
)
|
2023-06-13 12:46:37 +03:00
|
|
|
.join(' ');
|
|
|
|
// console.log(str);
|
|
|
|
return str;
|
|
|
|
}
|
|
|
|
const safeBoundingBoxPadding = mem(_safeBoundingBoxPadding, {
|
|
|
|
maxAge: 10000, // 10 seconds
|
|
|
|
});
|
|
|
|
|
|
|
|
export default safeBoundingBoxPadding;
|