From 3a5f7e9929222e61fa6190039b86c2b821afd5c4 Mon Sep 17 00:00:00 2001
From: sabonerune <102559104+sabonerune@users.noreply.github.com>
Date: Thu, 27 Apr 2023 22:58:58 +0900
Subject: [PATCH] =?UTF-8?q?ENH:=20CharacterButton=E3=81=AE=E3=83=A1?=
 =?UTF-8?q?=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=8C=E5=B8=B8=E3=81=AB=E4=B8=8B?=
 =?UTF-8?q?=E6=96=B9=E5=90=91=E3=81=AB=E5=B1=95=E9=96=8B=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B=20(#1291?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ENH: CharacterButtonのメニューが常に下方向に展開されるようにする

* FIX: コメント追加

* FIX: コメント追記

* コメント追記
---
 src/components/CharacterButton.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 13c1eb9528..989fc64298 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -2,6 +2,7 @@
   <q-btn
     flat
     class="q-pa-none character-button"
+    ref="buttonRef"
     :disable="uiLocked"
     :class="{ opaque: loading }"
   >
@@ -23,6 +24,8 @@
       class="character-menu"
       transition-show="none"
       transition-hide="none"
+      :max-height="maxMenuHeight"
+      @before-show="updateMenuHeight"
     >
       <q-list style="min-width: max-content" class="character-item-container">
         <q-item
@@ -179,8 +182,8 @@
 </template>
 
 <script setup lang="ts">
-import { debounce } from "quasar";
-import { computed, ref } from "vue";
+import { debounce, QBtn } from "quasar";
+import { computed, Ref, ref } from "vue";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 import { useStore } from "@/store";
 import { CharacterInfo, SpeakerId, Voice } from "@/type/preload";
@@ -291,6 +294,22 @@ const reassignSubMenuOpen = debounce((idx: number) => {
   arr[idx] = true;
   subMenuOpenFlags.value = arr;
 }, 100);
+
+// 高さを制限してメニューが下方向に展開されるようにする
+const buttonRef: Ref<InstanceType<typeof QBtn> | undefined> = ref();
+const heightLimit = "65vh"; // QMenuのデフォルト値
+const maxMenuHeight = ref(heightLimit);
+const updateMenuHeight = () => {
+  if (buttonRef.value == undefined)
+    throw new Error("buttonRef.value == undefined");
+  const el = buttonRef.value.$el;
+  if (!(el instanceof Element)) throw new Error("!(el instanceof Element)");
+  const buttonRect = el.getBoundingClientRect();
+  // QMenuは展開する方向のスペースが不足している場合、自動的に展開方向を変更してしまうためmax-heightで制限する。
+  // AudioDetailよりボタンが下に来ることはないのでその最低高185pxに余裕を持たせた170pxを最小の高さにする。
+  // pxで指定するとウインドウサイズ変更に追従できないので ウインドウの高さの96% - ボタンの下端の座標 でメニューの高さを決定する。
+  maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
+};
 </script>
 
 <style scoped lang="scss">