[desktop]: Support image fullscreen

tiagohm · Apr 24, 2024 · 27f9b6a · 27f9b6a
1 parent d597fd2
commit 27f9b6a
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 2 deletions.
diff --git a/desktop/app/main.ts b/desktop/app/main.ts
@@ -501,6 +501,14 @@ try {
         return true
     })
 
+    ipcMain.handle('WINDOW.FULLSCREEN', (event, enabled?: boolean) => {
+        const window = findWindowById(event.sender.id)?.window
+        if (!window) return false
+        const flag = enabled ?? !window.isFullScreen()
+        window.setFullScreen(flag)
+        return flag
+    })
+
     ipcMain.handle('WINDOW.CLOSE', (event, data: CloseWindow<any>) => {
         if (data.id) {
             for (const [key, value] of browserWindows) {

diff --git a/desktop/src/app/app.component.html b/desktop/src/app/app.component.html
@@ -1,4 +1,4 @@
-<section id="titlebar" class="flex flex-row align-items-center justify-content-end gap-2 sticky pr-1"
+<section *ngIf="showTopBar" id="titlebar" class="flex flex-row align-items-center justify-content-end gap-2 sticky pr-1"
          [style]="{ height: '42px', zIndex: '1000', backgroundColor }">
     <span class="align-items-center draggable-region flex flex-column flex-1 font-bold justify-content-center min-h-full text-center">
         <div>{{ title }}</div>

diff --git a/desktop/src/app/app.component.ts b/desktop/src/app/app.component.ts
@@ -22,6 +22,7 @@ export class AppComponent implements AfterViewInit {
     subTitle? = ''
     backgroundColor = '#212121'
     topMenu: ExtendedMenuItem[] = []
+    showTopBar = true
 
     get title() {
         return this.windowTitle.getTitle()

diff --git a/desktop/src/app/image/image.component.ts b/desktop/src/app/image/image.component.ts
@@ -446,6 +446,11 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
     ) {
         app.title = 'Image'
 
+        app.topMenu.push({
+            icon: 'mdi mdi-fullscreen',
+            command: () => this.enterFullscreen(),
+        })
+
         this.stretchShadow.subscribe(value => {
             this.stretch.shadow = value / 65536
         })
@@ -490,6 +495,8 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
         hotkeys('ctrl+-', (event) => { event.preventDefault(); this.zoomOut() })
         hotkeys('ctrl+=', (event) => { event.preventDefault(); this.zoomIn() })
         hotkeys('ctrl+0', (event) => { event.preventDefault(); this.resetZoom() })
+        hotkeys('f12', (event) => { if (this.app.showTopBar) { event.preventDefault(); this.enterFullscreen() } })
+        hotkeys('escape', (event) => { if (!this.app.showTopBar) { event.preventDefault(); this.exitFullscreen() } })
 
         this.loadPreference()
     }
@@ -837,6 +844,14 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
         this.panZoom.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, 1.0)
     }
 
+    async enterFullscreen() {
+        this.app.showTopBar = !await this.electron.fullscreenWindow(true)
+    }
+
+    async exitFullscreen() {
+        this.app.showTopBar = !await this.electron.fullscreenWindow(false)
+    }
+
     private async retrieveCoordinateInterpolation() {
         const coordinate = await this.api.coordinateInterpolation(this.imageData.path!)
 

diff --git a/desktop/src/shared/services/electron.service.ts b/desktop/src/shared/services/electron.service.ts
@@ -199,6 +199,10 @@ export class ElectronService {
         this.send('WINDOW.MAXIMIZE')
     }
 
+    fullscreenWindow(enabled?: boolean): Promise<boolean> {
+        return this.send('WINDOW.FULLSCREEN', enabled)
+    }
+
     closeWindow<T>(data: CloseWindow<T>) {
         return this.send('WINDOW.CLOSE', data)
     }

diff --git a/desktop/src/shared/types/app.types.ts b/desktop/src/shared/types/app.types.ts
@@ -24,7 +24,7 @@ export const INTERNAL_EVENT_TYPES = [
     'DIRECTORY.OPEN', 'FILE.OPEN', 'FILE.SAVE', 'WINDOW.OPEN', 'WINDOW.CLOSE',
     'WINDOW.PIN', 'WINDOW.UNPIN', 'WINDOW.MINIMIZE', 'WINDOW.MAXIMIZE', 'WINDOW.RESIZE',
     'WHEEL.RENAMED', 'LOCATION.CHANGED', 'JSON.WRITE', 'JSON.READ',
-    'CALIBRATION.CHANGED'
+    'CALIBRATION.CHANGED', 'WINDOW.FULLSCREEN'
 ] as const
 
 export type InternalEventType = (typeof INTERNAL_EVENT_TYPES)[number]