From 63d37c872b786abe9233d70b2eff0362582cbc3a Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Mon, 16 May 2022 21:45:22 -0400 Subject: Popup positioning improvements (#2135) * Rename elementRect to sourceRect * Add getRects function to TextSourceElement and TextSourceRange * Add jsdocs * Remove unnecessary valid parameter * Remove default parameter * Make optionsContext optional * Remove unnecessary checks * Update sourceRect to use left/right rather than x/y * Update the return type of Popup*.getFrameRect * Rename some unrelated rect vars for disambiguation * Disambiguate between Popup.Rect and Popup.ValidRect * Move sourceRect destructuring * Pass multiple source rects * Simplify * Change Rect to use right/bottom rather than width/height * Update how popup offset is applied * Simplify frame offset * Remove _applyFrameOffset * Use right/bottom rather than width/height * Simplify some positioning settings * Update parameter names for clarity * Fix typos * Refactor data type for _getPosition* functions * Support using multiple source rects * Combine _getPosition functions * Refactor * Expose after dataset value * Consistently use this's property * Add jsdoc --- ext/js/dom/popup-menu.js | 16 ++++++++-------- ext/js/dom/text-source-element.js | 4 ++++ ext/js/dom/text-source-range.js | 4 ++++ 3 files changed, 16 insertions(+), 8 deletions(-) (limited to 'ext/js/dom') diff --git a/ext/js/dom/popup-menu.js b/ext/js/dom/popup-menu.js index 66967002..7f5e3130 100644 --- a/ext/js/dom/popup-menu.js +++ b/ext/js/dom/popup-menu.js @@ -154,8 +154,8 @@ class PopupMenu extends EventDispatcher { // Position const menu = this._node; - const fullRect = this._containerNode.getBoundingClientRect(); - const sourceRect = this._sourceElement.getBoundingClientRect(); + const containerNodeRect = this._containerNode.getBoundingClientRect(); + const sourceElementRect = this._sourceElement.getBoundingClientRect(); const menuRect = menu.getBoundingClientRect(); let top = menuRect.top; let bottom = menuRect.bottom; @@ -166,19 +166,19 @@ class PopupMenu extends EventDispatcher { } let x = ( - sourceRect.left + - sourceRect.width * ((-horizontal * horizontalCover + 1) * 0.5) + + sourceElementRect.left + + sourceElementRect.width * ((-horizontal * horizontalCover + 1) * 0.5) + menuRect.width * ((-horizontal + 1) * -0.5) ); let y = ( - sourceRect.top + + sourceElementRect.top + (menuRect.top - top) + - sourceRect.height * ((-vertical * verticalCover + 1) * 0.5) + + sourceElementRect.height * ((-vertical * verticalCover + 1) * 0.5) + (bottom - top) * ((-vertical + 1) * -0.5) ); - x = Math.max(0.0, Math.min(fullRect.width - menuRect.width, x)); - y = Math.max(0.0, Math.min(fullRect.height - menuRect.height, y)); + x = Math.max(0.0, Math.min(containerNodeRect.width - menuRect.width, x)); + y = Math.max(0.0, Math.min(containerNodeRect.height - menuRect.height, y)); menu.style.left = `${x}px`; menu.style.top = `${y}px`; diff --git a/ext/js/dom/text-source-element.js b/ext/js/dom/text-source-element.js index 38b29a4c..1a842310 100644 --- a/ext/js/dom/text-source-element.js +++ b/ext/js/dom/text-source-element.js @@ -94,6 +94,10 @@ class TextSourceElement { return this._element.getBoundingClientRect(); } + getRects() { + return this.getClientRects(); + } + getWritingMode() { return 'horizontal-tb'; } diff --git a/ext/js/dom/text-source-range.js b/ext/js/dom/text-source-range.js index 6dfa2158..e0e2c5b0 100644 --- a/ext/js/dom/text-source-range.js +++ b/ext/js/dom/text-source-range.js @@ -94,6 +94,10 @@ class TextSourceRange { return this._range.getBoundingClientRect(); } + getRects() { + return this._range.getClientRects(); + } + getWritingMode() { return TextSourceRange.getElementWritingMode(TextSourceRange.getParentElement(this._range.startContainer)); } -- cgit v1.2.3