Merge pull request #116 from Spiderpig02/develop

fix: 🐛 Fix bug where you could view earlier traversals via the algorithmStepSlider after either clearing the grid or having set new start points.
Spiderpig02 · Sep 20, 2024 · 6797b2b · 6797b2b
2 parents 9185871 + 17ffe83
commit 6797b2b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 21 deletions.
diff --git a/frontend/src/components/algorithmStepSlider/AlgorithmStepSlider.tsx b/frontend/src/components/algorithmStepSlider/AlgorithmStepSlider.tsx
@@ -5,6 +5,10 @@ import {
   clearPreviousAnimations,
   renderStep,
 } from "../../services/animationService";
+import { endPoint, startPoint } from "../mapGrid/MapGrid";
+import { signal } from "@preact/signals-react";
+
+export const disableAlgorithmStepSliderSignal = signal<boolean>(false);
 
 const AlgorithmStepSlider = () => {
   const [size, setSize] = useState<number>(
@@ -57,6 +61,11 @@ const AlgorithmStepSlider = () => {
         onChange={handleSliderChange}
         onMouseUp={handleCommitChange}
         onKeyUp={handleCommitChange}
+        disabled={
+          startPoint.value === null ||
+          endPoint.value === null ||
+          disableAlgorithmStepSliderSignal.value
+        } // Disable slider if start or end point is not set or if disableAlgorithmStepSliderSignal is set to true
       />
     </div>
   );

diff --git a/frontend/src/components/clearGridButton/ClearGridButton.tsx b/frontend/src/components/clearGridButton/ClearGridButton.tsx
@@ -1,25 +1,30 @@
-import React from 'react';
+import React from "react";
 import { resetGrid } from "../../services/animationService";
 import "./ClearGridButton.css";
 
 const ClearGridButton: React.FC = () => {
-    return (
-        <div className="clear-button-container">
-            <button className="clear-button" onClick={resetGrid}>
-                <svg xmlns="http://www.w3.org/2000/svg" 
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24" 
-                    fill="none" 
-                    strokeWidth={1.8} 
-                    stroke="currentColor" 
-                    className="size-10"
-                    >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                </svg>
-            </button>
-        </div>
-    );
-}
+  return (
+    <div className="clear-button-container">
+      <button className="clear-button" onClick={resetGrid}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          strokeWidth={1.8}
+          stroke="currentColor"
+          className="size-10"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};
 
-export default ClearGridButton;
+export default ClearGridButton;
diff --git a/frontend/src/components/startAndEndPointsButton/StartAndEndPointsButton.tsx b/frontend/src/components/startAndEndPointsButton/StartAndEndPointsButton.tsx
@@ -2,6 +2,7 @@ import { signal } from "@preact/signals-react";
 import DefaultButton from "../defaultButton/DefaultButton";
 import "./StartAndEndPointsButton.css";
 import { tiles } from "../mapGrid/MapGrid";
+import { ResetTraversalVariablesIfAtLeastOneTraversalHasAlreadyBeenDone } from "../../services/animationService";
 
 export const selectionModeSignal = signal<boolean>(false);
 export const startEndSignal = signal<number>(0);
@@ -15,6 +16,8 @@ const StartAndEndPointsButton = () => {
       isExplored: false,
       isPath: false,
     }));
+    // Reset traversal variables
+    ResetTraversalVariablesIfAtLeastOneTraversalHasAlreadyBeenDone();
 
     startEndSignal.value = 1;
     clearSignal.value = !clearSignal.value;

diff --git a/frontend/src/services/animationService.ts b/frontend/src/services/animationService.ts
@@ -17,6 +17,7 @@ import { PostTraversalProps, PostTraversalResponse } from "../types";
 import { postTraversal } from "./postTraversal";
 import { Node } from "../types";
 import { clearSignal } from "../components/startAndEndPointsButton/StartAndEndPointsButton";
+import { disableAlgorithmStepSliderSignal } from "../components/algorithmStepSlider/AlgorithmStepSlider";
 
 let timeoutIds: number[] = [];
 let nodeOrder: Node[] = [];
@@ -54,14 +55,14 @@ export const handleTraverse = (onAnimationStart: () => void) => {
             // Parse the path and nodeOrder JSON strings into arrays
             path = JSON.parse(res.path);
             nodeOrder = JSON.parse(res.nodeOrder);
-            console.log("NodeOrder = ", nodeOrder);
 
             // Create a copy of the signal and update min, max, and currentValue
             const updatedSignal = { ...algorithmStepSliderSignal.value };
             updatedSignal.currentValue = 0;
             updatedSignal.min = 0;
             updatedSignal.max = nodeOrder.length + path.length - 1;
             algorithmStepSliderSignal.value = updatedSignal;
+            disableAlgorithmStepSliderSignal.value = false;
 
             // Call the callback to indicate the animation is starting
             onAnimationStart();
@@ -193,3 +194,21 @@ export const resetGrid = () => {
     };
   });
 };
+
+/**
+ * Reset the traversal variables to their initial state so that user can not access earlier traversals
+ * via the algorithmStepSliderSignal
+ */
+export const ResetTraversalVariablesIfAtLeastOneTraversalHasAlreadyBeenDone =
+  () => {
+    if (path.length > 0 && nodeOrder.length > 0) {
+      path = [];
+      nodeOrder = [];
+      algorithmStepSliderSignal.value = {
+        currentValue: 0,
+        min: 0,
+        max: 0,
+      };
+      disableAlgorithmStepSliderSignal.value = true;
+    }
+  };