[project-s] スナップ周りの修正とリファクタリング

src/components/Sing/ScoreSequencer.vue

@@ -14,7 +14,7 @@
       <!-- グリッド -->
       <!-- NOTE: 現状小節+オクターブごとの罫線なし -->
       <svg
-        :width="`${gridCellWidth * gridColumnNum}`"
+        :width="`${gridCellWidth * numOfGridColumns}`"
         :height="`${gridCellHeight * keyInfos.length}`"
         xmlns="http://www.w3.org/2000/svg"
         class="sequencer-grid"
@@ -184,17 +184,6 @@ export default defineComponent({
     const timeSignature = computed(() => {
       return state.score?.timeSignatures?.[0] ?? defaultTimeSignature;
     });
-    // 小節数
-    const measureNum = computed(() => {
-      // NOTE: 最低長: 仮32小節...スコア長(曲長さ)が決まっていないため、無限スクロール化する or 最後尾に足した場合は伸びるようにするなど？
-      const minMeasureNum = 32;
-      const measureNum = Math.max(
-        minMeasureNum,
-        getMeasureNum(notes.value, measureDuration.value)
-      );
-      // NOTE: いったん最後尾に足した場合は伸びるようにする
-      return measureNum + 1;
-    });
     // ズーム状態
     const zoomX = computed(() => state.sequencerZoomX);
     const zoomY = computed(() => state.sequencerZoomY);
@@ -218,14 +207,21 @@ export default defineComponent({
     const gridCellHeight = computed(() => {
       return gridCellBaseHeight * zoomY.value;
     });
-    const measureDuration = computed(() => {
-      return getMeasureDuration(timeSignature.value, tpqn.value);
-    });
-    const gridColumnNum = computed(() => {
-      const gridColumnNumPerMeasure = Math.round(
-        measureDuration.value / gridCellTicks.value
+    const numOfGridColumns = computed(() => {
+      const beats = timeSignature.value.beats;
+      const beatType = timeSignature.value.beatType;
+      const measureDuration = getMeasureDuration(beats, beatType, tpqn.value);
+      const numOfGridColumnsPerMeasure = Math.round(
+        measureDuration / gridCellTicks.value
+      );
+      // NOTE: 最低長: 仮32小節...スコア長(曲長さ)が決まっていないため、無限スクロール化する or 最後尾に足した場合は伸びるようにするなど？
+      const minNumOfMeasures = 32;
+      // NOTE: いったん最後尾に足した場合は伸びるようにする
+      const numOfMeasures = Math.max(
+        minNumOfMeasures,
+        getMeasureNum(notes.value, measureDuration) + 1
       );
-      return gridColumnNumPerMeasure * measureNum.value;
+      return numOfGridColumnsPerMeasure * numOfMeasures;
     });
     const beatsPerMeasure = computed(() => {
       return timeSignature.value.beats;
@@ -626,7 +622,7 @@ export default defineComponent({
       beatWidth,
       gridCellWidth,
       gridCellHeight,
-      gridColumnNum,
+      numOfGridColumns,
       keyInfos,
       notes,
       zoomX,

src/components/Sing/ToolBar.vue

@@ -154,7 +154,7 @@ export default defineComponent({
     const playbackPositionStr = computed(() => {
       let playTime = 0;
       if (store.state.score) {
-        playTime = store.getters.POSITION_TO_TIME(playPos.value);
+        playTime = store.getters.TICK_TO_SECOND(playPos.value);
       }
 
       const intPlayTime = Math.floor(playTime);
@@ -250,21 +250,29 @@ export default defineComponent({
 
     const snapTypeSelectOptions = computed(() => {
       const tpqn = store.state.score?.tpqn ?? 480;
-      return getSnapTypes(tpqn).map((snapType) => {
-        if (isTriplet(snapType)) {
-          return { snapType, label: `1/${(snapType / 3) * 2}（三連符）` };
-        } else {
-          return { snapType, label: `1/${snapType}` };
-        }
-      });
+      return getSnapTypes(tpqn)
+        .sort((a, b) => {
+          if (isTriplet(a) === isTriplet(b)) {
+            return a - b;
+          } else {
+            return isTriplet(a) ? 1 : -1;
+          }
+        })
+        .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]
+          selectOptions[0]
         );
       },
       set(value) {

src/helpers/singHelper.ts

@@ -1,4 +1,4 @@
-import { Note, TimeSignature } from "@/store/type";
+import { Note } from "@/store/type";
 
 const BASE_X_PER_QUARTER_NOTE = 120;
 const BASE_Y_PER_NOTE_NUMBER = 30;
@@ -8,11 +8,13 @@ export function noteNumberToFrequency(noteNumber: number) {
 }
 
 // NOTE: 戻り値の単位はtick
-export function getMeasureDuration(timeSignature: TimeSignature, tpqn: number) {
-  const beats = timeSignature.beats;
-  const beatType = timeSignature.beatType;
-  const quarterNotesPerMeasure = (4 / beatType) * beats;
-  return tpqn * quarterNotesPerMeasure;
+export function getMeasureDuration(
+  beats: number,
+  beatType: number,
+  tpqn: number
+) {
+  const wholeNoteDuration = tpqn * 4;
+  return (wholeNoteDuration / beatType) * beats;
 }
 
 // TODO: getNumOfMeasuresに変更する
@@ -30,7 +32,7 @@ export function getNoteDuration(noteType: number, tpqn: number) {
   return (tpqn * 4) / noteType;
 }
 
-export function getNoteTypes(tpqn: number) {
+export function getRepresentableNoteTypes(tpqn: number) {
   const maxNoteType = 128;
   const wholeNoteDuration = tpqn * 4;
   const noteTypes = [1];
@@ -79,7 +81,10 @@ export function baseYToNoteNumber(baseY: number, integer = true) {
 }
 
 export function getSnapTypes(tpqn: number) {
-  return getNoteTypes(tpqn).filter((value) => value <= 64);
+  const maxSnapType = 64;
+  return getRepresentableNoteTypes(tpqn).filter((value) => {
+    return value <= maxSnapType;
+  });
 }
 
 export function isValidSnapType(snapType: number, tpqn: number) {