onMouseDown(row, col)}
30 | onMouseEnter={() => onMouseEnter(row, col)}
31 | onMouseUp={() => onMouseUp()}>
32 | );
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/PathfindingVisualizer/PathfindingVisualizer.css:
--------------------------------------------------------------------------------
1 | .grid {
2 | margin: 100px 0 0;
3 | }
--------------------------------------------------------------------------------
/src/PathfindingVisualizer/PathfindingVisualizer.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import Node from './Node/Node';
3 | import {dijkstra, getNodesInShortestPathOrder} from '../algorithms/dijkstra';
4 |
5 | import './PathfindingVisualizer.css';
6 |
7 | const START_NODE_ROW = 10;
8 | const START_NODE_COL = 15;
9 | const FINISH_NODE_ROW = 10;
10 | const FINISH_NODE_COL = 35;
11 |
12 | export default class PathfindingVisualizer extends Component {
13 | constructor() {
14 | super();
15 | this.state = {
16 | grid: [],
17 | mouseIsPressed: false,
18 | };
19 | }
20 |
21 | componentDidMount() {
22 | const grid = getInitialGrid();
23 | this.setState({grid});
24 | }
25 |
26 | handleMouseDown(row, col) {
27 | const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
28 | this.setState({grid: newGrid, mouseIsPressed: true});
29 | }
30 |
31 | handleMouseEnter(row, col) {
32 | if (!this.state.mouseIsPressed) return;
33 | const newGrid = getNewGridWithWallToggled(this.state.grid, row, col);
34 | this.setState({grid: newGrid});
35 | }
36 |
37 | handleMouseUp() {
38 | this.setState({mouseIsPressed: false});
39 | }
40 |
41 | animateDijkstra(visitedNodesInOrder, nodesInShortestPathOrder) {
42 | for (let i = 0; i <= visitedNodesInOrder.length; i++) {
43 | if (i === visitedNodesInOrder.length) {
44 | setTimeout(() => {
45 | this.animateShortestPath(nodesInShortestPathOrder);
46 | }, 10 * i);
47 | return;
48 | }
49 | setTimeout(() => {
50 | const node = visitedNodesInOrder[i];
51 | document.getElementById(`node-${node.row}-${node.col}`).className =
52 | 'node node-visited';
53 | }, 10 * i);
54 | }
55 | }
56 |
57 | animateShortestPath(nodesInShortestPathOrder) {
58 | for (let i = 0; i < nodesInShortestPathOrder.length; i++) {
59 | setTimeout(() => {
60 | const node = nodesInShortestPathOrder[i];
61 | document.getElementById(`node-${node.row}-${node.col}`).className =
62 | 'node node-shortest-path';
63 | }, 50 * i);
64 | }
65 | }
66 |
67 | visualizeDijkstra() {
68 | const {grid} = this.state;
69 | const startNode = grid[START_NODE_ROW][START_NODE_COL];
70 | const finishNode = grid[FINISH_NODE_ROW][FINISH_NODE_COL];
71 | const visitedNodesInOrder = dijkstra(grid, startNode, finishNode);
72 | const nodesInShortestPathOrder = getNodesInShortestPathOrder(finishNode);
73 | this.animateDijkstra(visitedNodesInOrder, nodesInShortestPathOrder);
74 | }
75 |
76 | render() {
77 | const {grid, mouseIsPressed} = this.state;
78 |
79 | return (
80 | <>
81 |
85 | {grid.map((row, rowIdx) => {
86 | return (
87 |
88 | {row.map((node, nodeIdx) => {
89 | const {row, col, isFinish, isStart, isWall} = node;
90 | return (
91 | this.handleMouseDown(row, col)}
99 | onMouseEnter={(row, col) =>
100 | this.handleMouseEnter(row, col)
101 | }
102 | onMouseUp={() => this.handleMouseUp()}
103 | row={row}>
104 | );
105 | })}
106 |
107 | );
108 | })}
109 |