From cafcd52206ed165410d4c0cafae6cfe5233eca0b Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sun, 26 May 2024 13:00:27 +0800
Subject: [PATCH] feat: Graphing canvas resizing

---
 src/renderer/Graphics.ts       | 11 +++++++++++
 src/renderer/Render.ts         |  4 ++++
 src/views/graphing/index.tsx   | 12 ++++++++++++
 src/workers/graphing.worker.ts |  3 +++
 4 files changed, 30 insertions(+)

diff --git a/src/renderer/Graphics.ts b/src/renderer/Graphics.ts
index cd8d2f6..e2b8554 100644
--- a/src/renderer/Graphics.ts
+++ b/src/renderer/Graphics.ts
@@ -221,6 +221,17 @@ export default class Graphics {
         this.canvas.height = this.canvas.height;
     }
 
+    protected resize(width: number, height: number) {
+        const oldWidth = this.canvas.width;
+        const oldHeight = this.canvas.height;
+
+        this.canvas.width = width;
+        this.canvas.height = height;
+
+        this.center.x = width * (this.center.x / oldWidth);
+        this.center.y = height * (this.center.y / oldHeight);
+    }
+
     // MARK: Utilities
 
     private getMaxDrawingRange(): number {
diff --git a/src/renderer/Render.ts b/src/renderer/Render.ts
index f73f0ea..c328d19 100644
--- a/src/renderer/Render.ts
+++ b/src/renderer/Render.ts
@@ -208,6 +208,10 @@ export default class Render extends Graphics {
         this.center.y -= centerDy * this.scale;
     }
 
+    public handleResize(width: number, height: number) {
+        this.resize(width, height);
+    }
+
     private refreshMousePoint(rect: DOMRect, cx: number, cy: number) {
         var mousePoint = this.createPoint(cx - rect.left, cy - rect.top);
         this.mousePoint = mousePoint;
diff --git a/src/views/graphing/index.tsx b/src/views/graphing/index.tsx
index 36cd2d0..b980f15 100644
--- a/src/views/graphing/index.tsx
+++ b/src/views/graphing/index.tsx
@@ -111,6 +111,18 @@ const Graphing: React.FC = memo(() => {
             if(!workerRef.current) return;
             workerRef.current.postMessage({ type: "wheel", dy: e.deltaY });
         });
+        window.addEventListener("resize", () => {
+            if(!workerRef.current) return;
+
+            const width = Utils.getElem("display-frame").clientWidth;
+            const height = Utils.getElem("display-frame").clientHeight;
+            canvas.style.width = width +"px";
+            canvas.style.height = height +"px";
+            canvas.width = width * window.devicePixelRatio;
+            canvas.height = height * window.devicePixelRatio;
+            
+            workerRef.current.postMessage({ type: "resize", width, height });
+        });
 
         // Init mobile events
         var lastTouch: Touch | null = null;
diff --git a/src/workers/graphing.worker.ts b/src/workers/graphing.worker.ts
index ea083a7..74a7cc8 100644
--- a/src/workers/graphing.worker.ts
+++ b/src/workers/graphing.worker.ts
@@ -50,6 +50,9 @@ ctx.addEventListener("message", (e) => {
         case "touch-zoom":
             renderer.handleTouchZoom(req.rect, req.cxA, req.cyA, req.cxB, req.cyB);
             break;
+        case "resize":
+            renderer.handleResize(req.width, req.height);
+            break;
         case "theme-change":
             req.isDarkMode
             ? renderer.config.setTheme(Theme.DARK)