Add:ルーラークリックでスナップ位置に再生ヘッドをあわせる (#2372)

Co-authored-by: Hiroshiba <[email protected]>

src/components/Sing/SequencerRuler/Container.vue

@@ -6,6 +6,7 @@
     :sequencerZoomX
     :numMeasures
     :playheadTicks
+    :sequencerSnapType
     @update:playheadTicks="updatePlayheadTicks"
     @deselectAllNotes="deselectAllNotes"
   />
@@ -35,6 +36,7 @@ const store = useStore();
 const tpqn = computed(() => store.state.tpqn);
 const timeSignatures = computed(() => store.state.timeSignatures);
 const sequencerZoomX = computed(() => store.state.sequencerZoomX);
+const sequencerSnapType = computed(() => store.state.sequencerSnapType);
 
 const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
 

src/components/Sing/SequencerRuler/Presentation.vue

@@ -62,7 +62,12 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from "vue";
-import { getMeasureDuration, getTimeSignaturePositions } from "@/sing/domain";
+import {
+  getMeasureDuration,
+  getTimeSignaturePositions,
+  getNoteDuration,
+  snapTicksToGrid,
+} from "@/sing/domain";
 import { baseXToTick, tickToBaseX } from "@/sing/viewHelper";
 import { TimeSignature } from "@/store/type";
 
@@ -73,6 +78,7 @@ const props = defineProps<{
   tpqn: number;
   timeSignatures: TimeSignature[];
   sequencerZoomX: number;
+  sequencerSnapType: number;
 }>();
 const playheadTicks = defineModel<number>("playheadTicks", { required: true });
 const emit = defineEmits<{
@@ -134,6 +140,10 @@ const playheadX = computed(() => {
   return Math.floor(baseX * props.sequencerZoomX);
 });
 
+const snapTicks = computed(() => {
+  return getNoteDuration(props.sequencerSnapType, props.tpqn);
+});
+
 const onClick = (event: MouseEvent) => {
   emit("deselectAllNotes");
 
@@ -142,7 +152,10 @@ const onClick = (event: MouseEvent) => {
     throw new Error("sequencerRulerElement is null.");
   }
   const baseX = (props.offset + event.offsetX) / props.sequencerZoomX;
-  const ticks = baseXToTick(baseX, props.tpqn);
+  const ticks = snapTicksToGrid(
+    baseXToTick(baseX, props.tpqn),
+    snapTicks.value,
+  );
   playheadTicks.value = ticks;
 };
 

src/components/Sing/SequencerRuler/index.stories.ts

@@ -19,6 +19,7 @@ const meta: Meta<typeof Presentation> = {
     tpqn: 480,
     offset: 0,
     numMeasures: 32,
+    sequencerSnapType: 4,
     "onUpdate:playheadTicks": fn<(value: number) => void>(),
     onDeselectAllNotes: fn(),
   },

src/sing/domain.ts

@@ -591,3 +591,10 @@ export const shouldPlayTracks = (tracks: Map<TrackId, Track>): Set<TrackId> => {
       .map(([trackId]) => trackId),
   );
 };
+
+/**
+ * 指定されたティックを直近のグリッドに合わせる
+ */
+export function snapTicksToGrid(ticks: number, snapTicks: number): number {
+  return Math.round(ticks / snapTicks) * snapTicks;
+}