From 8fa5b709983330c3887030f2a886494f336595ae Mon Sep 17 00:00:00 2001 From: wmoai Date: Tue, 27 Feb 2024 15:24:47 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20popup=E3=81=AE=E5=BA=A7=E6=A8=99?= =?UTF-8?q?=E8=A8=88=E7=AE=97=E3=81=A7visualViewport=E3=82=92=E5=8A=A0?= =?UTF-8?q?=E5=91=B3=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/base/popup/popup.vue | 17 ++++++++++------- .../src/components/base/popup/provider.ts | 14 +++++++++----- .../base/popup/components/popup.tsx | 6 +++--- .../base/popup/utils/popup-position.ts | 19 +++++++++++++++++-- 4 files changed, 39 insertions(+), 17 deletions(-) diff --git a/packages/wiz-ui-next/src/components/base/popup/popup.vue b/packages/wiz-ui-next/src/components/base/popup/popup.vue index e8d0fec52..07cadec76 100644 --- a/packages/wiz-ui-next/src/components/base/popup/popup.vue +++ b/packages/wiz-ui-next/src/components/base/popup/popup.vue @@ -184,14 +184,21 @@ const existsFixedOrStickyParent = ( return existsFixedOrStickyParent(el.parentElement); }; +const isFixed = computed(() => { + return existsFixedOrStickyParent(containerRef.value || null) ? true : false; +}); + let removeScrollHandler: (() => void) | null = null; const onChangeIsOpen = (newValue: boolean) => { if (newValue) { togglePopup(); - removeScrollHandler = useScroll(updateBodyPxInfo, containerRef.value); + removeScrollHandler = useScroll( + () => updateBodyPxInfo(isFixed.value), + containerRef.value + ); nextTick(() => { updatePopupSize(); - updateBodyPxInfo(); + updateBodyPxInfo(isFixed.value); }); } else { togglePopup(); @@ -211,7 +218,7 @@ useClickOutside(containerRef, (e) => { } }); -const observer = new ResizeObserver(updateBodyPxInfo); +const observer = new ResizeObserver(() => updateBodyPxInfo(isFixed.value)); observer.observe(document.body); const popupRect = computed(() => { @@ -355,10 +362,6 @@ watch( } ); -const isFixed = computed(() => { - return existsFixedOrStickyParent(containerRef.value || null) ? true : false; -}); - const inset = computed(() => { const { scrollX, scrollY } = isFixed.value ? { scrollX: 0, scrollY: 0 } diff --git a/packages/wiz-ui-next/src/components/base/popup/provider.ts b/packages/wiz-ui-next/src/components/base/popup/provider.ts index 975f004d1..5e42f239f 100644 --- a/packages/wiz-ui-next/src/components/base/popup/provider.ts +++ b/packages/wiz-ui-next/src/components/base/popup/provider.ts @@ -22,15 +22,19 @@ export const usePopupProvider = ( }; const bodyPxInfo = reactive(initialPxInfo); - const updateBodyPxInfo = () => { + const updateBodyPxInfo = (isPopupFixed: boolean) => { if (containerRef.value) { const { top, left, right, bottom, width, height } = containerRef.value.getBoundingClientRect(); + const visualViewportOffset = { + top: isPopupFixed ? window.visualViewport?.offsetTop ?? 0 : 0, + left: isPopupFixed ? window.visualViewport?.offsetLeft ?? 0 : 0, + }; Object.assign(bodyPxInfo, { - top, - left, - right, - bottom, + top: top + visualViewportOffset.top, + left: left + visualViewportOffset.left, + right: right + visualViewportOffset.left, + bottom: bottom + visualViewportOffset.top, width, height, }); diff --git a/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx b/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx index 7b1b8e943..467f6c47e 100644 --- a/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx +++ b/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx @@ -89,14 +89,13 @@ const Popup: FC = ({ } const fontSize = window.getComputedStyle(document.body).fontSize; - const contentRect = popupRef.current.getBoundingClientRect(); setPopupPosition( getPopupPosition({ anchorRect: anchorElement.current.getBoundingClientRect(), popupSize: { - width: contentRect.width, - height: contentRect.height, + width: popupRef.current.clientWidth, + height: popupRef.current.clientHeight, }, directionKey: direction, gap: parseFloat(getSpacingCss(gap) || "0") * parseFloat(fontSize), @@ -109,6 +108,7 @@ const Popup: FC = ({ y: isPopupFixed ? 0 : window.scrollY, }, isDirectionFixed, + isPopupFixed, }) ); }, [anchorElement, direction, gap, isDirectionFixed, isPopupFixed]); diff --git a/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts b/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts index 797ec6349..5f5444039 100644 --- a/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts +++ b/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts @@ -26,12 +26,24 @@ export class Popup { screenSize: Size; scroll: Position; isDirectionFixed?: boolean; + isPopupFixed?: boolean; }) { - this.anchorRect = args.anchorRect; + const visualViewportOffset = { + top: window.visualViewport?.offsetTop ?? 0, + left: window.visualViewport?.offsetLeft ?? 0, + }; + this.anchorRect = args.isPopupFixed + ? new DOMRect( + args.anchorRect.x + visualViewportOffset.left, + args.anchorRect.y + visualViewportOffset.top, + args.anchorRect.width, + args.anchorRect.height + ) + : args.anchorRect; this.popupSize = args.popupSize; this.gap = args.gap; this.screenSize = args.screenSize; - this.scroll = args.scroll; + this.scroll = args.isPopupFixed ? { x: 0, y: 0 } : args.scroll; this.isDirectionFixed = args.isDirectionFixed ?? false; } @@ -234,6 +246,7 @@ export function getPopupPosition({ screenSize, scroll, isDirectionFixed, + isPopupFixed, }: { anchorRect: Rect; popupSize: Size; @@ -242,6 +255,7 @@ export function getPopupPosition({ screenSize: Size; scroll: Position; isDirectionFixed?: boolean; + isPopupFixed?: boolean; }): { top: number; left: number } { const popup = new Popup({ anchorRect, @@ -250,6 +264,7 @@ export function getPopupPosition({ screenSize, scroll, isDirectionFixed, + isPopupFixed, }); return popup.getPosition(directionKey); } From 70167699d7b77579da96152967dd53ad406c31f0 Mon Sep 17 00:00:00 2001 From: wmoai Date: Tue, 27 Feb 2024 15:57:29 +0900 Subject: [PATCH 2/3] test: fix test --- .../base/popup/components/popup.tsx | 2 +- .../base/popup/utils/popup-position.ts | 28 ++++++++----------- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx b/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx index 467f6c47e..ba64c1cea 100644 --- a/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx +++ b/packages/wiz-ui-react/src/components/base/popup/components/popup.tsx @@ -108,7 +108,7 @@ const Popup: FC = ({ y: isPopupFixed ? 0 : window.scrollY, }, isDirectionFixed, - isPopupFixed, + visualViewport: isPopupFixed ? window.visualViewport : null, }) ); }, [anchorElement, direction, gap, isDirectionFixed, isPopupFixed]); diff --git a/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts b/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts index 5f5444039..89001ddef 100644 --- a/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts +++ b/packages/wiz-ui-react/src/components/base/popup/utils/popup-position.ts @@ -26,24 +26,18 @@ export class Popup { screenSize: Size; scroll: Position; isDirectionFixed?: boolean; - isPopupFixed?: boolean; + visualViewport?: { offsetTop: number; offsetLeft: number } | null; }) { - const visualViewportOffset = { - top: window.visualViewport?.offsetTop ?? 0, - left: window.visualViewport?.offsetLeft ?? 0, - }; - this.anchorRect = args.isPopupFixed - ? new DOMRect( - args.anchorRect.x + visualViewportOffset.left, - args.anchorRect.y + visualViewportOffset.top, - args.anchorRect.width, - args.anchorRect.height - ) - : args.anchorRect; + this.anchorRect = new Rect( + args.anchorRect.x + (args.visualViewport?.offsetLeft ?? 0), + args.anchorRect.y + (args.visualViewport?.offsetTop ?? 0), + args.anchorRect.width, + args.anchorRect.height + ); this.popupSize = args.popupSize; this.gap = args.gap; this.screenSize = args.screenSize; - this.scroll = args.isPopupFixed ? { x: 0, y: 0 } : args.scroll; + this.scroll = args.scroll; this.isDirectionFixed = args.isDirectionFixed ?? false; } @@ -246,7 +240,7 @@ export function getPopupPosition({ screenSize, scroll, isDirectionFixed, - isPopupFixed, + visualViewport, }: { anchorRect: Rect; popupSize: Size; @@ -255,7 +249,7 @@ export function getPopupPosition({ screenSize: Size; scroll: Position; isDirectionFixed?: boolean; - isPopupFixed?: boolean; + visualViewport?: { offsetTop: number; offsetLeft: number } | null; }): { top: number; left: number } { const popup = new Popup({ anchorRect, @@ -264,7 +258,7 @@ export function getPopupPosition({ screenSize, scroll, isDirectionFixed, - isPopupFixed, + visualViewport, }); return popup.getPosition(directionKey); } From 8734d4ab17cb721958ead6b00850f0f71a50828d Mon Sep 17 00:00:00 2001 From: ichi-h <85932406+ichi-h@users.noreply.github.com> Date: Wed, 28 Feb 2024 10:27:02 +0900 Subject: [PATCH 3/3] chore(popup): changeset --- .changeset/quiet-sheep-jump.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/quiet-sheep-jump.md diff --git a/.changeset/quiet-sheep-jump.md b/.changeset/quiet-sheep-jump.md new file mode 100644 index 000000000..1627d0825 --- /dev/null +++ b/.changeset/quiet-sheep-jump.md @@ -0,0 +1,7 @@ +--- +"@wizleap-inc/wiz-ui-react": patch +"@wizleap-inc/wiz-ui-next": patch +"@wizleap-inc/wiz-ui-icons": patch +--- + +fix: popup の座標計算で visualViewport を加味するように修正