From 24c2a2c85426a751ff9ae027d8c20dba780c3533 Mon Sep 17 00:00:00 2001
From: Sig <sigprogrammer@gmail.com>
Date: Sun, 15 Oct 2023 15:26:04 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=83=8A=E3=83=83=E3=83=97=E3=82=92?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=81=99=E3=82=8B=E6=A9=9F=E8=83=BD=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sing/ScoreSequencer.vue | 13 ++++++-
 src/components/Sing/ToolBar.vue        | 51 ++++++++++++++++++++++++--
 src/helpers/singHelper.ts              | 32 ++++++++++++++++
 src/store/singing.ts                   | 14 +++++++
 src/store/type.ts                      |  5 +++
 5 files changed, 109 insertions(+), 6 deletions(-)

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index cc049378e8..e240f1b612 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -144,6 +144,8 @@ import {
   baseYToNoteNumber,
   keyInfos,
   getDoremiFromNoteNumber,
+  getNoteTypes,
+  isTriplet,
 } from "@/helpers/singHelper";
 
 export default defineComponent({
@@ -253,8 +255,15 @@ export default defineComponent({
       if (noteNumber < 0) {
         return;
       }
-      // NOTE: ノートの追加は1/8をベース
-      const duration = getNoteDuration(8, tpqn.value);
+      // NOTE: ノートの長さはスナップをベース
+      const snapType = state.sequencerSnapType;
+      const noteTypes = getNoteTypes(tpqn.value).filter((value) => {
+        return value <= 8; // 最小の長さは1/8
+      });
+      const noteType =
+        noteTypes.find((value) => value === snapType) ??
+        noteTypes[noteTypes.length - 1];
+      const duration = getNoteDuration(noteType, tpqn.value);
       const lyric = getDoremiFromNoteNumber(noteNumber);
       // NOTE: 仮ID
       const id = uuidv4();
diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
index c65a010c5b..d70d571d6b 100644
--- a/src/components/Sing/ToolBar.vue
+++ b/src/components/Sing/ToolBar.vue
@@ -74,9 +74,18 @@
     </div>
     <div class="sing-setting">
       <q-slider v-model.number="volume" class="sing-volume" />
-      <select class="sing-snap">
-        <option>1/16</option>
-      </select>
+      <q-select
+        v-model="snapTypeSelectModel"
+        :options="snapTypeSelectOptions"
+        color="primary"
+        text-color="display-on-primary"
+        outlined
+        dense
+        options-dense
+        transition-show="none"
+        transition-hide="none"
+        class="sing-snap"
+      />
     </div>
   </div>
 </template>
@@ -84,6 +93,7 @@
 <script lang="ts">
 import { defineComponent, computed, watch, ref } from "vue";
 import { useStore } from "@/store";
+import { getSnapTypes, isTriplet } from "@/helpers/singHelper";
 
 export default defineComponent({
   name: "SingToolBar",
@@ -238,6 +248,32 @@ export default defineComponent({
       },
     });
 
+    const snapTypeSelectOptions = computed(() => {
+      const tpqn = store.state.score?.resolution ?? 480;
+      return getSnapTypes(tpqn).map((snapType) => {
+        if (isTriplet(snapType)) {
+          return { snapType, label: `1/${(snapType / 3) * 2}（三連符）` };
+        } else {
+          return { snapType, label: `1/${snapType}` };
+        }
+      });
+    });
+    const snapTypeSelectModel = computed({
+      get() {
+        const snapType = store.state.sequencerSnapType;
+        const selectOptions = snapTypeSelectOptions.value;
+        return (
+          selectOptions.find((value) => value.snapType === snapType) ??
+          selectOptions[selectOptions.length - 1]
+        );
+      },
+      set(value) {
+        store.dispatch("SET_SNAP_TYPE", {
+          snapType: value.snapType,
+        });
+      },
+    });
+
     return {
       isShowSinger,
       toggleShowSinger,
@@ -256,6 +292,8 @@ export default defineComponent({
       stop,
       seek,
       volume,
+      snapTypeSelectOptions,
+      snapTypeSelectModel,
     };
   },
 });
@@ -336,7 +374,12 @@ export default defineComponent({
 }
 
 .sing-volume {
-  margin-right: 10px;
+  margin-right: 16px;
   width: 72px;
 }
+
+.sing-snap {
+  margin-right: 2px;
+  min-width: 160px;
+}
 </style>
diff --git a/src/helpers/singHelper.ts b/src/helpers/singHelper.ts
index d3f32a872a..fb7dc7228c 100644
--- a/src/helpers/singHelper.ts
+++ b/src/helpers/singHelper.ts
@@ -15,6 +15,7 @@ export function getMeasureDuration(timeSignature: TimeSignature, tpqn: number) {
   return tpqn * quarterNotesPerMeasure;
 }
 
+// TODO: getNumOfMeasuresに変更する
 export function getMeasureNum(notes: Note[], measureDuration: number) {
   if (notes.length === 0) {
     return 0;
@@ -29,6 +30,29 @@ export function getNoteDuration(noteType: number, tpqn: number) {
   return (tpqn * 4) / noteType;
 }
 
+export function getNoteTypes(tpqn: number) {
+  const maxNoteType = 128;
+  const wholeNoteDuration = tpqn * 4;
+  const noteTypes = [1];
+  for (let noteType = 2; noteType <= maxNoteType; noteType *= 2) {
+    if (wholeNoteDuration % noteType !== 0) {
+      break;
+    }
+    noteTypes.push(noteType);
+  }
+  for (let noteType = 3; noteType <= maxNoteType; noteType *= 2) {
+    if (wholeNoteDuration % noteType !== 0) {
+      break;
+    }
+    noteTypes.push(noteType);
+  }
+  return noteTypes;
+}
+
+export function isTriplet(noteType: number) {
+  return noteType % 3 === 0;
+}
+
 export function getKeyBaseHeight() {
   return BASE_Y_PER_NOTE_NUMBER;
 }
@@ -54,6 +78,14 @@ export function baseYToNoteNumber(baseY: number, integer = true) {
     : 127.5 - baseY / BASE_Y_PER_NOTE_NUMBER;
 }
 
+export function getSnapTypes(tpqn: number) {
+  return getNoteTypes(tpqn).filter((value) => value <= 64);
+}
+
+export function isValidSnapType(snapType: number, tpqn: number) {
+  return getSnapTypes(tpqn).some((value) => value === snapType);
+}
+
 export function getPitchFromNoteNumber(noteNumber: number) {
   const mapPitches = [
     "C",
diff --git a/src/store/singing.ts b/src/store/singing.ts
index 612491239c..3dd1e5c2b9 100644
--- a/src/store/singing.ts
+++ b/src/store/singing.ts
@@ -30,6 +30,7 @@ import {
 import { EngineId, StyleId } from "@/type/preload";
 import {
   getDoremiFromNoteNumber,
+  isValidSnapType,
   noteNumberToFrequency,
   round,
 } from "@/helpers/singHelper";
@@ -673,6 +674,19 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
+  SET_SNAP_TYPE: {
+    mutation(state, { snapType }) {
+      state.sequencerSnapType = snapType;
+    },
+    async action({ state, commit }, { snapType }) {
+      const tpqn = state.score?.resolution ?? 480;
+      if (!isValidSnapType(snapType, tpqn)) {
+        throw new Error("The snap type is invalid.");
+      }
+      commit("SET_SNAP_TYPE", { snapType });
+    },
+  },
+
   SET_ZOOM_X: {
     mutation(state, { zoomX }: { zoomX: number }) {
       state.sequencerZoomX = zoomX;
diff --git a/src/store/type.ts b/src/store/type.ts
index 658cda2791..9028a8fd56 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -838,6 +838,11 @@ export type SingingStoreTypes = {
     action(): void;
   };
 
+  SET_SNAP_TYPE: {
+    mutation: { snapType: number };
+    action(payload: { snapType: number }): void;
+  };
+
   SET_ZOOM_X: {
     mutation: { zoomX: number };
     action(payload: { zoomX: number }): void;