Use image for dimensions and use codeText to set limit

david-yz-liu · Nov 5, 2024 · e785baa · e785baa
1 parent 34ae304
commit e785baa
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/webstepper/src/App.tsx b/webstepper/src/App.tsx
@@ -6,17 +6,16 @@ import CodeDisplay from "./CodeDisplay";
 
 export default function App() {
     const [step, setStep] = useState<number>(0);
-    const limit = 4;
-    const handleStep = (newStep: number) => {
-        setStep(Math.min(Math.max(newStep, 0), limit - 1));
-    };
-    const svgPath = `/images/snapshot-${step}.svg`;
-
     // TODO: remove this and replace it with actual stuff lol
     const codeText = `num = 123
 some_string = "Hello, world"
 num2 = 321
 arr = [some_string, "string 123321"]`;
+    const limit = codeText.split("\n").length;
+    const handleStep = (newStep: number) => {
+        setStep(Math.min(Math.max(newStep, 0), limit - 1));
+    };
+    const svgPath = `/images/snapshot-${step}.svg`;
 
     return (
         <main className="container">

diff --git a/webstepper/src/SvgDisplay.tsx b/webstepper/src/SvgDisplay.tsx
@@ -20,7 +20,7 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
                 image.src = URL.createObjectURL(blob);
                 image.onload = () => {
                     const context = canvasRef.current.getContext("2d");
-                    context.clearRect(0, 0, canvasWidth, canvasHeight);
+                    context.clearRect(0, 0, image.width, image.height);
                     context.drawImage(image, 0, 0);
                 };
             } catch (error) {