feat: add scroll wheel zoom setting (#9476)

### Changed
Add `scroll wheel to zoom` setting option, when the option enables, user can zoom in and out with scroll wheel without pressing the cmd/ctrl key.

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/general.tsx

@@ -1,10 +1,10 @@
-import { Menu, MenuItem, MenuTrigger } from '@affine/component';
+import { Menu, MenuItem, MenuTrigger, Switch } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import type { EdgelessDefaultTheme } from '@affine/core/modules/editor-setting/schema';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { menuTrigger } from '../style.css';
 
@@ -78,29 +78,51 @@ export const GeneralEdgelessSetting = () => {
     });
   }, [editorSetting, items, edgelessDefaultTheme]);
 
+  const handleScrollZoomChange = useCallback(
+    (checked: boolean) => {
+      editorSetting.set('edgelessScrollZoom', checked);
+    },
+    [editorSetting]
+  );
+
   return (
-    <SettingRow
-      name={t[
-        'com.affine.settings.editorSettings.page.edgeless-default-theme.title'
-      ]()}
-      desc={t[
-        'com.affine.settings.editorSettings.page.edgeless-default-theme.description'
-      ]()}
-    >
-      <Menu
-        items={menuItems}
-        contentOptions={{
-          align: 'end',
-          sideOffset: 16,
-          style: {
-            width: '280px',
-          },
-        }}
+    <>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.page.edgeless-default-theme.title'
+        ]()}
+        desc={t[
+          'com.affine.settings.editorSettings.page.edgeless-default-theme.description'
+        ]()}
       >
-        <MenuTrigger tooltip={currentTheme} className={menuTrigger}>
-          {currentTheme}
-        </MenuTrigger>
-      </Menu>
-    </SettingRow>
+        <Menu
+          items={menuItems}
+          contentOptions={{
+            align: 'end',
+            sideOffset: 16,
+            style: {
+              width: '280px',
+            },
+          }}
+        >
+          <MenuTrigger tooltip={currentTheme} className={menuTrigger}>
+            {currentTheme}
+          </MenuTrigger>
+        </Menu>
+      </SettingRow>
+      <SettingRow
+        name={t[
+          'com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.title'
+        ]()}
+        desc={t[
+          'com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.description'
+        ]()}
+      >
+        <Switch
+          checked={editorSetting.edgelessScrollZoom.$.value}
+          onChange={handleScrollZoomChange}
+        ></Switch>
+      </SettingRow>
+    </>
   );
 };

packages/frontend/core/src/modules/editor-setting/schema.ts

@@ -1,7 +1,7 @@
-import { NodePropsSchema } from '@blocksuite/affine-shared/utils';
+import { GeneralSettingSchema } from '@blocksuite/affine-shared/services';
 import { z } from 'zod';
 
-export const BSEditorSettingSchema = NodePropsSchema;
+export const BSEditorSettingSchema = GeneralSettingSchema;
 
 export type FontFamily = 'Sans' | 'Serif' | 'Mono' | 'Custom';
 export type EdgelessDefaultTheme = 'auto' | 'dark' | 'light' | 'specified';
@@ -32,5 +32,5 @@ export const EditorSettingSchema = BSEditorSettingSchema.merge(
   AffineEditorSettingSchema
 );
 
-// eslint-disable-next-line no-redeclare
+// oxlint-disable-next-line no-redeclare
 export type EditorSettingSchema = z.infer<typeof EditorSettingSchema>;

packages/frontend/i18n/src/resources/en.json

@@ -1236,6 +1236,8 @@
   "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "Set edgeless default color scheme.",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "Edgeless default theme",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "Specified by current color mode",
+  "com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.title": "Scroll wheel zoom",
+  "com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.description": "Use the scroll wheel to zoom in and out.",
   "com.affine.settings.editorSettings.preferences": "Preferences",
   "com.affine.settings.editorSettings.preferences.export.description": "You can export the entire preferences data for backup, and the exported data can be re-imported.",
   "com.affine.settings.editorSettings.preferences.export.title": "Export Settings",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -1143,6 +1143,8 @@
   "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "设置默认的无界配色方案。",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "无界默认配色方案",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "由当前应用的配色方案指定",
+  "com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.title": "滚轮缩放",
+  "com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.description": "使用鼠标滚轮来调整缩放比例",
   "com.affine.settings.editorSettings.preferences": "首选项",
   "com.affine.settings.editorSettings.preferences.export.description": "您可以导出整个首选项数据进行备份，然后可以重新导入导出的数据。",
   "com.affine.settings.editorSettings.preferences.export.title": "导出设置",

packages/frontend/i18n/src/resources/zh-Hant.json

@@ -1140,6 +1140,8 @@
   "com.affine.settings.editorSettings.page.edgeless-default-theme.description": "設定無界的預設配色。",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.title": "無界預設主題",
   "com.affine.settings.editorSettings.page.edgeless-default-theme.specified": "由目前顏色模式指定",
+  "com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.title": "滾輪縮放",
+  "com.affine.settings.editorSettings.page.edgeless-scroll-wheel-zoom.description": "使用滑鼠滾輪來調整縮放比例",
   "com.affine.settings.editorSettings.preferences": "首選項",
   "com.affine.settings.editorSettings.preferences.export.description": "您可以匯出整個首選項數據進行備份，導出的數據亦可重新匯入。",
   "com.affine.settings.editorSettings.preferences.export.title": "匯出設定",