Fix canvas scroll when no data

gina0605 · Aug 7, 2023 · a06304b · a06304b
1 parent 7809ff9
commit a06304b
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -100,8 +100,13 @@ export const Canvas = ({
   }, [zoom]);
 
   useEffect(() => {
-    if (!canvasRef.current || !data) return;
+    if (!canvasRef.current) return;
     const cnvs = canvasRef.current as HTMLCanvasElement;
+    if (!data) {
+      cnvs.width = cnvs.height = 0;
+      cnvs.style.width = cnvs.style.height = "0px";
+      return;
+    }
     setupCanvas(cnvs, data.width, data.height);
     const ctx = cnvs.getContext("2d") as CanvasRenderingContext2D;
     const modifData = data.data.slice();
@@ -266,9 +271,7 @@ export const Canvas = ({
       <ScrollSyncPane>
         <div
           ref={scrollerRef}
-          className={`border-2 border-black w-full h-[90vw] md:h-[40vw] relative result-box overscroll-contain ${
-            data === null ? "overflow-hidden" : "overflow-scroll"
-          }`}
+          className="border-2 border-black w-full h-[90vw] md:h-[40vw] relative result-box overscroll-contain overflow-scroll"
         >
           {data === null && (
             <>