From c928941d297c5db383afcfd7df8df8a0be3d7caa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 19 Mar 2022 22:03:53 +0900
Subject: [PATCH] fix(client): fix popup menu direction calclation

---
 packages/client/src/components/ui/modal.vue | 24 ++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue
index ba29575dc4..1e4159055e 100644
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 	manualShowing: null,
 	src: null,
-	anchor: { x: 'center', y: 'bottom' },
+	anchor: () => ({ x: 'center', y: 'bottom' }),
 	preferType: 'auto',
 	zPriority: 'low',
 	noOverlap: true,
@@ -106,7 +106,7 @@ const align = () => {
 	const popover = content.value!;
 	if (popover == null) return;
 
-	const rect = props.src.getBoundingClientRect();
+	const srcRect = props.src.getBoundingClientRect();
 	
 	const width = popover.offsetWidth;
 	const height = popover.offsetHeight;
@@ -114,8 +114,8 @@ const align = () => {
 	let left;
 	let top;
 
-	const x = rect.left + (fixed.value ? 0 : window.pageXOffset);
-	const y = rect.top + (fixed.value ? 0 : window.pageYOffset);
+	const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
+	const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
 
 	if (props.anchor.x === 'center') {
 		left = x + (props.src.offsetWidth / 2) - (width / 2);
@@ -140,7 +140,7 @@ const align = () => {
 		}
 
 		const underSpace = (window.innerHeight - MARGIN) - top;
-		const upperSpace = (rect.top - MARGIN);
+		const upperSpace = (srcRect.top - MARGIN);
 
 		// 画面から縦にはみ出る場合
 		if (top + height > (window.innerHeight - MARGIN)) {
@@ -164,7 +164,7 @@ const align = () => {
 		}
 
 		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
-		const upperSpace = (rect.top - MARGIN);
+		const upperSpace = (srcRect.top - MARGIN);
 
 		// 画面から縦にはみ出る場合
 		if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
@@ -194,16 +194,16 @@ const align = () => {
 	let transformOriginX = 'center';
 	let transformOriginY = 'center';
 
-	if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
+	if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) {
 		transformOriginY = 'top';
-	} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
+	} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) {
 		transformOriginY = 'bottom';
 	}
 
-	if (left > rect.left + (fixed.value ? 0 : window.pageXOffset)) {
-		transformOriginY = 'left';
-	} else if ((left + width) <= rect.left + (fixed.value ? 0 : window.pageXOffset)) {
-		transformOriginY = 'right';
+	if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) {
+		transformOriginX = 'left';
+	} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) {
+		transformOriginX = 'right';
 	}
 
 	transformOrigin.value = `${transformOriginX} ${transformOriginY}`;