From 0b5a4c25cc17b42a5c19e57e4a751ed1db9e0944 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 25 Nov 2021 10:02:40 +0800
Subject: [PATCH] feat: add full screen mode

---
 src/main/app.ts                      |  2 +-
 src/renderer/components/Layout.vue   |  5 +++--
 src/renderer/components/TitleBar.vue | 14 ++++++++++++++
 src/renderer/support/store.ts        |  4 ++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/main/app.ts b/src/main/app.ts
index 576474bb..a664b313 100644
--- a/src/main/app.ts
+++ b/src/main/app.ts
@@ -68,7 +68,7 @@ const createWindow = () => {
     frame: false,
     backgroundColor: '#282a2b',
     titleBarStyle: isMacos ? 'hidden' : undefined,
-    fullscreenable: false,
+    fullscreenable: true,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: true,
diff --git a/src/renderer/components/Layout.vue b/src/renderer/components/Layout.vue
index c2f4d445..1daa75ef 100644
--- a/src/renderer/components/Layout.vue
+++ b/src/renderer/components/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{layout: true, presentation, electron: isElectron}">
-    <div class="header" v-show="isElectron">
+    <div class="header" v-show="isElectron && !isFullscreen">
       <slot name="header"></slot>
     </div>
     <div class="main">
@@ -44,7 +44,7 @@ export default defineComponent({
   setup () {
     const store = useStore()
 
-    const { showView, showXterm, showSide, showEditor, presentation } = toRefs(store.state)
+    const { showView, showXterm, showSide, showEditor, presentation, isFullscreen } = toRefs(store.state)
 
     const aside = ref(null)
     const editor = ref(null)
@@ -114,6 +114,7 @@ export default defineComponent({
       showEditor,
       presentation,
       isElectron,
+      isFullscreen,
       aside,
       editor,
       terminal,
diff --git a/src/renderer/components/TitleBar.vue b/src/renderer/components/TitleBar.vue
index 563608b5..ac1cc395 100644
--- a/src/renderer/components/TitleBar.vue
+++ b/src/renderer/components/TitleBar.vue
@@ -54,6 +54,14 @@ export default defineComponent({
     const isAlwaysOnTop = ref(false)
     const isFocused = ref(false)
 
+    function handleFullscreenEnter () {
+      store.commit('setIsFullscreen', true)
+    }
+
+    function handleFullscreenLeave () {
+      store.commit('setIsFullscreen', false)
+    }
+
     function updateWindowStatus () {
       if (win) {
         isMaximized.value = win.isMaximized()
@@ -111,6 +119,10 @@ export default defineComponent({
         win.on('always-on-top-changed', updateWindowStatus)
         win.on('focus', updateWindowStatus)
         win.on('blur', updateWindowStatus)
+
+        // win.isFullScreen() not work
+        win.on('enter-full-screen', handleFullscreenEnter)
+        win.on('leave-full-screen', handleFullscreenLeave)
       }
     })
 
@@ -127,6 +139,8 @@ export default defineComponent({
         win.removeListener('always-on-top-changed', updateWindowStatus)
         win.removeListener('focus', updateWindowStatus)
         win.removeListener('blur', updateWindowStatus)
+        win.removeListener('enter-full-screen', handleFullscreenEnter)
+        win.removeListener('leave-full-screen', handleFullscreenLeave)
       }
 
       win = null
diff --git a/src/renderer/support/store.ts b/src/renderer/support/store.ts
index e5445aac..5b61d279 100644
--- a/src/renderer/support/store.ts
+++ b/src/renderer/support/store.ts
@@ -15,6 +15,7 @@ export const initState = {
   showSetting: false,
   showExport: false,
   presentation: false,
+  isFullscreen: false,
   currentContent: '',
   currentRepo: storage.get<Repo>('currentRepo'),
   currentFile: null as Doc | null,
@@ -64,6 +65,9 @@ export default createStore({
     setPresentation (state, data) {
       state.presentation = data
     },
+    setIsFullscreen (state, data) {
+      state.isFullscreen = data
+    },
     setAutoPreview (state, data) {
       state.autoPreview = data
     },