From dce333a80d777f329e840a7dd51d5405d0e1e8ef Mon Sep 17 00:00:00 2001
From: "923048992@qq.com" <923048992@qq.com>
Date: Tue, 25 Jun 2024 20:11:18 +0800
Subject: [PATCH] feat: support zoom in/out (#31)

---
 src-tauri/Cargo.lock                |  2 +-
 src-tauri/Cargo.toml                |  2 +-
 src-tauri/tauri.conf.json           |  2 +-
 src/components/change_log_modal.tsx |  6 ++++++
 src/components/layout.tsx           | 19 +++++++++++++++++++
 src/lib/hooks.tsx                   | 18 +++++++++++++++++-
 6 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index eb6745f..1d398ec 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -3339,7 +3339,7 @@ checksum = "38b58827f4464d87d377d175e90bf58eb00fd8716ff0a62f80356b5e61555d0d"
 
 [[package]]
 name = "sjtu_canvas_helper"
-version = "1.3.11"
+version = "1.3.12"
 dependencies = [
  "bardecoder",
  "base64 0.22.1",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index ebf7791..dc2aba4 100644
--- 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
index 8ca7dda..ae968e8 100644
--- 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
index 860a06c..e2d26fb 100644
--- 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
index d74d8a3..2eb771c 100644
--- 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
index 4e69927..763c825 100644
--- 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);
-}
\ No newline at end of file
+}
+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]);
+};