Add zoom factor setting

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Development Branch
   - Moved CSP to HTML
+  - Added setting a zoom factor for the application
   - Dependencies bump
   - Added adjustable columns in the Job Manager
   - Disabled devTools in production mode

electron/electron-env.d.ts

@@ -80,6 +80,7 @@ declare global {
     bufferSize:number
     encoding:string
     startup:boolean
+    zoomFactor:number
     check:boolean
   }
 

electron/lib/AppSettings.ts

@@ -15,6 +15,7 @@ interface AppSettingsSaveData {
   bufferSize:number
   encoding:string
   startup:boolean
+  zoomFactor:number
 }
 
 export class AppSettings {
@@ -26,6 +27,8 @@ export class AppSettings {
   static #encoding:string = 'utf8'
   /** Load on startup */
   static #startup:boolean = false
+  /** Application zoom factor */
+  static #zoomFactor:number = 1
 
   /**
    * Create a new AppSettings object
@@ -55,6 +58,7 @@ export class AppSettings {
           if (temp.hasOwnProperty('bufferSize')) AppSettings.#bufferSize = temp.bufferSize
           if (temp.hasOwnProperty('encoding')) AppSettings.#encoding = temp.encoding
           if (temp.hasOwnProperty('startup')) AppSettings.#startup = temp.startup
+          if (temp.hasOwnProperty('zoomFactor')) AppSettings.#zoomFactor = temp.zoomFactor
         }
       })
     } catch (error:any) { throw new AppSettingsError(error.message, this.load) }
@@ -70,7 +74,8 @@ export class AppSettings {
         'launchMenu': AppSettings.#launchMenu,
         'bufferSize': AppSettings.#bufferSize,
         'encoding': AppSettings.#encoding,
-        'startup': AppSettings.#startup
+        'startup': AppSettings.#startup,
+        'zoomFactor': AppSettings.#zoomFactor
       }, (error) => { if (error) throw error })
     } catch (error:any) { throw new AppSettingsError(error.message, this.save) }
   }
@@ -81,6 +86,7 @@ export class AppSettings {
     AppSettings.#bufferSize = 100
     AppSettings.#encoding = 'utf8'
     AppSettings.#startup = false
+    AppSettings.#zoomFactor = 1
   }
 
   /**
@@ -100,6 +106,7 @@ export class AppSettings {
       bufferSize: AppSettings.#bufferSize,
       encoding: AppSettings.#encoding,
       startup: AppSettings.#startup,
+      zoomFactor: AppSettings.#zoomFactor,
       check: false
     }
   }
@@ -117,6 +124,7 @@ export class AppSettings {
       AppSettings.#bufferSize = data.bufferSize
       AppSettings.#encoding = data.encoding
       AppSettings.#startup = data.startup
+      AppSettings.#zoomFactor = data.zoomFactor
     } catch (error:any) {
       throw new AppSettingsError(error.message, this.setData)
     }
@@ -138,6 +146,7 @@ export class AppSettings {
     if (AppSettings.#bufferSize !== data.bufferSize) return false
     if (AppSettings.#encoding !== data.encoding) return false
     if (AppSettings.#startup !== data.startup) return false
+    if (AppSettings.#zoomFactor !== data.zoomFactor) return false
     return true
   }
 
@@ -158,6 +167,8 @@ export class AppSettings {
         throw new Error('Invalid data format! Missing or incorrect System Encoding!')
       if (!data.hasOwnProperty('startup') || typeof data.startup !== 'boolean')
         throw new Error('Invalid data format! Missing or incorrect Startup flag!')
+      if (!data.hasOwnProperty('zoomFactor') || typeof data.zoomFactor !== 'number')
+        throw new Error('Invalid data format! Missing or incorrect Zoom Factor!')
     } catch (error:any) {
       throw error
     }
@@ -171,6 +182,8 @@ export class AppSettings {
   get encoding():BufferEncoding { return <BufferEncoding>AppSettings.#encoding }
   /** Get the startup flag */
   get startup():boolean { return AppSettings.#startup }
+  /** Get the zoom factor */
+  get zoomFactor():number { return AppSettings.#zoomFactor }
 }
 
 /**

electron/main.ts

@@ -99,6 +99,9 @@ const bufferWindow = ():void => {
       preload: path.join(MAIN_DIST, 'preload.js')
     }
   })
+  bufferWin.once('ready-to-show', () => {
+    bufferWin?.webContents.setZoomFactor(appSettings.zoomFactor)
+  })
   bufferWin.webContents.on('did-finish-load', () => {
     bufferWin?.webContents.send('send-buffer-data', resBuff.read())
   })
@@ -138,6 +141,9 @@ const settingsEditorWindow = ():void => {
       preload: path.join(MAIN_DIST, 'preload.js')
     }
   })
+  settingsWin.once('ready-to-show', () => {
+    settingsWin?.webContents.setZoomFactor(appSettings.zoomFactor)
+  })
   settingsWin.webContents.on('did-finish-load', () => {
     try {
       settingsWin?.webContents.send('send-settings-data', appSettings.getData())
@@ -254,7 +260,7 @@ const inputWindow = (data:InputPromptData):void => {
     height: 128,
     fullscreen: false,
     fullscreenable: false,
-    resizable: false,
+    resizable: true,
     autoHideMenuBar: true,
     webPreferences: {
       devTools: (process.env.VITE_DEV_SERVER_URL) ? true : false,
@@ -268,6 +274,9 @@ const inputWindow = (data:InputPromptData):void => {
       preload: path.join(MAIN_DIST, 'preload.js')
     }
   })
+  inputWin.once('ready-to-show', () => {
+    inputWin?.webContents.setZoomFactor(appSettings.zoomFactor)
+  })
   inputWin.on('close', (_event) => {
     resolveInputWin.reject(true)
   })
@@ -308,6 +317,9 @@ const jobManagerWindow = ():void => {
       preload: path.join(MAIN_DIST, 'preload.js')
     }
   })
+  jobMgrWin.once('ready-to-show', () => {
+    jobMgrWin?.webContents.setZoomFactor(appSettings.zoomFactor)
+  })
   jobMgrWin.webContents.on('did-finish-load', () => {
     jobMgrWin?.webContents.send('send-job-data', runningJobs.read())
   })

renderer/Settings.vue

@@ -18,6 +18,8 @@ const _bufferSize = ref()
 const _startup = ref()
 /** Select menu for encoding type */
 const _encodingSelect = ref()
+/** Select menu for zoom factor */
+const _zoomSelect = ref()
 /** Select menu for adding a new item */
 const _newItemSelect = ref(1)
 /** Select menu for menu option when adding a new item */
@@ -30,14 +32,18 @@ const _itemCount = ref()
 /** Tooltip strings used in menu display */
 const _tooltips = {
   buffer: 'The number of processed commands to store in the buffer',
-  newMenu: 'Add a new item to the selected menu'
+  newMenu: 'Add a new item to the selected menu',
+  zoom: 'Sets the application zoom level'
 }
 
 /** Allowed encoding types */
 const _encodingTypes = [
   'utf8', 'ascii', 'base64', 'base64url', 'hex', 'ucs2', 'utf16le', 'binary', 'latin1'
 ]
 
+/** Allowed zoom factors */
+const _zoomLevels = [ 1, 2, 3, 4 ]
+
 /** Build a reference list of submenus */
 const buildMenuList = ():void => {
   //  Reset
@@ -82,6 +88,7 @@ const parseData = (event:any):SettingsIpc => {
     bufferSize: Number(_bufferSize.value),
     encoding: _encodingSelect.value,
     startup: Boolean(_startup.value),
+    zoomFactor: Number(_zoomSelect.value),
     check: (event.type === 'beforeunload') ? true : false
   }
 }
@@ -158,6 +165,7 @@ onMounted(() => {
     _bufferSize.value = settingsData.bufferSize
     _encodingSelect.value = settingsData.encoding
     _startup.value = settingsData.startup
+    _zoomSelect.value = settingsData.zoomFactor
     buildMenuList()
   })
 
@@ -169,6 +177,7 @@ onMounted(() => {
 
 <template>
 <section>
+
   <header>
     <div class="left">
       <input type="checkbox" id="startupInput" v-model="_startup"/>
@@ -179,12 +188,14 @@ onMounted(() => {
         <option v-for="item in _encodingTypes" :value=item>{{ item }}</option>
       </select>
     </div>
+
     <div class="right">
       <button @click="resetSettings">Reset Settings</button>
       &nbsp;
       <button @click="saveSettings">Save Settings</button>
     </div>
   </header>
+
   <div id="menuContents">
     <MenuBuilder
       v-model:launch-menu="_launchMenu"
@@ -193,11 +204,12 @@ onMounted(() => {
       :menu-id="Number.MAX_SAFE_INTEGER">  <!-- Main menu starts at MAX INT -->
     </MenuBuilder>
   </div>
+
   <footer>
     <div class="left">
       <select id="menuSelect" v-model="_menuSelect" :title="_tooltips.newMenu" data-toggle="tooltip">
-        <option v-for="(_item, _idx) in _menuList" :key=_idx :value=_idx>
-          {{ _item.label }}
+        <option v-for="(item, idx) in _menuList" :key=idx :value=idx>
+          {{ item.label }}
         </option>
       </select>
       <select v-model="_newItemSelect" :title="_tooltips.newMenu" data-toggle="tooltip">
@@ -207,11 +219,18 @@ onMounted(() => {
       </select>
       <button @click="addItem" :title="_tooltips.newMenu" data-toggle="tooltip">Add</button>
     </div>
+
     <div class="right">
+      <label for="zoomSelect" :title="_tooltips.zoom" data-toggle="tooltip">Zoom:</label>
+      <select id="zoomSelect" v-model="_zoomSelect" :title="_tooltips.zoom" data-toggle="tooltip">
+        <option v-for="item in _zoomLevels" :value="item">{{ item }}</option>
+      </select>
+      &emsp;&emsp;
       <label for="bufferInput" :title="_tooltips.buffer" data-toggle="tooltip">Buffer Size:</label>
       <input type="text" id="bufferInput" size="3" v-model="_bufferSize" :title="_tooltips.buffer" data-toggle="tooltip"/>
     </div>
   </footer>
+
 </section>
 </template>