feat: support zoom in/out (#31)

Okabe-Rintarou-0 · Jun 25, 2024 · dce333a · dce333a
1 parent 3cddca3
commit dce333a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 4 deletions.
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "sjtu_canvas_helper"
-version = "1.3.11"
+version = "1.3.12"
 description = "SJTU Canvas Helper"
 authors = ["Okabe"]
 edition = "2021"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "SJTU Canvas Helper",
-    "version": "1.3.11"
+    "version": "1.3.12"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/change_log_modal.tsx b/src/components/change_log_modal.tsx
@@ -11,6 +11,12 @@ export function ChangeLogModal({ open, onCancel, onOk }: {
         overflow: "scroll",
     }}>
         <Typography>
+            <Title level={4}>v1.3.12 2024/6/25</Title>
+            <Paragraph>
+                <ul>
+                    <li>[Enhancement] 支持按 `ctrl`(`command`) + `=` 和 `ctrl`(`command`) + `-` 进行缩放（源自 Issue: <a target="_blank" href="https://github.com/Okabe-Rintarou-0/SJTU-Canvas-Helper/issues/31">https://github.com/Okabe-Rintarou-0/SJTU-Canvas-Helper/issues/31</a>）</li>
+                </ul>
+            </Paragraph>
             <Title level={4}>v1.3.11 2024/6/18</Title>
             <Paragraph>
                 <ul>

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -7,6 +7,7 @@ import { BsQrCode } from 'react-icons/bs';
 import { GoDiscussionOutdated } from 'react-icons/go';
 import { ChangeLogModal } from './change_log_modal';
 import { LuBookOpenCheck } from 'react-icons/lu';
+import { useKeyPress } from '../lib/hooks';
 
 const { Content, Footer, Sider } = Layout;
 
@@ -67,6 +68,20 @@ export default function BasicLayout({ children }: React.PropsWithChildren) {
         token: { colorBgContainer, borderRadiusLG },
     } = theme.useToken();
 
+    const [scale, setScale] = useState(1);
+
+    const zoomIn = () => {
+        console.log("zoom in")
+        setScale(prevScale => prevScale + 0.1);
+    };
+
+    const zoomOut = () => {
+        setScale(prevScale => Math.max(0.1, prevScale - 0.1));
+    };
+
+    useKeyPress('=', zoomIn);
+    useKeyPress('-', zoomOut);
+
     return <Layout style={{ minHeight: "100vh" }}>
         <Sider theme="light" style={{ position: 'fixed', height: '100%' }}>
             <Menu theme="light" mode="inline" defaultSelectedKeys={selectedKeys} items={items} />
@@ -79,6 +94,10 @@ export default function BasicLayout({ children }: React.PropsWithChildren) {
                         minHeight: 360,
                         background: colorBgContainer,
                         borderRadius: borderRadiusLG,
+                        zoom: scale,
+                        transformOrigin: 'top left',
+                        width: '100%',
+                        height: '100%',
                     }}
                 >
                     {children}

diff --git a/src/lib/hooks.tsx b/src/lib/hooks.tsx
@@ -512,4 +512,20 @@ export function useCourseFolders(courseId?: number) {
     }, [courseId]);
     const shouldFetch = courseId != undefined;
     return useData<Folder[]>("list_course_folders", shouldFetch, args);
-}
+}
+export const useKeyPress = (targetKey: string, action: () => void) => {
+    useEffect(() => {
+        const keyHandler = (event: KeyboardEvent) => {
+            if ((event.ctrlKey || event.metaKey) && event.key === targetKey) {
+                event.preventDefault();
+                action();
+            }
+        };
+
+        window.addEventListener('keydown', keyHandler);
+
+        return () => {
+            window.removeEventListener('keydown', keyHandler);
+        };
+    }, [targetKey, action]);
+};