アプリのUIサイズを変更するショートカットの追加 (#2380)

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
VOICEVOX · Dec 3, 2024 · 7ba0863 · 7ba0863
1 parent 6e48451
commit 7ba0863
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 5 deletions.
diff --git a/public/howtouse.md b/public/howtouse.md
@@ -236,6 +236,10 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
   - 元に戻す
 - `Ctrl` + `Y`
   - やり直す
+- `Ctrl` + `+`
+  - 拡大
+- `Ctrl` + `-`
+  - 縮小
 - `Esc`
   - テキスト欄からカーソルを外す
 - 1

diff --git a/src/backend/browser/sandbox.ts b/src/backend/browser/sandbox.ts
@@ -192,6 +192,16 @@ export const api: Sandbox = {
   toggleFullScreen() {
     throw new Error(`Not supported on Browser version: toggleFullScreen`);
   },
+  zoomIn() {
+    throw new Error(`Not supported on Browser version: zoomIn`);
+  },
+  zoomOut() {
+    throw new Error(`Not supported on Browser version: zoomOut`);
+  },
+  zoomReset() {
+    throw new Error(`Not supported on Browser version: zoomReset`);
+  },
+
   /* eslint-disable no-console */ // ログの吐き出し先は console ぐらいしかないので、ここでは特例で許可している
   logError(...params: unknown[]) {
     console.error(...params);

diff --git a/src/backend/electron/main.ts b/src/backend/electron/main.ts
@@ -633,6 +633,22 @@ registerIpcMainHandle<IpcMainHandle>({
       win.setFullScreen(true);
     }
   },
+  /** UIの拡大 */
+  ZOOM_IN: () => {
+    win.webContents.setZoomFactor(
+      Math.min(Math.max(win.webContents.getZoomFactor() + 0.1, 0.5), 3),
+    );
+  },
+  /** UIの縮小 */
+  ZOOM_OUT: () => {
+    win.webContents.setZoomFactor(
+      Math.min(Math.max(win.webContents.getZoomFactor() - 0.1, 0.5), 3),
+    );
+  },
+  /** UIの拡大率リセット */
+  ZOOM_RESET: () => {
+    win.webContents.setZoomFactor(1);
+  },
   OPEN_LOG_DIRECTORY: () => {
     void shell.openPath(app.getPath("logs"));
   },

diff --git a/src/backend/electron/preload.ts b/src/backend/electron/preload.ts
@@ -113,6 +113,16 @@ const api: Sandbox = {
     void ipcRendererInvokeProxy.TOGGLE_FULLSCREEN();
   },
 
+  zoomIn: () => {
+    void ipcRendererInvokeProxy.ZOOM_IN();
+  },
+  zoomOut: () => {
+    void ipcRendererInvokeProxy.ZOOM_OUT();
+  },
+  zoomReset: () => {
+    void ipcRendererInvokeProxy.ZOOM_RESET();
+  },
+
   logError: (...params) => {
     console.error(...params);
     // 経緯 https://github.com/VOICEVOX/voicevox/pull/1620#discussion_r1371804569

diff --git a/src/components/Menu/MenuBar/MenuBar.vue b/src/components/Menu/MenuBar/MenuBar.vue
@@ -168,6 +168,21 @@ const importProject = () => {
   }
 };
 
+/** UIの拡大 */
+const zoomIn = async () => {
+  await store.actions.ZOOM_IN();
+};
+
+/** UIの縮小 */
+const zoomOut = async () => {
+  await store.actions.ZOOM_OUT();
+};
+
+/** UIの拡大率リセット */
+const zoomReset = async () => {
+  await store.actions.ZOOM_RESET();
+};
+
 // 「最近使ったプロジェクト」のメニュー
 const recentProjectsSubMenuData = ref<MenuItemData[]>([]);
 const updateRecentProjects = async () => {
@@ -413,6 +428,30 @@ const menudata = computed<MenuItemData[]>(() => [
         onClick: toggleFullScreen,
         disableWhenUiLocked: false,
       },
+      {
+        type: "button",
+        label: "拡大",
+        onClick: () => {
+          void zoomIn();
+        },
+        disableWhenUiLocked: false,
+      },
+      {
+        type: "button",
+        label: "縮小",
+        onClick: () => {
+          void zoomOut();
+        },
+        disableWhenUiLocked: false,
+      },
+      {
+        type: "button",
+        label: "拡大率のリセット",
+        onClick: () => {
+          void zoomReset();
+        },
+        disableWhenUiLocked: false,
+      },
     ],
   },
   {
@@ -544,10 +583,6 @@ function registerHotkeyForAllEditors(action: Omit<HotkeyAction, "editor">) {
   });
 }
 
-registerHotkeyForAllEditors({
-  callback: toggleFullScreen,
-  name: "全画面表示を切り替え",
-});
 registerHotkeyForAllEditors({
   callback: createNewProject,
   name: "新規プロジェクト",
@@ -564,6 +599,22 @@ registerHotkeyForAllEditors({
   callback: importProject,
   name: "プロジェクトを読み込む",
 });
+registerHotkeyForAllEditors({
+  callback: toggleFullScreen,
+  name: "全画面表示を切り替え",
+});
+registerHotkeyForAllEditors({
+  callback: zoomIn,
+  name: "拡大",
+});
+registerHotkeyForAllEditors({
+  callback: zoomOut,
+  name: "縮小",
+});
+registerHotkeyForAllEditors({
+  callback: zoomReset,
+  name: "拡大率のリセット",
+});
 </script>
 
 <style lang="scss">

diff --git a/src/store/type.ts b/src/store/type.ts
@@ -2091,6 +2091,18 @@ export type UiStoreTypes = {
     getter: boolean;
   };
 
+  ZOOM_IN: {
+    action(): void;
+  };
+
+  ZOOM_OUT: {
+    action(): void;
+  };
+
+  ZOOM_RESET: {
+    action(): void;
+  };
+
   CHECK_EDITED_AND_NOT_SAVE: {
     action(
       obj:

diff --git a/src/store/ui.ts b/src/store/ui.ts
@@ -395,6 +395,27 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  /** UIの拡大 */
+  ZOOM_IN: {
+    action() {
+      window.backend.zoomIn();
+    },
+  },
+
+  /** UIの縮小 */
+  ZOOM_OUT: {
+    action() {
+      window.backend.zoomOut();
+    },
+  },
+
+  /** UIの拡大率のリセット */
+  ZOOM_RESET: {
+    action() {
+      window.backend.zoomReset();
+    },
+  },
+
   CHECK_EDITED_AND_NOT_SAVE: {
     /**
      * プロジェクトファイル未保存の場合、保存するかどうかを確認する。

diff --git a/src/type/ipc.ts b/src/type/ipc.ts
@@ -128,6 +128,21 @@ export type IpcIHData = {
     return: void;
   };
 
+  ZOOM_IN: {
+    args: [];
+    return: void;
+  };
+
+  ZOOM_OUT: {
+    args: [];
+    return: void;
+  };
+
+  ZOOM_RESET: {
+    args: [];
+    return: void;
+  };
+
   OPEN_LOG_DIRECTORY: {
     args: [];
     return: void;

diff --git a/src/type/preload.ts b/src/type/preload.ts
@@ -116,6 +116,18 @@ export const defaultHotkeySettings: HotkeySettingType[] = [
     action: "やり直す",
     combination: HotkeyCombination(!isMac ? "Ctrl Y" : "Shift Meta Z"),
   },
+  {
+    action: "拡大",
+    combination: HotkeyCombination(!isMac ? "Ctrl +" : "Meta +"),
+  },
+  {
+    action: "縮小",
+    combination: HotkeyCombination(!isMac ? "Ctrl -" : "Meta -"),
+  },
+  {
+    action: "拡大率のリセット",
+    combination: HotkeyCombination(""),
+  },
   {
     action: "新規プロジェクト",
     combination: HotkeyCombination(!isMac ? "Ctrl N" : "Meta N"),
@@ -243,6 +255,9 @@ export interface Sandbox {
   minimizeWindow(): void;
   toggleMaximizeWindow(): void;
   toggleFullScreen(): void;
+  zoomIn(): void;
+  zoomOut(): void;
+  zoomReset(): void;
   logError(...params: unknown[]): void;
   logWarn(...params: unknown[]): void;
   logInfo(...params: unknown[]): void;
@@ -439,7 +454,6 @@ export const hotkeyActionNameSchema = z.enum([
   "元に戻す",
   "やり直す",
   "新規プロジェクト",
-  "全画面表示を切り替え",
   "プロジェクトを名前を付けて保存",
   "プロジェクトを上書き保存",
   "プロジェクトを読み込む",
@@ -462,6 +476,10 @@ export const hotkeyActionNameSchema = z.enum([
   `8${actionPostfixSelectNthCharacter}`,
   `9${actionPostfixSelectNthCharacter}`,
   `10${actionPostfixSelectNthCharacter}`,
+  "全画面表示を切り替え",
+  "拡大",
+  "縮小",
+  "拡大率のリセット",
 ]);
 
 export type HotkeyActionNameType = z.infer<typeof hotkeyActionNameSchema>;