ソング：ルーラー部UIの挙動と全体への統合 #2398
Comments
|
まとめわかりやすいです、ありがとうございます！
この一文を見て思いついたのですが、そういえばトラックリストに作るであろうルーラーより、このピアノロールのルーラーのがよくアクセスしますね。 ルーラーに持たせる機能を全体に持たせるかピアノロールに持たせるかは、その機能の解像度次第かもと思いました！！ そう考えるとキーや拍子もそんな５〜６小節でぽんぽん変えないし、トラックリスト側のが合ってそうですが。。。。。 |
|
進捗: なんか動作イメージ(実装問題でややこしいところありそう) 2024-12-09.4.29.15.mp4
ありがとうございます！こちらラベルはたしかにそのほうがいいかもです…！ もうちょっといくつかデモできたらみなさんにご確認いただけるとうれしいです…！ |
|
ポップオーバー内で削除、なるほどです！！
ほかは右クリックが一段階ある（コンテキストメニュー開くだけ）ので挙動が違うのと、あとポップアップに収まりきらなくなる操作が現れるのを見越して、右クリックは「削除」が現れるだけのコンテキストメニューを開くだけにしておく、みたいな考え方もあるかもと思いました！ あとこれは挑戦なのですが、可能なら各ラベルがどの時刻と対応しているかユーザーにわかるようなUIを目指せるかもと思いました。 例えば、実際の変更地点に黒の縦線を書いて、アクティブになってるラベルと対応する位置の縦線を色付けする･･･とか･･･？ |
|
@Hiroshiba あとは元々の案に戻るのですが素直にレーンあたり1要素にしてしまうのが素直かなあと その場合は以下のようにしてもよさそうです
あとは：
|
|
複数レーンにもできる・畳むこともできる、が手っ取り早い気もしますね！ |
|
進捗: とりあえず縦レーンにしたらどうなるかの様子をざっくり試す… test-pr-3.mp4たたむ・一括も別途試す |
test-pr-6.mp4進捗: 試行
グルーピングの部分は以下の対応
|
|
進捗: ループエリアを合成(まだマージのみなのでスタイルはおわっている) こうやって考慮の必要がある依存部分をつなげていくと見るのが辛いクソデカプルリクになるので 3つ以上出てきた段階で粒度のきっちりしたコンポーネント化みたいな手法が役に立つのかどうか… |
|
くっつくUI、見た感じめちゃめちゃいいですね！！！ 実装をどう進めていけば嬉しいかは若干見えないですね････････。 |
|
@Hiroshiba
とりあえずブランチで作成いたします…！ |
UI選択の基準以下の要素が混在しておりややこしいので選択基準をまずはふわっと書く
ポップオーバー・インスペクタ vs モーダルダイアログの境目ポップオーバー・インスペクタ
モーダルダイアログ
ソング全体の設定などはモーダルでよい ポップオーバーとインスペクタの境目インスペクタ
ポップオーバー
メモ書きとして残すが、YES/NO式のチャートにしたほうがよさそう |
|
だいぶめんどくさい
課題: 移動・配置は必要なさそう？ もっとざっくりさせたい スペース制約および頻度条件も加える必要がありそう flowchart TD
Start[開始]
%% 操作種別
Q_Operation{どの種類の操作を行う？}
Q_Operation -->|選択| Q_SelectionType{複数要素を選択する？}
Q_Operation -->|編集| Q_MultiEdit{複数要素を同時に扱う？}
Q_Operation -->|配置・移動| Q_Move{精密な位置指定が必要か？}
Q_Operation -->|なし/閲覧のみ| Sel_Highlight["選択内容ハイライトのみ"] --> End
%% 選択フロー
Q_SelectionType -->|Yes| Sel_Multi["複数選択UI(Shift+クリック等)"] --> Q_AfterSelect{選択後のアクションは？}
Q_SelectionType -->|No| Sel_Single["単一選択UI"] --> Q_AfterSelect
Q_AfterSelect -->|編集| Q_MultiEdit
Q_AfterSelect -->|移動| Q_Move
Q_AfterSelect -->|なし| Sel_Highlight["ハイライトのみ"] --> End
Q_AfterSelect -->|その他操作なし| No_Op["該当UIパターンなし"] --> End
%% 編集フロー
Q_MultiEdit -->|Yes| Q_Complex{"複雑な編集が必要？<br>(4つ以上のプロパティ変更 or プレビューしつつ編集)"}
Q_MultiEdit -->|No| Q_LightEdit{"軽微な編集か？<br>(単一テキスト/数値程度)"}
Q_LightEdit -->|Yes| Edit_Inline["インライン編集"] --> End
Q_LightEdit -->|No| Q_Complex
%% 移動/配置フロー
Q_Move -->|Yes| Q_Complex{"複雑な操作が必要？<br>(複数プロパティ変更 or プレビューしつつ編集)"}
Q_Move -->|No| Move_DnD["ドラッグ＆ドロップ配置"] --> End
%% 複雑な操作は共通判定
Q_Complex --> Q_ModalNeeded{"中断必須な操作か？<br>(不可逆操作,全体設定,作業フローで必須など)"}
Q_ModalNeeded -->|Yes| Modal["モーダルダイアログ"] --> End
Q_ModalNeeded -->|No| Q_LargeArea{"多要素の常時表示編集が必要？"}
Q_LargeArea -->|Yes| Sidebar["サイドバー(インスペクタ)"] --> End
Q_LargeArea -->|No| Popover["ポップオーバー"] --> End
End[終了]
|
内容
ルーラーについてある程度一貫性のあるUIとしてまとめることを目的とします
Pros 良くなる点
Cons 悪くなる点
ないはず
実現方法
Storybookでパターンを作成
VOICEVOXのバージョン
0.2.x
OSの種類/ディストリ/バージョン
その他
あくまで目安(縛りではない)
The text was updated successfully, but these errors were encountered: