スナップを設定する機能を追加

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();

src/components/Sing/ToolBar.vue

@@ -74,16 +74,26 @@
     </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>
 
 <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>

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",

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;

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;