ピッチ編集機能を追加 #2003

sigprogramming · 2024-04-19T15:01:03Z

内容

以下を行います。

ピッチ編集機能を追加
- ピッチ編集モードに移行後、左クリックでドロー、Ctrl+左クリックで消去
- ひとまず実験的機能にしています
SequencerPitchの処理を変更
- データ区間（データがある区間）のマップを生成し、データ区間ごとにピッチラインを描画
- 元のピッチとユーザーの編集を表示
- 元のピッチは有声区間のみを表示（無声子音の区間は非表示）
  - 無声区間は薄く表示でも良いかも
エディターのフレームレートを定義
縦方向のズームの下限・上限を調整
リファクタリング

以下は未実装です。

ピッチ編集データの保存・読み込み
~~ピッチ編集のundo/redo~~（実装しました）

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

その他

編集データのframeRateをどこで持つかで悩んでいます

src/domain/project/schema.ts

sigprogramming · 2024-04-19T21:37:30Z

src/components/Sing/SequencerPitch.vue

+const originalPitchLineColor = new Color(177, 201, 181, 255);
+const originalPitchLineWidth = 1.2;
+const pitchEditLineColor = new Color(146, 214, 154, 255);
+const pitchEditLineWidth = 2;


ノートの色とピッチラインの色、色々試しましたが良い組み合わせが見つかりませんでした…

Hiroshiba

一旦UIに関してのコメントです！！
一言で言うと良さそうに思いました！！細かい部分について確認とメモを兼ねたコメントです。

ピッチ編集時はノート選択できない感を出すためにマウスカーソルをペンか鉛筆に変更するといいかも
ピッチ編集モードの時は、ノートの色を完全にグレーアウトしてあげても良さそう
- 選択不可能だということを完全にわかるようにするため
ピッチ編集結果ってトラックのグローバル情報としてデータ持つんですね！！
- 既存ソフト見に行ったらそうなっててめちゃくちゃ驚きました
- UX的にはたぶんノートに連動させる形が良さそう感がなきにしもあらずだけど、一旦この仕様で･･･！
ピッチが急峻に変化したときの出音がノイジーに聞こえるかも？
- スペクトログラムを見た感じ、ピッチが瞬時的に上下してる感じになってそう
- エンジン（音声合成）側の課題？エディタ側の課題？
  - 補間かけてたらエディタ側の可能性もありそう
↑と同じような理由でなだらかなピッチであってもノイジーに聞こえることもある
- ゆっくり線を引いても段々になるから････かも･･･？
  - だとしたらもしかしたらエディタ側でなんとかできそう
  - 拡大するとこんな感じ
- エンジン側のフレームレートまでピッチ編集分解能を上げてもこの現象が起きるならどうしようもなさそう

個人的には1のカーソル変更だけこのプルリクエストでもできそうならやっちゃって、他は後回しでも良いのかなと思ってます！

sevenc-nanashi

とりあえずコード見る限り。
マイグレーション処理大丈夫そうです？

src/sing/domain.ts

sigprogramming · 2024-04-20T10:49:51Z

保存・読み込みとundo/redoはまだ実装できてないです！
（すみませんPRの説明に書いていませんでした…）

src/components/Sing/ScoreSequencer.vue

Hiroshiba

レビューしました！！
データ構造・設計・UI含め大枠良さそうに思いました！！

鉛筆マーク可愛くていいですね！！
消しゴムマークもあると楽しそうかもと思いました。（のちのちでも良さそう）

src/type/preload.ts

src/components/Dialog/SettingDialog.vue

src/components/Sing/ScoreSequencer.vue

src/sing/viewHelper.ts

src/store/singing.ts

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

src/type/utility.ts

Hiroshiba

ほぼLGTMです！！
あとAsnycTaskRunnerのとこだけかなと！！
実際使ってみてもだいぶ良い感じだなと思いました、もろもろの調整ありがとうございます！！

ピッチ編集が無声部分を特殊な扱いするの、とても良いのですがそういう仕様なことを忘れそうですね。。
覚えてたら使い方に書いとこうと思います！

あ、これは全然関係ないのですが。
ScoreSequencer.vueがかなり巨大化してきた印象です。ちょっと経験が浅くてわからないのですが、メンテ不能に陥るリスクが生じ始めている気がします。
解体の機運が高まっているのですが、この辺切り崩せそうと直感がある部分ってあったりされますか･･･？

とりあえずissueを作ろうかと思っていて、そのためにはある程度見通しがあると嬉しいのでお聞きした次第です！
レンダリング周りはWebGL化するときに抜本的に変わる可能性があるのでさておき、例えばダブルクリック判定部分とかは外に出せそうな気がしています。

src/sing/graphics/lineStrip.ts

src/sing/utility.ts

src/store/singing.ts

Hiroshiba · 2024-04-24T13:06:01Z

src/components/Sing/ScoreSequencer.vue

+.cursor-draw {
+  cursor:
+    url("/draw-cursor.png") 2 30,
+    auto;
+}


消してるときは消しゴムマークにしても良いかも。
（もちろん後回しでも！）

Hiroshiba · 2024-04-24T13:08:46Z

src/components/Sing/ScoreSequencer.vue

-      :class="{ 'rect-selecting': shiftKey }"
+      :class="{
+        'rect-selecting': editTarget === 'NOTE' && shiftKey,
+        'cursor-draw': editTarget === 'PITCH' && !ctrlKey,


とても細かいけど、スクロールバー上にあるときもカーソルがeditになってるのは違和感あるかもでした！
（解決できるんだろうか･･･。）

レイヤーが整理できていないので、一旦整理してイベントを受け取るレイヤーを作った後に、こちら行った方が良いかもです。

src/sing/viewHelper.ts

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

Hiroshiba

LGTM！！

お疲れ様でした！！！
これで今マージしても大丈夫な状態でしょうか？

マージ後にここに書いていたことをissueにしていきたいと思います！
#2003 (review)

Hiroshiba · 2024-04-25T01:36:18Z

テストが落ちてますね。。。。。。。なんでだろう。。。。処理が重くなった･･･？
とりあえずスキップさせる･････？

追記：３日前にmacosのGithub Actions環境が変わったっぽみでした！！
とりあえず落ちるテストだけskipさせるのが良さそう。

Hiroshiba · 2024-04-25T04:51:31Z

テストが落ちる件に関しては今のmainブランチをマージすれば大丈夫だと思います！
マージして大丈夫であればマージします･･･！！ @sigprogramming

sigprogramming · 2024-04-25T10:58:31Z

リファクタリングissue作っても良いかも 1 2

pushとspliceを使用する形に変更しました！（レビュー後ですみません…）

sigprogramming · 2024-04-25T11:01:44Z

元のピッチの色、少し暗いと感じたので、彩度を12から15に変更しました！
（色はとりあえずで設定しているので、後で調整必要かもです）

sigprogramming · 2024-04-25T11:02:36Z

@Hiroshiba
問題なければマージしていただいて大丈夫です…！

src/components/Sing/ScoreSequencer.vue

Hiroshiba · 2024-04-25T15:17:47Z

マージします！！
ついでいろんなissueを作ったりしようと思います！

sigprogramming · 2024-04-25T15:20:16Z

ScoreSequencer.vueがかなり巨大化してきた印象です。ちょっと経験が浅くてわからないのですが、メンテ不能に陥るリスクが生じ始めている気がします。
解体の機運が高まっているのですが、この辺切り崩せそうと直感がある部分ってあったりされますか･･･？

以下を考えています！ @Hiroshiba

DOM

グリッド部分をコンポーネント（SequencerGrid）として切り出せそう
SequencerNoteから、SequencerNotesにできそう
v-for1つでノートを描画しても重くならないかも
- v-forを1つにすると、ダブルクリック判定の処理も無くせるはず
スクロールバーをコンポーネント化（SequencerScroll）した方が良いかも

処理

以下の関数は処理を抽象化して別ファイルに移動できそう（これだけでも結構行数減ると思います）
- previewAdd
- previewMove
- previewResizeRight
- previewResizeLeft
- previewDrawPitch
- previewErasePitch
- preview
- startPreview
- endPreview
onMouseDown、onMouseMove、onMouseUpの処理も抽象化できそう（ifを減らせそう）
rectSelectはプレビュー処理（previewAddなど）と同じように扱った方が良いかも
以下の関数はviewHelper.tsに置いても良いかも
- getXInBorderBox
- getYInBorderBox
onNoteLyricMouseDownは要らないかも

Hiroshiba · 2024-04-25T15:36:02Z

@sigprogramming 詳しくありがとうございます！！！

すみません、お手数おかけしてしまうのですがそちらの内容でissue作成をお願いしても良いでしょうか 🙇
と言っても僕がコピペすればよさそうなのですが、追加とかあった時に @sigprogramming さんが編集できた方がいいのかなと思い･･･！

お時間なかったらコピペになってしまいますがこちらで作ってしまおうと思います！！

* ピッチ編集機能を追加 * 修正 * 色を調整、UIを修正 * ペンの画像を追加、ピッチ編集時のカーソルをペンに変更 * TODOコメントを追加 * ピッチ編集をundo/redoできるようにした * 有声区間のみピッチ編集を適用するように変更 * ピッチ編集データを平滑化してからセットするようにした * Update src/components/Dialog/SettingDialog.vue Co-authored-by: Hiroshiba <hihokaruta@gmail.com> * Update src/components/Sing/ScoreSequencer.vue Co-authored-by: Hiroshiba <hihokaruta@gmail.com> * 例外を使用して網羅性チェックを行うようにした * pitchEdit.dataのところにコメントを追加、データが無いことを表す値を定数で定義 * prevCursorFrameとprevCursorFrequencyをまとめてprevCursorPosに変更、コメントを追加 * 修正 * ピッチ編集機能が無効になったときに行う処理をSingEditorに移動 * 1フレームのピッチ変更を適用しない理由をコメントで説明 * 編集モードの判定をcomputed内で行うようにした * プレビュー時に実行される関数の処理を説明するコメントを追加 * コメントを追加 * EditModeをEditTargetに変更 * DataSectionのハッシュの型をブランド型にした * データ区間のマップを更新する関数の処理を説明するコメントを追加、コメントを修正 * フレームレート周りを一旦変更 * Colorクラスの値の範囲をコメントで書いた * FramewiseDataSectionに変更 * watchのimmediateをtrueに設定 * データ区間のマップを生成する処理を関数に切り出した * concatからpushに変更、spliceを使用してデータを書き換える形に変更 * SET_PITCH_EDIT_DATAのところにコメントを追加 * ピッチ編集を適用する処理のところにコメントを追加 * 修正 * DataSectionMapの更新処理が開始順で完了せずピッチの表示が更新されないことがある不具合を修正 * 修正 * Revert "concatからpushに変更、spliceを使用してデータを書き換える形に変更" This reverts commit a0c3260. * ExhaustiveErrorを移動 * NOTEコメントを追加 * 修正 * structuredCloneを使用してディープコピーするようにした * asyncProcessで例外が発生したときにisRunningとisRunRequestedがfalseにならないのを修正 * 非同期処理の実行部分を変更 * AsyncLockを使用する形にした * DEPRECATEDにしてコメントを追加 * CLEAR_PITCH_EDIT_DATAを削除 * 縦方向のズームの下限を調整 * Update src/type/utility.ts Co-authored-by: Hiroshiba <hihokaruta@gmail.com> * Update src/sing/utility.ts Co-authored-by: Hiroshiba <hihokaruta@gmail.com> * 元のピッチの色の彩度を12から15にした * concatからpushに変更、spliceを使用してデータを書き換える形に変更 * macでピッチの消去ができるように修正 * to mouseButton --------- Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

sigprogramming · 2024-04-29T01:29:46Z

issue作成します！

sigprogramming added 3 commits April 19, 2024 23:51

ピッチ編集機能を追加

16e465c

修正

26b6c1d

色を調整、UIを修正

c0ea4fe

sigprogramming commented Apr 19, 2024

View reviewed changes

src/domain/project/schema.ts Outdated Show resolved Hide resolved

sigprogramming commented Apr 19, 2024

View reviewed changes

sigprogramming marked this pull request as ready for review April 19, 2024 21:56

sigprogramming requested a review from a team as a code owner April 19, 2024 21:56

sigprogramming requested review from y-chan and Hiroshiba and removed request for a team and y-chan April 19, 2024 21:56

Hiroshiba reviewed Apr 20, 2024

View reviewed changes

sevenc-nanashi reviewed Apr 20, 2024

View reviewed changes

src/sing/domain.ts Outdated Show resolved Hide resolved

ペンの画像を追加、ピッチ編集時のカーソルをペンに変更

d61c3c0

sigprogramming commented Apr 20, 2024

View reviewed changes

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

sigprogramming added 3 commits April 20, 2024 21:30

TODOコメントを追加

4c6e644

ピッチ編集をundo/redoできるようにした

36e8b5b

有声区間のみピッチ編集を適用するように変更

a43144e

Hiroshiba reviewed Apr 20, 2024

View reviewed changes

sigprogramming and others added 10 commits April 21, 2024 08:58

ピッチ編集データを平滑化してからセットするようにした

17ecaf0

Update src/components/Dialog/SettingDialog.vue

9cc6e97

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

Update src/components/Sing/ScoreSequencer.vue

55db36a

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

例外を使用して網羅性チェックを行うようにした

c2cce14

pitchEdit.dataのところにコメントを追加、データが無いことを表す値を定数で定義

496b6fe

prevCursorFrameとprevCursorFrequencyをまとめてprevCursorPosに変更、コメントを追加

ec97ae3

修正

5f4c065

ピッチ編集機能が無効になったときに行う処理をSingEditorに移動

67fef5d

1フレームのピッチ変更を適用しない理由をコメントで説明

5494167

編集モードの判定をcomputed内で行うようにした

1b557e8

Hiroshiba reviewed Apr 24, 2024

View reviewed changes

src/type/utility.ts Show resolved Hide resolved

Hiroshiba reviewed Apr 24, 2024

View reviewed changes

sigprogramming and others added 6 commits April 25, 2024 06:47

AsyncLockを使用する形にした

7dbbb30

DEPRECATEDにしてコメントを追加

01c47ed

CLEAR_PITCH_EDIT_DATAを削除

9e21295

縦方向のズームの下限を調整

1a432a4

Update src/type/utility.ts

4c6f4fd

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

Update src/sing/utility.ts

08341ac

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

Hiroshiba approved these changes Apr 25, 2024

View reviewed changes

weweweok mentioned this pull request Apr 25, 2024

macOSのみ、e2eテストを実行しない #2006

Merged

sigprogramming added 2 commits April 25, 2024 19:40

元のピッチの色の彩度を12から15にした

51a42c2

concatからpushに変更、spliceを使用してデータを書き換える形に変更

03a7cfb

sigprogramming commented Apr 25, 2024

View reviewed changes

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

macでピッチの消去ができるように修正

5e8f44a

Hiroshiba approved these changes Apr 25, 2024

View reviewed changes

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

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

to mouseButton

cad48f0

Hiroshiba merged commit 8d2e0eb into VOICEVOX:main Apr 25, 2024
8 checks passed

This was referenced Apr 25, 2024

ソング：正しいピッチを表示しない空間（無声音域）でのピッチの線を点線にしたい #2008

Open

ソング：macOSでのピッチ編集結果削除の操作を右クリックからcmd+クリックにする #2009

Closed

rokujyushi mentioned this pull request Sep 8, 2024

WIP:音量編集機能の追加 #2263

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ピッチ編集機能を追加 #2003

ピッチ編集機能を追加 #2003

sigprogramming commented Apr 19, 2024 •

edited

Loading

sigprogramming Apr 19, 2024

Hiroshiba left a comment •

edited

Loading

sevenc-nanashi left a comment

sigprogramming commented Apr 20, 2024

Hiroshiba left a comment

Hiroshiba left a comment

Hiroshiba Apr 24, 2024 •

edited

Loading

Hiroshiba Apr 24, 2024

sigprogramming Apr 24, 2024

Hiroshiba left a comment

Hiroshiba commented Apr 25, 2024 •

edited

Loading

Hiroshiba commented Apr 25, 2024

sigprogramming commented Apr 25, 2024 •

edited

Loading

sigprogramming commented Apr 25, 2024

sigprogramming commented Apr 25, 2024

Hiroshiba commented Apr 25, 2024

sigprogramming commented Apr 25, 2024

Hiroshiba commented Apr 25, 2024

sigprogramming commented Apr 29, 2024

ピッチ編集機能を追加 #2003

ピッチ編集機能を追加 #2003

Conversation

sigprogramming commented Apr 19, 2024 • edited Loading

内容

関連 Issue

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

その他

sigprogramming Apr 19, 2024

Choose a reason for hiding this comment

Hiroshiba left a comment • edited Loading

Choose a reason for hiding this comment

sevenc-nanashi left a comment

Choose a reason for hiding this comment

sigprogramming commented Apr 20, 2024

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba Apr 24, 2024 • edited Loading

Choose a reason for hiding this comment

Hiroshiba Apr 24, 2024

Choose a reason for hiding this comment

sigprogramming Apr 24, 2024

Choose a reason for hiding this comment

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba commented Apr 25, 2024 • edited Loading

Hiroshiba commented Apr 25, 2024

sigprogramming commented Apr 25, 2024 • edited Loading

sigprogramming commented Apr 25, 2024

sigprogramming commented Apr 25, 2024

Hiroshiba commented Apr 25, 2024

sigprogramming commented Apr 25, 2024

DOM

処理

Hiroshiba commented Apr 25, 2024

sigprogramming commented Apr 29, 2024

sigprogramming commented Apr 19, 2024 •

edited

Loading

Hiroshiba left a comment •

edited

Loading

Hiroshiba Apr 24, 2024 •

edited

Loading

Hiroshiba commented Apr 25, 2024 •

edited

Loading

sigprogramming commented Apr 25, 2024 •

edited

Loading