[project-s] ノートを選択できるようにする＋位置を移動できるようにする＋長さを変更できるようにする #1114
Description
内容
- ノートをクリックで選択できるようにする
- ノートをカーソルキーで移動できるようにする
- ノートをドラッグで移動できるようにする
- ノートの左右部ドラッグで長さを変更できるようにする
- ノートの重なりは許容しない(すぐ可能であれば)
- ノート追加後そのままドラッグできるようにする(すぐ可能であれば)
Pros 良くなる点
- ノートを選択状態にできる
- ノートの長さが変更できる
- ノートがマウスドラッグまたはキーボードで移動できる
Cons 悪くなる点
実現方法
クリックでバーを選択状態にする(複数選択がありうるためstateとしてはArrayで持つ)
ノート左右にドラッグハンドル要素を置きmousedown``mousemove``mouseupで制御
複数ノートがあり得るため考慮
- ノートのバー部分をコンポーネントとして分割
- ノートクリックで選択できる
- ノートの追加・削除にあわせ選択状態を維持する
- シーケンサクリックで選択解除できる
- ドラッグで移動できる
- カーソルキーで位置移動できる(複数にかかわるキー操作の確認と準備)
- ドラッグハンドル(透明)をノート左右に追加
- ドラッグでノートの長さが可変するようにする
- 前後に重なった要素がある場合はその手前までしか長さを伸ばせないようにする
VOICEVOXのバージョン
project-s
OSの種類/ディストリ/バージョン
- macOS Montereyで動作確認予定