add BFS algo

Author: Gunawan Nur Ahmad

src/algorithms/BFS.js

@@ -1 +1,45 @@
-export function BFS(grid, startNode, finishNode) {}
+export function BFS(grid, startNode, finishNode) {
+  const queue = [];
+  const visitedNodes = [];
+  startNode.distance = 0;
+  queue.push(startNode);
+  while (queue.length != 0) {
+    let currNode = queue.shift();
+    if (currNode.isVisited || currNode.isWall) continue;
+    currNode.isVisited = true;
+    if (currNode.distance == Infinity) return visitedNodes;
+    visitedNodes.push(currNode);
+    if (currNode == finishNode) return visitedNodes;
+    updateUnvisitedNeighbours(currNode, grid, queue);
+  }
+  return visitedNodes;
+}
+
+function updateUnvisitedNeighbours(node, grid, queue) {
+  const unvisitedNeighbours = getUnvisistedNeighbours(node, grid);
+  for (let neighbour of unvisitedNeighbours) {
+    neighbour.distance = node.distance + 1;
+    neighbour.previousNode = node;
+    queue.push(neighbour);
+  }
+}
+
+function getUnvisistedNeighbours(node, grid) {
+  const neighbours = [];
+  const { col, row } = node;
+  if (row > 0) neighbours.push(grid[row - 1][col]);
+  if (col > 0) neighbours.push(grid[row][col - 1]);
+  if (row < grid.length - 1) neighbours.push(grid[row + 1][col]);
+  if (col < grid[0].length - 1) neighbours.push(grid[row][col + 1]);
+  return neighbours.filter((node) => !node.isVisited);
+}
+
+export function findTheShortestPathFromBFS(finishNode) {
+  const nodesInShortesPathOrder = [];
+  let currNode = finishNode;
+  while (currNode !== null) {
+    nodesInShortesPathOrder.unshift(currNode);
+    currNode = currNode.previousNode;
+  }
+  return nodesInShortesPathOrder;
+}

src/algorithms/bidirectionalDijkstra.js

@@ -1,13 +1,21 @@
-const unvisitedNodesFromStart = [];
-const unvisitedNodesFromFinish = [];
-const visitedNodesFromFinish = [];
-const visitedNodesFromStart = [];
-let found = false;
+let unvisitedNodesFromStart = [];
+let unvisitedNodesFromFinish = [];
+let visitedNodesFromFinish = [];
+let visitedNodesFromStart = [];
+let foundByBothTarget = false;
 let foundNode = null;
 let lastNode = null;
-let last = undefined;
+let lastFrom = undefined;
 
 export function bidirectionalDijkstra(grid, startNode, finishNode) {
+  unvisitedNodesFromStart = [];
+  unvisitedNodesFromFinish = [];
+  visitedNodesFromFinish = [];
+  visitedNodesFromStart = [];
+  foundByBothTarget = false;
+  foundNode = null;
+  lastNode = null;
+  lastFrom = null;
   startNode.distance = 0;
   finishNode.distance = 0;
   const visistedNodesInOrder = [];
@@ -28,8 +36,8 @@ export function bidirectionalDijkstra(grid, startNode, finishNode) {
       currNodeStart.isVisited = true;
       visistedNodesInOrder.push(currNodeStart);
       visitedNodesFromStart.push(currNodeStart);
-      if (found) {
-        if (last == "start") {
+      if (foundByBothTarget) {
+        if (lastFrom == "start") {
           sortNodesByDistance(visitedNodesFromStart);
 
           lastNode = visitedNodesFromStart[visitedNodesFromStart.length - 1];
@@ -51,8 +59,8 @@ export function bidirectionalDijkstra(grid, startNode, finishNode) {
       currNodeFinish.isVisited = true;
       visistedNodesInOrder.push(currNodeFinish);
       visitedNodesFromFinish.push(currNodeFinish);
-      if (found) {
-        if (last == "start") {
+      if (foundByBothTarget) {
+        if (lastFrom == "start") {
           sortNodesByDistance(visitedNodesFromStart);
 
           lastNode = visitedNodesFromStart[visitedNodesFromStart.length - 1];
@@ -76,7 +84,7 @@ export function bidirectionalDijkstra(grid, startNode, finishNode) {
       return visistedNodesInOrder;
     }
   }
-  if (last == "start") {
+  if (lastFrom == "start") {
     sortNodesByDistance(visitedNodesFromStart);
     lastNode = visitedNodesFromStart[visitedNodesFromStart.length - 1];
   } else {
@@ -102,17 +110,17 @@ function updateUnvisitedNeighbours(
   for (let neighbour of unvisitedNeighbours) {
     if (isFromStart) {
       if (visitedNodesFromFinish.includes(neighbour)) {
-        last = "start";
+        lastFrom = "start";
 
         foundNode = neighbour;
-        found = true;
+        foundByBothTarget = true;
         return;
       }
     } else if (isFromFinish) {
       if (visitedNodesFromStart.includes(neighbour)) {
         foundNode = neighbour;
-        last = "finish";
-        found = true;
+        lastFrom = "finish";
+        foundByBothTarget = true;
         return;
       }
     }

src/components/Navbar.vue

@@ -11,6 +11,7 @@
           <ul class="ul-list" v-if="isShowingAlgoList">
             <li @click="changeSelectedAlgo('A* Search')">A* Search</li>
             <li @click="changeSelectedAlgo('Dijkstra')">Dijkstra</li>
+            <li @click="changeSelectedAlgo('BFS')">BFS</li>
             <li @click="changeSelectedAlgo('Bidirectional Dijkstra')">
               Bidirectional Dijkstra
             </li>
@@ -67,8 +68,8 @@ export default {
       this.$refs.triangle.classList.remove("flip");
     },
     openAlgoList() {
-      this.isShowingAlgoList = true;
-      this.$refs.triangle.classList.add("flip");
+      this.isShowingAlgoList = !this.isShowingAlgoList;
+      this.$refs.triangle.classList.toggle("flip");
     },
   },
 };

src/components/PathfindingVisualizer.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="container" ref="container">
-    <button @click="runBidirectional">Bidirectional</button>
     <div class="grid" v-for="(row, rowIndex) in grid" :key="rowIndex">
       <Node
         v-for="(col, colIndex) in row"
@@ -22,6 +21,7 @@ import {
   bidirectionalDijkstra,
   findTheShortestPathFromBidirectional,
 } from "../algorithms/bidirectionalDijkstra";
+import { BFS, findTheShortestPathFromBFS } from "../algorithms/BFS";
 export default {
   components: { Node },
   data() {
@@ -59,30 +59,43 @@ export default {
         distance: Infinity,
       };
     },
+    runBFS() {
+      const startNode = this.grid[this.$store.state.startNode.row][
+        this.$store.state.startNode.col
+      ];
+      const finishNode = this.grid[this.$store.state.finishNode.row][
+        this.$store.state.finishNode.col
+      ];
+      let visistedNodes = BFS(this.grid, startNode, finishNode);
+      let shortestPath = findTheShortestPathFromBFS(finishNode);
+      this.visualizeAlgo(visistedNodes, shortestPath);
+    },
     runBidirectional() {
       const startNode = this.grid[this.$store.state.startNode.row][
         this.$store.state.startNode.col
       ];
       const finishNode = this.grid[this.$store.state.finishNode.row][
         this.$store.state.finishNode.col
       ];
-      let test = bidirectionalDijkstra(this.grid, startNode, finishNode);
-      let path = findTheShortestPathFromBidirectional();
-      this.visualizeAlgo(test, path);
+      let visitedNodes = bidirectionalDijkstra(
+        this.grid,
+        startNode,
+        finishNode
+      );
+      let shortestPath = findTheShortestPathFromBidirectional();
+      this.visualizeAlgo(visitedNodes, shortestPath);
     },
     runPathfindingAlgo() {
       this.resetVisitedGrid();
-      if (this.$store.state.selectedAlgorithm.toLowerCase() === "a* search") {
+      let selectedAlgo = this.$store.state.selectedAlgorithm.toLowerCase();
+      if (selectedAlgo === "a* search") {
         this.runAstarAlgo();
-      } else if (
-        this.$store.state.selectedAlgorithm.toLowerCase() === "dijkstra"
-      ) {
+      } else if (selectedAlgo === "dijkstra") {
         this.runDijkstraAlgo();
-      } else if (
-        this.$store.state.selectedAlgorithm.toLowerCase() ===
-        "bidirectional dijkstra"
-      ) {
+      } else if (selectedAlgo === "bidirectional dijkstra") {
         this.runBidirectional();
+      } else if (selectedAlgo === "bfs") {
+        this.runBFS();
       }
     },
     runAstarAlgo() {
@@ -186,6 +199,7 @@ export default {
           this.grid[i][j].isVisited = false;
           this.grid[i][j].distance = Infinity;
           this.grid[i][j].isWall = false;
+          this.grid[i][j].previousNode = null;
         }
       }
       let visitedNodes = document.querySelectorAll(".node");

src/scss/Navbar.scss

@@ -52,8 +52,10 @@
           overflow: hidden;
           left: 0;
           right: 0;
+          width: auto;
           border-radius: 10px;
           min-width: 150px;
+          z-index: 99;
 
           li {
             padding: 0.5rem 1rem;