From 80ba97bb4571991255e9ce78326644ab3d4ce3e8 Mon Sep 17 00:00:00 2001
From: tunamaguro <tsu7magu6@gmail.com>
Date: Sun, 14 Apr 2024 05:20:10 +0900
Subject: [PATCH 1/4] =?UTF-8?q?perf:=20=E3=83=A1=E3=83=8B=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=AC=E3=83=B3=E3=83=80=E3=83=AA=E3=83=B3?=
 =?UTF-8?q?=E3=82=B0=E3=82=92=E4=B8=80=E5=BA=A6=E3=81=AE=E3=81=BF=E8=A1=8C?=
 =?UTF-8?q?=E3=81=86=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 95 +++++++++++++++++++-----------
 1 file changed, 62 insertions(+), 33 deletions(-)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index a59f860d5a..4361cdd79e 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -1,34 +1,36 @@
 <template>
-  <QBtn
-    ref="buttonRef"
-    flat
-    class="q-pa-none character-button"
-    :disable="uiLocked"
-    :class="{ opaque: loading }"
-    aria-haspopup="menu"
-  >
-    <!-- q-imgだとdisableのタイミングで点滅する -->
-    <div class="icon-container">
-      <img
-        v-if="selectedStyleInfo != undefined"
-        class="q-pa-none q-ma-none"
-        :src="selectedStyleInfo.iconPath"
-        :alt="selectedVoiceInfoText"
-      />
-      <QAvatar v-else-if="!emptiable" rounded size="2rem" color="primary"
-        ><span color="text-display-on-primary">?</span></QAvatar
-      >
-    </div>
-    <div v-if="loading" class="loading">
-      <QSpinner color="primary" size="1.6rem" :thickness="7" />
-    </div>
-    <QMenu
-      class="character-menu"
-      transition-show="none"
-      transition-hide="none"
-      :max-height="maxMenuHeight"
-      @before-show="updateMenuHeight"
+  <div style="position: relative">
+    <QBtn
+      ref="buttonRef"
+      flat
+      class="q-pa-none character-button"
+      :disable="uiLocked"
+      :class="{ opaque: loading }"
+      aria-haspopup="menu"
+      @click="
+        () => {
+          updateMenuHeight();
+          openMenu();
+        }
+      "
     >
+      <!-- q-imgだとdisableのタイミングで点滅する -->
+      <div class="icon-container">
+        <img
+          v-if="selectedStyleInfo != undefined"
+          class="q-pa-none q-ma-none"
+          :src="selectedStyleInfo.iconPath"
+          :alt="selectedVoiceInfoText"
+        />
+        <QAvatar v-else-if="!emptiable" rounded size="2rem" color="primary"
+          ><span color="text-display-on-primary">?</span></QAvatar
+        >
+      </div>
+      <div v-if="loading" class="loading">
+        <QSpinner color="primary" size="1.6rem" :thickness="7" />
+      </div>
+    </QBtn>
+    <div v-if="hasMenuOpen" class="character-menu">
       <QList style="min-width: max-content" class="character-item-container">
         <QItem
           v-if="selectedStyleInfo == undefined && !emptiable"
@@ -104,7 +106,6 @@
             <!-- スタイルが2つ以上あるものだけ、スタイル選択ボタンを表示する-->
             <template v-if="characterInfo.metas.styles.length >= 2">
               <QSeparator vertical />
-
               <div
                 class="flex items-center q-px-sm q-py-none cursor-pointer"
                 :class="
@@ -188,8 +189,8 @@
           </QBtnGroup>
         </QItem>
       </QList>
-    </QMenu>
-  </QBtn>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -297,7 +298,6 @@ const getDefaultStyle = (speakerUuid: SpeakerId) => {
     ) ?? characterInfo?.metas.styles[0]; // デフォルトのスタイルIDが見つからない場合stylesの先頭を選択する
 
   if (defaultStyle == undefined) throw new Error("defaultStyle == undefined");
-
   return defaultStyle;
 };
 
@@ -336,6 +336,29 @@ const updateMenuHeight = () => {
   // pxで指定するとウインドウサイズ変更に追従できないので ウインドウの高さの96% - ボタンの下端の座標 でメニューの高さを決定する。
   maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
 };
+
+const hasMenuOpen = ref(false);
+const shouldShowMenu = ref("hidden");
+const toggleMenuVisible = () => {
+  switch (shouldShowMenu.value) {
+    case "hidden": {
+      shouldShowMenu.value = "visible";
+      console.log("Menu Open!!!");
+      document.addEventListener("click", toggleMenuVisible);
+      break;
+    }
+    case "visible": {
+      shouldShowMenu.value = "hidden";
+      console.log("Menu Close!!!");
+      document.removeEventListener("click", toggleMenuVisible);
+      break;
+    }
+  }
+};
+const openMenu = () => {
+  toggleMenuVisible();
+  hasMenuOpen.value = true;
+};
 </script>
 
 <style scoped lang="scss">
@@ -383,6 +406,12 @@ const updateMenuHeight = () => {
 }
 
 .character-menu {
+  position: absolute;
+  overflow-y: scroll;
+  max-height: v-bind(maxMenuHeight);
+  visibility: v-bind(shouldShowMenu);
+  z-index: 10;
+
   .character-item-container {
     display: flex;
     flex-direction: column;

From d1098edb04cd989f835a157f0427bbd47c0f5036 Mon Sep 17 00:00:00 2001
From: tunamaguro <tsu7magu6@gmail.com>
Date: Sun, 14 Apr 2024 05:30:00 +0900
Subject: [PATCH 2/4] =?UTF-8?q?style:=20=E8=83=8C=E6=99=AF=E8=89=B2?=
 =?UTF-8?q?=E3=82=92=E8=A8=AD=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 4361cdd79e..efeb0b3a1f 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -410,6 +410,7 @@ const openMenu = () => {
   overflow-y: scroll;
   max-height: v-bind(maxMenuHeight);
   visibility: v-bind(shouldShowMenu);
+  background: colors.$background;
   z-index: 10;
 
   .character-item-container {

From 23c8d7da74b406298b98a1ea217df92b82ff7367 Mon Sep 17 00:00:00 2001
From: tunamaguro <tsu7magu6@gmail.com>
Date: Sun, 14 Apr 2024 07:06:09 +0900
Subject: [PATCH 3/4] wip

---
 src/components/CharacterButton.vue | 115 ++++++++++++++++-------------
 src/index.html                     |   1 +
 2 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index efeb0b3a1f..cd0de26cfe 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -1,35 +1,35 @@
 <template>
-  <div style="position: relative">
-    <QBtn
-      ref="buttonRef"
-      flat
-      class="q-pa-none character-button"
-      :disable="uiLocked"
-      :class="{ opaque: loading }"
-      aria-haspopup="menu"
-      @click="
-        () => {
-          updateMenuHeight();
-          openMenu();
-        }
-      "
-    >
-      <!-- q-imgだとdisableのタイミングで点滅する -->
-      <div class="icon-container">
-        <img
-          v-if="selectedStyleInfo != undefined"
-          class="q-pa-none q-ma-none"
-          :src="selectedStyleInfo.iconPath"
-          :alt="selectedVoiceInfoText"
-        />
-        <QAvatar v-else-if="!emptiable" rounded size="2rem" color="primary"
-          ><span color="text-display-on-primary">?</span></QAvatar
-        >
-      </div>
-      <div v-if="loading" class="loading">
-        <QSpinner color="primary" size="1.6rem" :thickness="7" />
-      </div>
-    </QBtn>
+  <QBtn
+    ref="buttonRef"
+    flat
+    class="q-pa-none character-button"
+    :disable="uiLocked"
+    :class="{ opaque: loading }"
+    aria-haspopup="menu"
+    @click="
+      () => {
+        updateMenuHeight();
+        openMenu();
+      }
+    "
+  >
+    <!-- q-imgだとdisableのタイミングで点滅する -->
+    <div class="icon-container">
+      <img
+        v-if="selectedStyleInfo != undefined"
+        class="q-pa-none q-ma-none"
+        :src="selectedStyleInfo.iconPath"
+        :alt="selectedVoiceInfoText"
+      />
+      <QAvatar v-else-if="!emptiable" rounded size="2rem" color="primary"
+        ><span color="text-display-on-primary">?</span></QAvatar
+      >
+    </div>
+    <div v-if="loading" class="loading">
+      <QSpinner color="primary" size="1.6rem" :thickness="7" />
+    </div>
+  </QBtn>
+  <Teleport to="#character-icon-teleport">
     <div v-if="hasMenuOpen" class="character-menu">
       <QList style="min-width: max-content" class="character-item-container">
         <QItem
@@ -190,12 +190,12 @@
         </QItem>
       </QList>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { debounce, QBtn } from "quasar";
-import { computed, Ref, ref } from "vue";
+import { computed, CSSProperties, Ref, ref } from "vue";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 import { useStore } from "@/store";
 import { CharacterInfo, SpeakerId, Voice } from "@/type/preload";
@@ -309,7 +309,6 @@ const onSelectSpeaker = (speakerUuid: SpeakerId) => {
     styleId: style.styleId,
   });
 };
-
 const subMenuOpenFlags = ref(
   [...Array(props.characterInfos.length)].map(() => false)
 );
@@ -338,26 +337,34 @@ const updateMenuHeight = () => {
 };
 
 const hasMenuOpen = ref(false);
-const shouldShowMenu = ref("hidden");
-const toggleMenuVisible = () => {
-  switch (shouldShowMenu.value) {
-    case "hidden": {
-      shouldShowMenu.value = "visible";
-      console.log("Menu Open!!!");
-      document.addEventListener("click", toggleMenuVisible);
-      break;
-    }
-    case "visible": {
-      shouldShowMenu.value = "hidden";
-      console.log("Menu Close!!!");
-      document.removeEventListener("click", toggleMenuVisible);
-      break;
-    }
-  }
+const shouldShowMenu: Ref<CSSProperties["visibility"]> = ref("hidden");
+const menuPosition = ref({ top: 0, left: 0 });
+const menuPositionTopStyle = computed(() => `${menuPosition.value.top}px`);
+const menuPositionLeftStyle = computed(() => `${menuPosition.value.left}px`);
+
+const hideMenu = () => {
+  document.removeEventListener("click", hideMenu);
+  shouldShowMenu.value = "hidden";
+};
+const showMenu = () => {
+  document.addEventListener("click", hideMenu);
+  shouldShowMenu.value = "visible";
 };
 const openMenu = () => {
-  toggleMenuVisible();
   hasMenuOpen.value = true;
+
+  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();
+  menuPosition.value = { top: buttonRect.bottom, left: buttonRect.left };
+
+  if (shouldShowMenu.value === "hidden") {
+    showMenu();
+  } else {
+    hideMenu();
+  }
 };
 </script>
 
@@ -406,11 +413,13 @@ const openMenu = () => {
 }
 
 .character-menu {
-  position: absolute;
+  position: fixed;
   overflow-y: scroll;
+  background: colors.$background;
   max-height: v-bind(maxMenuHeight);
   visibility: v-bind(shouldShowMenu);
-  background: colors.$background;
+  top: v-bind(menuPositionTopStyle);
+  left: v-bind(menuPositionLeftStyle);
   z-index: 10;
 
   .character-item-container {
diff --git a/src/index.html b/src/index.html
index 79c0fd92ec..db9f8c0c12 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,6 +13,7 @@
       <strong>JavaScriptが無効化されている環境では動作しません。</strong>
     </noscript>
     <div id="app" style="height: 100%"></div>
+    <div id="character-icon-teleport"></div>
     <script type="module">
       // https://stackoverflow.com/questions/70714690/buffer-is-not-defined-in-react-vite#:~:text=installing%20buffer%20as%20a%20dev%20dependency%20yarn%20add%20buffer%20(use%20npm%20equivalent%20if%20you%20use%20npm)
       import { Buffer } from "buffer";

From b07e0358a163e565c9d9a9d02cbdc0143728c44a Mon Sep 17 00:00:00 2001
From: tunamaguro <tsu7magu6@gmail.com>
Date: Wed, 17 Apr 2024 04:50:00 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E9=80=A3=E7=B6=9A=E3=81=A7=E6=8A=BC=E3=81=97=E3=81=9F=E9=9A=9B?=
 =?UTF-8?q?=E3=81=AB=E3=80=81=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=8C?=
 =?UTF-8?q?=E9=96=89=E3=81=98=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index cd0de26cfe..85f5c28877 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -342,14 +342,15 @@ const menuPosition = ref({ top: 0, left: 0 });
 const menuPositionTopStyle = computed(() => `${menuPosition.value.top}px`);
 const menuPositionLeftStyle = computed(() => `${menuPosition.value.left}px`);
 
-const hideMenu = () => {
-  document.removeEventListener("click", hideMenu);
+const hideMenu = debounce(() => {
+  document.removeEventListener("click", hideMenu, { capture: true });
   shouldShowMenu.value = "hidden";
-};
-const showMenu = () => {
-  document.addEventListener("click", hideMenu);
+}, 50);
+const showMenu = debounce(() => {
+  document.addEventListener("click", hideMenu, { capture: true });
   shouldShowMenu.value = "visible";
-};
+}, 50);
+
 const openMenu = () => {
   hasMenuOpen.value = true;