calculateBoxSize.js 4.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
  2. import { ResizeObserverSize } from '../ResizeObserverSize';
  3. import { DOMRectReadOnly } from '../DOMRectReadOnly';
  4. import { isSVG, isHidden } from '../utils/element';
  5. import { freeze } from '../utils/freeze';
  6. import { global } from '../utils/global';
  7. var cache = new WeakMap();
  8. var scrollRegexp = /auto|scroll/;
  9. var verticalRegexp = /^tb|vertical/;
  10. var IE = (/msie|trident/i).test(global.navigator && global.navigator.userAgent);
  11. var parseDimension = function (pixel) { return parseFloat(pixel || '0'); };
  12. var size = function (inlineSize, blockSize, switchSizes) {
  13. if (inlineSize === void 0) { inlineSize = 0; }
  14. if (blockSize === void 0) { blockSize = 0; }
  15. if (switchSizes === void 0) { switchSizes = false; }
  16. return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
  17. };
  18. var zeroBoxes = freeze({
  19. devicePixelContentBoxSize: size(),
  20. borderBoxSize: size(),
  21. contentBoxSize: size(),
  22. contentRect: new DOMRectReadOnly(0, 0, 0, 0)
  23. });
  24. var calculateBoxSizes = function (target, forceRecalculation) {
  25. if (forceRecalculation === void 0) { forceRecalculation = false; }
  26. if (cache.has(target) && !forceRecalculation) {
  27. return cache.get(target);
  28. }
  29. if (isHidden(target)) {
  30. cache.set(target, zeroBoxes);
  31. return zeroBoxes;
  32. }
  33. var cs = getComputedStyle(target);
  34. var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
  35. var removePadding = !IE && cs.boxSizing === 'border-box';
  36. var switchSizes = verticalRegexp.test(cs.writingMode || '');
  37. var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || '');
  38. var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || '');
  39. var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
  40. var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
  41. var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
  42. var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
  43. var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
  44. var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
  45. var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
  46. var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
  47. var horizontalPadding = paddingLeft + paddingRight;
  48. var verticalPadding = paddingTop + paddingBottom;
  49. var horizontalBorderArea = borderLeft + borderRight;
  50. var verticalBorderArea = borderTop + borderBottom;
  51. var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
  52. var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
  53. var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
  54. var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
  55. var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
  56. var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
  57. var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
  58. var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
  59. var boxes = freeze({
  60. devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
  61. borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
  62. contentBoxSize: size(contentWidth, contentHeight, switchSizes),
  63. contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
  64. });
  65. cache.set(target, boxes);
  66. return boxes;
  67. };
  68. var calculateBoxSize = function (target, observedBox, forceRecalculation) {
  69. var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
  70. switch (observedBox) {
  71. case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
  72. return devicePixelContentBoxSize;
  73. case ResizeObserverBoxOptions.BORDER_BOX:
  74. return borderBoxSize;
  75. default:
  76. return contentBoxSize;
  77. }
  78. };
  79. export { calculateBoxSize, calculateBoxSizes };