リアクティブにしつつ意図しない反復実行を抑える

thiramisu · Oct 27, 2023 · ab6d626 · ab6d626
1 parent 3a9da7e
commit ab6d626
Showing 1 changed file with 28 additions and 23 deletions.
diff --git a/src/components/AccentPhrase.vue b/src/components/AccentPhrase.vue
@@ -28,7 +28,7 @@
         :style="{ 'grid-column': `${moraIndex * 2 + 1} / span 1` }"
       >
         <audio-parameter
-          :ref="addAudioParameterRefs"
+          ref="pitchAudioParameters"
           :mora-index="moraIndex"
           :value="mora.pitch"
           :ui-locked="uiLocked"
@@ -55,7 +55,7 @@
         <!-- consonant length -->
         <audio-parameter
           v-if="mora.consonant && mora.consonantLength != undefined"
-          :ref="addAudioParameterRefs"
+          ref="consonantAudioParameters"
           :mora-index="moraIndex"
           :value="mora.consonantLength"
           :ui-locked="uiLocked"
@@ -71,7 +71,7 @@
         />
         <!-- vowel length -->
         <audio-parameter
-          :ref="addAudioParameterRefs"
+          ref="vowelAudioParameters"
           :mora-index="moraIndex"
           :value="mora.vowelLength"
           :ui-locked="uiLocked"
@@ -220,7 +220,7 @@
 </template>
 
 <script setup lang="ts">
-import { VNodeRef, computed, onBeforeUpdate, ref } from "vue";
+import { computed, ref } from "vue";
 import AudioAccent from "./AudioAccent.vue";
 import AudioParameter from "./AudioParameter.vue";
 import ContextMenu from "./ContextMenu.vue";
@@ -347,29 +347,34 @@ const isEditableMora = (vowel: string, moraIndex: number) => {
   return false;
 };
 
-const audioParameterRefs: InstanceType<typeof AudioParameter>[] = [];
-const addAudioParameterRefs: VNodeRef = (audioParameterRef) => {
-  if (audioParameterRef && !(audioParameterRef instanceof Element)) {
-    const typedaudioParameterRef = audioParameterRef as InstanceType<
-      typeof AudioParameter
-    >;
-    audioParameterRefs.push(typedaudioParameterRef);
-  }
+const pitchAudioParameters = ref<InstanceType<typeof AudioParameter>[]>();
+const consonantAudioParameters = ref<InstanceType<typeof AudioParameter>[]>();
+const vowelAudioParameters = ref<InstanceType<typeof AudioParameter>[]>();
+
+const isAnyParameterOperating = (
+  audioParameters: InstanceType<typeof AudioParameter>[] | undefined
+) => {
+  return (
+    audioParameters?.some?.((audioParameter) => audioParameter.isOperating) ??
+    false
+  );
 };
-onBeforeUpdate(() => {
-  audioParameterRefs.length = 0;
-});
 
 // pan中は当たり判定が消えるため
-const isOperatingParameterSlider = computed(() =>
-  audioParameterRefs.some?.((audioParameter) => audioParameter.isOperating)
-);
+const isOperatingParameterSlider = computed(() => {
+  return (
+    isAnyParameterOperating(pitchAudioParameters.value) ||
+    isAnyParameterOperating(consonantAudioParameters.value) ||
+    isAnyParameterOperating(vowelAudioParameters.value)
+  );
+});
 
-const shouldForciblyDisplayValueLabel = computed(
-  () =>
-    props.altKeyFlag &&
-    (hoveredTarget.value != undefined || isOperatingParameterSlider.value)
-);
+const shouldForciblyDisplayValueLabel = computed(() => {
+  return (
+    (hoveredTarget.value != undefined || isOperatingParameterSlider.value) &&
+    props.altKeyFlag
+  );
+});
 
 const getHoveredText = (mora: Mora, moraIndex: number) => {
   if (props.selectedDetail != "length") return mora.text;