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

romot-co · 2024-03-04T23:27:24Z

内容

機能追加

ノートのコピー/切り取り/貼り付け機能の実装およびキーバインド
ノートの全選択の実装

メニューの追加と変更

メインメニュー: 編集メニューの追加
トーク: 元に戻す/やり直す
ソング: 元に戻す/やり直す/コピー/切り取り/貼り付け/すべて選択/選択解除
シーケンサ右クリックメニューの追加
選択中を削除/コピー/切り取り/貼り付け/すべて選択/選択解除
ノート右クリックメニューの調整
コピー/切り取りを追加

スクリーンショット・動画など

その他

そこまで難易度高そうではなかったため、コピペもあわせて実装いたしました。

Hiroshiba

ほぼLGTMです！！

コメントいっぱい書いてますが軽い提案が多いです！

src/store/singing.tsのコードは @sigprogramming さんにもレビューいただけると心強いかもです！

src/backend/electron/main.ts

src/components/Sing/ScoreSequencer.vue

src/components/Sing/ToolBar.vue

src/store/singing.ts

Hiroshiba · 2024-03-05T17:57:17Z

src/store/singing.ts

+        // クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)
+        const notesJson = JSON.parse(text);


ここはzodを使うと型サポート受けられるようにも出来たりします！（noteSchemaのimportが必要）

Suggested change

// クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)

const notesJson = JSON.parse(text);

// クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)

const notes = noteSchema.array().parse(JSON.parse(text));

copy元でidを除外してる場合はこんな感じかなと！

Suggested change

// クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)

const notesJson = JSON.parse(text);

// クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)

const notes = noteSchema

.omit({ id: true })

.array()

.parse(JSON.parse(text));

Hiroshiba · 2024-03-05T17:57:58Z

src/store/singing.ts

+        const notesToPaste: Note[] = notesJson.map((note) => {
+          // 新しい位置を現在の再生位置に合わせて計算する
+          const pastePosition =
+            Number(note.position) - firstNotePosition + currentPlayheadPosition;
+          return {
+            id: uuidv4(),
+            position: Number(pastePosition),
+            duration: Number(note.duration),
+            noteNumber: Number(note.noteNumber),
+            lyric: String(note.lyric),
+          };
+        });


お行儀悪いかもですが破壊的変更の形にすると綺麗かも。

Suggested change

const notesToPaste: Note[] = notesJson.map((note) => {

// 新しい位置を現在の再生位置に合わせて計算する

const pastePosition =

Number(note.position) - firstNotePosition + currentPlayheadPosition;

return {

id: uuidv4(),

position: Number(pastePosition),

duration: Number(note.duration),

noteNumber: Number(note.noteNumber),

lyric: String(note.lyric),

};

});

notes.forEach((note) => {

// 新しい位置を現在の再生位置に合わせて計算する

note.position =

note.position - firstNotePosition + currentPlayheadPosition;

note.id = uuidv4();

});

src/type/preload.ts

src/components/Sing/SequencerNote.vue

src/store/singing.ts

Hiroshiba · 2024-03-05T18:25:37Z

あ、あとスクリーンショットテストが落ちてるので更新していただければ！
[update snapshots]という文字列を含むコミットメッセージを入れてpushすると、Github Actionsが自動的に更新して追加pushしてくれます。

詳しくはこちら

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

sigprogramming

コピー＆ペーストの実装ありがとうございます！！

src/store/singing.ts

…_menu_and_copy_paste

romot-co · 2024-03-09T07:02:26Z

いったん指摘点修正済み・クオンタイズ追加(一応動いているように見える)

src/store/singing.ts

…_menu_and_copy_paste

Hiroshiba · 2024-03-18T17:01:50Z

src/components/Sing/ScoreSequencer.vue

+  // OSXの場合、Ctrl+クリックが右クリックのため、その場合はノートを追加しない
+  if (event.ctrlKey && event.button === 0) {
+    return;
+  }


なるほどです！！
ここにisMacがあるのでそれも加えるといいかも？

src/store/singing.ts

Hiroshiba · 2024-03-18T17:12:28Z

あっ　スクショテストがまた落ちてますね。。
mainブランチをマージした後にスクショ更新が必要だったかもです 🙇
#1903 (comment)

Hiroshiba

ほぼLGTMです！！！！　ありがとうございます！！！

Hiroshiba · 2024-03-18T17:17:59Z

src/components/Talk/MenuBar.vue

+  {
+    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,
+  },


この2つはsingとtalkで同じなので統一できそうですね！！
実際に「プロジェクト上書き保存」とかはBaseMenuBar内で統一されてるので、書き方を真似れば統一できると思います！

voicevox/src/components/Menu/MenuBar/BaseMenuBar.vue

Lines 299 to 307 in 0c3bafb

{

type: "button",

label: "プロジェクトを上書き保存",

onClick: async () => {

await saveProject();

},

disableWhenUiLocked: true,

},

{

分からなかったら後でプルリクエスト出させていただきます！

src/store/singing.ts

src/type/preload.ts

romot-co · 2024-03-20T01:59:26Z

いったん指摘点修正済み

Hiroshiba · 2024-03-20T22:58:44Z

おっとテストが回ってないかもですね！　VOICEVOXリポジトリへの自動pushだからかな、謎です。
draft化して戻すと確かテストまわるので、ちょっと一旦draft化させていただきます！ 🙇

Hiroshiba

LGTM！！！

いろいろコメントしているのですが、細々としているのでこっちでちゃちゃっと変えてマージさせていただきます！
（変な変更してしまったらすみません 🙇 ）

src/components/Menu/MenuBar/BaseMenuBar.vue

Hiroshiba · 2024-03-22T10:14:38Z

src/components/Sing/ScoreSequencer.vue

+    return;
+  }
+
+  // TODO: メニューが表示されている場合はメニュー非表示のみ行いたい


ちょっと考えたのですが同意見です！

よくある挙動だとコンテキストメニュー開いた後のクリックも普通のクリックと同じ扱いにする（ボタンを押すなど）のですが、どこをクリックしても何かが発動するシーケンサーの場合は話は別なのかなぁと思いました。

Hiroshiba · 2024-03-22T10:25:03Z

src/components/Sing/ScoreSequencer.vue

+  { type: "separator" },
+  {
+    type: "button",
+    label: "クオンタイズ",


ここの名称、初心者にはかなり難しそうですね。。。。
まあこれを必要とする人はわりと玄人だと思うので大丈夫そうではありますが･･･

ちょっと初心者向けのワードを考えてみました。
やることは「ノートをリズムに合わせる」ですが、それだと長いので、「ノート整列」とか「整列」とか「タイミング合わせ」とか「タイミング調整」とかでしょうか。
長いけど「タイミング調整（クオンタイズ）」とか････？

うーん、とりあえずクオンタイズのままで！

Hiroshiba · 2024-03-22T10:35:32Z

src/store/singing.ts

+      dispatch("COPY_NOTES_TO_CLIPBOARD");
+      dispatch("COMMAND_REMOVE_SELECTED_NOTES");


一応await挟んでおくと安心かも？

src/store/singing.ts

#1877 コピペや右クリックメニュー

8765ec6

romot-co requested a review from a team as a code owner March 4, 2024 23:27

romot-co requested review from Hiroshiba and removed request for a team March 4, 2024 23:27

romot-co self-assigned this Mar 4, 2024

#1877 不要セパレータ削除

17df062

Hiroshiba reviewed Mar 5, 2024

View reviewed changes

romot-co and others added 4 commits March 7, 2024 00:34

Update src/components/Sing/ToolBar.vue

77d20a4

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

Update src/components/Sing/SequencerNote.vue

b85c7e1

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

Update src/store/singing.ts

9dc76d0

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

Update src/store/singing.ts

0cd340e

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

sigprogramming reviewed Mar 7, 2024

View reviewed changes

src/store/singing.ts Outdated Show resolved Hide resolved

Romot and others added 4 commits March 9, 2024 14:51

#1897 指摘点修正+クオンタイズ

ee42219

#1877 コメント追加 [update snapshots]

37797e8

（スナップショットを更新）

48dcdce

Merge remote-tracking branch 'origin/main' into feature/1897_add_edit…

842e8f3

…_menu_and_copy_paste

sigprogramming reviewed Mar 9, 2024

View reviewed changes

src/store/singing.ts Outdated Show resolved Hide resolved

sigprogramming reviewed Mar 9, 2024

View reviewed changes

src/store/singing.ts Outdated Show resolved Hide resolved

Romot added 4 commits March 10, 2024 17:12

Merge remote-tracking branch 'origin/main' into feature/1897_add_edit…

7423298

…_menu_and_copy_paste

#1897 clipboardおよびtextパースでtry...catchする

7f277ef

#1877 マージコンフリクトを解消 [update snapshots]

3438da1

#1877 import修正

0c3bafb

Hiroshiba reviewed Mar 18, 2024

View reviewed changes

Hiroshiba mentioned this pull request Mar 18, 2024

editorが異なる場合は同じショートカットキーを登録可能にしたい #1940

Open

Romot and others added 2 commits March 20, 2024 10:18

指摘事項修正 [update snapshots]

32f87c4

（スナップショットを更新）

e1f1de9

Hiroshiba marked this pull request as draft March 20, 2024 22:58

Hiroshiba marked this pull request as ready for review March 20, 2024 22:58

（テストを回すための空コミット）

0def4f5

Hiroshiba approved these changes Mar 22, 2024

View reviewed changes

Hiroshiba added 2 commits March 22, 2024 19:40

Apply suggestions from code review

7f068bd

await追加＆コードを周りに合わせた

15d2de6

Hiroshiba merged commit 7096c46 into main Mar 22, 2024
18 checks passed

Hiroshiba deleted the feature/1897_add_edit_menu_and_copy_paste branch March 22, 2024 10:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

romot-co commented Mar 4, 2024

Hiroshiba left a comment

Hiroshiba Mar 5, 2024

Hiroshiba Mar 5, 2024

Hiroshiba commented Mar 5, 2024 •

edited

sigprogramming left a comment

romot-co commented Mar 9, 2024

Hiroshiba Mar 18, 2024

Hiroshiba commented Mar 18, 2024

Hiroshiba left a comment

Hiroshiba Mar 18, 2024

romot-co commented Mar 20, 2024

Hiroshiba commented Mar 20, 2024

Hiroshiba left a comment

Hiroshiba Mar 22, 2024

Hiroshiba Mar 22, 2024

Hiroshiba Mar 22, 2024

		// クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)
		const notesJson = JSON.parse(text);

-        // クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)
-        const notesJson = JSON.parse(text);
+        // クリップボードのテキストをJSONとしてパースする(失敗した場合は何もしない)
+        const notes = noteSchema
+          .omit({ id: true })
+          .array()
+          .parse(JSON.parse(text));

	{
	type: "button",
	label: "プロジェクトを上書き保存",
	onClick: async () => {
	await saveProject();
	},
	disableWhenUiLocked: true,
	},
	{

		dispatch("COPY_NOTES_TO_CLIPBOARD");
		dispatch("COMMAND_REMOVE_SELECTED_NOTES");

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

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

Conversation

romot-co commented Mar 4, 2024

内容

機能追加

メニューの追加と変更

関連 Issue

スクリーンショット・動画など

その他

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba Mar 5, 2024

Choose a reason for hiding this comment

Hiroshiba Mar 5, 2024

Choose a reason for hiding this comment

Hiroshiba commented Mar 5, 2024 • edited

sigprogramming left a comment

Choose a reason for hiding this comment

romot-co commented Mar 9, 2024

Hiroshiba Mar 18, 2024

Choose a reason for hiding this comment

Hiroshiba commented Mar 18, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba Mar 18, 2024

Choose a reason for hiding this comment

romot-co commented Mar 20, 2024

Hiroshiba commented Mar 20, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba Mar 22, 2024

Choose a reason for hiding this comment

Hiroshiba Mar 22, 2024

Choose a reason for hiding this comment

Hiroshiba Mar 22, 2024

Choose a reason for hiding this comment

Hiroshiba commented Mar 5, 2024 •

edited