#1877 ソング: 編集メニューの追加とノートのコピー＆ペーストの実装

src/components/Menu/MenuBar/BaseMenuBar.vue

@@ -40,6 +40,7 @@ const props =
   defineProps<{
     /** 「ファイル」メニューのサブメニュー */
     fileSubMenuData: MenuItemData[];
+    editSubMenuData: MenuItemData[];
     /** エディタの種類 */
     editor: "talk" | "song";
   }>();
@@ -327,6 +328,15 @@ const menudata = computed<MenuItemData[]>(() => [
       },
     ],
   },
+  {
+    type: "root",
+    label: "編集",
+    onClick: () => {
+      closeAllDialog();
+    },
+    disableWhenUiLocked: false,
+    subMenu: props.editSubMenuData,
+  },
   {
     type: "root",
     label: "エンジン",

src/components/Sing/MenuBar.vue

@@ -1,5 +1,9 @@
 <template>
-  <BaseMenuBar editor="song" :file-sub-menu-data="fileSubMenuData" />
+  <BaseMenuBar
+    editor="song"
+    :file-sub-menu-data="fileSubMenuData"
+    :edit-sub-menu-data="editSubMenuData"
+  />
 </template>
 
 <script setup lang="ts">
@@ -10,6 +14,10 @@ import { MenuItemData } from "@/components/Menu/type";
 
 const store = useStore();
 const uiLocked = computed(() => store.getters.UI_LOCKED);
+const editor = "song";
+const canUndo = computed(() => store.getters.CAN_UNDO(editor));
+const canRedo = computed(() => store.getters.CAN_REDO(editor));
+const isNotesSelected = computed(() => store.state.selectedNoteIds.size > 0);
 
 const importMidiFile = async () => {
   if (uiLocked.value) return;
@@ -53,4 +61,85 @@ const fileSubMenuData: MenuItemData[] = [
     disableWhenUiLocked: true,
   },
 ];
+
+const editSubMenuData: MenuItemData[] = [
+  {
+    type: "button",
+    label: "元に戻す",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("UNDO", { editor });
+    },
+    disableWhenUiLocked: true,
+    disabled: !canUndo.value,
+  },
+  {
+    type: "button",
+    label: "やり直す",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("REDO", { editor });
+    },
+    disableWhenUiLocked: true,
+    disabled: !canRedo.value,
+  },
+  { type: "separator" },
+  {
+    type: "button",
+    label: "コピー",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("COPY_NOTES_TO_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+    disabled: !isNotesSelected.value,
+  },
+  {
+    type: "button",
+    label: "切り取り",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("COMMAND_CUT_NOTES_TO_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+    disabled: !isNotesSelected.value,
+  },
+  {
+    type: "button",
+    label: "貼り付け",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("COMMAND_PASTE_NOTES_FROM_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+  },
+  { type: "separator" },
+  {
+    type: "button",
+    label: "すべて選択",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("SELECT_ALL_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "選択解除",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("DESELECT_ALL_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "クオンタイズ",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("COMMAND_QUANTIZE_SELECTED_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+];
 </script>

src/components/Sing/ScoreSequencer.vue

@@ -27,6 +27,7 @@
       @mouseleave="onMouseLeave"
       @wheel="onWheel"
       @scroll="onScroll"
+      @contextmenu.prevent
     >
       <!-- キャラクター全身 -->
       <CharacterPortrait />
@@ -196,6 +197,7 @@
       }"
       @input="setZoomY"
     />
+    <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
   </div>
 </template>
 
@@ -209,6 +211,8 @@ import {
   onDeactivated,
 } from "vue";
 import { v4 as uuidv4 } from "uuid";
+import ContextMenu from "../Menu/ContextMenu.vue";
+import { MenuItemButton } from "../Menu/type";
 import { useStore } from "@/store";
 import { Note } from "@/store/type";
 import {
@@ -239,6 +243,117 @@ import SequencerPhraseIndicator from "@/components/Sing/SequencerPhraseIndicator
 import CharacterPortrait from "@/components/Sing/CharacterPortrait.vue";
 import SequencerPitch from "@/components/Sing/SequencerPitch.vue";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
+
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+
+registerHotkeyWithCleanup({
+  editor: "song",
+  name: "コピー",
+  callback: () => {
+    if (nowPreviewing.value) {
+      return;
+    }
+    if (state.selectedNoteIds.size === 0) {
+      return;
+    }
+    store.dispatch("COPY_NOTES_TO_CLIPBOARD");
+  },
+});
+
+registerHotkeyWithCleanup({
+  editor: "song",
+  name: "切り取り",
+  callback: () => {
+    if (nowPreviewing.value) {
+      return;
+    }
+    if (state.selectedNoteIds.size === 0) {
+      return;
+    }
+    store.dispatch("COMMAND_CUT_NOTES_TO_CLIPBOARD");
+  },
+});
+
+registerHotkeyWithCleanup({
+  editor: "song",
+  name: "貼り付け",
+  callback: () => {
+    if (nowPreviewing.value) {
+      return;
+    }
+    store.dispatch("COMMAND_PASTE_NOTES_FROM_CLIPBOARD");
+  },
+});
+
+registerHotkeyWithCleanup({
+  editor: "song",
+  name: "すべて選択",
+  callback: () => {
+    if (nowPreviewing.value) {
+      return;
+    }
+    store.dispatch("SELECT_ALL_NOTES");
+  },
+});
+
+const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+const contextMenuData = ref<MenuItemButton[]>([
+  {
+    type: "button",
+    label: "選択中を削除",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("COMMAND_REMOVE_SELECTED_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "コピー",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("COPY_NOTES_TO_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "切り取り",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("COMMAND_CUT_NOTES_TO_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "貼り付け",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("COMMAND_PASTE_NOTES_FROM_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべて選択",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("SELECT_ALL_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "選択解除",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("DESELECT_ALL_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+]);
 
 type PreviewMode = "ADD" | "MOVE" | "RESIZE_RIGHT" | "RESIZE_LEFT";
 
@@ -710,6 +825,15 @@ const onMouseDown = (event: MouseEvent) => {
   if (!isSelfEventTarget(event)) {
     return;
   }
+
+  // OSXの場合、Ctrl+クリックが右クリックのため、その場合はノートを追加しない
+  if (event.ctrlKey && event.button === 0) {
+    return;
+  }
+
+  // TODO: メニューが表示されている場合はメニュー非表示のみ行いたい
+
+  // 選択中のノートが無い場合、プレビューを開始しノートIDをリセット
   if (event.button === 0) {
     startPreview(event, "ADD");
     mouseDownNoteId = undefined;

src/components/Sing/SequencerNote.vue

@@ -126,13 +126,31 @@ const showPitch = computed(() => {
   return state.experimentalSetting.showPitchInSongEditor;
 });
 const contextMenu = ref<InstanceType<typeof ContextMenu>>();
-const contextMenuData = ref<[MenuItemButton]>([
+const contextMenuData = ref<MenuItemButton[]>([
   {
     type: "button",
     label: "削除",
     onClick: async () => {
       contextMenu.value?.hide();
-      store.dispatch("COMMAND_REMOVE_SELECTED_NOTES");
+      await store.dispatch("COMMAND_REMOVE_SELECTED_NOTES");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "コピー",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("COPY_NOTES_TO_CLIPBOARD");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "切り取り",
+    onClick: async () => {
+      contextMenu.value?.hide();
+      await store.dispatch("COMMAND_CUT_NOTES_TO_CLIPBOARD");
     },
     disableWhenUiLocked: true,
   },

src/components/Talk/MenuBar.vue

@@ -1,5 +1,9 @@
 <template>
-  <BaseMenuBar editor="talk" :file-sub-menu-data="fileSubMenuData" />
+  <BaseMenuBar
+    editor="talk"
+    :file-sub-menu-data="fileSubMenuData"
+    :edit-sub-menu-data="editSubMenuData"
+  />
 </template>
 
 <script setup lang="ts">
@@ -20,6 +24,9 @@ const store = useStore();
 const { registerHotkeyWithCleanup } = useHotkeyManager();
 
 const uiLocked = computed(() => store.getters.UI_LOCKED);
+const editor = "talk";
+const canUndo = computed(() => store.getters.CAN_UNDO(editor));
+const canRedo = computed(() => store.getters.CAN_REDO(editor));
 
 const generateAndSaveAllAudio = async () => {
   if (!uiLocked.value) {
@@ -159,4 +166,28 @@ registerHotkeyWithCleanup({
     importTextFile();
   },
 });
+
+// 「編集」メニュー
+const editSubMenuData = computed<MenuItemData[]>(() => [
+  {
+    type: "button",
+    label: "元に戻す",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("UNDO", { editor });
+    },
+    disableWhenUiLocked: true,
+    disabled: !canUndo.value,
+  },
+  {
+    type: "button",
+    label: "やり直す",
+    onClick: () => {
+      if (uiLocked.value) return;
+      store.dispatch("REDO", { editor });
+    },
+    disableWhenUiLocked: true,
+    disabled: !canRedo.value,
+  },
+]);
 </script>