feat: add zoom menu

src/renderer/plugins/electron-zoom.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from '@fe/context'
-import { hasCtrlCmd } from '@fe/core/command'
+import type { BuildInActionName } from '@fe/types'
 
 export default {
   name: 'electron-zoom',
@@ -20,25 +20,55 @@ export default {
         }
       }
 
-      window.addEventListener('keydown', e => {
-        if (hasCtrlCmd(e)) {
-          if (e.key === '0') {
-            webContents.setZoomFactor(1)
-          } else if (e.key === '=') {
-            changeZoomFactor(true)
-          } else if (e.key === '-') {
-            changeZoomFactor(false)
-          }
-        }
+      const zoomInId: BuildInActionName = 'plugin.electron-zoom.zoom-in'
+      const zoomOutId: BuildInActionName = 'plugin.electron-zoom.zoom-out'
+      const zoomResetId: BuildInActionName = 'plugin.electron-zoom.zoom-reset'
+
+      ctx.action.registerAction({
+        name: zoomInId,
+        keys: [ctx.command.CtrlCmd, '='],
+        handler: () => changeZoomFactor(true)
       })
 
-      // window.addEventListener('mousewheel', event => {
-      //   const e = event as WheelEvent
+      ctx.action.registerAction({
+        name: zoomOutId,
+        keys: [ctx.command.CtrlCmd, '-'],
+        handler: () => changeZoomFactor(false)
+      })
 
-      //   if (hasCtrlCmd(e)) {
-      //     changeZoomFactor(e.deltaY < 0)
-      //   }
-      // })
+      ctx.action.registerAction({
+        name: zoomResetId,
+        keys: [ctx.command.CtrlCmd, '0'],
+        handler: () => webContents.setZoomFactor(1)
+      })
+
+      ctx.statusBar.tapMenus(menus => {
+        console.log('xxx', menus['status-bar-view'].list)
+        menus['status-bar-view'].list?.push(
+          {
+            id: zoomInId,
+            type: 'normal',
+            title: ctx.i18n.t('status-bar.view.zoom-in'),
+            subTitle: ctx.command.getKeysLabel(zoomInId),
+            onClick: () => ctx.action.getActionHandler(zoomInId)()
+          },
+          {
+            id: zoomOutId,
+            type: 'normal',
+            title: ctx.i18n.t('status-bar.view.zoom-out'),
+            subTitle: ctx.command.getKeysLabel(zoomOutId),
+            onClick: () => ctx.action.getActionHandler(zoomOutId)()
+          },
+          {
+            id: zoomResetId,
+            type: 'normal',
+            title: ctx.i18n.t('status-bar.view.zoom-reset'),
+            subTitle: ctx.command.getKeysLabel(zoomResetId),
+            onClick: () => ctx.action.getActionHandler(zoomResetId)()
+          },
+          { type: 'separator' },
+        )
+      })
     })
   }
 } as Plugin

src/renderer/plugins/status-bar-view.ts

@@ -18,7 +18,23 @@ export default {
     ctx.store.subscribe(() => {
       if (count === 0) {
         ctx.statusBar.tapMenus(menus => {
-          menus['status-bar-view'].list = [
+          menus['status-bar-view'].list?.push(
+            {
+              id: 'word-wrap',
+              type: 'normal',
+              checked: ctx.store.state.wordWrap === 'on',
+              title: ctx.i18n.t('status-bar.view.word-wrap'),
+              subTitle: getKeysLabel('editor.toggle-wrap'),
+              onClick: () => ctx.editor.toggleWrap()
+            },
+            {
+              id: 'typewriter-mode',
+              type: 'normal',
+              checked: ctx.store.state.typewriterMode,
+              title: ctx.i18n.t('status-bar.view.typewriter-mode'),
+              onClick: () => ctx.editor.toggleTypewriterMode()
+            },
+            { type: 'separator' },
             {
               id: 'toggle-side',
               type: 'normal',
@@ -51,23 +67,7 @@ export default {
               subTitle: getKeysLabel('layout.toggle-xterm'),
               onClick: () => ctx.layout.toggleXterm()
             }] : []),
-            { type: 'separator' },
-            {
-              id: 'word-wrap',
-              type: 'normal',
-              checked: ctx.store.state.wordWrap === 'on',
-              title: ctx.i18n.t('status-bar.view.word-wrap'),
-              subTitle: getKeysLabel('editor.toggle-wrap'),
-              onClick: () => ctx.editor.toggleWrap()
-            },
-            {
-              id: 'typewriter-mode',
-              type: 'normal',
-              checked: ctx.store.state.typewriterMode,
-              title: ctx.i18n.t('status-bar.view.typewriter-mode'),
-              onClick: () => ctx.editor.toggleTypewriterMode()
-            },
-          ]
+          )
         })
       } else {
         ctx.statusBar.refreshMenu()

src/renderer/support/env.ts

@@ -33,39 +33,7 @@ export function openWindow (url: string, target = '_blank', options: Record<stri
       ...options
     }
 
-    const opener: any = window.open(url, target, Object.entries(opts).map(([k, v]) => `${k}=${v}`).join(','))
-
-    const preload = `
-      // enable page zoom in electron.
-      xRequire = require || nodeRequire
-
-      const webContents = xRequire('@electron/remote').getCurrentWebContents()
-
-      const changeZoomFactor = zoomIn => {
-        const currentZoomFactor = webContents.getZoomFactor()
-        const factor = currentZoomFactor + (zoomIn ? 0.1 : -0.1)
-
-        if (factor > 0.2 && factor < 3) {
-          webContents.setZoomFactor(factor)
-        }
-      }
-
-      window.addEventListener('keydown', e => {
-        if (e.ctrlKey || e.metaKey) {
-          if (e.key === '0') {
-            webContents.setZoomFactor(1)
-          } else if (e.key === '=') {
-            changeZoomFactor(true)
-          } else if (e.key === '-') {
-            changeZoomFactor(false)
-          }
-        }
-      })
-    `
-
-    opener.eval(preload)
-
-    return opener
+    return window.open(url, target, Object.entries(opts).map(([k, v]) => `${k}=${v}`).join(','))
   } else {
     return window.open(url, target)
   }

src/renderer/types.ts

@@ -142,6 +142,9 @@ export type BuildInActions = {
   'plugin.status-bar-help.show-plugin': () => void,
   'plugin.transform-img-link.all': () => void,
   'plugin.switch-todo.switch': (line?: number, checked?: boolean) => void,
+  'plugin.electron-zoom.zoom-in': () => void,
+  'plugin.electron-zoom.zoom-out': () => void,
+  'plugin.electron-zoom.zoom-reset': () => void,
   'premium.show': () => void,
 }
 

src/share/i18n/languages/en.ts

@@ -192,6 +192,9 @@ const data = {
       'side-bar': 'Show Side Bar',
       'word-wrap': 'Word Wrap',
       'typewriter-mode': 'Typewriter Mode',
+      'zoom-in': 'Zoom In',
+      'zoom-out': 'Zoom Out',
+      'zoom-reset': 'Actual Size',
     },
     'setting': 'Setting',
     'repo': {

src/share/i18n/languages/zh-CN.ts

@@ -193,6 +193,9 @@ const data: BaseLanguage = {
       'side-bar': '显示侧栏',
       'word-wrap': '文本换行',
       'typewriter-mode': '打字机模式',
+      'zoom-in': '放大',
+      'zoom-out': '缩小',
+      'zoom-reset': '实际大小',
     },
     'setting': '设置',
     'repo': {