perf: use goroutine to implement window resize events.

perf: optimized window display in fullscreen and maximized modes. #19

.gitignore

@@ -5,3 +5,4 @@ frontend/wailsjs
 design/
 .vscode
 .idea
+test

backend/services/preferences_service.go

@@ -113,10 +113,12 @@ func (p *preferencesService) GetAppVersion() (resp types.JSResp) {
 }
 
 func (p *preferencesService) SaveWindowSize(width, height int) {
-	p.UpdatePreferences(map[string]any{
+	if width >= consts.DEFAULT_WINDOW_WIDTH && height >= consts.DEFAULT_WINDOW_HEIGHT {
-		"behavior.windowWidth":  width,
+		p.UpdatePreferences(map[string]any{
-		"behavior.windowHeight": height,
+			"behavior.windowWidth":  width,
-	})
+			"behavior.windowHeight": height,
+		})
+	}
 }
 
 func (p *preferencesService) GetWindowSize() (width, height int) {

backend/services/system_dialog.go

@@ -1,47 +0,0 @@
-package services
-
-import (
-	"context"
-	"github.com/wailsapp/wails/v2/pkg/runtime"
-	"log"
-	"sync"
-	"tinyrdm/backend/types"
-)
-
-type systemService struct {
-	ctx context.Context
-}
-
-var system *systemService
-var onceSystem sync.Once
-
-func System() *systemService {
-	if system == nil {
-		onceSystem.Do(func() {
-			system = &systemService{}
-		})
-	}
-	return system
-}
-
-func (s *systemService) Start(ctx context.Context) {
-	s.ctx = ctx
-}
-
-// SelectFile open file dialog to select a file
-func (s *systemService) SelectFile(title string) (resp types.JSResp) {
-	filepath, err := runtime.OpenFileDialog(s.ctx, runtime.OpenDialogOptions{
-		Title:           title,
-		ShowHiddenFiles: true,
-	})
-	if err != nil {
-		log.Println(err)
-		resp.Msg = err.Error()
-		return
-	}
-	resp.Success = true
-	resp.Data = map[string]any{
-		"path": filepath,
-	}
-	return
-}

backend/services/system_service.go

@@ -0,0 +1,105 @@
+package services
+
+import (
+	"context"
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+	"log"
+	"sync"
+	"time"
+	"tinyrdm/backend/types"
+)
+
+type systemService struct {
+	ctx context.Context
+}
+
+var system *systemService
+var onceSystem sync.Once
+
+func System() *systemService {
+	if system == nil {
+		onceSystem.Do(func() {
+			system = &systemService{}
+			go system.loopWindowEvent()
+		})
+	}
+	return system
+}
+
+func (s *systemService) Start(ctx context.Context) {
+	s.ctx = ctx
+}
+
+// SelectFile open file dialog to select a file
+func (s *systemService) SelectFile(title string) (resp types.JSResp) {
+	filepath, err := runtime.OpenFileDialog(s.ctx, runtime.OpenDialogOptions{
+		Title:           title,
+		ShowHiddenFiles: true,
+	})
+	if err != nil {
+		log.Println(err)
+		resp.Msg = err.Error()
+		return
+	}
+	resp.Success = true
+	resp.Data = map[string]any{
+		"path": filepath,
+	}
+	return
+}
+
+func (s *systemService) loopWindowEvent() {
+	var fullscreen, maximised, minimised, normal bool
+	var width, height int
+	var dirty bool
+	for {
+		time.Sleep(300 * time.Millisecond)
+		if s.ctx == nil {
+			continue
+		}
+
+		dirty = false
+		if f := runtime.WindowIsFullscreen(s.ctx); f != fullscreen {
+			// full-screen switched
+			fullscreen = f
+			dirty = true
+		}
+
+		if w, h := runtime.WindowGetSize(s.ctx); w != width || h != height {
+			// window size changed
+			width, height = w, h
+			dirty = true
+		}
+
+		if m := runtime.WindowIsMaximised(s.ctx); m != maximised {
+			maximised = m
+			dirty = true
+		}
+
+		if m := runtime.WindowIsMinimised(s.ctx); m != minimised {
+			minimised = m
+			dirty = true
+		}
+
+		if n := runtime.WindowIsNormal(s.ctx); n != normal {
+			normal = n
+			dirty = true
+		}
+
+		if dirty {
+			runtime.EventsEmit(s.ctx, "window_changed", map[string]any{
+				"fullscreen": fullscreen,
+				"width":      width,
+				"height":     height,
+				"maximised":  maximised,
+				"minimised":  minimised,
+				"normal":     normal,
+			})
+
+			if !fullscreen && !minimised {
+				// save window size
+				Preferences().SaveWindowSize(width, height)
+			}
+		}
+	}
+}

frontend/src/AppContent.vue

@@ -1,7 +1,7 @@
 <script setup>
 import ContentPane from './components/content/ContentPane.vue'
 import BrowserPane from './components/sidebar/BrowserPane.vue'
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { debounce, get } from 'lodash'
 import { useThemeVars } from 'naive-ui'
 import NavMenu from './components/sidebar/NavMenu.vue'
@@ -13,7 +13,7 @@ import useConnectionStore from './stores/connections.js'
 import ContentLogPane from './components/content/ContentLogPane.vue'
 import ContentValueTab from '@/components/content/ContentValueTab.vue'
 import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue'
-import { WindowIsFullscreen, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
+import { EventsOn, WindowIsFullscreen, WindowIsMaximised, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
 import { isMacOS } from '@/utils/platform.js'
 import iconUrl from '@/assets/images/icon.png'
 
@@ -37,11 +37,11 @@ const logPaneRef = ref(null)
 // const preferences = ref({})
 // provide('preferences', preferences)
 
-const saveWidth = debounce(prefStore.savePreferences, 1000, { trailing: true })
+const saveSidebarWidth = debounce(prefStore.savePreferences, 1000, { trailing: true })
 const handleResize = (evt) => {
     if (data.resizing) {
         prefStore.setAsideWidth(Math.max(evt.clientX - data.navMenuWidth, 300))
-        saveWidth()
+        saveSidebarWidth()
     }
 }
 
@@ -49,7 +49,6 @@ const stopResize = () => {
     data.resizing = false
     document.removeEventListener('mousemove', handleResize)
     document.removeEventListener('mouseup', stopResize)
-    // TODO: Save sidebar x-position
 }
 
 const startResize = () => {
@@ -75,20 +74,54 @@ watch(
     },
 )
 
-const borderRadius = computed(() => {
-    // FIXME: cannot get full screen status sync?
-    // if (isMacOS()) {
-    //     return WindowIsFullscreen().then((full) => {
-    //         return full ? '0' : '10px'
-    //     })
-    // }
-    return '10px'
-})
-
 const border = computed(() => {
     const color = isMacOS() && false ? '#0000' : themeVars.value.borderColor
     return `1px solid ${color}`
 })
+
+const borderRadius = ref(10)
+const logoPaddingLeft = ref(10)
+const maximised = ref(false)
+const toggleWindowRadius = (on) => {
+    borderRadius.value = on ? 10 : 0
+}
+
+const onToggleFullscreen = (fullscreen) => {
+    if (fullscreen) {
+        logoPaddingLeft.value = 10
+        toggleWindowRadius(false)
+    } else {
+        logoPaddingLeft.value = isMacOS() ? 70 : 10
+        toggleWindowRadius(true)
+    }
+}
+
+const onToggleMaximize = (isMaximised) => {
+    if (isMaximised) {
+        maximised.value = true
+        if (!isMacOS()) {
+            toggleWindowRadius(false)
+        }
+    } else {
+        maximised.value = false
+        if (!isMacOS()) {
+            toggleWindowRadius(true)
+        }
+    }
+}
+
+EventsOn('window_changed', (info) => {
+    const { fullscreen, maximised } = info
+    onToggleFullscreen(fullscreen === true)
+    onToggleMaximize(maximised)
+})
+
+onMounted(async () => {
+    const fullscreen = await WindowIsFullscreen()
+    onToggleFullscreen(fullscreen === true)
+    const maximised = await WindowIsMaximised()
+    onToggleMaximize(maximised)
+})
 </script>
 
 <template>
@@ -96,7 +129,7 @@ const border = computed(() => {
     <n-spin
         :show="props.loading"
         :theme-overrides="{ opacitySpinning: 0 }"
-        :style="{ backgroundColor: themeVars.bodyColor, borderRadius, border }">
+        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }">
         <div
             id="app-content-wrapper"
             class="flex-box-v"
@@ -116,7 +149,7 @@ const border = computed(() => {
                     id="app-toolbar-title"
                     :style="{
                         width: `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`,
-                        paddingLeft: isMacOS() ? '70px' : '10px',
+                        paddingLeft: `${logoPaddingLeft}px`,
                     }">
                     <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
                         <n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
@@ -143,7 +176,11 @@ const border = computed(() => {
                 </div>
                 <div class="flex-item-expand"></div>
                 <!-- simulate window control buttons -->
-                <toolbar-control-widget v-if="!isMacOS()" :size="data.toolbarHeight" style="align-self: flex-start" />
+                <toolbar-control-widget
+                    v-if="!isMacOS()"
+                    :size="data.toolbarHeight"
+                    :maximised="maximised"
+                    style="align-self: flex-start" />
             </div>
 
             <!-- content -->

frontend/src/components/common/ToolbarControlWidget.vue

@@ -4,7 +4,8 @@ import WindowMax from '@/components/icons/WindowMax.vue'
 import WindowClose from '@/components/icons/WindowClose.vue'
 import { computed } from 'vue'
 import { useThemeVars } from 'naive-ui'
-import { Quit, WindowIsMaximised, WindowMinimise, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
+import { Quit, WindowMinimise, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
+import WindowRestore from '@/components/icons/WindowRestore.vue'
 
 const themeVars = useThemeVars()
 const props = defineProps({
@@ -12,6 +13,9 @@ const props = defineProps({
         type: Number,
         default: 35,
     },
+    maximised: {
+        type: Boolean,
+    },
 })
 
 const buttonSize = computed(() => {
@@ -33,7 +37,7 @@ const handleClose = () => {
 
 <template>
     <n-space :wrap-item="false" align="center" justify="center" :size="0">
-        <n-tooltip :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000">
             {{ $t('menu.minimise') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMinimise">
@@ -41,15 +45,23 @@ const handleClose = () => {
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000" v-if="maximised">
-            {{ WindowIsMaximised() ? $t('menu.restore') : $t('menu.maximise') }}
+            {{ $t('menu.restore') }}
+            <template #trigger>
+                <div class="btn-wrapper" @click="handleMaximise">
+                    <window-restore />
+                </div>
+            </template>
+        </n-tooltip>
+        <n-tooltip :show-arrow="false" :delay="1000" v-else>
+            {{ $t('menu.maximise') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleMaximise">
                     <window-max />
                 </div>
             </template>
         </n-tooltip>
-        <n-tooltip :show-arrow="false">
+        <n-tooltip :show-arrow="false" :delay="1000">
             {{ $t('menu.close') }}
             <template #trigger>
                 <div class="btn-wrapper" @click="handleClose">

frontend/src/components/icons/WindowClose.vue

@@ -2,17 +2,15 @@
 const props = defineProps({
     size: {
         type: [Number, String],
-        default: 12,
+        default: 14,
     },
 })
 </script>
 
 <template>
-    <svg aria-hidden="false" :width="props.size" :height="props.size" viewBox="0 0 12 12">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <polygon
+        <path d="M8 8L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-            fill="currentColor"
+        <path d="M8 40L40 8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-            fill-rule="evenodd"
-            points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon>
     </svg>
 </template>
 

frontend/src/components/icons/WindowMax.vue

@@ -2,14 +2,18 @@
 const props = defineProps({
     size: {
         type: [Number, String],
-        default: 12,
+        default: 14,
     },
 })
 </script>
 
 <template>
-    <svg aria-hidden="false" :width="props.size" :height="props.size" viewBox="0 0 12 12">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect>
+        <path
+            d="M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="4" />
     </svg>
 </template>
 

frontend/src/components/icons/WindowMin.vue

@@ -2,14 +2,14 @@
 const props = defineProps({
     size: {
         type: [Number, String],
-        default: 12,
+        default: 14,
     },
 })
 </script>
 
 <template>
-    <svg aria-hidden="false" :width="props.size" :height="props.size" viewBox="0 0 12 12">
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
-        <rect fill="currentColor" width="10" height="1" x="1" y="6"></rect>
+        <path d="M8 24L40 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
 </template>
 

frontend/src/components/icons/WindowRestore.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+    size: {
+        type: [Number, String],
+        default: 14,
+    },
+})
+</script>
+
+<template>
+    <svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
+        <path
+            d="M13 12.4316V7.8125C13 6.2592 14.2592 5 15.8125 5H40.1875C41.7408 5 43 6.2592 43 7.8125V32.1875C43 33.7408 41.7408 35 40.1875 35H35.5163"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M32.1875 13H7.8125C6.2592 13 5 14.2592 5 15.8125V40.1875C5 41.7408 6.2592 43 7.8125 43H32.1875C33.7408 43 35 41.7408 35 40.1875V15.8125C35 14.2592 33.7408 13 32.1875 13Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

main.go

@@ -10,7 +10,6 @@ import (
 	"github.com/wailsapp/wails/v2/pkg/options/linux"
 	"github.com/wailsapp/wails/v2/pkg/options/mac"
 	"github.com/wailsapp/wails/v2/pkg/options/windows"
-	runtime2 "github.com/wailsapp/wails/v2/pkg/runtime"
 	"runtime"
 	"tinyrdm/backend/consts"
 	"tinyrdm/backend/services"
@@ -57,14 +56,6 @@ func main() {
 			sysSvc.Start(ctx)
 			connSvc.Start(ctx)
 		},
-		OnBeforeClose: func(ctx context.Context) (prevent bool) {
-			// save current window size
-			width, height := runtime2.WindowGetSize(ctx)
-			if width > 0 && height > 0 {
-				prefSvc.SaveWindowSize(width, height)
-			}
-			return false
-		},
 		OnShutdown: func(ctx context.Context) {
 			connSvc.Stop(ctx)
 		},