Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change: ショートカットキー周りをHotkeyManagerにまとめる #1822

Merged
merged 52 commits into from
Feb 21, 2024

Conversation

sevenc-nanashi
Copy link
Member

@sevenc-nanashi sevenc-nanashi commented Feb 3, 2024

内容

ショートカットキー周りをまとめたHotkeyManagerを作りました。
このPRはソングエディタのショートカットキー構築の一環です。

関連 Issue

スクリーンショット・動画など

(なし)

その他

(なし)

@sevenc-nanashi sevenc-nanashi requested a review from a team as a code owner February 3, 2024 16:52
@sevenc-nanashi sevenc-nanashi requested review from y-chan and removed request for a team February 3, 2024 16:52
@@ -110,7 +110,6 @@
"license-checker": "25.0.1",
"markdownlint": "0.31.1",
"markdownlint-cli": "0.37.0",
"mousetrap": "1.6.5",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mousetrap、

  • 4年以上コミットがない
  • テキスト欄で効くように出来ない(stopCallback試したけどダメだった)

ので、代替に挙げられているhotkey-jsを使う用にしました。

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

良いですね!!!!
ちょっと設計周りで提案があるのでコメントしてみました!
あとはだいぶ細かいところのコメントです 🙏

src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
@Hiroshiba Hiroshiba mentioned this pull request Feb 9, 2024
3 tasks
Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ほぼLGTMです!!

わかりやすいコードに感じました!
まだ実行チェックできてないのでそこだけあとで確認させてください!!

src/components/App.vue Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
@sevenc-nanashi
Copy link
Member Author

コメントとかを足しました。

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ちょっと変数名があやふやになっちゃって誤解を招くコードになっているかもなので調整お願いできると 🙇

src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
@sevenc-nanashi
Copy link
Member Author

sevenc-nanashi commented Feb 15, 2024

治ったと思います。

onMounted/onUnmountedはテストだと動かないじゃん...

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onMountedとonUnmountedをDIする、なるほどです。
これだとunregisterのテストが書けてないかもです。

更に良さそうな実装を思いついたのでご提案です!!

src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
sevenc-nanashi and others added 2 commits February 16, 2024 22:17
Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>
Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>
@sevenc-nanashi
Copy link
Member Author

良い感じになったと思います。

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど!!! nameとeditorをまとまりにする感じですね!! 良さそうに思いました!!

ちょっと各所にちらばる .name == .name && .editor == .editor をまとめといた方が良さそうに思いました。

nameとeditorをまとめてActionTargetとかにし、isSameTarget(a, b)関数を用意して、filter内でその関数を使うのはどうでしょう。
あるいはtargetを指定してgetする関数とdeleteする関数を作っちゃうのもありかも。
こんな感じ。

getWithTarget<T extends ActionTarget>(objs: T[], target: ActionTarget): T
omitWithTarget<T extends ActionTarget>(objs: T[], target: ActionTarget): T[]

src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
@sevenc-nanashi
Copy link
Member Author

高階関数として実装してみました。

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTMです!!

こちらで1回リファクタリングしてプッシュしてみます!
ので @sevenc-nanashi 側でレビューいただいて、もらえなければマージさせていただければ!

src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
Comment on lines +43 to +44
/** エディタの種類 */
editor: "talk" | "song";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この引数を受け取る設計、本当は良くないのですが、今の状態からだとベストな気がしました!
MenuBarを1つにしたほうが良いと思うので、ちょっとそれはそれでissueを作ってみました!

src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
src/plugins/hotkeyPlugin.ts Outdated Show resolved Hide resolved
describe("設定変更", () => {
let hotkeyManager: HotkeyManager;
let dummyHotkeysJs: DummyHotkeysJs;
beforeEach(() => {
Copy link
Member

@Hiroshiba Hiroshiba Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これはちょっと自信がないので、コメントだけ・・・!!

beforeEachで作ったデータを各々のテストで使う形にすると、大元のデータを変えたくなった時に結構しんどくなっちゃうんですよね。
あと前提条件(データ作成部分)とテスト箇所が離れちゃうので、間違ったテストを書いていても気づきにくいというのもあります。

どちらかというとデータを作る便利関数を作ってあげて、必要最低限のテストを書くのが良い気がしました!
今回だとactionやcombinationは自動生成できるので。

それはそれとして実利用想定の大きめのテストあった方がいいと思うので、登録したり消したりなんか変な操作したりといった一連の操作を行うテストもあってもいいかも。

@sevenc-nanashi
Copy link
Member Author

ほんのり弄りました。

Comment on lines +84 to +95
const callback = () => {
/* noop */
};
const dummyAction: HotkeyAction = {
editor: "talk",
name: "音声書き出し",
callback,
};
const createDummySetting = (combination: string): HotkeySettingType => ({
action: "音声書き出し",
combination,
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(変えるほどのことでもないのでコメントだけ)
影響範囲と同じスコープ(describe("設定変更", () => {の中)で定義する形もありかもですね!

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

更新ありがとうございます!マージします!!

やりとり長くなってしまいましたがお付き合いいただきありがとうございました!!
個人的にはかなり良い設計なのではと思っています。
まだまだ改善できる部分いっぱいあると思うので、もしなにか思いついたらぜひ!!

@Hiroshiba
Copy link
Member

マージ後にすみません。。。macで大半のショートカットキーが使えなくなったことに気づきました 🙇

おそらくmetaが使えなくなったことが原因だと思います。
たぶんhotkeys-jsを続投する形で良いと思うのですが、まあどうしようかなという感じです。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants