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.

Sign up for GitHub

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

Jump to bottom

キー割り当て画面からホットキー設定ダイアログを抜き出してコンポーネント化する #2209

Merged
merged 3 commits into from
Aug 10, 2024
Merged

キー割り当て画面からホットキー設定ダイアログを抜き出してコンポーネント化する #2209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ebb5f4
リファクタリング: キー割り当て画面からホットキー設定ダイアログを抜き出してコンポーネント化する
jdkfx Aug 7, 2024
3f92c0a
リファクタリング: 軽微な修正
jdkfx Aug 9, 2024
5e2af6d
コメントを追加
jdkfx Aug 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions src/components/Dialog/HotkeyRecordingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<template>
<QDialog
noEscDismiss
noShake
transitionShow="none"
transitionHide="none"
:modelValue="isHotkeyDialogOpened"
@update:modelValue="closeHotkeyDialog"
>
<QCard class="q-py-sm q-px-md">
<QCardSection align="center">
<div class="text-h6">ショートカットキーを入力してください</div>
</QCardSection>
<QCardSection align="center">
<template v-for="(hotkey, index) in lastRecord.split(' ')" :key="index">
<span v-if="index !== 0"> + </span>
<!--
Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
-->
<QChip :ripple="false" color="surface">
{{ hotkey === "Meta" ? "Cmd" : hotkey }}
</QChip>
</template>
<span v-if="lastRecord !== '' && confirmBtnEnabled"> +</span>
<div v-if="duplicatedHotkey != undefined" class="text-warning q-mt-lg">
<div class="text-warning">
ショートカットキーが次の操作と重複しています
</div>
<div class="q-mt-sm text-weight-bold text-warning">
「{{ duplicatedHotkey.action }}」
</div>
</div>
</QCardSection>
<QCardActions align="center">
<QBtn
padding="xs md"
label="キャンセル"
unelevated
color="surface"
textColor="display"
class="q-mt-sm"
@click="closeHotkeyDialog"
/>
<QBtn
padding="xs md"
label="ショートカットキーを未設定にする"
unelevated
color="surface"
textColor="display"
class="q-mt-sm"
@click="
emit('deleteHotkey', props.lastAction);
closeHotkeyDialog();
"
/>
<QBtn
v-if="duplicatedHotkey == undefined"
padding="xs md"
label="OK"
unelevated
color="primary"
textColor="display-on-primary"
class="q-mt-sm"
:disabled="confirmBtnEnabled"
@click="changeHotkeyAndClose"
/>
<QBtn
v-else
padding="xs md"
label="上書きする"
unelevated
color="primary"
textColor="display-on-primary"
class="q-mt-sm"
:disabled="confirmBtnEnabled"
@click="overwriteHotkeyAndClose"
/>
</QCardActions>
</QCard>
</QDialog>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from "vue";
import { HotkeyCombination } from "@/type/preload";

const props = defineProps<{
isHotkeyDialogOpened: boolean;
lastAction: string;
lastRecord: HotkeyCombination;
duplicatedHotkey?: { action: string };
}>();

const emit = defineEmits<{
(e: "update:modelValue", value: boolean): void;
(e: "deleteHotkey", action: string): void;
(
e: "changeHotkeySettings",
action: string,
combination: HotkeyCombination,
): void;
}>();

const confirmBtnEnabled = computed(() => {
return (
props.lastRecord == "" ||
["Ctrl", "Shift", "Alt", "Meta"].includes(
props.lastRecord.split(" ")[props.lastRecord.split(" ").length - 1],
)
);
});

const closeHotkeyDialog = () => {
emit("update:modelValue", false);
};

const changeHotkeyAndClose = () => {
emit("changeHotkeySettings", props.lastAction, props.lastRecord);
closeHotkeyDialog();
};

const overwriteHotkeyAndClose = () => {
if (props.duplicatedHotkey == undefined)
throw new Error("props.duplicatedHotkey == undefined");
emit("deleteHotkey", props.duplicatedHotkey.action);
changeHotkeyAndClose();
};
</script>
114 changes: 13 additions & 101 deletions src/components/Dialog/HotkeySettingDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,94 +118,20 @@
</QLayout>
</QDialog>

<QDialog
noEscDismiss
noShake
transitionShow="none"
transitionHide="none"
:modelValue="isHotkeyDialogOpened"
@update:modelValue="closeHotkeyDialog"
>
<QCard class="q-py-sm q-px-md">
<QCardSection align="center">
<div class="text-h6">ショートカットキーを入力してください</div>
</QCardSection>
<QCardSection align="center">
<template v-for="(hotkey, index) in lastRecord.split(' ')" :key="index">
<span v-if="index !== 0"> + </span>
<!--
Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
-->
<QChip :ripple="false" color="surface">
{{ hotkey === "Meta" ? "Cmd" : hotkey }}
</QChip>
</template>
<span v-if="lastRecord !== '' && confirmBtnEnabled"> +</span>
<div v-if="duplicatedHotkey != undefined" class="text-warning q-mt-lg">
<div class="text-warning">
ショートカットキーが次の操作と重複しています
</div>
<div class="q-mt-sm text-weight-bold text-warning">
「{{ duplicatedHotkey.action }}」
</div>
</div>
</QCardSection>
<QCardActions align="center">
<QBtn
padding="xs md"
label="キャンセル"
unelevated
color="surface"
textColor="display"
class="q-mt-sm"
@click="closeHotkeyDialog"
/>
<QBtn
padding="xs md"
label="ショートカットキーを未設定にする"
unelevated
color="surface"
textColor="display"
class="q-mt-sm"
@click="
deleteHotkey(lastAction);
closeHotkeyDialog();
"
/>
<QBtn
v-if="duplicatedHotkey == undefined"
padding="xs md"
label="OK"
unelevated
color="primary"
textColor="display-on-primary"
class="q-mt-sm"
:disabled="confirmBtnEnabled"
@click="
changeHotkeySettings(lastAction, lastRecord).then(() =>
closeHotkeyDialog(),
)
"
/>
<QBtn
v-else
padding="xs md"
label="上書きする"
unelevated
color="primary"
textColor="display-on-primary"
class="q-mt-sm"
:disabled="confirmBtnEnabled"
@click="solveDuplicated().then(() => closeHotkeyDialog())"
/>
</QCardActions>
</QCard>
</QDialog>
<HotkeyRecordingDialog
:isHotkeyDialogOpened
:lastAction
:lastRecord
:duplicatedHotkey
@update:modelValue="setHotkeyDialogOpened"
@deleteHotkey="deleteHotkey"
@changeHotkeySettings="changeHotkeySettings"
Comment on lines +127 to +128
Copy link
Member

Choose a reason for hiding this comment

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

（ただのコメントです）

これちょっとコンポーネント分けの難しいところというか、僕の中でも結論が出てないのですが、一般的に言われていることをちょっとご紹介してみます 🙏

子コンポーネントから親コンポーネントの処理を実行したいとき、今の実装のように具体的な処理をする関数を渡す方法と、イベントのみやり取りする方法の2つがあります。
例えばイベントペースでやり取りする場合、「追加ボタンが押された」「上書きボタンが押された」というコールバックを受け取って、親コンポーネント側が具体的な処理を書く感じです。

イベントをやり取りする方が疎結合になってテストがやりやすいため、一般的にはこっちのがいいのですが、今回の場合みたく処理が複雑に絡み合ってる場合は直接関数を渡しても良いかもです。
「イベントのやり取りにできないか」という考え方に立つと何か見えてくるかもです。
まあ慣れてきたらぜひ･･･！

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ありがとうございます！！今後の実装に活かしたいです！！

/>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import HotkeyRecordingDialog from "./HotkeyRecordingDialog.vue";
import { useStore } from "@/store";
import {
HotkeyActionNameType,
Expand Down Expand Up @@ -261,6 +187,7 @@ const hotkeyColumns = ref<
const lastAction = ref("");
const lastRecord = ref(HotkeyCombination(""));

// FIXME: HotkeyRecordingDialog内に移動する
const recordCombination = (event: KeyboardEvent) => {
if (!isHotkeyDialogOpened.value) {
return;
Expand All @@ -271,6 +198,7 @@ const recordCombination = (event: KeyboardEvent) => {
}
};

// FIXME: HotkeyRecordingDialog内に移動する
const { hotkeyManager } = useHotkeyManager();
const changeHotkeySettings = (
action: string,
Expand Down Expand Up @@ -327,29 +255,13 @@ const openHotkeyDialog = (action: string) => {
document.addEventListener("keydown", recordCombination);
};

const closeHotkeyDialog = () => {
const setHotkeyDialogOpened = () => {
lastAction.value = "";
lastRecord.value = HotkeyCombination("");
isHotkeyDialogOpened.value = false;
document.removeEventListener("keydown", recordCombination);
};

const solveDuplicated = () => {
if (duplicatedHotkey.value == undefined)
throw new Error("duplicatedHotkey.value == undefined");
deleteHotkey(duplicatedHotkey.value.action);
return changeHotkeySettings(lastAction.value, lastRecord.value);
};

const confirmBtnEnabled = computed(() => {
return (
lastRecord.value == "" ||
["Ctrl", "Shift", "Alt", "Meta"].includes(
lastRecord.value.split(" ")[lastRecord.value.split(" ").length - 1],
)
);
});

const resetHotkey = async (action: string) => {
const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
title: "ショートカットキーを初期値に戻します",
Expand Down
Loading