Add: シーケンサにおいてツール選択可能にする #2367
Add: シーケンサにおいてツール選択可能にする #2367
Conversation
…r_click_selectable_various_mode_mock
…r_selectable_edit_mode
…r_selectable_edit_mode
…/github.com/romot-co/voicevox into feature/2039_sequencer_selectable_edit_mode
…/github.com/romot-co/voicevox into feature/2039_sequencer_selectable_edit_mode
…r_selectable_edit_mode
|
🚀 プレビュー用ページを作成しました 🚀 更新時点でのコミットハッシュ： |
There was a problem hiding this comment.
Copilot reviewed 6 out of 11 changed files in this pull request and generated no suggestions.
Files not reviewed (5)
- src/styles/_index.scss: Language not supported
- src/styles/fonts.scss: Language not supported
- src/components/Sing/ScoreSequencer.vue: Evaluated as low risk
- src/components/Sing/SequencerNote.vue: Evaluated as low risk
- src/components/Sing/SequencerToolPalette.vue: Evaluated as low risk
| // カーソル状態の管理 | ||
| const { setCursorState, cursorState, cursorClass } = useCursorState(); | ||
|
|
||
| // TODO: カーソル状態を決定するロジックをuseCursorStateに移譲もしくはステートパターン実装 | ||
| const resolveCursorState = () => { | ||
| // プレビュー中は現在の状態を維持 | ||
| if (nowPreviewing.value) { | ||
| return cursorState.value; | ||
| } | ||
|
|
||
| if (editTarget.value === "PITCH") { | ||
| // ピッチ編集モード時のカーソル状態 | ||
| return ctrlKey.value || selectedPitchTool.value === "ERASE" | ||
| ? CursorState.ERASE | ||
| : CursorState.DRAW; | ||
| } | ||
| if (editTarget.value === "NOTE") { | ||
| // ノート編集モード時のカーソル状態 | ||
| if (shiftKey.value) { | ||
| // 範囲選択 | ||
| setCursorState(CursorState.CROSSHAIR); | ||
| } else { | ||
| setCursorState(CursorState.UNSET); | ||
| return CursorState.CROSSHAIR; | ||
| } | ||
| return selectedNoteTool.value === "EDIT_FIRST" | ||
| ? CursorState.DRAW | ||
| : CursorState.UNSET; | ||
| } | ||
| }); | ||
|
|
||
| return CursorState.UNSET; | ||
| }; | ||
|
|
||
| // カーソル状態の更新を一元管理 | ||
| const updateCursorState = () => { | ||
| const newState = resolveCursorState(); | ||
| setCursorState(newState); | ||
| }; | ||
|
|
||
| // 関連する状態が変更されたときにカーソル状態を更新 | ||
| watch( | ||
| [ | ||
| ctrlKey, | ||
| shiftKey, | ||
| nowPreviewing, | ||
| editTarget, | ||
| selectedNoteTool, | ||
| selectedPitchTool, | ||
| ], | ||
| updateCursorState, | ||
| { immediate: true }, | ||
| ); |
There was a problem hiding this comment.
（ただのコメントです）
watch含めてuseCursorStateに持っていける気がしますね！
watchが見てる変数を全部useCursorStateの引数に渡しちゃう感じで。
There was a problem hiding this comment.
こちらもたぶんステートマシンにも関係してきそう？なので
ScoreSequencerに残す形で修正しました…！
| .material-symbols-outlined { | ||
| font-family: "Material Symbols Outlined"; |
There was a problem hiding this comment.
Material Symbols
ちょっと軽い質問なのですが、Material Iconsを使うかこっちを使うかの線引きとかってどう考えれば良いでしょうか？ 👀
全体的な調和が取れていればどっちを使っても良いとしたり、ここではこうすべきみたいな方針が見えていればお聞きしたく･･･！！
導入しても良さそうに感じるのですが、選択肢が2倍になったり、他のアイコンも導入したいとなった時の方針をちょこっと考えておきたいな～と。
There was a problem hiding this comment.
@Hiroshiba
こちらざっくり
- 当面はMaterial Iconsに無いものがあればMaterial Symbolsを使う
- 新しく追加するものは全部Material Symbolsにする
- 全部Material Symbolsにしてしまう
の3パターンかと思いまして
個人的には採用の可否・コンポーネント含め利用法固まったら2.かな？と思っています
Material IconsとMaterial Symbolsの差
同一名であれば存在し見た目は同系列
Material SymbolsはMaterial Iconsの後継・スーパーセットなので
Material Iconsにあるものは置き換えられ印象に差は少なく移行は楽かと思います
よりモダンっぽい印象です
いちおう結構形まで変わっているものはあり:
増えてるものはそこそこある:
Variable Fontで調整ができる
VOICEVOXであればこれみたいなスタイルをちょっと調整できる
※ ただし既存と印象が揃わなくなるため全部入れ替え時に調整がいいかも
- ウェイトをCSSで指定できる
- 細かい太さを調整できる
- サイズに応じて線の太さを自動調整してくれる
そもそもMaterial Icon/Symbol系を使わず他のアイコンセットにするのもありと思っていますが
Material系+他のアイコンセットの混在は避けた方がいいかもです
…r_selectable_edit_mode
…/github.com/romot-co/voicevox into feature/2039_sequencer_selectable_edit_mode
There was a problem hiding this comment.
Copilot reviewed 7 out of 11 changed files in this pull request and generated no suggestions.
Files not reviewed (4)
- src/styles/_index.scss: Language not supported
- src/styles/fonts.scss: Language not supported
- src/components/Sing/SequencerNote.vue: Evaluated as low risk
- src/components/Sing/SequencerToolPalette.vue: Evaluated as low risk
Comments skipped due to low confidence (1)
src/components/Sing/ToolBar/EditTargetSwicher.vue:35
- The comment 'transitionHide' seems to be a typo. It should be 'transitionSide'.
transitionHide=""
There was a problem hiding this comment.
Copilot reviewed 7 out of 11 changed files in this pull request and generated no suggestions.
Files not reviewed (4)
- src/styles/_index.scss: Language not supported
- src/styles/fonts.scss: Language not supported
- src/components/Sing/SequencerNote.vue: Evaluated as low risk
- src/components/Sing/SequencerToolPalette.vue: Evaluated as low risk
There was a problem hiding this comment.
Copilot reviewed 7 out of 11 changed files in this pull request and generated no suggestions.
Files not reviewed (4)
- src/styles/_index.scss: Language not supported
- src/styles/fonts.scss: Language not supported
- src/components/Sing/SequencerNote.vue: Evaluated as low risk
- src/components/Sing/SequencerToolPalette.vue: Evaluated as low risk
Comments skipped due to low confidence (1)
src/components/Sing/ToolBar/EditTargetSwicher.vue:35
- Attribute name 'transitionSide' should be 'transitionHide'.
transitionHide=""
内容
以下の機能を追加します
関連 Issue
ref #2039
close #2039
スクリーンショット・動画など
test-tools-scr.mp4
その他
ツールパレットの位置やUI構成については考慮必要かもしれないですが、
まずは機能追加を行いボリューム編集を取り込み後に適宜修正できればと考えています
Material Iconsに適切なものがなかったため
Material Symbolsを取り入れています(別Issueの方がよさそうでしたらおしらせください)
※ 再作成します