フルスクリーンモードを追加(#2251)

src/backend/browser/sandbox.ts

@@ -186,8 +186,11 @@ export const api: Sandbox = {
   minimizeWindow() {
     throw new Error(`Not supported on Browser version: minimizeWindow`);
   },
-  maximizeWindow() {
-    throw new Error(`Not supported on Browser version: maximizeWindow`);
+  toggleMaximizeWindow() {
+    throw new Error(`Not supported on Browser version: toggleMaximizeWindow`);
+  },
+  toggleFullScreen() {
+    throw new Error(`Not supported on Browser version: toggleFullScreen`);
   },
   /* eslint-disable no-console */ // ログの吐き出し先は console ぐらいしかないので、ここでは特例で許可している
   logError(...params: unknown[]) {

src/backend/electron/main.ts

@@ -616,14 +616,23 @@ registerIpcMainHandle<IpcMainHandle>({
   MINIMIZE_WINDOW: () => {
     win.minimize();
   },
-  MAXIMIZE_WINDOW: () => {
-    if (win.isMaximized()) {
+  TOGGLE_MAXIMIZE_WINDOW: () => {
+    // 全画面表示中は、全画面表示解除のみを行い、最大化解除処理は実施しない
+    if (win.isFullScreen()) {
+      win.setFullScreen(false);
+    } else if (win.isMaximized()) {
       win.unmaximize();
     } else {
       win.maximize();
     }
   },
-
+  TOGGLE_FULLSCREEN: () => {
+    if (win.isFullScreen()) {
+      win.setFullScreen(false);
+    } else {
+      win.setFullScreen(true);
+    }
+  },
   OPEN_LOG_DIRECTORY: () => {
     void shell.openPath(app.getPath("logs"));
   },

src/backend/electron/preload.ts

@@ -105,8 +105,12 @@ const api: Sandbox = {
     void ipcRendererInvokeProxy.MINIMIZE_WINDOW();
   },
 
-  maximizeWindow: () => {
-    void ipcRendererInvokeProxy.MAXIMIZE_WINDOW();
+  toggleMaximizeWindow: () => {
+    void ipcRendererInvokeProxy.TOGGLE_MAXIMIZE_WINDOW();
+  },
+
+  toggleFullScreen: () => {
+    void ipcRendererInvokeProxy.TOGGLE_FULLSCREEN();
   },
 
   logError: (...params) => {

src/components/Menu/MenuBar/MenuBar.vue

@@ -140,6 +140,10 @@ const openHelpDialog = () => {
   });
 };
 
+const toggleFullScreen = async () => {
+  window.backend.toggleFullScreen();
+};
+
 const createNewProject = async () => {
   if (!uiLocked.value) {
     await store.actions.CREATE_NEW_PROJECT({});
@@ -400,7 +404,16 @@ const menudata = computed<MenuItemData[]>(() => [
       closeAllDialog();
     },
     disableWhenUiLocked: false,
-    subMenu: [...props.viewSubMenuData],
+    subMenu: [
+      ...props.viewSubMenuData,
+      { type: "separator" },
+      {
+        type: "button",
+        label: "全画面表示を切り替え",
+        onClick: toggleFullScreen,
+        disableWhenUiLocked: false,
+      },
+    ],
   },
   {
     type: "root",
@@ -531,6 +544,10 @@ function registerHotkeyForAllEditors(action: Omit<HotkeyAction, "editor">) {
   });
 }
 
+registerHotkeyForAllEditors({
+  callback: toggleFullScreen,
+  name: "全画面表示を切り替え",
+});
 registerHotkeyForAllEditors({
   callback: createNewProject,
   name: "新規プロジェクト",

src/components/Menu/MenuBar/MinMaxCloseButtons.vue

@@ -37,7 +37,7 @@
       color="green"
       class="title-bar-buttons"
       aria-label="最大化"
-      @click="maximizeWindow()"
+      @click="toggleMaximizeWindow()"
     ></QBtn>
   </QBadge>
   <QBadge
@@ -57,24 +57,25 @@
     ></QBtn>
 
     <QBtn
-      v-if="!isMaximized"
+      v-if="isMaximized || isFullscreen"
       dense
       flat
-      icon="crop_square"
+      :icon="mdiWindowRestore"
       class="title-bar-buttons"
       aria-label="最大化"
-      @click="maximizeWindow()"
-    ></QBtn>
+      @click="toggleMaximizeWindow()"
+    >
+    </QBtn>
+
     <QBtn
       v-else
       dense
       flat
-      :icon="mdiWindowRestore"
+      icon="crop_square"
       class="title-bar-buttons"
       aria-label="最大化"
-      @click="maximizeWindow()"
-    >
-    </QBtn>
+      @click="toggleMaximizeWindow()"
+    ></QBtn>
 
     <QBtn
       dense
@@ -100,9 +101,10 @@ const closeWindow = async () => {
   void store.actions.CHECK_EDITED_AND_NOT_SAVE({ closeOrReload: "close" });
 };
 const minimizeWindow = () => window.backend.minimizeWindow();
-const maximizeWindow = () => window.backend.maximizeWindow();
+const toggleMaximizeWindow = () => window.backend.toggleMaximizeWindow();
 
 const isMaximized = computed(() => store.state.isMaximized);
+const isFullscreen = computed(() => store.getters.IS_FULLSCREEN);
 </script>
 
 <style scoped lang="scss">

src/type/ipc.ts

@@ -118,7 +118,12 @@ export type IpcIHData = {
     return: void;
   };
 
-  MAXIMIZE_WINDOW: {
+  TOGGLE_MAXIMIZE_WINDOW: {
+    args: [];
+    return: void;
+  };
+
+  TOGGLE_FULLSCREEN: {
     args: [];
     return: void;
   };

src/type/preload.ts

@@ -120,6 +120,10 @@ export const defaultHotkeySettings: HotkeySettingType[] = [
     action: "新規プロジェクト",
     combination: HotkeyCombination(!isMac ? "Ctrl N" : "Meta N"),
   },
+  {
+    action: "全画面表示を切り替え",
+    combination: HotkeyCombination(!isMac ? "F11" : "Ctrl Meta F"),
+  },
   {
     action: "プロジェクトを名前を付けて保存",
     combination: HotkeyCombination(!isMac ? "Ctrl Shift S" : "Shift Meta S"),
@@ -237,7 +241,8 @@ export interface Sandbox {
   }): void;
   closeWindow(): void;
   minimizeWindow(): void;
-  maximizeWindow(): void;
+  toggleMaximizeWindow(): void;
+  toggleFullScreen(): void;
   logError(...params: unknown[]): void;
   logWarn(...params: unknown[]): void;
   logInfo(...params: unknown[]): void;
@@ -434,6 +439,7 @@ export const hotkeyActionNameSchema = z.enum([
   "元に戻す",
   "やり直す",
   "新規プロジェクト",
+  "全画面表示を切り替え",
   "プロジェクトを名前を付けて保存",
   "プロジェクトを上書き保存",
   "プロジェクトを読み込む",