From 2d9fad5d0341cbc5ebc55d07e0073a86b95542f1 Mon Sep 17 00:00:00 2001
From: Geomitron <22552797+Geomitron@users.noreply.github.com>
Date: Thu, 11 Jul 2024 17:08:36 -0500
Subject: [PATCH] Add zoom setting

---
 src-angular/app/app.component.ts              | 11 +++
 .../settings/settings.component.html          | 68 +++++++++++--------
 .../app/core/services/settings.service.ts     | 19 +++++-
 src-electron/ipc/SettingsHandler.ipc.ts       |  4 ++
 src-electron/main.ts                          | 15 ++--
 src-shared/Settings.ts                        |  2 +
 6 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/src-angular/app/app.component.ts b/src-angular/app/app.component.ts
index 9c4100a..278e15e 100644
--- a/src-angular/app/app.component.ts
+++ b/src-angular/app/app.component.ts
@@ -14,5 +14,16 @@ export class AppComponent {
 	constructor(settingsService: SettingsService) {
 		// Ensure settings are loaded before rendering the application
 		settingsService.loadSettings().then(() => this.settingsLoaded = true)
+
+		document.addEventListener('keydown', event => {
+			if (event.ctrlKey && (event.key === '+' || event.key === '-' || event.key === '=')) {
+				event.preventDefault()
+				if (event.key === '+' || event.key === '=') {
+					settingsService.zoomIn()
+				} else {
+					settingsService.zoomOut()
+				}
+			}
+		})
 	}
 }
diff --git a/src-angular/app/components/settings/settings.component.html b/src-angular/app/components/settings/settings.component.html
index b1144c2..d7d27d1 100644
--- a/src-angular/app/components/settings/settings.component.html
+++ b/src-angular/app/components/settings/settings.component.html
@@ -19,34 +19,48 @@
 
 	<label class="form-control w-full max-w-xs">
 		<div class="label">
-			<span class="label-text">Theme</span>
+			<span class="label-text">Appearance</span>
 		</div>
-		<div class="dropdown dropdown-hover">
-			<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
-			<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
-				<li>
-					<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
-					<ul>
-						<li><a (click)="setTheme('business')">Business</a></li>
-						<li><a (click)="setTheme('dark')">Dark</a></li>
-						<li><a (click)="setTheme('dim')">Dim</a></li>
-						<li><a (click)="setTheme('night')">Night</a></li>
-						<li><a (click)="setTheme('sunset')">Sunset</a></li>
-						<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
-					</ul>
-				</li>
-				<li>
-					<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
-					<ul>
-						<li><a (click)="setTheme('aqua')">Aqua</a></li>
-						<li><a (click)="setTheme('emerald')">Emerald</a></li>
-						<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
-						<li><a (click)="setTheme('nord')">Nord</a></li>
-						<li><a (click)="setTheme('valentine')">Valentine</a></li>
-						<li><a (click)="setTheme('winter')">Winter</a></li>
-					</ul>
-				</li>
-			</ul>
+		<div class="flex gap-3 items-center">
+			<div class="dropdown dropdown-hover">
+				<label tabindex="0" class="btn btn-neutral">{{ capitalize(settingsService.theme) }}</label>
+				<ul tabindex="0" class="dropdown-content z-[2] menu p-2 shadow bg-neutral text-neutral-content rounded-box w-36">
+					<li>
+						<h2 class="menu-title text-neutral-content text-opacity-50">Dark</h2>
+						<ul>
+							<li><a (click)="setTheme('business')">Business</a></li>
+							<li><a (click)="setTheme('dark')">Dark</a></li>
+							<li><a (click)="setTheme('dim')">Dim</a></li>
+							<li><a (click)="setTheme('night')">Night</a></li>
+							<li><a (click)="setTheme('sunset')">Sunset</a></li>
+							<li><a (click)="setTheme('synthwave')">Synthwave</a></li>
+						</ul>
+					</li>
+					<li>
+						<h2 class="menu-title text-neutral-content text-opacity-50">Light</h2>
+						<ul>
+							<li><a (click)="setTheme('aqua')">Aqua</a></li>
+							<li><a (click)="setTheme('emerald')">Emerald</a></li>
+							<li><a (click)="setTheme('lemonade')">Lemonade</a></li>
+							<li><a (click)="setTheme('nord')">Nord</a></li>
+							<li><a (click)="setTheme('valentine')">Valentine</a></li>
+							<li><a (click)="setTheme('winter')">Winter</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+			<div class="join join-vertical">
+				<div class="tooltip tooltip-right" data-tip="Zoom In (ctrl +)">
+					<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomIn()">
+						<i class="bi bi-zoom-in"></i>
+					</button>
+				</div>
+				<div class="tooltip tooltip-right" data-tip="Zoom Out (ctrl -)">
+					<button class="join-item btn btn-square btn-neutral btn-xs" (click)="settingsService.zoomOut()">
+						<i class="bi bi-zoom-out"></i>
+					</button>
+				</div>
+			</div>
 		</div>
 	</label>
 
diff --git a/src-angular/app/core/services/settings.service.ts b/src-angular/app/core/services/settings.service.ts
index f23ae6f..90a48ce 100644
--- a/src-angular/app/core/services/settings.service.ts
+++ b/src-angular/app/core/services/settings.service.ts
@@ -1,9 +1,10 @@
 import { DOCUMENT } from '@angular/common'
 import { Inject, Injectable } from '@angular/core'
 
+import _ from 'lodash'
 import { Difficulty, Instrument } from 'scan-chart'
 
-import { Settings, themes } from '../../../../src-shared/Settings'
+import { Settings, themes } from '../../../../src-shared/Settings.js'
 
 @Injectable({
 	providedIn: 'root',
@@ -90,4 +91,20 @@ export class SettingsService {
 		this.settings.isCompactTable = value
 		this.saveSettings()
 	}
+
+	get zoomFactor() {
+		return this.settings.zoomFactor
+	}
+	set zoomFactor(value: number) {
+		this.settings.zoomFactor = value
+		this.saveSettings()
+	}
+	zoomIn() {
+		this.zoomFactor = _.round(this.zoomFactor + 0.1, 3)
+	}
+	zoomOut() {
+		if (_.round(this.zoomFactor - 0.1, 3) > 0) {
+			this.zoomFactor = _.round(this.zoomFactor - 0.1, 3)
+		}
+	}
 }
diff --git a/src-electron/ipc/SettingsHandler.ipc.ts b/src-electron/ipc/SettingsHandler.ipc.ts
index 8d03811..e114d33 100644
--- a/src-electron/ipc/SettingsHandler.ipc.ts
+++ b/src-electron/ipc/SettingsHandler.ipc.ts
@@ -5,6 +5,7 @@ import { inspect } from 'util'
 
 import { dataPath, settingsPath, tempPath, themesPath } from '../../src-shared/Paths.js'
 import { defaultSettings, Settings } from '../../src-shared/Settings.js'
+import { mainWindow } from '../main.js'
 
 export let settings = readSettings()
 
@@ -26,6 +27,9 @@ function readSettings() {
  * Updates Bridge's settings object to `newSettings` and saves them to Bridge's data directories.
  */
 export async function setSettings(newSettings: Settings) {
+	if (settings.zoomFactor !== newSettings.zoomFactor) {
+		mainWindow.webContents.setZoomFactor(newSettings.zoomFactor)
+	}
 	settings = newSettings
 	await saveSettings(newSettings)
 }
diff --git a/src-electron/main.ts b/src-electron/main.ts
index 785f02c..23c8e0e 100644
--- a/src-electron/main.ts
+++ b/src-electron/main.ts
@@ -6,15 +6,14 @@ import * as url from 'url'
 
 import { IpcFromMainEmitEvents } from '../src-shared/interfaces/ipc.interface.js'
 import { dataPath } from '../src-shared/Paths.js'
+import { settings } from './ipc/SettingsHandler.ipc.js'
 import { retryUpdate } from './ipc/UpdateHandler.ipc.js'
 import { getIpcInvokeHandlers, getIpcToMainEmitHandlers } from './IpcHandler.js'
 
 electronUnhandled({ showDialog: true, logger: err => console.log('Error: Unhandled Rejection:', err) })
 
-import { dirname } from 'path'
-
 const _filename = url.fileURLToPath(import.meta.url)
-const _dirname = dirname(_filename)
+const _dirname = path.dirname(_filename)
 
 export let mainWindow: BrowserWindow
 const args = process.argv.slice(1)
@@ -83,14 +82,8 @@ async function createBridgeWindow() {
 	// Don't use a system menu
 	mainWindow.setMenu(null)
 
-	mainWindow.webContents.on('before-input-event', (event, input) => {
-		if (input.control && (input.key === '+' || input.key === '-' || input.key === '=')) {
-			event.preventDefault()
-			const zoomFactor = mainWindow.webContents.getZoomFactor()
-			const newZoomFactor = input.key === '+' || input.key === '=' ? zoomFactor + 0.1 : zoomFactor - 0.1
-			mainWindow.webContents.setZoomFactor(newZoomFactor)
-		}
-	})
+	// Set user-specified zoom level
+	mainWindow.webContents.setZoomFactor(settings.zoomFactor)
 
 	// IPC handlers
 	for (const [key, handler] of Object.entries(getIpcInvokeHandlers())) {
diff --git a/src-shared/Settings.ts b/src-shared/Settings.ts
index b420b23..e09b4d7 100644
--- a/src-shared/Settings.ts
+++ b/src-shared/Settings.ts
@@ -26,6 +26,7 @@ export interface Settings {
 	libraryPath: string | undefined // The path to the user's library
 	isSng: boolean                  // If the chart should be downloaded as a .sng file or as a chart folder
 	isCompactTable: boolean         // If the search result table should have reduced padding
+	zoomFactor: number              // How much the display should be zoomed
 	instrument: Instrument | null   // The instrument selected by default, or `null` for "Any Instrument"
 	difficulty: Difficulty | null   // The difficulty selected by default, or `null` for "Any Difficulty"
 }
@@ -39,6 +40,7 @@ export const defaultSettings: Settings = {
 	libraryPath: undefined,
 	isSng: false,
 	isCompactTable: false,
+	zoomFactor: 1,
 	instrument: 'guitar',
 	difficulty: null,
 }