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 };
|