ピッチ編集機能を追加

src/components/Sing/ScoreSequencer.vue

@@ -272,6 +272,7 @@ import {
   DoubleClickDetector,
   NoteAreaInfo,
   GridAreaInfo,
+  getButton,
 } from "@/sing/viewHelper";
 import SequencerRuler from "@/components/Sing/SequencerRuler.vue";
 import SequencerKeys from "@/components/Sing/SequencerKeys.vue";
@@ -968,12 +969,13 @@ const onNoteBarMouseDown = (event: MouseEvent, note: Note) => {
   if (editTarget.value !== "NOTE" || !isSelfEventTarget(event)) {
     return;
   }
+  const downButton = getButton(event);
   // ダブルクリック用の処理を行う
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     mouseDownAreaInfo = new NoteAreaInfo(note.id);
   }
 
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     startPreview(event, "MOVE", note);
   } else if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
@@ -984,12 +986,13 @@ const onNoteLeftEdgeMouseDown = (event: MouseEvent, note: Note) => {
   if (editTarget.value !== "NOTE" || !isSelfEventTarget(event)) {
     return;
   }
+  const downButton = getButton(event);
   // ダブルクリック用の処理を行う
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     mouseDownAreaInfo = new NoteAreaInfo(note.id);
   }
 
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     startPreview(event, "RESIZE_LEFT", note);
   } else if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
@@ -1000,12 +1003,13 @@ const onNoteRightEdgeMouseDown = (event: MouseEvent, note: Note) => {
   if (editTarget.value !== "NOTE" || !isSelfEventTarget(event)) {
     return;
   }
+  const downButton = getButton(event);
   // ダブルクリック用の処理を行う
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     mouseDownAreaInfo = new NoteAreaInfo(note.id);
   }
 
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     startPreview(event, "RESIZE_RIGHT", note);
   } else if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
@@ -1016,8 +1020,9 @@ const onNoteLyricMouseDown = (event: MouseEvent, note: Note) => {
   if (editTarget.value !== "NOTE" || !isSelfEventTarget(event)) {
     return;
   }
+  const downButton = getButton(event);
   // ダブルクリック用の処理を行う
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     mouseDownAreaInfo = new NoteAreaInfo(note.id);
   }
 
@@ -1030,19 +1035,15 @@ const onMouseDown = (event: MouseEvent) => {
   if (editTarget.value === "NOTE" && !isSelfEventTarget(event)) {
     return;
   }
-  // macOSの場合、Ctrl+クリックが右クリックのため、その場合はノートを追加しない
-  // TODO: 他の箇所でもチェックを行うようにする
-  if (isMac && event.ctrlKey && event.button === 0) {
-    return;
-  }
+  const downButton = getButton(event);
   // ダブルクリック用の処理を行う
-  if (event.button === 0) {
+  if (downButton === "LEFT_BUTTON") {
     mouseDownAreaInfo = new GridAreaInfo();
   }
 
   // TODO: メニューが表示されている場合はメニュー非表示のみ行いたい
   if (editTarget.value === "NOTE") {
-    if (event.button === 0) {
+    if (downButton === "LEFT_BUTTON") {
       if (event.shiftKey) {
         isRectSelecting.value = true;
         rectSelectStartX.value = cursorX.value;
@@ -1054,7 +1055,15 @@ const onMouseDown = (event: MouseEvent) => {
       store.dispatch("DESELECT_ALL_NOTES");
     }
   } else if (editTarget.value === "PITCH") {
-    if (event.button === 0) {
+    if (isMac) {
+      // Macの場合、左ボタンでDRAW、右ボタンでERASE
+      if (downButton === "LEFT_BUTTON") {
+        startPreview(event, "DRAW_PITCH");
+      } else if (downButton === "RIGHT_BUTTON") {
+        startPreview(event, "ERASE_PITCH");
+      }
+    } else if (downButton === "LEFT_BUTTON") {
+      // Mac以外の場合、左ボタンでDRAW、左ボタン+CtrlでERASE
       if (event.ctrlKey) {
         startPreview(event, "ERASE_PITCH");
       } else {
@@ -1089,7 +1098,8 @@ const onMouseMove = (event: MouseEvent) => {
 };
 
 const onMouseUp = (event: MouseEvent) => {
-  if (event.button !== 0) {
+  const upButton = getButton(event);
+  if (upButton !== "LEFT_BUTTON") {
     return;
   }
   // ダブルクリック用の処理を行う

src/components/Sing/SequencerPitch.vue

@@ -34,7 +34,7 @@ type PitchLine = {
   readonly lineStrip: LineStrip;
 };
 
-const originalPitchLineColor = new Color(177, 201, 181, 255);
+const originalPitchLineColor = new Color(171, 201, 176, 255);
 const originalPitchLineWidth = 1.2;
 const pitchEditLineColor = new Color(146, 214, 154, 255);
 const pitchEditLineWidth = 2;
@@ -261,7 +261,7 @@ const updateOriginalPitchDataSectionMap = async () => {
   const frameRate = editFrameRate.value; // f0（元のピッチ）は編集フレームレートで表示する
   const singingGuidesValue = singingGuides.value;
 
-  let tempData: number[] = [];
+  const tempData: number[] = [];
   for (const singingGuide of singingGuidesValue) {
     // TODO: 補間を行うようにする
     if (singingGuide.frameRate !== frameRate) {
@@ -287,10 +287,10 @@ const updateOriginalPitchDataSectionMap = async () => {
     // 無声子音区間以外のf0をtempDataにコピーする
     // NOTE: 無声子音区間は音程が無く、f0の値が大きく上下するので表示しない
     if (tempData.length < endFrame) {
-      const arrayToConcat = new Array(endFrame - tempData.length).fill(
+      const valuesToPush = new Array(endFrame - tempData.length).fill(
         VALUE_INDICATING_NO_DATA,
       );
-      tempData = tempData.concat(arrayToConcat);
+      tempData.push(...valuesToPush);
     }
     for (let i = 0; i < f0.length; i++) {
       const phoneme = framePhonemes[i];
@@ -312,20 +312,20 @@ const updatePitchEditDataSectionMap = async () => {
   // 1次元のデータからデータ区間のマップを生成して、pitchEditDataSectionMapに設定する
 
   const frameRate = editFrameRate.value;
+  const tempData = [...pitchEditData.value];
 
   // プレビュー中のピッチ編集があれば、適用する
-  let tempData = [...pitchEditData.value];
   if (previewPitchEdit.value != undefined) {
     const previewPitchEditType = previewPitchEdit.value.type;
     if (previewPitchEditType === "draw") {
       const previewData = previewPitchEdit.value.data;
       const previewStartFrame = previewPitchEdit.value.startFrame;
       const previewEndFrame = previewStartFrame + previewData.length;
       if (tempData.length < previewEndFrame) {
-        const arrayToConcat = new Array(previewEndFrame - tempData.length).fill(
+        const valuesToPush = new Array(previewEndFrame - tempData.length).fill(
           VALUE_INDICATING_NO_DATA,
         );
-        tempData = tempData.concat(arrayToConcat);
+        tempData.push(...valuesToPush);
       }
       for (let i = 0; i < previewData.length; i++) {
         tempData[previewStartFrame + i] = previewData[i];

src/sing/viewHelper.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { StyleInfo } from "@/type/preload";
+import { StyleInfo, isMac } from "@/type/preload";
 import { calculateHash } from "@/sing/utility";
 
 const BASE_X_PER_QUARTER_NOTE = 120;
@@ -202,3 +202,19 @@ export async function calculateFramewiseDataSectionHash(
   const hash = await calculateHash(dataSection);
   return framewiseDataSectionHashSchema.parse(hash);
 }
+
+export type MouseButton = "LEFT_BUTTON" | "RIGHT_BUTTON" | "OTHER_BUTTON";
+
+export function getButton(event: MouseEvent): MouseButton {
+  // macOSの場合、Ctrl+クリックは右クリック
+  if (isMac && event.button === 0 && event.ctrlKey) {
+    return "RIGHT_BUTTON";
+  }
+  if (event.button === 0) {
+    return "LEFT_BUTTON";
+  } else if (event.button === 2) {
+    return "RIGHT_BUTTON";
+  } else {
+    return "OTHER_BUTTON";
+  }
+}

src/store/singing.ts

@@ -524,17 +524,15 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
       { data, startFrame }: { data: number[]; startFrame: number },
     ) {
       const pitchEditData = state.tracks[selectedTrackIndex].pitchEditData;
-      let tempData = [...pitchEditData];
+      const tempData = [...pitchEditData];
       const endFrame = startFrame + data.length;
       if (tempData.length < endFrame) {
-        const arrayToConcat = new Array(endFrame - tempData.length).fill(
+        const valuesToPush = new Array(endFrame - tempData.length).fill(
           VALUE_INDICATING_NO_DATA,
         );
-        tempData = tempData.concat(arrayToConcat);
-      }
-      for (let i = 0; i < data.length; i++) {
-        tempData[startFrame + i] = data[i];
+        tempData.push(...valuesToPush);
       }
+      tempData.splice(startFrame, data.length, ...data);
       state.tracks[selectedTrackIndex].pitchEditData = tempData;
     },
   },
@@ -547,9 +545,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
       const pitchEditData = state.tracks[selectedTrackIndex].pitchEditData;
       const tempData = [...pitchEditData];
       const endFrame = Math.min(startFrame + frameLength, tempData.length);
-      for (let i = startFrame; i < endFrame; i++) {
-        tempData[i] = VALUE_INDICATING_NO_DATA;
-      }
+      tempData.fill(VALUE_INDICATING_NO_DATA, startFrame, endFrame);
       state.tracks[selectedTrackIndex].pitchEditData = tempData;
     },
   },