lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: use goroutine to implement window resize events. 

perf: optimized window display in fullscreen and maximized modes. #19
This commit is contained in:
tiny-craft 2023-10-15 04:02:09 +08:00
parent 2db858ba9e
commit ad9f13d557
11 changed files with 225 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

10
backend/services/preferences_service.go
View File

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

47
backend/services/system_dialog.go
View File

@ -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
}

105
backend/services/system_service.go Normal file
View File

@ -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)
}
}
}
}

73
frontend/src/AppContent.vue
View File

@ -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 -->

22
frontend/src/components/common/ToolbarControlWidget.vue
View File

@ -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">
{{ WindowIsMaximised() ? $t('menu.restore') : $t('menu.maximise') }}
<n-tooltip :show-arrow="false" :delay="1000" v-if="maximised">
{{ $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">

10
frontend/src/components/icons/WindowClose.vue
View File

@ -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">
<polygon
fill="currentColor"
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 :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
<path d="M8 8L40 40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 40L40 8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>

10
frontend/src/components/icons/WindowMax.vue
View File

@ -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">
<rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect>
<svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
<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>

6
frontend/src/components/icons/WindowMin.vue
View File

@ -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">
<rect fill="currentColor" width="10" height="1" x="1" y="6"></rect>
<svg :width="props.size" :height="props.size" viewBox="0 0 48 48" fill="none">
<path d="M8 24L40 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>

27
frontend/src/components/icons/WindowRestore.vue Normal file
View File

@ -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>

9
main.go
View File

@ -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)
},