You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.8 KiB
153 lines
3.8 KiB
2 years ago
|
import invariant from 'tiny-invariant';
|
||
|
|
||
|
var getRect = function getRect(_ref) {
|
||
|
var top = _ref.top,
|
||
|
right = _ref.right,
|
||
|
bottom = _ref.bottom,
|
||
|
left = _ref.left;
|
||
|
var width = right - left;
|
||
|
var height = bottom - top;
|
||
|
var rect = {
|
||
|
top: top,
|
||
|
right: right,
|
||
|
bottom: bottom,
|
||
|
left: left,
|
||
|
width: width,
|
||
|
height: height,
|
||
|
x: left,
|
||
|
y: top,
|
||
|
center: {
|
||
|
x: (right + left) / 2,
|
||
|
y: (bottom + top) / 2
|
||
|
}
|
||
|
};
|
||
|
return rect;
|
||
|
};
|
||
|
var expand = function expand(target, expandBy) {
|
||
|
return {
|
||
|
top: target.top - expandBy.top,
|
||
|
left: target.left - expandBy.left,
|
||
|
bottom: target.bottom + expandBy.bottom,
|
||
|
right: target.right + expandBy.right
|
||
|
};
|
||
|
};
|
||
|
var shrink = function shrink(target, shrinkBy) {
|
||
|
return {
|
||
|
top: target.top + shrinkBy.top,
|
||
|
left: target.left + shrinkBy.left,
|
||
|
bottom: target.bottom - shrinkBy.bottom,
|
||
|
right: target.right - shrinkBy.right
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var shift = function shift(target, shiftBy) {
|
||
|
return {
|
||
|
top: target.top + shiftBy.y,
|
||
|
left: target.left + shiftBy.x,
|
||
|
bottom: target.bottom + shiftBy.y,
|
||
|
right: target.right + shiftBy.x
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var noSpacing = {
|
||
|
top: 0,
|
||
|
right: 0,
|
||
|
bottom: 0,
|
||
|
left: 0
|
||
|
};
|
||
|
var createBox = function createBox(_ref2) {
|
||
|
var borderBox = _ref2.borderBox,
|
||
|
_ref2$margin = _ref2.margin,
|
||
|
margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,
|
||
|
_ref2$border = _ref2.border,
|
||
|
border = _ref2$border === void 0 ? noSpacing : _ref2$border,
|
||
|
_ref2$padding = _ref2.padding,
|
||
|
padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
|
||
|
var marginBox = getRect(expand(borderBox, margin));
|
||
|
var paddingBox = getRect(shrink(borderBox, border));
|
||
|
var contentBox = getRect(shrink(paddingBox, padding));
|
||
|
return {
|
||
|
marginBox: marginBox,
|
||
|
borderBox: getRect(borderBox),
|
||
|
paddingBox: paddingBox,
|
||
|
contentBox: contentBox,
|
||
|
margin: margin,
|
||
|
border: border,
|
||
|
padding: padding
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var parse = function parse(raw) {
|
||
|
var value = raw.slice(0, -2);
|
||
|
var suffix = raw.slice(-2);
|
||
|
|
||
|
if (suffix !== 'px') {
|
||
|
return 0;
|
||
|
}
|
||
|
|
||
|
var result = Number(value);
|
||
|
!!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
|
||
|
return result;
|
||
|
};
|
||
|
|
||
|
var getWindowScroll = function getWindowScroll() {
|
||
|
return {
|
||
|
x: window.pageXOffset,
|
||
|
y: window.pageYOffset
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var offset = function offset(original, change) {
|
||
|
var borderBox = original.borderBox,
|
||
|
border = original.border,
|
||
|
margin = original.margin,
|
||
|
padding = original.padding;
|
||
|
var shifted = shift(borderBox, change);
|
||
|
return createBox({
|
||
|
borderBox: shifted,
|
||
|
border: border,
|
||
|
margin: margin,
|
||
|
padding: padding
|
||
|
});
|
||
|
};
|
||
|
var withScroll = function withScroll(original, scroll) {
|
||
|
if (scroll === void 0) {
|
||
|
scroll = getWindowScroll();
|
||
|
}
|
||
|
|
||
|
return offset(original, scroll);
|
||
|
};
|
||
|
var calculateBox = function calculateBox(borderBox, styles) {
|
||
|
var margin = {
|
||
|
top: parse(styles.marginTop),
|
||
|
right: parse(styles.marginRight),
|
||
|
bottom: parse(styles.marginBottom),
|
||
|
left: parse(styles.marginLeft)
|
||
|
};
|
||
|
var padding = {
|
||
|
top: parse(styles.paddingTop),
|
||
|
right: parse(styles.paddingRight),
|
||
|
bottom: parse(styles.paddingBottom),
|
||
|
left: parse(styles.paddingLeft)
|
||
|
};
|
||
|
var border = {
|
||
|
top: parse(styles.borderTopWidth),
|
||
|
right: parse(styles.borderRightWidth),
|
||
|
bottom: parse(styles.borderBottomWidth),
|
||
|
left: parse(styles.borderLeftWidth)
|
||
|
};
|
||
|
return createBox({
|
||
|
borderBox: borderBox,
|
||
|
margin: margin,
|
||
|
padding: padding,
|
||
|
border: border
|
||
|
});
|
||
|
};
|
||
|
var getBox = function getBox(el) {
|
||
|
var borderBox = el.getBoundingClientRect();
|
||
|
var styles = window.getComputedStyle(el);
|
||
|
return calculateBox(borderBox, styles);
|
||
|
};
|
||
|
|
||
|
export { calculateBox, createBox, expand, getBox, getRect, offset, shrink, withScroll };
|