feat: ソング：カーソルをシーケンサーの端に持っていったときにスクロールする機能を追加（#2319）

src/components/Sing/ScoreSequencer.vue

@@ -451,6 +451,7 @@ const {
   previewPitchEdit,
   cursorState,
   guideLineTicks,
+  enableAutoScrollDuringDrag,
 } = useSequencerStateMachine(store);
 
 const nowPreviewing = computed(() => previewMode.value !== "IDLE");
@@ -599,15 +600,92 @@ const onMouseDown = (event: MouseEvent) => {
   }
 };
 
+let autoScrollDuringDragAnimationId: number | undefined = undefined;
+let previousTimeStamp: number | undefined = undefined;
+const scrollSpeedPerMS = 0.2; // 1msあたりの自動スクロールスピード
+let scrollXMultiplier: number = 0; //右方向+1,左方向-1
+let scrollYMultiplier: number = 0; //上方向-1,下方向+1
+
+const autoScrollAnimation = (timestamp: number) => {
+  if (sequencerBody.value == undefined) {
+    throw new Error("sequencer.value is undefined.");
+  }
+
+  if (previousTimeStamp == undefined) {
+    previousTimeStamp = timestamp;
+  }
+  const elapsed = timestamp - previousTimeStamp;
+  sequencerBody.value.scrollBy({
+    top: Math.floor(scrollYMultiplier * scrollSpeedPerMS * elapsed),
+    left: Math.floor(scrollXMultiplier * scrollSpeedPerMS * elapsed),
+    behavior: "auto",
+  });
+
+  previousTimeStamp = timestamp;
+  autoScrollDuringDragAnimationId = requestAnimationFrame(autoScrollAnimation);
+};
+
 const onMouseMove = (event: MouseEvent) => {
+  if (sequencerBody.value == undefined) {
+    throw new Error("sequencer.value is undefined.");
+  }
+  const cursorPos = getCursorPosOnSequencer(event);
+
+  // カーソルがノートを持っていて、カーソルがシーケンサーの範囲外に出たときに
+  // 自動スクロールする処理を以下で行う
+  if (enableAutoScrollDuringDrag.value) {
+    const threshold = 15;
+
+    if (cursorPos.x > sequencerBody.value.clientWidth - threshold) {
+      // 右端
+      scrollXMultiplier = 1;
+      scrollYMultiplier = 0;
+    } else if (cursorPos.x < threshold) {
+      // 左端
+      scrollXMultiplier = -1;
+      scrollYMultiplier = 0;
+    } else if (cursorPos.y < threshold) {
+      // 上端
+      scrollXMultiplier = 0;
+      scrollYMultiplier = -1;
+    } else if (cursorPos.y > sequencerBody.value.clientHeight - threshold) {
+      // 下端
+      scrollXMultiplier = 0;
+      scrollYMultiplier = 1;
+    } else {
+      // マウスカーソルが上下左右の端にないとき
+      scrollXMultiplier = 0;
+      scrollYMultiplier = 0;
+    }
+  }
   stateMachineProcess({
     type: "mouseEvent",
     targetArea: "Window",
     mouseEvent: event,
-    cursorPos: getCursorPosOnSequencer(event),
+    cursorPos: cursorPos,
   });
 };
 
+watch(enableAutoScrollDuringDrag, (newFlag, oldFlag) => {
+  // previewModeを抜けるとき
+  // 自動スクロールを停止する
+  if (!newFlag) {
+    if (autoScrollDuringDragAnimationId != undefined) {
+      cancelAnimationFrame(autoScrollDuringDragAnimationId);
+      autoScrollDuringDragAnimationId = undefined;
+    }
+    scrollXMultiplier = 0;
+    scrollYMultiplier = 0;
+  } else {
+    // previewModeに入ったとき
+    // 常にアニメーションループをスタートする
+    // 実際に動かさなければならない場面になったら
+    // scrollXMultiplier,scrollYMultiplierの値を0以外にセットする
+    autoScrollDuringDragAnimationId =
+      requestAnimationFrame(autoScrollAnimation);
+  }
+});
+
 const onMouseUp = (event: MouseEvent) => {
   stateMachineProcess({
     type: "mouseEvent",

src/composables/useSequencerStateMachine.ts

@@ -37,6 +37,7 @@ export const useSequencerStateMachine = (store: PartialStore) => {
     previewPitchEdit: ref(undefined),
     cursorState: ref("UNSET"),
     guideLineTicks: ref(0),
+    enableAutoScrollDuringDrag: ref(false),
   };
 
   const idleStateId = computed((): IdleStateId => {
@@ -88,5 +89,8 @@ export const useSequencerStateMachine = (store: PartialStore) => {
     previewPitchEdit: computed(() => refs.previewPitchEdit.value),
     cursorState: computed(() => refs.cursorState.value),
     guideLineTicks: computed(() => refs.guideLineTicks.value),
+    enableAutoScrollDuringDrag: computed(
+      () => refs.enableAutoScrollDuringDrag.value,
+    ),
   };
 };

src/sing/sequencerStateMachine/common.ts

@@ -97,6 +97,7 @@ export type Refs = {
   >;
   readonly cursorState: Ref<CursorState>;
   readonly guideLineTicks: Ref<number>;
+  enableAutoScrollDuringDrag: Ref<boolean>;
 };
 
 export type PartialStore = {

src/sing/sequencerStateMachine/states/moveNoteState.ts

@@ -58,6 +58,7 @@ export class MoveNoteState
   }
 
   onEnter(context: Context) {
+    context.enableAutoScrollDuringDrag.value = true;
     const guideLineTicks = getGuideLineTicks(this.cursorPosAtStart, context);
     const targetNotesArray = context.notesInSelectedTrack.value.filter(
       (value) => this.targetNoteIds.has(value.id),
@@ -124,6 +125,7 @@ export class MoveNoteState
   }
 
   onExit(context: Context) {
+    context.enableAutoScrollDuringDrag.value = false;
     if (this.innerContext == undefined) {
       throw new Error("innerContext is undefined.");
     }