From 5b6a7820fc330bd82cffccbc647b42566d5900fa Mon Sep 17 00:00:00 2001
From: Romot <mail@romot.co>
Date: Sun, 24 Nov 2024 23:11:23 +0900
Subject: [PATCH] =?UTF-8?q?watch=E3=81=A8ref=E3=81=A8emit=E3=81=AE?=
 =?UTF-8?q?=E7=B5=84=E3=81=BF=E5=90=88=E3=82=8F=E3=81=9B=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sing/ScoreSequencer.vue       | 24 ++++++++++----------
 src/components/Sing/SequencerToolPalette.vue | 14 +++++++-----
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 84fd2128ce..27948be745 100644
--- 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
index 11f7182b90..46d5d237d5 100644
--- 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>