From 7552acee2d4b5def63c7ca98355a704c82e465e8 Mon Sep 17 00:00:00 2001
From: Romot <mail@romot.co>
Date: Sat, 23 Nov 2024 06:47:40 +0900
Subject: [PATCH] =?UTF-8?q?Add:=E3=83=AB=E3=83=BC=E3=83=A9=E3=83=BC?=
 =?UTF-8?q?=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=A7=E3=82=B9=E3=83=8A?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E4=BD=8D=E7=BD=AE=E3=81=AB=E5=86=8D=E7=94=9F?=
 =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=89=E3=82=92=E3=81=82=E3=82=8F=E3=81=9B?=
 =?UTF-8?q?=E3=82=8B=20(#2372)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 .../Sing/SequencerRuler/Container.vue           |  2 ++
 .../Sing/SequencerRuler/Presentation.vue        | 17 +++++++++++++++--
 .../Sing/SequencerRuler/index.stories.ts        |  1 +
 src/sing/domain.ts                              |  7 +++++++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Sing/SequencerRuler/Container.vue b/src/components/Sing/SequencerRuler/Container.vue
index 94ebdc6c41..6824af1c48 100644
--- a/src/components/Sing/SequencerRuler/Container.vue
+++ b/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);
 
diff --git a/src/components/Sing/SequencerRuler/Presentation.vue b/src/components/Sing/SequencerRuler/Presentation.vue
index 8c078fb1c0..9cb4c75916 100644
--- a/src/components/Sing/SequencerRuler/Presentation.vue
+++ b/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;
 };
 
diff --git a/src/components/Sing/SequencerRuler/index.stories.ts b/src/components/Sing/SequencerRuler/index.stories.ts
index 345415e841..48eb5e002d 100644
--- a/src/components/Sing/SequencerRuler/index.stories.ts
+++ b/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(),
   },
diff --git a/src/sing/domain.ts b/src/sing/domain.ts
index faf7230042..0d0d1a0f5b 100644
--- a/src/sing/domain.ts
+++ b/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;
+}