feat: Graphing canvas resizing

Author: NriotHrreion

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 {

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;

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;

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)