[project-s] ノート(複数)をドラッグおよびキーボードで移動+長さ変更+削除 #1256

romot-co · 2023-03-19T09:08:08Z

内容

Noteについて、以下の各操作を行えるようにします。

複数ノートの選択/解除
選択中のノートをドラッグで移動
ノート左右ドラッグで長さの変更
選択中のノートをキーボードキーで移動

※ 試行用ブランチではなく別ブランチとし、リファクタリングしてからマージできればと思いましたが、
差分が大きくなりそうなためいったんマージできれば幸いです。

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

test-vvs.mov

その他

現時点で、以下の問題点があります。

ノート追加がダブルクリックになっている
ドラッグなどの操作時にscore.notesをそのまま変更している(移動などが終わってからscore.notesにセットした方がよさそう)
キーボード操作が既存の方法に沿っていない
メソッド共通化や可読性の向上などリファクタリングが行われていない
Vuexのstore側で処理した方がよさそうなものがあるほか、コンポーネントが密結合

…lay_pianoroll_from_score

Co-authored-by: Sig <[email protected]>

Co-authored-by: Hiroshiba <[email protected]>

…to utavo

Hiroshiba

遅れてすみません、レビューしてみました！！
特に大きく変更が必要そうな箇所は見当たりませんでした！
いくつかコメントしてみたので、気に入ったのがあれば改修＆再レビュー＆マージかなと！

src/helpers/singHelper.ts

Hiroshiba · 2023-04-03T16:13:47Z

src/components/Sing/ScoreSequencer.vue

+    const cursorX = ref(0);
+    const cursorY = ref(0);


今は常に更新されていますが、必要なときだけ取ってこれるような仕組みにできるとかっこいいかもと思いました！
細かいですが、ドラッグ中用のだとわかるようにdragCursorXとかでも良いかもと思いました。

src/components/Sing/ScoreSequencer.vue

src/store/type.ts

src/components/Sing/ScoreSequencer.vue

Hiroshiba · 2023-04-03T17:00:40Z

src/components/Sing/SequencerNote.vue

+
+    const setLyric = (event: InputEvent) => {
+      if (!(event.target instanceof HTMLInputElement)) {
+        return;


細かくてすみませんがもしよければthrowだと･･･！
（仮になにかのミスでこの関数が呼ばれたとき、なにもせずreturnになってしまってエラーがわからなくので）

Suggested change

return;

throw new Error("event.target is not HTMLInputElement");

ちなみにGithub Copilot使っているとthrowと書くだけでそれっぽいエラーメッセージが出てくるので便利だったりします！

Hiroshiba · 2023-04-03T17:04:04Z

src/components/Sing/SequencerNote.vue

+    const handleKeydown = (event: KeyboardEvent) => {
+      emit("handleNotesKeydown", event);
+    };


activeになっているDOM Componentがイベントを受け取って操作を制御する設計、思いつきませんでした！
なるほどです、良さそう。

src/store/singing.ts

sigprogramming

レビュー遅くなり失礼しました…！
いくつかコメントしていますが、ほぼLGTMです！

sigprogramming

（すみませんコメントが送信できていませんでした…！）

src/store/singing.ts

src/components/Sing/SequencerNote.vue

src/components/Sing/ScoreSequencer.vue

romot-co · 2023-07-01T11:45:55Z

@Hiroshiba @sigprogramming
(おてすきで)遅くなり失礼いたします、こちらいったんマージできる形に修正いたしました。
おてすきでご確認お願いいたします！

Noteにuuid付与

が主な変更点です。

sigprogramming

コンフリクト解消＆修正ありがとうございます！
1箇所だけコメントしていますので、おてすきでご確認お願いいたします！

src/store/singing.ts

Hiroshiba

LGTM！！！！！

（余談です）
マルチセレクト、すごいです。
エディタ側は最初から複数選択できるように作っていなかったので、今から置き換えるのに相当苦労するなという見積もりになっています。
最初から設計に加えておけばよかったなと思いました 😇

src/store/singing.ts

romot-co · 2023-07-12T08:38:16Z

@Hiroshiba
お忙しいところありがとうございます！

複数選択(複数ノートへの一括操作)はわりと使う気が勝手にしていたのですが、思い込みかもしれず
まずはなくてもいいかもです…！

Romot and others added 30 commits November 4, 2022 22:20

#986 鍵盤およびY軸表示

0371a02

Merge remote-tracking branch 'origin/project-s' into feature/986_disp…

04b3912

…lay_pianoroll_from_score

11月仕掛かり分

53da199

#986 MIDIからの表示

749b48a

#986 一応ながら追加/削除/歌詞入力が行えるようにする

88582e5

#936 ズーム動作(試行)

7062b9c

#986 表示時にスクロール位置をC4周辺に+スクロール速度確認

24d2316

#986 表示調整

88892ba

#986 調整

af5b7d2

#986 指摘点修正他

6b8f301

#986 遅いためSVG化(仕掛かり)

0a0e119

#986 ノートのSVGグリッドにあわせた処理

d63b4d4

#986 スタイル指定をCSSクラスに修正

8dcc536

#986 表示最適化+ズームをoninputで即時

df58348

#986 ノートコンポーネント(予約空ファイル)

3da73ae

#986 小節ライン

c03e5e4

#986 バー追加時は1/4

c4d8dea

Update src/store/singing.ts

b29fe27

Co-authored-by: Sig <[email protected]>

Update src/store/singing.ts

02bad9a

Co-authored-by: Sig <[email protected]>

#986 ノート追加後そのままドラッグを考慮しmousedownに変更

09baaac

#986 見た目調整

e7d15eb

#986 translateで位置指定

e76446b

#1114 コンポーネント分割

22891b1

#1144 ノートを選択できるようにする

93c0f56

#1114 試行キーボード移動

95a4fc9

#1114 ドラッグの試行

22c1ca6

#1114 試行: ノートをドラッグで左右に伸縮できるようにする

f564ea3

#1114 ノートドラッグ試行

4244267

#1114 2/7仕掛かり

2e182df

#1114 ドラッグなど動作の調整

36c168e

sigprogramming and others added 6 commits March 17, 2023 18:53

歌ボ形式で歌声合成する機能を追加

573b078

リファクタリング

04e2ac2

#1114 コンフリクト解消

33615d4

#1114 テストの修正

80877d4

#1114 動作調整

fd751ce

#1114 動作調整

bbf4695

romot-co requested review from Hiroshiba and sigprogramming March 19, 2023 09:10

sigprogramming and others added 5 commits March 26, 2023 09:43

修正とリファクタリング

6ffbbb3

Update src/store/singing.ts

fcade9a

Co-authored-by: Hiroshiba <[email protected]>

logInfoでログ出力するように変更、テキストではなく音素を出力するように変更

1e3c514

Merge branch 'utavo' of https://github.com/sigprogramming/voicevox in…

6be707e

…to utavo

修正とリファクタリング、コメントの追加

520f655

Hiroshiba reviewed Apr 3, 2023

View reviewed changes

audioQueryCacheを削除、リファクタリングとコメントの追加

6853ad6

sigprogramming reviewed Apr 8, 2023

View reviewed changes

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

src/components/Sing/SequencerNote.vue Show resolved Hide resolved

src/components/Sing/ScoreSequencer.vue Show resolved Hide resolved

Romot added 3 commits May 1, 2023 05:19

Merge remote-tracking branch 'origin/project-s' into project-s

708ca16

#1114 Noteにidを持たせる+指摘点修正

7d4080a

#1114 spec

f60102c

romot-co requested review from Hiroshiba and sigprogramming July 1, 2023 11:42

sigprogramming reviewed Jul 2, 2023

View reviewed changes

src/store/singing.ts Show resolved Hide resolved

#1114 UPDATE_NOTEの修正間違い

d3da9f2

Hiroshiba approved these changes Jul 10, 2023

View reviewed changes

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

Update src/store/singing.ts

abbad93

Hiroshiba merged commit 554afef into project-s Jul 10, 2023

Hiroshiba deleted the feature/1114_note_select_and_change_duration branch January 28, 2024 17:24

	return;
	throw new Error("event.target is not HTMLInputElement");

[project-s] ノート(複数)をドラッグおよびキーボードで移動+長さ変更+削除 #1256

[project-s] ノート(複数)をドラッグおよびキーボードで移動+長さ変更+削除 #1256

Uh oh!

Conversation

romot-co commented Mar 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

内容

関連 Issue

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

その他

Uh oh!

Hiroshiba left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Hiroshiba Apr 3, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hiroshiba Apr 3, 2023

Choose a reason for hiding this comment

Uh oh!

Hiroshiba Apr 3, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sigprogramming left a comment

Choose a reason for hiding this comment

Uh oh!

sigprogramming left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

romot-co commented Jul 1, 2023

Uh oh!

sigprogramming left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Hiroshiba left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

romot-co commented Jul 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

romot-co commented Mar 19, 2023 •

edited

Loading