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
| <QTooltip | ||
| anchor="center right" | ||
| self="center left" | ||
| :offset="[8, 0]" | ||
| :delay="500" | ||
| > | ||
| 選択優先 | ||
| </QTooltip> |
There was a problem hiding this comment.
アイコンからツールチップが出るようなアニメーションにすると分かりやすいかも！
今は右に表示されていて、上から来て上に去って行くのを、右に表示されるままで、左から来て左に去っていく感じをイメージしてます！
There was a problem hiding this comment.
@Hiroshiba
こちらその形で修正してみます！
あとは個人的には文字読むためのものは注意引く目的とかなければアニメーション切ってもいいかなーなどと
(ノートのエラーでそうしていたはず
There was a problem hiding this comment.
こちら他もソング側はアニメーションなしにしていたので、揃える形にいたしました…！
いったんこちらでどうでしょうか。
アニメーションつけるならQuasarのfadeが位置は変わらずいきなり表示されずで
注意を引きすぎない全体にいいかも…？
(いまいちQuasarデフォルト値のアニメーションが微妙なので別に定義したい感はあります)
src/store/type.ts
Outdated
| // NOTE: enumが妥当なのかは要検討 | ||
| export enum CursorState { | ||
| UNSET = "unset", | ||
| EW_RESIZE = "ew-resize", | ||
| MOVE = "move", | ||
| CROSSHAIR = "crosshair", | ||
| DRAW = "draw", | ||
| ERASE = "erase", | ||
| } |
There was a problem hiding this comment.
NOTEコメント、気になるようでしたらこっちに変えても良いかもですね！
export const CursorState = {
UNSET: "unset",
EW_RESIZE: "ew-resize",
MOVE: "move",
CROSSHAIR: "crosshair",
DRAW: "draw",
ERASE: "erase",
} as const;
export type CursorState = (typeof CursorState)[keyof typeof CursorState];There was a problem hiding this comment.
ありがとうございます、
他だとzod使用でenumだったのでいったんそちらに修正いたしました
| // カーソル状態の管理 | ||
| 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の引数に渡しちゃう感じで。
| .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=""
| // 編集対象 | ||
| const editTarget = computed({ | ||
| get: () => store.state.sequencerEditTarget, | ||
| set: (value) => void store.actions.SET_EDIT_TARGET({ editTarget: value }), | ||
| }); | ||
| // 選択中のノート編集ツール | ||
| const selectedNoteTool = computed({ | ||
| get: () => store.state.selectedNoteTool, | ||
| set: (value) => | ||
| void store.actions.SET_SELECTED_NOTE_TOOL({ selectedNoteTool: value }), | ||
| }); | ||
| // 選択中のピッチ編集ツール | ||
| const selectedPitchTool = computed({ | ||
| get: () => store.state.selectedPitchTool, | ||
| set: (value) => | ||
| void store.actions.SET_SELECTED_PITCH_TOOL({ selectedPitchTool: value }), | ||
| }); |
There was a problem hiding this comment.
ここのcomputedはgetのみにして良いと思います！
（set時はcomputedを介さずactionを直接呼ぶのが良いかなと思います）
There was a problem hiding this comment.
@sigprogramming
ありがとうございます、こちら修正しました！
There was a problem hiding this comment.
変更ありがとうございます！
set関数でsetする形になっていますが、watch等で直接actionを呼ぶ形でも良いかもです！
内容
以下の機能を追加します
関連 Issue
ref #2039
close #2039
スクリーンショット・動画など
test-tools-scr.mp4
その他
ツールパレットの位置やUI構成については考慮必要かもしれないですが、
まずは機能追加を行いボリューム編集を取り込み後に適宜修正できればと考えています
Material Iconsに適切なものがなかったため
Material Symbolsを取り入れています(別Issueの方がよさそうでしたらおしらせください)
※ 再作成します