Add: BPM・拍子変更機能を追加 #2303
Add: BPM・拍子変更機能を追加 #2303
Conversation
| () => lastTimeSignature.value.measureNumber === currentMeasure.value, | ||
| ); | ||
|
|
||
| const contextMenuHeader = computed(() => `${currentMeasure.value}小節目`); |
There was a problem hiding this comment.
ここは #2306 の形式で出そうかな～って思ってます。
sevenc-nanashi
requested review from
Hiroshiba
and removed request for
a team
| <QSelect | ||
| v-model="timeSignatureChange.beats" | ||
| :options="beatsOptions" | ||
| mapOptions | ||
| emitValue | ||
| dense | ||
| userInputs | ||
| optionsDense | ||
| transitionShow="none" | ||
| transitionHide="none" | ||
| class="value-input" | ||
| aria-label="拍子の分子" | ||
| /> |
There was a problem hiding this comment.
分子のQSelectですが、ドロップダウンが下ではなく上に表示されて選択しづらくなってるかも。
type="number"のQInputにするのが良さそうに思いました。
There was a problem hiding this comment.
確かにちょっと気になるなと思いました！
QInputにすれば上下矢印ボタンが出てくるのでコンパクトでいいかもですね！
あるいは高さをちょっと制限してあげると大体の UI で下に出てくれるかも。
popupContentStyleとかpopupContentClassでheight: を指定してあげると高さ制限できそうでした！
There was a problem hiding this comment.
@sevenc-nanashi
こちら実装ありがとうございます！グリッドのあたりなどすごい＆storybook便利です…！
動作についてざっと確認しましたが問題なかったです。
(テンポ変更できてとても楽しい)
LGTMです！
ちょっと変更するならの参考意見
エンベロープとかやらない・レーン分けたりしない前提で
いちおうUI面で少ない変更でできそうな案として:
- メニュー上の選択は拍子もしくはテンポの片方だがモーダルでは同時編集できる
- 削除に迷う(両方OFFで削除に見えない)
のがありそうなので
ルーラークリック時のメニューにおいて:
- 新規追加:「テンポ・拍子の追加」で1つにまとめる / モーダル内ではデフォルト両方ON
- 編集:「テンポ・拍子の編集」として1つにまとめる
- 削除: クリックで該当部のテンポ・拍子を削除
というのはどうでしょうか。
むろん現状でも問題ないと思います！
表示の調整
ルーラー全体として考えないといけないかな？なので
表示面の細かい調整は
ループ実装のときにあわせてできれば@sevenc-nanacさんと協力して修正できればと思っています…！
たぶん変更しなきゃいけない点として:
ピッチをテンポ・拍子変更にあわせて描画変えなきゃなのはありますが
こちらは別途がよさそうかなと個人的には！
|
@romot-co さんの ちょっと素人的意見なので微妙なこと言ってるかもなのですが、テンポと拍子って大体の場合片方だけいじりたいことの方が多いのかな～と思っていて、だとしたら興味あるものだけを表示して操作可能にした方がわかりやすいかも････？と個人的に思いました！ ただ |
| }" | ||
| @click="onClick" | ||
| @contextmenu="onContextMenu" | ||
| @mousemove="updateHoveredTempoOrTimeSignatureChange" |
There was a problem hiding this comment.
（ただのコメントです）
tempoOrTimeSignatureChange、もっと縮めたい気持ちありますね！
動画編集でよくある感じだと、keypointとか？
まあ議論大変だしいったんこのでも良さそう！
There was a problem hiding this comment.
There was a problem hiding this comment.
DAWではAメロ、Bメロ、サビ等の開始位置に目印をつけることができて、目印のことをマーカーと呼びます。
https://www.g200kg.com/jp/docs/dic/marker.html
このマーカーと被るので（後々のことを考えて）、別の名前が良いかもと少し思いました。
（他に良さそうな名前がなければマーカーでも良いと思います）
There was a problem hiding this comment.
マーカーありだと思います！
まあSigさんの仰るとおり、任意位置につけれる、プログラムにとって意味のないラベルみたいなののイメージはあるかも。
けどたぶんこの名称はこのコンポーネントで閉じる気がするので、意外となんでも良いのかも。
別案として、「転換点」だと「Turning Point」（ターニングポイント）ですが、ちょっとドラマチックすぎる気がしますね･･･。
ということでChangingPointとかChangePointとかどうでしょう！
| displayType: "full" | "ellipsis" | "hidden"; | ||
| }; | ||
|
|
||
| const hoveredTempoOrTimeSignatureChange = ref<number | null>(null); |
There was a problem hiding this comment.
この名前だと型はTempoOrTimeSignatureChangeが良さそう？
| @click.stop=" | ||
| onTempoOrTimeSignatureChangeClick( | ||
| $event, | ||
| tempoOrTimeSignatureChange, | ||
| ) | ||
| " |
There was a problem hiding this comment.
ちょっとUI迷ってるのですが、左クリックと右クリックが同じ動作なの不思議かもとちょっと思いました。
可能なら、左クリックは「編集」開始が良いかも･･･？
ただその場合だと、一括編集UIを用意するか、個別にクリック可能にする必要が出てきそう。。。。
うーん！ 一旦コメントまで🙇
（意見聞きたみ！）
| <slot | ||
| name="contextMenu" | ||
| :header="contextMenuHeader" | ||
| :menudata="contextMenudata" | ||
| :onContextMenuMounted="(el) => (contextMenu = el)" | ||
| /> |
There was a problem hiding this comment.
Contextを親から渡してる理由聞きたみ･･･！
（子側にもたせるとかなり簡潔になりそうなので）
There was a problem hiding this comment.
ContextMenuが内部でStoreを使ってるからですね。これをしないとStorybookが死にます
There was a problem hiding this comment.
あーーーなるほどです！！！！！
これ理想的にはContextMenuもPresentationがあって、SequencerRuler/Presentation.vueはそれを参照する形が最高な気がします。
すみません、ここかなり複雑になってしまっているのでリファクタリングお願いしてもいいでしょうか 🙇
このプルリクエストで変更してしまってもいいと思います。最高なのは別プルリクエストになってることですが･･･！
（かなりもう長くなっているので経験上分けた方が色々楽かもではある）
| const screenshots = await fs.readdir( | ||
| `${import.meta.dirname}/スクリーンショット.spec.mts-snapshots/`, | ||
| ); | ||
| for (const screenshot of screenshots) { | ||
| if (!currentStories.some((story) => screenshot.startsWith(story.id))) { | ||
| await fs.unlink( | ||
| `${import.meta.dirname}/スクリーンショット.spec.mts-snapshots/${screenshot}`, | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
（ただのコメントです）
不要なの消えるようにしてくださった感じですよね、ありがとうございます！！！ 便利！！
もしよければこんな感じでプルリクと完全に分けられるものはサクッと別プルリクエストいただけると結構嬉しかったりします！
まあ割とでかいものにくっついてるとなかなかマージされなかったりするので、くらいの違いですが･･･！
とはいえmainブランチと行き来するのちょっと面倒だとは思うので、こんな感じで何かにくっつけてでももちろんかなりありがたいです 🙏
src/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.vue
Show resolved
Hide resolved
There was a problem hiding this comment.
かなり迷いどころですが、このコンポーネントはさすがにSingの下にあった方が管理しやすいかも。
見てみた感じ、SongExportもSing側に移しても良さそうかも。
まあマージ後の気がついたタイミングで移して行くとかでも良さそう！
一緒につっこむべきというよりは、現状は実質両方編集できる形なのでそれを素直に表したほうがいいかも？ぐらいの意図となります！ おっしゃるとおりいじりたいものだけいじれればいい形かと思います！ 個人的には拍子・テンポ・あとキーなどは別個に扱って、 各要素追加できる・編集できる・削除できる・移動できる…などを考えると どちらかというと、削除わかりづらいかも？が大きかったので、
このメニューに削除追加する形でよさそうです…！ |
|
@romot-co |
|
@sigprogramming x |
| const getTextWidthCacheKey = (text: string, font: FontSpecification) => | ||
| `${text}-${font.fontFamily}-${font.fontWeight}-${font.fontSize}`; | ||
|
|
||
| const textWidthCache = new Map<string, number>(); |
There was a problem hiding this comment.
ブランド型にするとミスを無くせるかも。
意外と簡単にできたりします。
| const getTextWidthCacheKey = (text: string, font: FontSpecification) => | |
| `${text}-${font.fontFamily}-${font.fontWeight}-${font.fontSize}`; | |
| const textWidthCache = new Map<string, number>(); | |
| type CacheKey = string & { __brand: "CacheKey" }; | |
| const getTextWidthCacheKey = (text: string, font: FontSpecification) => | |
| `${text}-${font.fontFamily}-${font.fontWeight}-${font.fontSize}` as CacheKey; | |
| const textWidthCache = new Map<CacheKey, number>(); |
| }" | ||
| @click="onClick" | ||
| @contextmenu="onContextMenu" | ||
| @mousemove="updateHoveredTempoOrTimeSignatureChange" |
There was a problem hiding this comment.
マーカーありだと思います！
まあSigさんの仰るとおり、任意位置につけれる、プログラムにとって意味のないラベルみたいなののイメージはあるかも。
けどたぶんこの名称はこのコンポーネントで閉じる気がするので、意外となんでも良いのかも。
別案として、「転換点」だと「Turning Point」（ターニングポイント）ですが、ちょっとドラマチックすぎる気がしますね･･･。
ということでChangingPointとかChangePointとかどうでしょう！
内容
タイトル通りです。
関連 Issue
close #1919
スクリーンショット・動画など
その他
現時点でもダイアログの挙動自体はStorybookから確認出来ます。