UNPKG

@core-graphics/rect

Version:
213 lines (181 loc) 6.04 kB
'use strict'; var createForOfIteratorHelper = require('./createForOfIteratorHelper-569e18e2.cjs.prod.js'); var lite_dist_coreGraphicsRectLite = require('./lite-96ccef1c.cjs.prod.js'); var fromPoints = require('./from-points-ed59078a.cjs.prod.js'); /** * Get computed style of an element */ var cache = new WeakMap(); function getStyle(el) { if (!el) return {}; var style = cache.get(el); if (!style) { var win = (el === null || el === void 0 ? void 0 : el.ownerDocument.defaultView) || window; style = win.getComputedStyle(el); cache.set(el, style); } return style; } /* ----------------------------------------------------------------------------- * Creating a Rectangle * -----------------------------------------------------------------------------*/ /** * Creates a rectangle from an HTML element */ function fromElement(el) { var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; return new lite_dist_coreGraphicsRectLite.Rect(getElementRect(el, opts)); } /** * Get the rect of an element with the option to exclude the scrollbar or borders */ function getElementRect(el) { var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var _opts$excludeScrollba = opts.excludeScrollbar, excludeScrollbar = _opts$excludeScrollba === void 0 ? false : _opts$excludeScrollba, _opts$excludeBorders = opts.excludeBorders, excludeBorders = _opts$excludeBorders === void 0 ? false : _opts$excludeBorders; var _el$getBoundingClient = el.getBoundingClientRect(), left = _el$getBoundingClient.left, top = _el$getBoundingClient.top, width = _el$getBoundingClient.width, height = _el$getBoundingClient.height; var rect = { x: left, y: top, width: width, height: height }; var style = getStyle(el); var borderLeftWidth = style.borderLeftWidth, borderTopWidth = style.borderTopWidth, borderRightWidth = style.borderRightWidth, borderBottomWidth = style.borderBottomWidth; var borderXWidth = sum(borderLeftWidth, borderRightWidth); var borderYWidth = sum(borderTopWidth, borderBottomWidth); if (excludeBorders) { rect.width -= borderXWidth; rect.height -= borderYWidth; rect.x += px(borderLeftWidth); rect.y += px(borderTopWidth); } if (excludeScrollbar) { var scrollbarWidth = el.offsetWidth - el.clientWidth - borderXWidth; var scrollbarHeight = el.offsetHeight - el.clientHeight - borderYWidth; rect.width -= scrollbarWidth; rect.height -= scrollbarHeight; } return rect; } var px = function px(v) { return parseFloat(v.replace("px", "")); }; var sum = function sum() { for (var _len = arguments.length, vals = new Array(_len), _key = 0; _key < _len; _key++) { vals[_key] = arguments[_key]; } return vals.reduce(function (sum, v) { return sum + (v ? px(v) : 0); }, 0); }; /** * Returns a new Rect that represents the union between multiple Rects */ function union() { for (var _len = arguments.length, rs = new Array(_len), _key = 0; _key < _len; _key++) { rs[_key] = arguments[_key]; } var pMin = { x: Math.min.apply(Math, fromPoints._toConsumableArray(rs.map(function (r) { return r.minX; }))), y: Math.min.apply(Math, fromPoints._toConsumableArray(rs.map(function (r) { return r.minY; }))) }; var pMax = { x: Math.max.apply(Math, fromPoints._toConsumableArray(rs.map(function (r) { return r.maxX; }))), y: Math.max.apply(Math, fromPoints._toConsumableArray(rs.map(function (r) { return r.maxY; }))) }; return fromPoints.fromPoints(pMin, pMax); } /** * Creates a Rect from a DOM range. To learn more about ranges (text selection) * @see MDN https://developer.mozilla.org/en-US/docs/Web/API/Range * @see QuirksMode https://www.quirksmode.org/dom/range_intro.html */ function fromRange(range) { var rects = []; var clientRects = Array.from(range.getClientRects()); if (clientRects.length) { var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(clientRects), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var rect = _step.value; rects.push(new lite_dist_coreGraphicsRectLite.Rect(rect)); } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } } else { var start = range.startContainer; if (start.nodeType === Node.TEXT_NODE) { start = start.parentNode; } if (start instanceof HTMLElement) { var _rect = fromElement(start); _rect.set({ x: _rect.maxX, width: 0 }); rects.push(_rect); } } return union.apply(void 0, rects); } /** * Creates a rectange from window object */ function fromWindow(win) { var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; return new lite_dist_coreGraphicsRectLite.Rect(getWindowRect(win, opts)); } /** * Get the rect of the window with the option to exclude the scrollbar */ function getWindowRect(win, opts) { var _opts$excludeScrollba = opts.excludeScrollbar, excludeScrollbar = _opts$excludeScrollba === void 0 ? false : _opts$excludeScrollba; var innerWidth = win.innerWidth, innerHeight = win.innerHeight, doc = win.document, visualViewport = win.visualViewport; var width = visualViewport.width || innerWidth; var height = visualViewport.height || innerHeight; var rect = { x: 0, y: 0, width: width, height: height }; if (excludeScrollbar) { var scrollBarWidth = innerWidth - doc.documentElement.clientWidth; var scrollBarHeight = innerHeight - doc.documentElement.clientHeight; rect.width -= scrollBarWidth; rect.height -= scrollBarHeight; } return rect; } exports.fromElement = fromElement; exports.fromRange = fromRange; exports.fromWindow = fromWindow; exports.getElementRect = getElementRect; exports.getWindowRect = getWindowRect; exports.union = union;