Merge pull request #237 from yishn/zoom-factor

Zoom factor

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 **Added**
 
 * Themes (Thanks to [@Seth-Rothschild](https://github.com/Seth-Rothschild))
+* Ability to adjust UI zoom
 
 **Changed**
 

components/App.js

@@ -40,6 +40,7 @@ class App extends Component {
             busy: false,
             fullScreen: false,
             showMenuBar: null,
+            zoomFactor: null,
 
             representedFilename: null,
             gameTrees: [emptyTree],
@@ -287,10 +288,17 @@ class App extends Component {
 
             this.window.setContentSize(width + widthDiff, height)
         }
+
+        // Handle zoom factor
+
+        if (prevState.zoomFactor !== this.state.zoomFactor) {
+            this.window.webContents.setZoomFactor(this.state.zoomFactor)
+        }
     }
 
     updateSettingState(key = null) {
         let data = {
+            'app.zoom_factor': 'zoomFactor',
             'view.show_menubar': 'showMenuBar',
             'view.show_coordinates': 'showCoordinates',
             'view.show_move_colorization': 'showMoveColorization',
@@ -654,8 +662,7 @@ class App extends Component {
                     })
 
                     let template = [{label: '&Edit Label', click}]
-                    let menu = Menu.buildFromTemplate(template)
-                    menu.popup(this.window, {x, y, async: true})
+                    helper.popupMenu(template, x, y)
 
                     return
                 }
@@ -1767,8 +1774,7 @@ class App extends Component {
             }
         ]
 
-        let menu = Menu.buildFromTemplate(template)
-        menu.popup(this.window, Object.assign({async: true}, options))
+        helper.popupMenu(template, options.x, options.y)
     }
 
     openCommentMenu(tree, index, options = {}) {
@@ -1851,8 +1857,7 @@ class App extends Component {
             item.click = () => this.setComment(tree, index, item.data)
         }
 
-        let menu = Menu.buildFromTemplate(template)
-        menu.popup(this.window, Object.assign({async: true}, options))
+        helper.popupMenu(template, options.x, options.y)
     }
 
     // GTP Engines
@@ -2080,7 +2085,7 @@ class App extends Component {
                 this.stopGeneratingMoves()
                 this.hideInfoOverlay()
                 this.makeResign()
-                
+
                 return
             }
 

components/bars/PlayBar.js

@@ -45,9 +45,8 @@ class PlayBar extends Component {
                 }
             ]
 
-            let menu = Menu.buildFromTemplate(template)
             let {left, top} = this.menuButtonElement.getBoundingClientRect()
-            menu.popup(sabaki.window, {x: Math.round(left), y: Math.round(top), async: true})
+            helper.popupMenu(template, left, top)
         }
     }
 

components/drawers/GameChooserDrawer.js

@@ -140,13 +140,7 @@ class GameChooserDrawer extends Component {
                 }
             ]
 
-            let menu = Menu.buildFromTemplate(template)
-
-            menu.popup(sabaki.window, {
-                x: evt.clientX,
-                y: evt.clientY,
-                async: true
-            })
+            helper.popupMenu(template, evt.clientX, evt.clientY)
         }
 
         this.handleItemDragStart = evt => {
@@ -247,14 +241,9 @@ class GameChooserDrawer extends Component {
             ]
 
             let element = evt.currentTarget
-            let {left, top, height} = element.getBoundingClientRect()
-            let menu = Menu.buildFromTemplate(template)
-
-            menu.popup(sabaki.window, {
-                x: Math.round(left),
-                y: Math.round(top + height),
-                async: true
-            })
+            let {left, bottom} = element.getBoundingClientRect()
+
+            helper.popupMenu(template, left, bottom)
         }
 
         this.handleSortButtonClick = evt => {
@@ -317,14 +306,9 @@ class GameChooserDrawer extends Component {
             }
 
             let element = evt.currentTarget
-            let {left, top, height} = element.getBoundingClientRect()
-            let menu = Menu.buildFromTemplate(template)
-
-            menu.popup(sabaki.window, {
-                x: Math.round(left),
-                y: Math.round(top + height),
-                async: true
-            })
+            let {left, bottom} = element.getBoundingClientRect()
+
+            helper.popupMenu(template, left, bottom)
         }
     }
 

components/drawers/InfoDrawer.js

@@ -171,13 +171,8 @@ class InfoDrawer extends Component {
             ].filter(x => !!x)
 
             let {left, bottom} = evt.currentTarget.getBoundingClientRect()
-            let menu = Menu.buildFromTemplate(template)
 
-            menu.popup(sabaki.window, {
-                async: true,
-                x: Math.round(left),
-                y: Math.round(bottom)
-            })
+            helper.popupMenu(template, left, bottom)
         })
     }
 

data/menu.js

@@ -433,6 +433,31 @@ let data = [
                 checked: 'view.show_comments',
                 accelerator: 'CmdOrCtrl+Shift+T',
                 click: () => toggleSetting('view.show_comments')
+            },
+            {type: 'separator'},
+            {
+                label: 'Z&oom Factor',
+                submenu: [
+                    {
+                        label: 'Increase',
+                        accelerator: 'CmdOrCtrl+Plus',
+                        click: () => setting.set('app.zoom_factor',
+                            setting.get('app.zoom_factor') + .1
+                        )
+                    },
+                    {
+                        label: 'Decrease',
+                        accelerator: 'CmdOrCtrl+-',
+                        click: () => setting.set('app.zoom_factor',
+                            Math.max(0, setting.get('app.zoom_factor') - .1)
+                        )
+                    },
+                    {
+                        label: 'Reset',
+                        accelerator: 'CmdOrCtrl+0',
+                        click: () => setting.set('app.zoom_factor', 1)
+                    }
+                ]
             }
         ]
     },

main.js

@@ -20,7 +20,7 @@ function newWindow(path) {
         backgroundColor: '#111111',
         show: false,
         webPreferences: {
-            zoomFactor: setting.get('debug.zoom_factor')
+            zoomFactor: setting.get('app.zoom_factor')
         }
     })
 

modules/dialog.js

@@ -5,10 +5,10 @@ const helper = require('./helper')
 exports.showMessageBox = function(message, type = 'info', buttons = ['OK'], cancelId = 0) {
     sabaki.setBusy(true)
 
-    let result = dialog.showMessageBox(sabaki.window, {
+    let result = dialog.showMessageBox(remote.getCurrentWindow(), {
         type,
         buttons,
-        title: sabaki.appName,
+        title: app.getName(),
         message,
         cancelId,
         noLink: true
@@ -24,7 +24,7 @@ exports.showFileDialog = function(type, options, callback = helper.noop) {
     let [t, ...ype] = [...type]
     type = t.toUpperCase() + ype.join('').toLowerCase()
 
-    let result = dialog[`show${type}Dialog`](sabaki.window, options)
+    let result = dialog[`show${type}Dialog`](remote.getCurrentWindow(), options)
 
     sabaki.setBusy(false)
     callback({result})

modules/helper.js

@@ -109,3 +109,15 @@ exports.htmlify = function(input) {
 
     return input
 }
+
+exports.popupMenu = function(template, x, y) {
+    let {remote} = require('electron')
+    let setting = remote.require('./modules/setting')
+    let zoomFactor = +setting.get('app.zoom_factor')
+
+    remote.Menu.buildFromTemplate(template).popup(remote.getCurrentWindow(), {
+        x: Math.round(x * zoomFactor),
+        y: Math.round(y * zoomFactor),
+        async: true
+    })
+}

modules/setting.js

@@ -30,6 +30,7 @@ let defaults = {
     'app.startup_check_updates_delay': 3000,
     'app.loadgame_delay': 100,
     'app.hide_busy_delay': 200,
+    'app.zoom_factor': 1,
     'autoplay.sec_per_move': 1,
     'autoscroll.max_interval': 200,
     'autoscroll.min_interval': 50,
@@ -53,7 +54,6 @@ let defaults = {
     ],
     'console.max_history_count': 100,
     'debug.dev_tools': false,
-    'debug.zoom_factor': 1.0,
     'edit.click_currentvertex_to_remove': true,
     'edit.show_removenode_warning': true,
     'edit.show_removeothervariations_warning': true,