#2295 ルーラークリックでスナップ位置に再生ヘッドをあわせる

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;
 };
 
@@ -193,7 +206,7 @@ onUnmounted(() => {
   background: var(--scheme-color-inverse-surface);
   pointer-events: none;
   will-change: transform;
-  z-index: vars.$z-index-sing-playhead;
+  z-index: 10000;
 }
 
 .sequencer-ruler-measure-number {

src/sing/domain.ts

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