watchとrefとemitの組み合わせにする

romot-co · Nov 24, 2024 · 5b6a782 · 5b6a782
1 parent 0dabb89
commit 5b6a782
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -166,8 +166,8 @@
       :editTarget
       :selectedNoteTool
       :selectedPitchTool
-      :setSelectedNoteTool
-      :setSelectedPitchTool
+      @update:selectedNoteTool="selectedNoteTool = $event"
+      @update:selectedPitchTool="selectedPitchTool = $event"
     />
   </div>
 </template>
@@ -459,15 +459,15 @@ interface EditModeContext {
 // 編集対象
 const editTarget = computed(() => store.state.sequencerEditTarget);
 // 選択中のノート編集ツール
-const selectedNoteTool = computed(() => store.state.selectedNoteTool);
-const setSelectedNoteTool = (value: NoteEditTool) => {
-  void store.actions.SET_SELECTED_NOTE_TOOL({ selectedNoteTool: value });
-};
+const selectedNoteTool = ref<NoteEditTool>(state.selectedNoteTool);
+watch(selectedNoteTool, (newTool) => {
+  void store.actions.SET_SELECTED_NOTE_TOOL({ selectedNoteTool: newTool });
+});
 // 選択中のピッチ編集ツール
-const selectedPitchTool = computed(() => store.state.selectedPitchTool);
-const setSelectedPitchTool = (value: PitchEditTool) => {
-  void store.actions.SET_SELECTED_PITCH_TOOL({ selectedPitchTool: value });
-};
+const selectedPitchTool = ref<PitchEditTool>(state.selectedPitchTool);
+watch(selectedPitchTool, (newTool) => {
+  void store.actions.SET_SELECTED_PITCH_TOOL({ selectedPitchTool: newTool });
+});
 
 /**
  * マウスダウン時の振る舞いを判定する
@@ -563,7 +563,7 @@ watch(
     if (selectedPitchTool.value === "DRAW") {
       // Ctrlキーが押されたときはピッチ削除ツールに変更
       if (ctrlKey.value) {
-        setSelectedPitchTool("ERASE");
+        selectedPitchTool.value = "ERASE";
         toolChangedByCtrl.value = true;
       }
     }
@@ -572,7 +572,7 @@ watch(
     if (selectedPitchTool.value === "ERASE" && toolChangedByCtrl.value) {
       // ピッチ描画ツールに戻す
       if (!ctrlKey.value) {
-        setSelectedPitchTool("DRAW");
+        selectedPitchTool.value = "DRAW";
         toolChangedByCtrl.value = false;
       }
     }

diff --git a/src/components/Sing/SequencerToolPalette.vue b/src/components/Sing/SequencerToolPalette.vue
@@ -4,7 +4,7 @@
       flat
       round
       :color="selectedNoteTool === 'SELECT_FIRST' ? 'primary' : ''"
-      @click="setSelectedNoteTool('SELECT_FIRST')"
+      @click="$emit('update:selectedNoteTool', 'SELECT_FIRST')"
     >
       <i class="material-symbols-outlined">arrow_selector_tool</i>
       <QTooltip
@@ -22,7 +22,7 @@
       flat
       round
       :color="selectedNoteTool === 'EDIT_FIRST' ? 'primary' : ''"
-      @click="setSelectedNoteTool('EDIT_FIRST')"
+      @click="$emit('update:selectedNoteTool', 'EDIT_FIRST')"
     >
       <i class="material-symbols-outlined">stylus</i>
       <QTooltip
@@ -42,7 +42,7 @@
       flat
       round
       :color="selectedPitchTool === 'DRAW' ? 'primary' : ''"
-      @click="setSelectedPitchTool('DRAW')"
+      @click="$emit('update:selectedPitchTool', 'DRAW')"
     >
       <i class="material-symbols-outlined">stylus</i>
       <QTooltip
@@ -60,7 +60,7 @@
       flat
       round
       :color="selectedPitchTool === 'ERASE' ? 'primary' : ''"
-      @click="setSelectedPitchTool('ERASE')"
+      @click="$emit('update:selectedPitchTool', 'ERASE')"
     >
       <i class="material-symbols-outlined">ink_eraser</i>
       <QTooltip
@@ -84,8 +84,10 @@ defineProps<{
   editTarget: SequencerEditTarget;
   selectedNoteTool: NoteEditTool;
   selectedPitchTool: PitchEditTool;
-  setSelectedNoteTool: (tool: NoteEditTool) => void;
-  setSelectedPitchTool: (tool: PitchEditTool) => void;
+}>();
+defineEmits<{
+  (event: "update:selectedNoteTool", value: NoteEditTool): void;
+  (event: "update:selectedPitchTool", value: PitchEditTool): void;
 }>();
 </script>