[project-s] ノートを選択できるようにする＋位置を移動できるようにする＋長さを変更できるようにする

[romot-co]

内容

• ノートをクリックで選択できるようにする
• ノートをカーソルキーで移動できるようにする
• ノートをドラッグで移動できるようにする
• ノートの左右部ドラッグで長さを変更できるようにする
• ノートの重なりは許容しない(すぐ可能であれば)
• ノート追加後そのままドラッグできるようにする(すぐ可能であれば)

Pros 良くなる点

• ノートを選択状態にできる
• ノートの長さが変更できる
• ノートがマウスドラッグまたはキーボードで移動できる

Cons 悪くなる点

実現方法

クリックでバーを選択状態にする(複数選択がありうるためstateとしてはArrayで持つ)
ノート左右にドラッグハンドル要素を置きmousedown``mousemove``mouseupで制御
複数ノートがあり得るため考慮

• ノートのバー部分をコンポーネントとして分割
• ノートクリックで選択できる
• ノートの追加・削除にあわせ選択状態を維持する
• シーケンサクリックで選択解除できる
• ドラッグで移動できる
• カーソルキーで位置移動できる(複数にかかわるキー操作の確認と準備)
• ドラッグハンドル(透明)をノート左右に追加
• ドラッグでノートの長さが可変するようにする
• 前後に重なった要素がある場合はその手前までしか長さを伸ばせないようにする

VOICEVOXのバージョン

project-s

OSの種類/ディストリ/バージョン

• macOS Montereyで動作確認予定

その他

[romot-co]

[メモ]

問題洗い出し試行・動作確認

• 複数ノート選択の場合を考慮する必要がある(noteにuuidなどでidつけてもいいかもしれない)
• 実装上、マウス操作はNoteではなく親のSequencer側で行う点が多そう
• 重いなどは今のところなし

test-seq.mov

[romot-co]

[メモ]
複数選択+ドラッグで長さ変更+ドラッグで位置移動+ドラッグ範囲選択までは可能そうです。
問題点ふくめだいたい洗い出せたため、リファクタ・調整いたします。
(プルリクとして大きくなりすぎそうなため、限定いたします)
https://user-images.githubusercontent.com/9082140/218063583-7f0d8022-5b0b-4a47-8afd-8d1500bcdbe4.mp4

[Hiroshiba]

たぶんこちらのissueは達成されているのでクローズします！実装ありがとうございました！！