feat: ソング：音素タイミングの表示エリアを追加 (#2472)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Romot <[email protected]> Co-authored-by: Hiroshiba <[email protected]>
VOICEVOX · Jan 23, 2025 · 8c4f742 · 8c4f742
1 parent 3c69896
commit 8c4f742
Show file tree

Hide file tree

Showing 18 changed files with 519 additions and 361 deletions.
diff --git a/src/components/Dialog/SettingDialog/SettingDialog.vue b/src/components/Dialog/SettingDialog/SettingDialog.vue
@@ -444,6 +444,15 @@
                     )
                   "
                 />
+                <ToggleCell
+                  v-if="!isProduction"
+                  title="[開発時のみ機能] ソング：パラメーターパネルの表示"
+                  description="ONの場合、ソングエディタでパラメーターパネルが表示されます。"
+                  :modelValue="experimentalSetting.showParameterPanel"
+                  @update:modelValue="
+                    changeExperimentalSetting('showParameterPanel', $event)
+                  "
+                />
               </div>
               <div class="setting-card">
                 <h5 class="headline">データ収集</h5>

diff --git a/src/components/Sing/CharacterPortrait.vue b/src/components/Sing/CharacterPortrait.vue
@@ -1,6 +1,8 @@
 <template>
-  <div v-if="showSingCharacterPortrait" class="character-portrait-wrap">
-    <img class="character-portrait" :src="portraitPath" />
+  <div v-if="showSingCharacterPortrait" class="clipping-container">
+    <div class="character-portrait-wrap">
+      <img class="character-portrait" :src="portraitPath" />
+    </div>
   </div>
 </template>
 
@@ -36,46 +38,32 @@ const portraitPath = computed(() => {
 @use "@/styles/colors" as colors;
 
 // 表示変数
-$header-margin: vars.$toolbar-height + vars.$menubar-height + 30px; // 30pxはルーラーの高さ
-$right-margin: 24px;
-$portrait-max-width: 40vw;
-$portrait-max-height: 60vh;
 $portrait-min-height: 500px;
 
+// 画像がはみ出ないようにクリップする
+.clipping-container {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  pointer-events: none;
+}
+
 // 画面右下に固定表示
-// 幅固定、高さ可変、画像のアスペクト比を保持、wrapのwidthに合わせてheightを調整
-// bottom位置はスクロールバーの上に表示
+// 幅固定、高さ可変、画像のアスペクト比を保持、heightを調整
 .character-portrait-wrap {
-  opacity: 0.55;
-  overflow: visible;
-  contain: layout;
-  pointer-events: none;
-  position: fixed;
-  display: grid;
-  place-items: end;
-  bottom: 0;
-  right: $right-margin;
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  overflow: hidden;
 }
 
+// 通常は下部基準だが、親要素が最小高さより小さい場合は上部基準とし頭を残して足から隠れさせる
 .character-portrait {
-  width: auto;
-  height: $portrait-max-height;
-  min-height: $portrait-min-height;
-  max-width: $portrait-max-width;
-  overflow: visible;
+  display: block;
+  margin-top: auto;
+  min-height: max(75%, $portrait-min-height);
+  opacity: 0.55;
   backface-visibility: hidden;
-  object-fit: cover;
-  object-position: top center;
-}
-
-// ポートレートサイズが画面サイズを超えた場合、ヘッダーを考慮してポートレートを上部基準で表示させる
-// ヘッダー高さ120px+ポートレート高さ500pxだとする
-@media (max-height: #{calc(#{$portrait-min-height} + #{$header-margin})}) {
-  .character-portrait-wrap {
-    top: $header-margin; // ヘッダーの高さより下に位置させる
-    bottom: auto;
-    height: calc(100vh - #{$header-margin});
-    place-items: start end;
-  }
+  object-fit: contain;
 }
 </style>