├── .gitignore ├── Github ├── Developer │ └── Image │ │ └── Dev_pro_pic.jpeg ├── Gif │ └── Gif-Full-Tutorial.gif └── Images │ ├── BubbleSort.png │ ├── Dfs.png │ ├── Dijkstra.png │ ├── QuickSort.png │ └── SinglyLinkedList.png ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── App.test.js ├── LogoForAlgo.png ├── css │ ├── Board.css │ ├── Card.css │ ├── Circle.css │ ├── CustomDraggbleNode.css │ ├── Image.css │ ├── NavBar.css │ ├── SingleNode.css │ ├── img │ │ ├── double-chevron.png │ │ └── stop.png │ └── pages │ │ ├── BubbleSort.css │ │ └── Dijkstra.css ├── images │ ├── Algo Pics │ │ ├── BubbleSort.png │ │ ├── Dfs.png │ │ ├── Dijkstra.png │ │ ├── LinkedList.png │ │ └── QuickSort.png │ ├── arrowImg.png │ └── logo.svg ├── index.css ├── index.js ├── logo.svg ├── pages │ ├── BubbleSort.js │ ├── Dfs.js │ ├── Dijkstra.js │ ├── Home.js │ ├── QuickSort.js │ ├── SinglyLinkLIst.js │ └── components │ │ ├── AddInputButton.js │ │ ├── Bar.js │ │ ├── Board.js │ │ ├── Canvas.js │ │ ├── Card.js │ │ ├── Circle.js │ │ ├── Custom │ │ ├── CustomButton.js │ │ └── CustomSlider.js │ │ ├── CustomDraggbleNode.js │ │ ├── Hr.js │ │ ├── Image.js │ │ ├── Logo.js │ │ ├── NavBar.js │ │ ├── SingleBar.js │ │ ├── SingleNode.js │ │ ├── SinglyLinkListViewer.js │ │ ├── SyncState.js │ │ ├── Toggler.js │ │ ├── VideoModal.js │ │ └── utils │ │ ├── algorithms │ │ ├── DfsAlgorithm.js │ │ ├── DijkstraAlgo.js │ │ ├── quickSortFun.js │ │ └── singlyLinkedListAlgo.js │ │ ├── arrowForCanvas.js │ │ ├── circleForCanvas.js │ │ ├── lineForCanvas.js │ │ ├── reducer.js │ │ ├── sleepFun.js │ │ └── store.js ├── reportWebVitals.js ├── setupTests.js └── videos │ └── DijkstraVideo-No-Edit.mp4 └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | 4 | 5 | # dependencies 6 | /node_modules 7 | /.pnp 8 | .pnp.js 9 | 10 | # testing 11 | /coverage 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | 28 | #.netlify 29 | /.netlify 30 | 31 | #developer photo 32 | /Github/Developer/Image/ -------------------------------------------------------------------------------- /Github/Developer/Image/Dev_pro_pic.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Developer/Image/Dev_pro_pic.jpeg -------------------------------------------------------------------------------- /Github/Gif/Gif-Full-Tutorial.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Gif/Gif-Full-Tutorial.gif -------------------------------------------------------------------------------- /Github/Images/BubbleSort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Images/BubbleSort.png -------------------------------------------------------------------------------- /Github/Images/Dfs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Images/Dfs.png -------------------------------------------------------------------------------- /Github/Images/Dijkstra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Images/Dijkstra.png -------------------------------------------------------------------------------- /Github/Images/QuickSort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Images/QuickSort.png -------------------------------------------------------------------------------- /Github/Images/SinglyLinkedList.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/Github/Images/SinglyLinkedList.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Wasim Akram Biswas 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

ALGO / VISUALIZER

4 | Algorithm visualizer is a react base web app where we can visualize and play with algorithm. 5 | 6 |
7 | 8 | ## Algorithms 9 | 10 | - Bubble Sort 11 | - Quick Sort 12 | - Singly Linked List 13 | - DFS 14 | - Dijkstra 15 | 16 | ## Prerequisite 17 | 18 | - Basic coding knowledge 19 | 20 | - Some concept about data structure and algorithm 21 | 22 | - Mathematices 23 | 24 | ## Project Initialization 25 | 26 | - Clone the project 27 | 28 | - Change directory to AlgoVisualizer 29 | 30 | cd AlgoVisualizer 31 | 32 | - Open terminal and write 33 | 34 | npm i 35 | // or 36 | yarn add 37 | 38 | - To run the code 39 | 40 | npm start 41 | // or 42 | yarn start 43 | 44 | ### Technologies 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 | 66 | ## Highlights 67 | 68 | 69 | 70 | ## Words about this project 71 | 72 |
73 | 74 |

Bubble Sort

75 |

76 | Bubble Sort is simple sorting algorithm. It is slow sorting alogithm .It used loop for sorting. This algorithm used loop so Time Complexity is high. 77 | 78 | **And Degree of Polynomial :- 2** 79 | 80 | **Time Complexity is O(n^2) .** 81 | 82 | Time Complexity is n^2 because here i used Two itarations . 83 | 84 |

85 | 86 | 87 |
88 | 89 |
90 | 91 |

Quick Sort

92 |

93 | Quick Sort is divide and conquer algorithms. Basically It has a pivot index . Using the pivot index it apply recursion . As, It is use recursion so it's time complexity will reduce 94 | 95 | **Time Complexity is O(n log n)** 96 | 97 |

98 | 99 | 100 |
101 | 102 |
103 | 104 |

Singly Linked List

105 |

106 | Singly Linked List is a type of Data structure . Where it can used in store Data . In this List where every element has a Head and Tail . And every element pointing to tail . And it is a One Dircetional like Vector in Mathematices. 107 | We can add or remove element from the front, the end or from anywhere in the list. But in This project we can remove or add from last in list 108 | 109 |

110 | 111 | 112 |
113 | 114 |
115 | 116 |

DFS

117 |

118 | DFS is searching technique in a Graph . DFS means Depth first search. In this technique search will happen in depth of tree if seaching node is found then search is complete but id searching node is not found . it will backtrack . 119 | 120 |

121 | 122 | 123 |
124 | 125 |
126 | 127 |

Dijkstra

128 |

129 | Dijkstra is very popular algorithms. It found the sortest path between two nodes . It works in weight grarph. To find the sortest path we can use adjecency matrix or adjecency list . Here i use adjecency List . 130 | 131 |

132 | 133 | 134 |
135 | 136 |

Note :

137 | 142 | 143 | ### PROJECT URL : 144 | 145 | Deployment Server :- netlify 146 | 147 | Click me to See 148 | 149 | 161 | 162 | ## MIT License 163 | 164 | Copyright (c) 2021 Wasim Akram Biswas 165 | 166 | Permission is hereby granted, free of charge, to any person obtaining a copy 167 | of this software and associated documentation files (the "Software"), to deal 168 | in the Software without restriction, including without limitation the rights 169 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 170 | copies of the Software, and to permit persons to whom the Software is 171 | furnished to do so, subject to the following conditions: 172 | 173 | The above copyright notice and this permission notice shall be included in all 174 | copies or substantial portions of the Software. 175 | 176 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 177 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 178 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 179 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 180 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 181 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 182 | SOFTWARE. 183 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "algovisualizer", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@ant-design/icons": "^4.5.0", 7 | "@material-ui/core": "^4.11.3", 8 | "@material-ui/icons": "^4.11.2", 9 | "@material-ui/styles": "^4.11.3", 10 | "@testing-library/jest-dom": "^5.11.4", 11 | "@testing-library/react": "^11.1.0", 12 | "@testing-library/user-event": "^12.1.10", 13 | "animate.css": "^4.1.1", 14 | "antd": "^4.12.3", 15 | "bootstrap": "^4.6.0", 16 | "chart.js": "^2.9.4", 17 | "mime": "^1.6.0", 18 | "normalize.css": "^8.0.1", 19 | "notistack": "^1.0.5", 20 | "react": "^17.0.1", 21 | "react-chartjs-2": "^2.11.1", 22 | "react-dnd": "^14.0.2", 23 | "react-dnd-html5-backend": "^14.0.0", 24 | "react-dom": "^17.0.1", 25 | "react-redux": "^7.2.2", 26 | "react-router-dom": "^5.2.0", 27 | "react-scripts": "4.0.3", 28 | "react-video-js-player": "^1.1.1", 29 | "redux": "^4.0.5", 30 | "tailwindcss": "^2.0.3", 31 | "web-vitals": "^1.0.1" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test", 37 | "eject": "react-scripts eject" 38 | }, 39 | "eslintConfig": { 40 | "extends": [ 41 | "react-app", 42 | "react-app/jest" 43 | ] 44 | }, 45 | "browserslist": { 46 | "production": [ 47 | ">0.2%", 48 | "not dead", 49 | "not op_mini all" 50 | ], 51 | "development": [ 52 | "last 1 chrome version", 53 | "last 1 firefox version", 54 | "last 1 safari version" 55 | ] 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;400;500;600;700;800&display=swap"); 2 | .App { 3 | font-family: "Montserrat", sans-serif; 4 | background-color: #f1f1f1; 5 | } 6 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2021 Wasim Akram Biswas 3 | * 4 | * Permission is hereby granted, free of charge, to any person obtaining a copy 5 | * of this software and associated documentation files (the "Software"), to deal 6 | * in the Software without restriction, including without limitation the rights 7 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | * copies of the Software, and to permit persons to whom the Software is 9 | * furnished to do so, subject to the following conditions: 10 | * 11 | * The above copyright notice and this permission notice shall be included in all 12 | * copies or substantial portions of the Software. 13 | * 14 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | * SOFTWARE. 21 | */ 22 | 23 | import "./App.css"; 24 | import React from "react"; 25 | import { Switch, Route } from "react-router-dom"; 26 | //Components 27 | import NavBar from "./pages/components/NavBar"; 28 | //Pages 29 | import HomePage from "./pages/Home"; 30 | import BubbleSortPage from "./pages/BubbleSort"; 31 | import QuickSortPage from "./pages/QuickSort"; 32 | import SinglyLinkList from "./pages/SinglyLinkLIst"; 33 | import Dijkstra from "./pages/Dijkstra"; 34 | import Dfs from "./pages/Dfs"; 35 | import { SnackbarProvider } from "notistack"; 36 | 37 | function App() { 38 | return ( 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 | 52 | ); 53 | } 54 | 55 | export default App; 56 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/LogoForAlgo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/LogoForAlgo.png -------------------------------------------------------------------------------- /src/css/Board.css: -------------------------------------------------------------------------------- 1 | .Board-Container { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | width: 100%; 6 | margin-top: 10px; 7 | } 8 | 9 | .Board { 10 | width: 97.5%; 11 | border: 2px solid rgb(185, 182, 182); 12 | } 13 | 14 | .Column { 15 | display: flex; 16 | flex-direction: row; 17 | justify-content: center; 18 | } 19 | -------------------------------------------------------------------------------- /src/css/Card.css: -------------------------------------------------------------------------------- 1 | /* .cards { 2 | display: flex; 3 | align-items: flex-start; 4 | justify-content: center; 5 | } */ 6 | 7 | .card { 8 | background: #fff; 9 | border: 0.5px solid rgb(235, 233, 233); 10 | width: 25em; 11 | border-radius: 0.4em; 12 | margin: 1em; 13 | overflow: hidden; 14 | cursor: pointer; 15 | box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 16 | 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03); 17 | transition: all ease 200ms; 18 | } 19 | 20 | .card:hover { 21 | transform: scale(1.05); 22 | box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12), 23 | 0 8px 32px -8px hsla(0, 0%, 0%, 0.14), 24 | 0 -6px 32px -6px hsla(0, 0%, 0%, 0.02); 25 | } 26 | 27 | .card img { 28 | padding: 3.5px; 29 | width: 100%; 30 | object-fit: cover; 31 | background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 32 | } 33 | 34 | .card h2 { 35 | color: #222; 36 | margin-top: -0.2em; 37 | line-height: 1.4; 38 | font-size: 1.15em; 39 | font-weight: 500; 40 | font-family: "Montserrat", sans-serif; 41 | transition: all ease-in 100ms; 42 | } 43 | 44 | .card p { 45 | color: #777; 46 | font-size: 97%; 47 | } 48 | 49 | .card h5 { 50 | color: #bbb; 51 | font-weight: 700; 52 | font-size: 0.7em; 53 | letter-spacing: 0.04em; 54 | margin: 1.4em 0 0 0; 55 | text-transform: uppercase; 56 | } 57 | 58 | .card-body { 59 | padding: 1.2em; 60 | } 61 | -------------------------------------------------------------------------------- /src/css/Circle.css: -------------------------------------------------------------------------------- 1 | .Circle { 2 | width: 50px; 3 | height: 50px; 4 | /* margin-left: 10px; */ 5 | border-radius: 50%; 6 | background-color: #f83b90; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | z-index: 999; 11 | font-weight: 800; 12 | color: #fff; 13 | 14 | box-shadow: 3px 4px 8px -1px rgba(0, 0, 0, 0.73); 15 | animation: 1s ease 0s 1 normal none running crescendo; 16 | } 17 | 18 | @keyframes crescendo { 19 | 0% { 20 | transform: scale(0); 21 | } 22 | 50% { 23 | transform: scale(1.4); 24 | } 25 | 100% { 26 | transform: scale(1); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/css/CustomDraggbleNode.css: -------------------------------------------------------------------------------- 1 | .DragbleNode { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/css/Image.css: -------------------------------------------------------------------------------- 1 | @import "animate.css"; 2 | 3 | .Image { 4 | width: 35px; 5 | height: 35px; 6 | margin-left: 8px; 7 | margin-right: 8px; 8 | animation-name: shakeX; 9 | animation-duration: 1s; 10 | } 11 | 12 | @keyframes shake { 13 | 0% { 14 | -webkit-transform: scale(0) rotate(0deg); 15 | } 16 | 10% { 17 | -webkit-transform: scale(1.1) rotate(-1deg); 18 | } 19 | 20% { 20 | -webkit-transform: scale(1.25) rotate(-6deg); 21 | } 22 | 30% { 23 | -webkit-transform: scale(1.5) rotate(-12deg); 24 | } 25 | 40% { 26 | -webkit-transform: scale(1.75) rotate(-18deg); 27 | } 28 | 50% { 29 | -webkit-transform: scale(2) rotate(-24deg); 30 | } 31 | 60% { 32 | -webkit-transform: scale(1.75) rotate(18deg); 33 | } 34 | 70% { 35 | -webkit-transform: scale(1.5) rotate(12deg); 36 | } 37 | 80% { 38 | -webkit-transform: scale(1.25) rotate(6deg); 39 | } 40 | 90% { 41 | -webkit-transform: scale(1.1) rotate(1deg); 42 | } 43 | 100% { 44 | -webkit-transform: scale(0) rotate(0deg); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/css/NavBar.css: -------------------------------------------------------------------------------- 1 | nav { 2 | height: 50px; 3 | 4 | display: flex; 5 | z-index: 999; 6 | justify-content: space-around; 7 | background: #fff(101, 243, 7); 8 | color: rgb(75, 73, 73); 9 | border-bottom: 1px solid rgb(204, 204, 204); 10 | box-shadow: 0px 1px 6px rgb(184, 182, 182); 11 | } 12 | 13 | .logo { 14 | padding: 11px; 15 | font-size: 1.05em; 16 | font-weight: 800; 17 | align-items: center; 18 | text-transform: uppercase; 19 | display: flex; 20 | justify-content: center; 21 | letter-spacing: 0.5px; 22 | } 23 | 24 | .logo a { 25 | color: rgb(241, 49, 43); 26 | } 27 | 28 | .logo:hover { 29 | cursor: pointer; 30 | } 31 | 32 | .Link-Container { 33 | width: 60%; 34 | height: 100%; 35 | display: flex; 36 | justify-content: space-around; 37 | align-items: center; 38 | /* border: 1px solid green; */ 39 | } 40 | 41 | .Link-Container a { 42 | text-align: center; 43 | font-size: 87%; 44 | font-weight: 500; 45 | padding: 0.4rem 1rem; 46 | text-decoration: none; 47 | text-transform: uppercase; 48 | color: inherit; 49 | letter-spacing: 0.07rem; 50 | word-spacing: 0.07rem; 51 | } 52 | 53 | .Link-Container a:hover { 54 | padding: 0.4.5rem 0rem; 55 | background-color: #dddddd; 56 | border-radius: 3px; 57 | transition: all 0.3s ease-in-out; 58 | color: inherit; 59 | } 60 | -------------------------------------------------------------------------------- /src/css/SingleNode.css: -------------------------------------------------------------------------------- 1 | .SingleNode_Animation { 2 | animation-name: square; 3 | animation-duration: 1s; 4 | } 5 | 6 | @keyframes square { 7 | 0% { 8 | transform: scale(0); 9 | } 10 | 20% { 11 | transform: scale(1.1); 12 | box-shadow: -1px 0px 6px 0px rgba(50, 50, 50, 0.87); 13 | } 14 | 50% { 15 | transform: scale(1.2); 16 | box-shadow: -1px 0px 6px 0px rgba(50, 50, 50, 0.89); 17 | } 18 | 70% { 19 | transform: scale(1.12); 20 | box-shadow: -1px 0px 6px 0px rgba(50, 50, 50, 0.9); 21 | } 22 | 90% { 23 | transform: scale(1.1); 24 | box-shadow: -1px 0px 6px 0px rgba(50, 50, 50, 0.93); 25 | } 26 | 100% { 27 | transform: scale(0); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/css/img/double-chevron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/css/img/double-chevron.png -------------------------------------------------------------------------------- /src/css/img/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/css/img/stop.png -------------------------------------------------------------------------------- /src/css/pages/BubbleSort.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/css/pages/BubbleSort.css -------------------------------------------------------------------------------- /src/css/pages/Dijkstra.css: -------------------------------------------------------------------------------- 1 | .navigation-area { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-between; 5 | width: 95%; 6 | height: 50px; 7 | margin-right: auto !important; 8 | margin-left: auto !important; 9 | } 10 | 11 | .DijkstraButton-Container { 12 | width: 15%; 13 | display: flex; 14 | justify-content: space-between; 15 | } 16 | -------------------------------------------------------------------------------- /src/images/Algo Pics/BubbleSort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/images/Algo Pics/BubbleSort.png -------------------------------------------------------------------------------- /src/images/Algo Pics/Dfs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/images/Algo Pics/Dfs.png -------------------------------------------------------------------------------- /src/images/Algo Pics/Dijkstra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/images/Algo Pics/Dijkstra.png -------------------------------------------------------------------------------- /src/images/Algo Pics/LinkedList.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/images/Algo Pics/LinkedList.png -------------------------------------------------------------------------------- /src/images/Algo Pics/QuickSort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/images/Algo Pics/QuickSort.png -------------------------------------------------------------------------------- /src/images/arrowImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/images/arrowImg.png -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | html { 16 | min-width: 1140px; 17 | } 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | import reportWebVitals from "./reportWebVitals"; 7 | //Redux 8 | import { Provider } from "react-redux"; 9 | import store from "./pages/components/utils/store"; 10 | 11 | ReactDOM.render( 12 | 13 | 14 | 15 | 16 | 17 | 18 | , 19 | document.getElementById("root") 20 | ); 21 | 22 | // If you want to start measuring performance in your app, pass a function 23 | // to log results (for example: reportWebVitals(console.log)) 24 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 25 | reportWebVitals(); 26 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/BubbleSort.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Bar from "./components/Bar"; 3 | import { Slider, notification, Typography } from "antd"; 4 | import { WarningOutlined } from "@ant-design/icons"; 5 | import "antd/dist/antd.css"; 6 | import Hr from "./components/Hr"; 7 | import sleep from "./components/utils/sleepFun"; 8 | import { Button } from "@material-ui/core"; 9 | import { makeStyles } from "@material-ui/core/styles"; 10 | import EqualizerIcon from "@material-ui/icons/Equalizer"; 11 | import ShuffleIcon from "@material-ui/icons/Shuffle"; 12 | 13 | const useStyles = makeStyles({ 14 | CanvasContainer: { 15 | width: "100%", 16 | height: "81vh", 17 | display: "flex", 18 | flexDirection: "column", 19 | }, 20 | 21 | numberDisplay: { 22 | height: "5%", 23 | width: "100%", 24 | display: "flex", 25 | justifyContent: "center", 26 | flexDirection: "row ", 27 | alignItems: "center", 28 | // border: "1px solid #f1f1f1", 29 | }, 30 | Controller: { 31 | width: "100%", 32 | height: "21%", 33 | background: "#fff", 34 | display: "flex", 35 | justifyContent: "space-around", 36 | alignItems: "center", 37 | marginTop: "4px", 38 | }, 39 | sliderContainer: { 40 | minWidth: "750px", 41 | display: "flex", 42 | flexDirection: "row", 43 | justifyContent: "space-around", 44 | }, 45 | 46 | singleSliderContainer: { 47 | border: ".3px solid #ccc", 48 | background: "#fff", 49 | width: "40%", 50 | padding: "7px", 51 | borderRadius: "2px", 52 | }, 53 | 54 | buttonStyle: { 55 | background: "#722ed1", 56 | border: "1px solid #7d53b8", 57 | 58 | "& hover": { 59 | background: "#865ebd", 60 | }, 61 | }, 62 | }); 63 | 64 | const BubbleSort = () => { 65 | const [arr, setArr] = useState([ 66 | { number: 69, color: "#f4124b" }, 67 | { number: 56, color: "#f4124b" }, 68 | { number: 10, color: "#f4124b" }, 69 | { number: 89, color: "#f4124b" }, 70 | { number: 8, color: "#f4124b" }, 71 | { number: 56, color: "#f4124b" }, 72 | { number: 58, color: "#f4124b" }, 73 | { number: 23, color: "#f4124b" }, 74 | { number: 77, color: "#f4124b" }, 75 | { number: 11, color: "#f4124b" }, 76 | { number: 1, color: "#f4124b" }, 77 | ]); 78 | 79 | const [disable, setDisable] = useState(false); 80 | const [time, setTime] = useState(4); 81 | const [alreadySorted, setAlreadySorted] = useState(false); 82 | const [sliderVal, setSliderVal] = useState(0); 83 | 84 | const classes = useStyles(); 85 | const { 86 | CanvasContainer, 87 | Controller, 88 | sliderContainer, 89 | numberDisplay, 90 | singleSliderContainer, 91 | } = classes; 92 | 93 | const handleChange = (v) => { 94 | setSliderVal(v); 95 | 96 | let arrCraeted = []; 97 | 98 | for (let i = 0; i < v / 1.4; i++) { 99 | arrCraeted.push({ 100 | number: Math.floor(Math.random() * 100), 101 | color: "#f4124b", 102 | }); 103 | } 104 | setAlreadySorted(false); 105 | setArr(arrCraeted); 106 | }; 107 | 108 | const timeHandleChange = (t) => { 109 | setTime(t); 110 | }; 111 | 112 | const handleClick = async () => { 113 | if (arr.length !== 0) { 114 | for (let round = 0; round < arr.length - 1; round++) { 115 | for (let element = 0; element < arr.length - 1 - round; element++) { 116 | await sleep(time); 117 | if (arr[element].number > arr[element + 1].number) { 118 | let temp; 119 | 120 | arr[element].color = "#ebd808"; 121 | arr[element + 1].color = "#ebd808"; 122 | 123 | temp = arr[element]; 124 | arr[element] = arr[element + 1]; 125 | arr[element + 1] = temp; 126 | 127 | setDisable(true); 128 | setArr([...arr]); 129 | } 130 | 131 | arr[element].color = "#f4124b"; 132 | arr[element + 1].color = "#f4124b"; 133 | } 134 | } 135 | 136 | for (let i = 0; i < arr.length; i++) { 137 | arr[i].color = "#23ff00"; 138 | } 139 | 140 | setAlreadySorted(true); 141 | 142 | setDisable(false); 143 | } 144 | }; 145 | 146 | const handleRandom = () => { 147 | if (sliderVal !== 0 || arr.length === 11) { 148 | let arrCraeted = []; 149 | let round = sliderVal === 0 ? arr.length : sliderVal / 1.4; 150 | for (let i = 0; i < round; i++) { 151 | arrCraeted.push({ 152 | number: Math.floor(Math.random() * 100), 153 | color: "#f4124b", 154 | }); 155 | } 156 | 157 | setAlreadySorted(false); 158 | setArr(arrCraeted); 159 | } 160 | }; 161 | 162 | const { Title } = Typography; 163 | 164 | return ( 165 |
166 |

186 | Bubble Sort 187 |
191 |

192 | 193 |
194 | {/* //Here Position for "CANVAS" */} 195 | 196 | 197 |
198 |
199 | {arr.map((e, i) => ( 200 |
220 | {e.number} 221 |
222 | ))} 223 |
224 |
225 |
226 |
227 |
228 | 229 | Value 230 | 231 | 232 |
233 | 234 |
235 | 236 | Time 237 | 238 | 245 |
246 |
247 | 248 |
257 | 267 | 293 |
294 |
295 |
296 |
297 | ); 298 | }; 299 | 300 | export default BubbleSort; 301 | -------------------------------------------------------------------------------- /src/pages/Dfs.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import { Button } from "@material-ui/core"; 4 | import { connect } from "react-redux"; 5 | import { PlayCircleFilled } from "@material-ui/icons"; 6 | import { Select } from "antd"; 7 | import { ClearOutlined } from "@ant-design/icons"; 8 | // import ClearIcon from "@material-ui/icons/Clear"; 9 | 10 | // import AccountCircleIcon from '@material-ui/icons/AccountCircle'; 11 | import Board from "./components/Board"; 12 | import dfsAlgo from "./components/utils/algorithms/DfsAlgorithm"; 13 | import sleepFun from "./components/utils/sleepFun"; 14 | // This for snackbar 15 | import { useSnackbar } from "notistack"; 16 | 17 | const styles = makeStyles({ 18 | buttonContainer: { 19 | height: "50px", 20 | maxWidth: "95%", 21 | display: "flex", 22 | alignItems: "center", 23 | justifyContent: "space-between", 24 | marginRight: "auto", 25 | marginLeft: "auto", 26 | }, 27 | buttonHolder: { 28 | height: "100%", 29 | width: "220px", 30 | display: "flex", 31 | justifyContent: "space-around", 32 | alignItems: "center", 33 | 34 | // border: "1px solid blue", 35 | }, 36 | }); 37 | 38 | const Dfs = ({ walls, start, end, resetWall }) => { 39 | const [isVisiting, setVisiting] = useState(false); 40 | 41 | //This is for snackbar 42 | const { enqueueSnackbar } = useSnackbar(); 43 | 44 | const colNum = 15; 45 | const rowNum = 45; 46 | 47 | let initGrid = []; 48 | 49 | for (let i = 0; i < colNum; i++) { 50 | let colArr = []; 51 | for (let j = 0; j < rowNum; j++) { 52 | colArr.push({ 53 | neighbors: { 54 | right: { 55 | col: j + 1 < rowNum ? j + 1 : null, 56 | row: j + 1 < rowNum ? i : null, 57 | }, 58 | left: { 59 | col: j - 1 >= 0 ? j - 1 : null, 60 | row: j - 1 >= 0 ? i : null, 61 | }, 62 | down: { 63 | col: i + 1 < colNum ? j : null, 64 | row: i + 1 < colNum ? i + 1 : null, 65 | }, 66 | up: { 67 | col: i - 1 >= 0 ? j : null, 68 | row: i - 1 >= 0 ? i - 1 : null, 69 | }, 70 | }, 71 | 72 | val: 0, 73 | color: "#e3f412", 74 | animation: false, 75 | blockWall: false, 76 | }); 77 | } 78 | 79 | initGrid.push(colArr); 80 | } 81 | 82 | const [grid, setGrid] = useState(initGrid); 83 | 84 | //UseEffect 85 | 86 | useEffect(() => { 87 | const newGrid = grid.map((e, row) => 88 | e.map((x, col) => { 89 | //Actually Changing array property (eg: which cell is a Wall or Not , if the particular cell is wall then change the color of wall) 90 | // x.val is for it's updating all node's previous value '0' 91 | // This Updating is Important 92 | x.val = 0; 93 | x.color = "#e3f412"; 94 | x.blockWall = false; 95 | for (let i of walls) { 96 | if (i.col === col && i.row === row) { 97 | x.val = 1; 98 | x.color = "black"; 99 | x.blockWall = true; 100 | } 101 | } 102 | return x; 103 | }) 104 | ); 105 | 106 | setGrid(newGrid); 107 | }, [walls.length]); 108 | 109 | const [time, setTime] = useState(40); 110 | 111 | //Events 112 | 113 | const handleClick = async () => { 114 | let isFindElement = await dfsAlgo( 115 | grid, 116 | setGrid, 117 | time, 118 | start, 119 | end, 120 | sleepFun, 121 | setVisiting 122 | ); 123 | 124 | if (isFindElement) { 125 | enqueueSnackbar("ELement found", { 126 | variant: "success", 127 | }); 128 | console.log("element found"); 129 | } else { 130 | enqueueSnackbar("No Element found ", { 131 | variant: "error", 132 | autoHideDuration: 4000, 133 | }); 134 | } 135 | 136 | setVisiting(false); 137 | }; 138 | 139 | const handleReset = () => { 140 | resetWall(); 141 | 142 | let resetGrid = grid.map((e) => 143 | e.map((x) => { 144 | x.animation = false; 145 | x.val = 0; 146 | x.color = "#e3f412"; 147 | x.blockWall = false; 148 | return x; 149 | }) 150 | ); 151 | 152 | setGrid(resetGrid); 153 | }; 154 | 155 | const handleTimeChange = (e) => { 156 | setTime(e); 157 | }; 158 | 159 | //This is 'SELECT' COMPONENT 160 | const { Option } = Select; 161 | 162 | //Styles 163 | const { buttonContainer, buttonHolder } = styles(); 164 | 165 | return ( 166 |
169 | 170 | 171 |
172 | 181 | 182 |
183 | 193 | 194 | 204 |
205 |
206 |
207 | ); 208 | }; 209 | 210 | const mapDispathchToProps = (dispatch) => { 211 | return { 212 | changeMousePressVal: () => { 213 | dispatch({ type: "ISMOUSEPRESSED_FOR_DFS" }); 214 | }, 215 | 216 | resetWall: () => { 217 | dispatch({ type: "RESETWALL" }); 218 | }, 219 | }; 220 | }; 221 | 222 | const mapStateToProps = (state) => { 223 | const { walls, start, end, isMousePressedForDFS } = state; 224 | 225 | return { walls, start, end, isMousePressedForDFS }; 226 | }; 227 | 228 | export default connect(mapStateToProps, mapDispathchToProps)(Dfs); 229 | -------------------------------------------------------------------------------- /src/pages/Dijkstra.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./../css/pages/Dijkstra.css"; 3 | import Canvas from "./components/Canvas"; 4 | import useToggler from "./components/Toggler"; 5 | import sleepFun from "./components/utils/sleepFun"; 6 | import VideoModal from "./components/VideoModal"; 7 | import { Button, IconButton } from "@material-ui/core"; 8 | import { Select } from "antd"; 9 | import SearchIcon from "@material-ui/icons/Search"; 10 | import PlayCircleFilledWhiteIcon from "@material-ui/icons/PlayCircleFilledWhite"; 11 | import { ClearOutlined } from "@ant-design/icons"; 12 | import demo from "./../videos/DijkstraVideo-No-Edit.mp4"; 13 | //This Only for snackbar 14 | import { useSnackbar } from "notistack"; 15 | import Zoom from "@material-ui/core/Zoom"; 16 | //---------------------------------------- 17 | 18 | function Dijkstra() { 19 | const [arr, setArr] = useState([]); 20 | const [reload, setReload] = useToggler(true); 21 | const [time, setTime] = useState(60); 22 | const [isModalVisible, setModalVisible] = useState(false); 23 | 24 | ///This For SnackBar 25 | const { enqueueSnackbar } = useSnackbar(); 26 | 27 | const handleStart = async () => { 28 | if (arr.length !== 0) { 29 | for (let line of arr) { 30 | await sleepFun(time); 31 | line.setColor("#fff"); 32 | } 33 | } else { 34 | enqueueSnackbar("Please set Arrows positions correctly", { 35 | variant: "error", 36 | autoHideDuration: 2000, 37 | anchorOrigin: { 38 | vertical: "top", 39 | horizontal: "center", 40 | }, 41 | 42 | TransitionComponent: Zoom, 43 | }); 44 | } 45 | }; 46 | 47 | const handleReload = () => { 48 | setReload(); 49 | }; 50 | 51 | const handleTimeChange = (e) => { 52 | setTime(e); 53 | }; 54 | 55 | const handleDemo = () => { 56 | setModalVisible(true); 57 | }; 58 | 59 | //This is 'SELECT' COMPONENT 60 | const { Option } = Select; 61 | 62 | return ( 63 |
66 | 71 | 72 | 73 |
74 | 83 | 84 | 89 | 90 | 91 | 92 |
93 | 102 | 111 |
112 |
113 |
114 | ); 115 | } 116 | 117 | export default Dijkstra; 118 | -------------------------------------------------------------------------------- /src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "./components/Card"; 3 | import { makeStyles } from "@material-ui/core/styles"; 4 | import BubbleSortImg from "./../images/Algo Pics/BubbleSort.png"; 5 | import QuickSortImg from "./../images/Algo Pics/QuickSort.png"; 6 | import LinkedListImg from "./../images/Algo Pics/LinkedList.png"; 7 | import DfsImg from "./../images/Algo Pics/Dfs.png"; 8 | import DijkstraImg from "./../images/Algo Pics/Dijkstra.png"; 9 | import { Link } from "react-router-dom"; 10 | 11 | const Style = makeStyles({ 12 | MainDiv: { 13 | // border: "1px solid red", 14 | background: "#fff", 15 | height: "100vh", 16 | width: "100%", 17 | // marginTop: "5px", 18 | // zIndex: "-5", 19 | }, 20 | 21 | cards: { 22 | display: "flex", 23 | alignItems: "flex-start", 24 | justifyContent: "center", 25 | }, 26 | }); 27 | 28 | function Home() { 29 | const classes = Style(); 30 | const { MainDiv, cards } = classes; 31 | const numOfCard = [ 32 | [ 33 | { 34 | title: "Bubble Sort", 35 | imgSrc: BubbleSortImg, 36 | url: "/bubblesort", 37 | desc: 38 | "Bubble Sort is the simplest sorting algorithm .This sorting algorithm is slow.It compares between two elements,larger element among those comparable element swap with small element and placed in right.It used loop that's why it's time complexity is high.🙂", 39 | }, 40 | { 41 | title: "Quick Sort", 42 | imgSrc: QuickSortImg, 43 | url: "/quicksort", 44 | desc: 45 | "Quick Sort is also sorting algorithm .It's name Quick sort that does n't mean it is Fastest Algorithm 😃. It is faster than Bubble sort. It is divide and conquer algorithm so , It's use Recursion .So time complexity is less compair to Bubble Sort . ", 46 | }, 47 | { 48 | title: " Singly Linked List", 49 | imgSrc: LinkedListImg, 50 | url: "/singlylinklist", 51 | desc: 52 | "SinglyLinked List is a Data Structure. Where every node pointing a Tail and adding or removing an element in a Linked List from the front,the end or from anywhere in the list But in This project we can remove or add from last in list.It's like VECTOR in Mathematices because it's one directional ", 53 | }, 54 | ], 55 | 56 | [ 57 | { 58 | title: "Dfs", 59 | imgSrc: DfsImg, 60 | url: "/dfs", 61 | desc: 62 | "DFS is searching technique an element in a Graph. Here BFS is using 'Backtracking' for searching an element. And it's search in Defth of an Graph if elements not found then backtrack will Happen", 63 | }, 64 | { 65 | title: "Dijkstra", 66 | imgSrc: DijkstraImg, 67 | url: "/dijkstra", 68 | desc: 69 | "Dijkstra is a path finding algorithm.It is used in .It can find shortest path between two nodes in a Graph.It can perform only in weighted graph.To find two nodes we can use adjacency list or matrix. ", 70 | }, 71 | ], 72 | ]; 73 | 74 | // const obj = { 75 | // 0: { 76 | // title: "Bubble Sort", 77 | // imgSrc: BubbleSortImg, 78 | // }, 79 | // 1: { 80 | // title: "Quick Sort", 81 | // imgSrc: QuickSortImg, 82 | // }, 83 | // 2: { 84 | // title: " Singly Linked Lisr", 85 | // imgSrc: LinkedListImg, 86 | // }, 87 | // 3: { 88 | // title: "Dfs", 89 | // imgSrc: DfsImg, 90 | // }, 91 | // 4: { 92 | // title: "Dijkstra", 93 | // imgSrc: DijkstraImg, 94 | // }, 95 | // }; 96 | 97 | return ( 98 |
99 | {/* */} 104 | 105 | {numOfCard.map((e, i) => ( 106 |
107 | {e.map((e1, j) => ( 108 | 109 | 116 | 117 | ))} 118 |
119 | ))} 120 |
121 | ); 122 | } 123 | 124 | export default Home; 125 | -------------------------------------------------------------------------------- /src/pages/QuickSort.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import { WarningOutlined } from "@ant-design/icons"; 4 | import ShuffleIcon from "@material-ui/icons/Shuffle"; 5 | import EqualizerIcon from "@material-ui/icons/Equalizer"; 6 | import { Button, Slider, Typography } from "@material-ui/core"; 7 | import { message, notification } from "antd"; 8 | import Bar from "./components/Bar"; 9 | import Hr from "./components/Hr"; 10 | // Quick Sort Algorithm 11 | import quickFun from "./components/utils/algorithms/quickSortFun"; 12 | 13 | const useStyles = makeStyles({ 14 | CanvasContainer: { 15 | width: "100%", 16 | height: "81vh", 17 | display: "flex", 18 | flexDirection: "column", 19 | }, 20 | 21 | numberDisplay: { 22 | height: "5%", 23 | width: "100%", 24 | display: "flex", 25 | justifyContent: "center", 26 | flexDirection: "row ", 27 | alignItems: "center", 28 | }, 29 | Controller: { 30 | width: "100%", 31 | height: "20%", 32 | display: "flex", 33 | justifyContent: "space-around", 34 | alignItems: "center", 35 | background: "#fff", 36 | marginTop: "5px", 37 | }, 38 | sliderContainer: { 39 | minWidth: "750px", 40 | display: "flex", 41 | flexDirection: "row", 42 | justifyContent: "space-around", 43 | height: "87%", 44 | }, 45 | singleSliderContainer: { 46 | border: ".3px solid #ccc", 47 | background: "#fff", 48 | width: "40%", 49 | padding: "10px", 50 | borderRadius: "3px", 51 | }, 52 | }); 53 | 54 | const QuickSort = () => { 55 | const [arr, setArr] = useState([ 56 | { number: 69, color: "#f4124b" }, 57 | { number: 56, color: "#f4124b" }, 58 | { number: 10, color: "#f4124b" }, 59 | { number: 89, color: "#f4124b" }, 60 | { number: 8, color: "#f4124b" }, 61 | { number: 56, color: "#f4124b" }, 62 | { number: 58, color: "#f4124b" }, 63 | { number: 23, color: "#f4124b" }, 64 | { number: 77, color: "#f4124b" }, 65 | { number: 11, color: "#f4124b" }, 66 | { number: 1, color: "#f4124b" }, 67 | ]); 68 | 69 | const [disable, setDisable] = useState(false); 70 | const [time, setTime] = useState(4); 71 | const [alreadySorted, setAlreadySorted] = useState(false); 72 | const [sliderVal, setSliderVal] = useState(0); 73 | 74 | const classes = useStyles(); 75 | const { 76 | CanvasContainer, 77 | Controller, 78 | sliderContainer, 79 | numberDisplay, 80 | singleSliderContainer, 81 | } = classes; 82 | 83 | const handleChange = (e, v) => { 84 | setSliderVal(v); 85 | 86 | let arrCraeted = []; 87 | 88 | for (let i = 0; i < v / 1.4; i++) { 89 | arrCraeted.push({ 90 | number: Math.floor(Math.random() * 100), 91 | color: "#f4124b", 92 | }); 93 | } 94 | setAlreadySorted(false); 95 | setArr(arrCraeted); 96 | }; 97 | 98 | const timeHandleChange = (e, t) => { 99 | setTime(t); 100 | }; 101 | 102 | const handleClick = async () => { 103 | if (arr.length !== 0) { 104 | let key = "awqqk@bman"; 105 | 106 | message.warning({ 107 | content: "Quick Sort is Running ! Don't click any Button", 108 | key, 109 | duration: 0, 110 | style: { 111 | marginTop: "20vh", 112 | fontWeight: "500", 113 | }, 114 | }); 115 | 116 | setDisable(true); 117 | await quickFun(setArr, arr, time, setDisable); 118 | 119 | for (let i = 0; i < arr.length; i++) { 120 | arr[i].color = "#23ff00"; 121 | } 122 | 123 | message.destroy(key); 124 | 125 | message.success({ 126 | content: "Quick Sort Completed", 127 | duration: 3, 128 | style: { 129 | marginTop: "20vh", 130 | }, 131 | }); 132 | setAlreadySorted(true); 133 | setDisable(false); 134 | } 135 | }; 136 | 137 | const handleRandom = () => { 138 | if (sliderVal !== 0 || arr.length === 11) { 139 | let round = sliderVal === 0 ? arr.length : sliderVal / 1.4; 140 | let arrCraeted = []; 141 | for (let i = 0; i < round; i++) { 142 | arrCraeted.push({ 143 | number: Math.floor(Math.random() * 100), 144 | color: "#f4124b", 145 | }); 146 | } 147 | setAlreadySorted(false); 148 | setArr(arrCraeted); 149 | } 150 | }; 151 | 152 | // This is for typography style . 153 | const typoGraphyStyle = { 154 | fontWeight: "600", 155 | letterSpacing: ".2em", 156 | color: "#5ec523", 157 | fontSize: "105%", 158 | }; 159 | 160 | return ( 161 |
162 |

183 | Quick Sort 184 |
188 |

189 | 190 |
191 | {/* //Here Position for "CANVAS" */} 192 | 193 | 194 |
195 |
196 | {arr.map((e, i) => ( 197 |
217 | {e.number} 218 |
219 | ))} 220 |
221 |
222 | 223 |
224 |
225 |
226 | Value 227 | 228 |
229 |
230 | Time 231 | 238 |
239 |
240 | 241 |
250 | 260 | 261 | 287 |
288 |
289 |
290 |
291 | ); 292 | }; 293 | 294 | export default QuickSort; 295 | -------------------------------------------------------------------------------- /src/pages/SinglyLinkLIst.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import SingleLinkListViewer from "./components/SinglyLinkListViewer"; 4 | import SinglyList from "./components/utils/algorithms/singlyLinkedListAlgo"; 5 | import AddInputButton from "./components/AddInputButton"; 6 | // This for snackbar 7 | import { useSnackbar } from "notistack"; 8 | 9 | const singlyList = new SinglyList(); 10 | 11 | const useStyles = makeStyles({ 12 | CanvasContainer: { 13 | width: "100%", 14 | height: "78vh", 15 | // border: "1px solid green", 16 | display: "flex", 17 | flexDirection: "column", 18 | }, 19 | 20 | numberDisplay: { 21 | height: "5%", 22 | width: "100%", 23 | display: "flex", 24 | justifyContent: "center", 25 | flexDirection: "row ", 26 | alignItems: "center", 27 | background: "#fff", 28 | border: "1px solid #f1f1f1", 29 | }, 30 | Controller: { 31 | width: "100%", 32 | height: "20%", 33 | // border: "1px dashed red", 34 | display: "flex", 35 | justifyContent: "space-evenly", 36 | alignItems: "center", 37 | background: "#fff", 38 | marginTop: "4px", 39 | }, 40 | }); 41 | 42 | const SinglyLinkList = () => { 43 | //This is for snackbar 44 | const { enqueueSnackbar } = useSnackbar(); 45 | 46 | const [number, setNumber] = useState(0); 47 | 48 | const [arr, setArr] = useState(singlyList.print()); 49 | 50 | const classes = useStyles(); 51 | const { CanvasContainer, Controller } = classes; 52 | 53 | const addElement = () => { 54 | if (arr.length < 14) { 55 | singlyList.push(number); 56 | setArr(singlyList.print()); 57 | } else { 58 | enqueueSnackbar( 59 | "Sorry Cannot add Element because display will overload", 60 | { 61 | anchorOrigin: { 62 | vertical: "top", 63 | horizontal: "right", 64 | }, 65 | variant: "error", 66 | } 67 | ); 68 | } 69 | }; 70 | 71 | const onDelete = () => { 72 | singlyList.pop(); 73 | setArr(singlyList.print()); 74 | }; 75 | 76 | return ( 77 |
78 |

99 | Singly Linked List 100 |
104 |

105 | 106 |
107 | 108 |
109 | 115 | 121 |
122 |
123 |
124 | ); 125 | }; 126 | 127 | export default SinglyLinkList; 128 | -------------------------------------------------------------------------------- /src/pages/components/AddInputButton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { InputNumber, Button } from "antd"; 3 | import { PlusCircleOutlined, DeleteOutlined } from "@ant-design/icons"; 4 | import "antd/dist/antd.css"; 5 | import sleepFun from "./utils/sleepFun"; 6 | 7 | export default function AddInputButton({ 8 | num, 9 | setNum, 10 | name, 11 | addElement, 12 | onDelete, 13 | }) { 14 | const onChangeHandler = (e) => { 15 | setNum(e); 16 | }; 17 | 18 | const onClickHandle = () => { 19 | addElement(); 20 | }; 21 | 22 | const onDeleteClick = async () => { 23 | await sleepFun(300); 24 | onDelete(); 25 | }; 26 | 27 | return ( 28 |
36 | {name === "Insert" && ( 37 | 42 | )} 43 | {name === "Insert" ? ( 44 | 51 | ) : ( 52 | <> 53 | 62 | 63 | )} 64 |
65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /src/pages/components/Bar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import SingleBar from "./SingleBar"; 4 | 5 | const Style = makeStyles({ 6 | BarContainer: ({ height }) => ({ 7 | width: "100%", 8 | padding: "0 5px 5px 5px", 9 | height: `${height}%`, 10 | display: "flex", 11 | flexDirection: "row ", 12 | justifyContent: "center", 13 | alignItems: "flex-end", 14 | marginBottom: "2px", 15 | }), 16 | }); 17 | 18 | function Bar({ heightInPercent, element, barColor }) { 19 | const valueSendToStyle = { height: heightInPercent }; 20 | const classes = Style(valueSendToStyle); 21 | const { BarContainer } = classes; 22 | 23 | return ( 24 |
25 | {element.map((e, i) => { 26 | return ( 27 | 33 | ); 34 | })} 35 |
36 | ); 37 | } 38 | 39 | export default Bar; 40 | -------------------------------------------------------------------------------- /src/pages/components/Board.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./../../css/Board.css"; 3 | import SingleNode from "./SingleNode"; 4 | import { connect } from "react-redux"; 5 | function Board({ isMousePressedForDFS, grid, changeMousePressVal, algoName }) { 6 | return ( 7 | <> 8 |
9 |
{ 12 | if (isMousePressedForDFS) { 13 | changeMousePressVal(); 14 | } 15 | }} 16 | > 17 | {grid.map((e, i) => { 18 | return ( 19 |
20 | {e.map((x, j) => ( 21 | 30 | ))} 31 |
32 | ); 33 | })} 34 |
35 |
36 | 37 | ); 38 | } 39 | 40 | const mapStateToProps = (state) => { 41 | const { walls, start, end, isMousePressedForDFS } = state; 42 | 43 | return { walls, start, end, isMousePressedForDFS }; 44 | }; 45 | 46 | const mapDispathchToProps = (dispatch) => { 47 | return { 48 | changeMousePressVal: () => { 49 | dispatch({ type: "ISMOUSEPRESSED_FOR_DFS" }); 50 | }, 51 | 52 | resetWall: () => { 53 | dispatch({ type: "RESETWALL" }); 54 | }, 55 | }; 56 | }; 57 | 58 | export default connect(mapStateToProps, mapDispathchToProps)(Board); 59 | 60 | // right: { col: j + 1, row: i }, 61 | // left: { col: j - 1, row: i }, 62 | // down: { col: j, row: i + 1 }, 63 | // up: { col: j, row: i - 1 }, 64 | -------------------------------------------------------------------------------- /src/pages/components/Canvas.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import circleFun from "./utils/circleForCanvas"; 4 | import lineFun from "./utils/lineForCanvas"; 5 | import arrowFun from "./utils/arrowForCanvas"; 6 | import dijkstraAlgo from "./utils/algorithms/DijkstraAlgo"; 7 | 8 | const useStyle = makeStyles({ 9 | canvasStyle: ({ arrowName }) => ({ 10 | marginTop: "10px", 11 | cursor: arrowName ? "grabbing" : "default", 12 | }), 13 | }); 14 | 15 | const Canvas = ({ reload, setArr }) => { 16 | const canvasRef = useRef(null); 17 | const [resultArr, setResultArr] = useState([]); 18 | const [element, elementArr] = useState([]); 19 | const [arrows, setArrows] = useState([]); 20 | const [start, setStart] = useState({ x: 10, y: 14.5 }); 21 | const [end, setEnd] = useState({ x: 40, y: 10 }); 22 | const [startLoctionForDijkstra, setStartLocation] = useState(null); 23 | const [finishLoctionForDijkstra, setFinishLoaction] = useState(null); 24 | const [dragDeatils, setDragDetails] = useState({ 25 | arrowName: undefined, 26 | }); 27 | const { canvasStyle } = useStyle(dragDeatils); 28 | 29 | useEffect(() => { 30 | const canvas = canvasRef.current; 31 | canvas.width = window.innerWidth; 32 | canvas.height = window.innerHeight / 1.3; 33 | canvas.style.width = `${window.innerWidth}px`; 34 | canvas.style.height = `${window.innerHeight / 1.3}px`; 35 | canvas.style.background = "#32567a"; 36 | const ctx = canvas.getContext("2d"); 37 | const Circle = circleFun(ctx); 38 | const Line = lineFun(ctx); 39 | const Arrow = arrowFun(ctx); 40 | 41 | //LINE drawing 42 | const ab = new Line({ x: 100, y: 105 }, { x: 160, y: 230 }); 43 | const bc = new Line({ x: 160, y: 230 }, { x: 200, y: 100 }); 44 | const bd = new Line({ x: 160, y: 230 }, { x: 270, y: 100 }); 45 | const be = new Line({ x: 160, y: 230 }, { x: 280, y: 160 }); 46 | const bf = new Line({ x: 160, y: 230 }, { x: 280, y: 200 }); 47 | const bg = new Line({ x: 160, y: 230 }, { x: 150, y: 300 }); 48 | const gj = new Line({ x: 150, y: 300 }, { x: 210, y: 280 }); 49 | const gh = new Line({ x: 150, y: 300 }, { x: 100, y: 290 }); 50 | const hi = new Line({ x: 100, y: 290 }, { x: 80, y: 250 }); 51 | const gk = new Line({ x: 150, y: 300 }, { x: 220, y: 370 }); 52 | const km = new Line({ x: 220, y: 370 }, { x: 225, y: 415 }); 53 | const kl = new Line({ x: 220, y: 370 }, { x: 170, y: 395 }); 54 | const mn = new Line({ x: 225, y: 415 }, { x: 160, y: 450 }); 55 | const no = new Line({ x: 160, y: 450 }, { x: 217, y: 495 }); 56 | const op = new Line({ x: 217, y: 495 }, { x: 300, y: 450 }); 57 | const pq = new Line({ x: 300, y: 450 }, { x: 305, y: 400 }); 58 | const qr = new Line({ x: 305, y: 400 }, { x: 320, y: 350 }); 59 | const rt = new Line({ x: 320, y: 350 }, { x: 300, y: 320 }); 60 | const rs = new Line({ x: 320, y: 350 }, { x: 360, y: 350 }); 61 | const sv = new Line({ x: 360, y: 350 }, { x: 380, y: 220 }); 62 | const su = new Line({ x: 360, y: 350 }, { x: 355, y: 460 }); 63 | const sw = new Line({ x: 360, y: 350 }, { x: 400, y: 330 }); 64 | const sx = new Line({ x: 360, y: 350 }, { x: 420, y: 380 }); 65 | const xy = new Line({ x: 420, y: 380 }, { x: 460, y: 490 }); 66 | const xz = new Line({ x: 420, y: 380 }, { x: 530, y: 100 }); 67 | 68 | //----------------------------------------------------------------------- 69 | 70 | const za1 = new Line({ x: 530, y: 100 }, { x: 590, y: 80 }); 71 | const zb1 = new Line({ x: 530, y: 100 }, { x: 470, y: 100 }); 72 | const b1c1 = new Line({ x: 470, y: 100 }, { x: 410, y: 90 }); 73 | const zh1 = new Line({ x: 530, y: 100 }, { x: 560, y: 160 }); 74 | const h1m1 = new Line({ x: 560, y: 160 }, { x: 555, y: 240 }); 75 | const h1i1 = new Line({ x: 560, y: 160 }, { x: 620, y: 190 }); 76 | const h1f1 = new Line({ x: 560, y: 160 }, { x: 630, y: 115 }); 77 | const f1e1 = new Line({ x: 630, y: 115 }, { x: 800, y: 105 }); 78 | const f1d1 = new Line({ x: 630, y: 115 }, { x: 660, y: 60 }); 79 | const i1g1 = new Line({ x: 620, y: 190 }, { x: 690, y: 150 }); 80 | const g1j1 = new Line({ x: 690, y: 150 }, { x: 710, y: 210 }); 81 | const j1k1 = new Line({ x: 710, y: 210 }, { x: 740, y: 260 }); 82 | const j1l1 = new Line({ x: 710, y: 210 }, { x: 650, y: 300 }); 83 | 84 | const k1p1 = new Line({ x: 740, y: 260 }, { x: 810, y: 280 }); 85 | const l1q1 = new Line({ x: 650, y: 300 }, { x: 625, y: 370 }); 86 | const l1n1 = new Line({ x: 650, y: 300 }, { x: 710, y: 330 }); 87 | const n1s1 = new Line({ x: 710, y: 330 }, { x: 675, y: 420 }); 88 | const s1w1 = new Line({ x: 675, y: 420 }, { x: 605, y: 440 }); 89 | const n1o1 = new Line({ x: 710, y: 330 }, { x: 770, y: 315 }); 90 | const o1r1 = new Line({ x: 770, y: 315 }, { x: 745, y: 400 }); 91 | const r1v1 = new Line({ x: 745, y: 400 }, { x: 710, y: 470 }); 92 | const v1x1 = new Line({ x: 710, y: 470 }, { x: 775, y: 510 }); 93 | const r1t1 = new Line({ x: 745, y: 400 }, { x: 765, y: 450 }); 94 | const t1u1 = new Line({ x: 765, y: 450 }, { x: 840, y: 480 }); 95 | const y1z1 = new Line({ x: 860, y: 425 }, { x: 870, y: 365 }); 96 | const u1h2 = new Line({ x: 840, y: 480 }, { x: 920, y: 450 }); 97 | 98 | const z1a2 = new Line({ x: 870, y: 365 }, { x: 890, y: 300 }); 99 | const a2d2 = new Line({ x: 890, y: 300 }, { x: 940, y: 225 }); 100 | const p1b2 = new Line({ x: 810, y: 280 }, { x: 850, y: 220 }); 101 | const b2c2 = new Line({ x: 850, y: 220 }, { x: 900, y: 150 }); 102 | const c2d2 = new Line({ x: 900, y: 150 }, { x: 940, y: 225 }); 103 | const y1h2 = new Line({ x: 860, y: 425 }, { x: 920, y: 450 }); 104 | const d2e2 = new Line({ x: 940, y: 225 }, { x: 960, y: 280 }); 105 | const d2q2 = new Line({ x: 940, y: 225 }, { x: 1030, y: 195 }); 106 | const z1g2 = new Line({ x: 870, y: 365 }, { x: 950, y: 395 }); 107 | const h2i2 = new Line({ x: 920, y: 450 }, { x: 970, y: 500 }); 108 | const i2j2 = new Line({ x: 970, y: 500 }, { x: 1020, y: 470 }); 109 | const j2k2 = new Line({ x: 1020, y: 470 }, { x: 1050, y: 440 }); 110 | const m2f2 = new Line({ x: 1070, y: 330 }, { x: 1010, y: 360 }); 111 | const k2m2 = new Line({ x: 1050, y: 440 }, { x: 1070, y: 330 }); 112 | const k2l2 = new Line({ x: 1050, y: 440 }, { x: 1100, y: 405 }); 113 | const l2y2 = new Line({ x: 1100, y: 405 }, { x: 1120, y: 460 }); 114 | const y2x2 = new Line({ x: 1120, y: 460 }, { x: 1200, y: 400 }); 115 | const x2z2 = new Line({ x: 1200, y: 400 }, { x: 1180, y: 500 }); 116 | const n2m2 = new Line({ x: 1130, y: 290 }, { x: 1070, y: 330 }); 117 | const n2w2 = new Line({ x: 1130, y: 290 }, { x: 1230, y: 330 }); 118 | const n2p2 = new Line({ x: 1130, y: 290 }, { x: 1140, y: 200 }); 119 | const p2o2 = new Line({ x: 1140, y: 200 }, { x: 1050, y: 240 }); 120 | const p2t2 = new Line({ x: 1140, y: 200 }, { x: 1240, y: 190 }); 121 | const q2r2 = new Line({ x: 1030, y: 195 }, { x: 1070, y: 90 }); 122 | const r2s2 = new Line({ x: 1070, y: 90 }, { x: 1160, y: 110 }); 123 | const s2p2 = new Line({ x: 1160, y: 110 }, { x: 1140, y: 200 }); 124 | const p2u2 = new Line({ x: 1140, y: 200 }, { x: 1300, y: 240 }); 125 | const u2v2 = new Line({ x: 1300, y: 240 }, { x: 1350, y: 200 }); 126 | 127 | //Extra Line 128 | 129 | const yq1 = new Line({ x: 460, y: 490 }, { x: 625, y: 370 }); 130 | const vw = new Line({ x: 380, y: 220 }, { x: 400, y: 330 }); 131 | const wx = new Line({ x: 400, y: 330 }, { x: 420, y: 380 }); 132 | const a2e2 = new Line({ x: 890, y: 300 }, { x: 960, y: 280 }); 133 | const e2g2 = new Line({ x: 960, y: 280 }, { x: 950, y: 395 }); 134 | const g2o2 = new Line({ x: 950, y: 395 }, { x: 1050, y: 240 }); 135 | const q1w1 = new Line({ x: 625, y: 370 }, { x: 605, y: 440 }); 136 | const q1s1 = new Line({ x: 625, y: 370 }, { x: 675, y: 420 }); 137 | const ml = new Line({ x: 225, y: 415 }, { x: 170, y: 395 }); 138 | const bi = new Line({ x: 160, y: 230 }, { x: 80, y: 250 }); 139 | const bj = new Line({ x: 160, y: 230 }, { x: 210, y: 280 }); 140 | const hl = new Line({ x: 100, y: 290 }, { x: 170, y: 395 }); 141 | const jq = new Line({ x: 210, y: 280 }, { x: 305, y: 400 }); 142 | const kq = new Line({ x: 220, y: 370 }, { x: 305, y: 400 }); 143 | const ai = new Line({ x: 100, y: 105 }, { x: 80, y: 250 }); 144 | const de = new Line({ x: 270, y: 100 }, { x: 280, y: 160 }); 145 | const fb1 = new Line({ x: 280, y: 200 }, { x: 470, y: 100 }); 146 | const xm1 = new Line({ x: 420, y: 380 }, { x: 555, y: 240 }); 147 | const xl1 = new Line({ x: 420, y: 380 }, { x: 650, y: 300 }); 148 | const a1f1 = new Line({ x: 590, y: 80 }, { x: 630, y: 115 }); 149 | const f1g1 = new Line({ x: 630, y: 115 }, { x: 690, y: 150 }); 150 | const x1u1 = new Line({ x: 775, y: 510 }, { x: 840, y: 480 }); 151 | const r1y1 = new Line({ x: 745, y: 400 }, { x: 860, y: 425 }); 152 | const r1z1 = new Line({ x: 745, y: 400 }, { x: 870, y: 365 }); 153 | const t1y1 = new Line({ x: 765, y: 450 }, { x: 860, y: 425 }); 154 | const s1v1 = new Line({ x: 675, y: 420 }, { x: 710, y: 470 }); 155 | const f2j2 = new Line({ x: 1010, y: 360 }, { x: 1020, y: 470 }); 156 | const k2y2 = new Line({ x: 1050, y: 440 }, { x: 1120, y: 460 }); 157 | 158 | //------------------------------------------------------------------ 159 | 160 | const lines = [ 161 | k2y2, 162 | f2j2, 163 | s1v1, 164 | r1y1, 165 | r1z1, 166 | t1y1, 167 | x1u1, 168 | f1g1, 169 | a1f1, 170 | xm1, 171 | xl1, 172 | fb1, 173 | ai, 174 | de, 175 | kq, 176 | jq, 177 | hl, 178 | bj, 179 | bi, 180 | ml, 181 | q1s1, 182 | q1w1, 183 | g2o2, 184 | e2g2, 185 | a2e2, 186 | wx, 187 | vw, 188 | yq1, 189 | u2v2, 190 | p2u2, 191 | s2p2, 192 | r2s2, 193 | q2r2, 194 | p2o2, 195 | p2t2, 196 | n2p2, 197 | x2z2, 198 | n2w2, 199 | n2m2, 200 | y2x2, 201 | l2y2, 202 | m2f2, 203 | k2l2, 204 | k2m2, 205 | j2k2, 206 | i2j2, 207 | h2i2, 208 | z1g2, 209 | d2q2, 210 | d2e2, 211 | y1h2, 212 | y1z1, 213 | z1a2, 214 | c2d2, 215 | b2c2, 216 | u1h2, 217 | p1b2, 218 | a2d2, 219 | r1t1, 220 | t1u1, 221 | v1x1, 222 | r1v1, 223 | n1o1, 224 | o1r1, 225 | s1w1, 226 | n1s1, 227 | l1n1, 228 | k1p1, 229 | l1q1, 230 | j1l1, 231 | j1k1, 232 | g1j1, 233 | i1g1, 234 | f1e1, 235 | f1d1, 236 | h1f1, 237 | h1i1, 238 | h1m1, 239 | zh1, 240 | za1, 241 | zb1, 242 | b1c1, 243 | ab, 244 | bc, 245 | bd, 246 | be, 247 | bf, 248 | bg, 249 | gj, 250 | gh, 251 | hi, 252 | gk, 253 | km, 254 | kl, 255 | mn, 256 | no, 257 | op, 258 | pq, 259 | qr, 260 | rt, 261 | rs, 262 | sv, 263 | su, 264 | sw, 265 | sx, 266 | xy, 267 | xz, 268 | za1, 269 | ]; 270 | 271 | //Circle drawing 272 | 273 | const circleColor = "#f1f1f1"; 274 | 275 | const a = new Circle(100, 105, circleColor, "a"); 276 | const b = new Circle(160, 230, circleColor, "b"); 277 | const c = new Circle(200, 100, circleColor, "c"); 278 | const d = new Circle(270, 100, circleColor, "d"); 279 | const e = new Circle(280, 160, circleColor, "e"); 280 | const f = new Circle(280, 200, circleColor, "f"); 281 | const g = new Circle(150, 300, circleColor, "g"); 282 | const h = new Circle(100, 290, circleColor, "h"); 283 | const i = new Circle(80, 250, circleColor, "i"); 284 | const j = new Circle(210, 280, circleColor, "j"); 285 | const k = new Circle(220, 370, circleColor, "k"); 286 | const l = new Circle(170, 395, circleColor, "l"); 287 | const m = new Circle(225, 415, circleColor, "m"); 288 | const n = new Circle(160, 450, circleColor, "n"); 289 | const o = new Circle(217, 495, circleColor, "o"); 290 | const p = new Circle(300, 450, circleColor, "p"); 291 | const q = new Circle(305, 400, circleColor, "q"); 292 | const r = new Circle(320, 350, circleColor, "r"); 293 | const s = new Circle(360, 350, circleColor, "s"); 294 | const t = new Circle(300, 320, circleColor, "t"); 295 | const u = new Circle(355, 460, circleColor, "u"); 296 | const v = new Circle(380, 220, circleColor, "v"); 297 | const w = new Circle(400, 330, circleColor, "w"); 298 | const x = new Circle(420, 380, circleColor, "x"); 299 | const y = new Circle(460, 490, circleColor, "y"); 300 | const z = new Circle(530, 100, circleColor, "z"); 301 | 302 | //------------------- ----------------------------------------- 303 | 304 | const a1 = new Circle(590, 80, circleColor, "a1"); 305 | const b1 = new Circle(470, 100, circleColor, "b1"); 306 | const c1 = new Circle(410, 90, circleColor, "c1"); 307 | const d1 = new Circle(660, 60, circleColor, "d1"); 308 | const e1 = new Circle(800, 105, circleColor, "e1"); 309 | const f1 = new Circle(630, 115, circleColor, "f1"); 310 | const g1 = new Circle(690, 150, circleColor, "g1"); 311 | const h1 = new Circle(560, 160, circleColor, "h1"); 312 | const i1 = new Circle(620, 190, circleColor, "i1"); 313 | const j1 = new Circle(710, 210, circleColor, "j1"); 314 | const k1 = new Circle(740, 260, circleColor, "k1"); 315 | const l1 = new Circle(650, 300, circleColor, "l1"); 316 | const m1 = new Circle(555, 240, circleColor, "m1"); 317 | const n1 = new Circle(710, 330, circleColor, "n1"); 318 | const o1 = new Circle(770, 315, circleColor, "o1"); 319 | const p1 = new Circle(810, 280, circleColor, "p1"); 320 | const q1 = new Circle(625, 370, circleColor, "q1"); 321 | const r1 = new Circle(745, 400, circleColor, "r1"); 322 | const s1 = new Circle(675, 420, circleColor, "s1"); 323 | const t1 = new Circle(765, 450, circleColor, "t1"); 324 | const u1 = new Circle(840, 480, circleColor, "u1"); 325 | const v1 = new Circle(710, 470, circleColor, "v1"); 326 | const w1 = new Circle(605, 440, circleColor, "w1"); 327 | const x1 = new Circle(775, 510, circleColor, "x1"); 328 | const y1 = new Circle(860, 425, circleColor, "y1"); 329 | const z1 = new Circle(870, 365, circleColor, "z1"); 330 | //---------------------a2-z2--------------------------- 331 | const a2 = new Circle(890, 300, circleColor, "a2"); 332 | const b2 = new Circle(850, 220, circleColor, "b2"); 333 | const c2 = new Circle(900, 150, circleColor, "c2"); 334 | const d2 = new Circle(940, 225, circleColor, "d2"); 335 | const e2 = new Circle(960, 280, circleColor, "e2"); 336 | const f2 = new Circle(1010, 360, circleColor, "f2"); 337 | const g2 = new Circle(950, 395, circleColor, "g2"); 338 | const h2 = new Circle(920, 450, circleColor, "h2"); 339 | const i2 = new Circle(970, 500, circleColor, "i2"); 340 | const j2 = new Circle(1020, 470, circleColor, "j2"); 341 | const k2 = new Circle(1050, 440, circleColor, "k2"); 342 | const l2 = new Circle(1100, 405, circleColor, "l2"); 343 | const m2 = new Circle(1070, 330, circleColor, "m2"); 344 | const n2 = new Circle(1130, 290, circleColor, "n2"); 345 | const o2 = new Circle(1050, 240, circleColor, "o2"); 346 | const p2 = new Circle(1140, 200, circleColor, "p2"); 347 | const q2 = new Circle(1030, 195, circleColor, "q2"); 348 | const r2 = new Circle(1070, 90, circleColor, "r2"); 349 | const s2 = new Circle(1160, 110, circleColor, "s2"); 350 | const t2 = new Circle(1240, 190, circleColor, "t2"); 351 | const u2 = new Circle(1300, 240, circleColor, "u2"); 352 | const v2 = new Circle(1350, 200, circleColor, "v2"); 353 | const w2 = new Circle(1230, 330, circleColor, "w2"); 354 | const x2 = new Circle(1200, 400, circleColor, "x2"); 355 | const y2 = new Circle(1120, 460, circleColor, "y2"); 356 | const z2 = new Circle(1180, 500, circleColor, "z2"); 357 | 358 | //------------------------------------------------------------------------ 359 | 360 | const circles = [ 361 | a, 362 | b, 363 | c, 364 | d, 365 | e, 366 | f, 367 | g, 368 | h, 369 | i, 370 | j, 371 | k, 372 | l, 373 | m, 374 | n, 375 | o, 376 | p, 377 | q, 378 | r, 379 | s, 380 | t, 381 | u, 382 | v, 383 | w, 384 | x, 385 | y, 386 | z, 387 | a1, 388 | b1, 389 | c1, 390 | d1, 391 | e1, 392 | f1, 393 | g1, 394 | h1, 395 | i1, 396 | j1, 397 | k1, 398 | l1, 399 | m1, 400 | n1, 401 | o1, 402 | p1, 403 | q1, 404 | r1, 405 | s1, 406 | t1, 407 | u1, 408 | v1, 409 | w1, 410 | x1, 411 | y1, 412 | z1, 413 | 414 | a2, 415 | b2, 416 | c2, 417 | d2, 418 | e2, 419 | f2, 420 | g2, 421 | h2, 422 | i2, 423 | j2, 424 | k2, 425 | l2, 426 | m2, 427 | n2, 428 | o2, 429 | p2, 430 | q2, 431 | r2, 432 | s2, 433 | t2, 434 | u2, 435 | v2, 436 | w2, 437 | x2, 438 | y2, 439 | z2, 440 | ]; 441 | 442 | //drawing Lines 443 | lines.forEach((x) => x.draw()); 444 | //drawing the circle 445 | circles.forEach((x) => x.draw()); 446 | 447 | //Creating Arrow Objects 448 | let fisrtArrow = new Arrow(16, "#16fb04", "startArrow"); 449 | let lastArrow = new Arrow(20, "red", "endArrow"); 450 | 451 | fisrtArrow.move(start.x, start.y); 452 | lastArrow.move(end.x, end.y); 453 | 454 | setArrows([fisrtArrow, lastArrow]); 455 | 456 | elementArr(circles); 457 | 458 | //lines.forEach((x) => console.log(x.weight())); 459 | 460 | const Graph = dijkstraAlgo(); 461 | const graph = new Graph(); 462 | 463 | //add Vertex 464 | 465 | graph.addVartex("A"); 466 | graph.addVartex("B"); 467 | graph.addVartex("C"); 468 | graph.addVartex("D"); 469 | graph.addVartex("E"); 470 | graph.addVartex("F"); 471 | graph.addVartex("G"); 472 | graph.addVartex("H"); 473 | graph.addVartex("I"); 474 | graph.addVartex("J"); 475 | graph.addVartex("K"); 476 | graph.addVartex("L"); 477 | graph.addVartex("M"); 478 | graph.addVartex("N"); 479 | graph.addVartex("O"); 480 | graph.addVartex("P"); 481 | graph.addVartex("Q"); 482 | graph.addVartex("R"); 483 | graph.addVartex("S"); 484 | graph.addVartex("T"); 485 | graph.addVartex("U"); 486 | graph.addVartex("V"); 487 | graph.addVartex("W"); 488 | graph.addVartex("X"); 489 | graph.addVartex("Y"); 490 | graph.addVartex("Z"); 491 | 492 | graph.addVartex("A1"); 493 | graph.addVartex("B1"); 494 | graph.addVartex("C1"); 495 | graph.addVartex("D1"); 496 | graph.addVartex("E1"); 497 | graph.addVartex("F1"); 498 | graph.addVartex("G1"); 499 | graph.addVartex("H1"); 500 | graph.addVartex("I1"); 501 | graph.addVartex("J1"); 502 | graph.addVartex("K1"); 503 | graph.addVartex("L1"); 504 | graph.addVartex("M1"); 505 | graph.addVartex("N1"); 506 | graph.addVartex("O1"); 507 | graph.addVartex("P1"); 508 | graph.addVartex("Q1"); 509 | graph.addVartex("R1"); 510 | graph.addVartex("S1"); 511 | graph.addVartex("T1"); 512 | graph.addVartex("U1"); 513 | graph.addVartex("V1"); 514 | graph.addVartex("W1"); 515 | graph.addVartex("X1"); 516 | graph.addVartex("Y1"); 517 | graph.addVartex("Z1"); 518 | 519 | graph.addVartex("A2"); 520 | graph.addVartex("B2"); 521 | graph.addVartex("C2"); 522 | graph.addVartex("D2"); 523 | graph.addVartex("E2"); 524 | graph.addVartex("F2"); 525 | graph.addVartex("G2"); 526 | graph.addVartex("H2"); 527 | graph.addVartex("I2"); 528 | graph.addVartex("J2"); 529 | graph.addVartex("K2"); 530 | graph.addVartex("L2"); 531 | graph.addVartex("M2"); 532 | graph.addVartex("N2"); 533 | graph.addVartex("O2"); 534 | graph.addVartex("P2"); 535 | graph.addVartex("Q2"); 536 | graph.addVartex("R2"); 537 | graph.addVartex("S2"); 538 | graph.addVartex("T2"); 539 | graph.addVartex("U2"); 540 | graph.addVartex("V2"); 541 | graph.addVartex("W2"); 542 | graph.addVartex("X2"); 543 | graph.addVartex("Y2"); 544 | graph.addVartex("Z2"); 545 | 546 | // add Edge 547 | graph.addEdge("B", "A", ab); 548 | graph.addEdge("B", "C", bc); 549 | graph.addEdge("B", "D", bd); 550 | graph.addEdge("B", "E", be); 551 | graph.addEdge("B", "F", bf); 552 | graph.addEdge("B", "G", bg); 553 | graph.addEdge("G", "J", gj); 554 | graph.addEdge("G", "H", gh); 555 | graph.addEdge("H", "I", hi); 556 | graph.addEdge("G", "K", gk); 557 | graph.addEdge("K", "L", kl); 558 | graph.addEdge("K", "M", km); 559 | graph.addEdge("M", "N", mn); 560 | graph.addEdge("N", "O", no); 561 | graph.addEdge("O", "P", op); 562 | graph.addEdge("P", "Q", pq); 563 | graph.addEdge("Q", "R", qr); 564 | graph.addEdge("R", "T", rt); 565 | graph.addEdge("R", "S", rs); 566 | graph.addEdge("S", "U", su); 567 | graph.addEdge("S", "V", sv); 568 | graph.addEdge("S", "W", sw); 569 | graph.addEdge("S", "X", sx); 570 | graph.addEdge("X", "Y", xy); 571 | graph.addEdge("X", "Z", xz); 572 | 573 | graph.addEdge("Z", "A1", za1); 574 | graph.addEdge("Z", "B1", zb1); 575 | graph.addEdge("Z", "H1", zh1); 576 | graph.addEdge("B1", "C1", b1c1); 577 | graph.addEdge("H1", "M1", h1m1); 578 | graph.addEdge("H1", "I1", h1i1); 579 | graph.addEdge("H1", "F1", h1f1); 580 | graph.addEdge("F1", "D1", f1d1); 581 | graph.addEdge("F1", "E1", f1e1); 582 | graph.addEdge("I1", "G1", i1g1); 583 | graph.addEdge("G1", "J1", g1j1); 584 | 585 | graph.addEdge("J1", "L1", j1l1); 586 | graph.addEdge("L1", "N1", l1n1); 587 | graph.addEdge("L1", "Q1", l1q1); 588 | graph.addEdge("N1", "S1", n1s1); 589 | graph.addEdge("S1", "W1", s1w1); 590 | graph.addEdge("N1", "O1", n1o1); 591 | graph.addEdge("O1", "R1", o1r1); 592 | graph.addEdge("R1", "V1", r1v1); 593 | graph.addEdge("V1", "X1", v1x1); 594 | 595 | graph.addEdge("R1", "T1", r1t1); 596 | graph.addEdge("T1", "U1", t1u1); 597 | graph.addEdge("Y1", "Z1", y1z1); 598 | graph.addEdge("Z1", "G2", z1g2); 599 | 600 | graph.addEdge("Y1", "H2", y1h2); 601 | graph.addEdge("U1", "H2", u1h2); 602 | 603 | graph.addEdge("J1", "K1", j1k1); 604 | graph.addEdge("K1", "P1", k1p1); 605 | graph.addEdge("P1", "B2", p1b2); 606 | graph.addEdge("B2", "C2", b2c2); 607 | graph.addEdge("C2", "D2", c2d2); 608 | graph.addEdge("D2", "A2", a2d2); 609 | graph.addEdge("D2", "E2", d2e2); 610 | graph.addEdge("D2", "Q2", d2q2); 611 | graph.addEdge("Q2", "R2", q2r2); 612 | graph.addEdge("R2", "S2", r2s2); 613 | graph.addEdge("S2", "P2", s2p2); 614 | graph.addEdge("P2", "O2", p2o2); 615 | graph.addEdge("P2", "T2", p2t2); 616 | graph.addEdge("P2", "U2", p2u2); 617 | graph.addEdge("U2", "V2", u2v2); 618 | 619 | graph.addEdge("P2", "N2", n2p2); 620 | graph.addEdge("N2", "M2", n2m2); 621 | graph.addEdge("M2", "F2", m2f2); 622 | graph.addEdge("M2", "K2", k2m2); 623 | graph.addEdge("K2", "J2", j2k2); 624 | graph.addEdge("I2", "J2", i2j2); 625 | graph.addEdge("H2", "I2", h2i2); 626 | graph.addEdge("K2", "L2", k2l2); 627 | graph.addEdge("L2", "Y2", l2y2); 628 | graph.addEdge("Y2", "X2", y2x2); 629 | graph.addEdge("X2", "Z2", x2z2); 630 | graph.addEdge("N2", "W2", n2w2); 631 | graph.addEdge("A2", "Z1", z1a2); 632 | 633 | //Extra Lines 634 | 635 | graph.addEdge("Y", "Q1", yq1); 636 | graph.addEdge("V", "W", vw); 637 | graph.addEdge("W", "X", wx); 638 | graph.addEdge("A2", "E2", a2e2); 639 | graph.addEdge("E2", "G2", e2g2); 640 | graph.addEdge("G2", "O2", g2o2); 641 | graph.addEdge("Q1", "W1", q1w1); 642 | graph.addEdge("Q1", "S1", q1s1); 643 | graph.addEdge("M", "L", ml); 644 | graph.addEdge("B", "I", bi); 645 | graph.addEdge("B", "J", bj); 646 | graph.addEdge("H", "L", hl); 647 | graph.addEdge("J", "Q", jq); 648 | graph.addEdge("K", "Q", kq); 649 | graph.addEdge("A", "I", ai); 650 | graph.addEdge("D", "E", de); 651 | graph.addEdge("F", "B1", fb1); 652 | graph.addEdge("X", "M1", xm1); 653 | graph.addEdge("X", "L1", xl1); 654 | graph.addEdge("A1", "F1", a1f1); 655 | graph.addEdge("F1", "G1", f1g1); 656 | graph.addEdge("X1", "U1", x1u1); 657 | graph.addEdge("R1", "Y1", r1y1); 658 | graph.addEdge("R1", "Z1", r1z1); 659 | graph.addEdge("T1", "Y1", t1y1); 660 | graph.addEdge("S1", "V1", s1v1); 661 | graph.addEdge("F2", "J2", f2j2); 662 | graph.addEdge("K2", "Y2", k2y2); 663 | 664 | const findArr = graph.dijkstra( 665 | startLoctionForDijkstra, 666 | finishLoctionForDijkstra 667 | ); 668 | // Saving the result arr 669 | setResultArr(findArr); 670 | }, [reload, start, end, startLoctionForDijkstra, finishLoctionForDijkstra]); 671 | 672 | //passing the result arr in parent 673 | setArr(resultArr); 674 | 675 | //Mouse Down 676 | 677 | const canvasMouseDown = (e) => { 678 | const rect = canvasRef.current.getBoundingClientRect(); 679 | const mouseX = e.clientX - rect.left; 680 | const mouseY = e.clientY - rect.top; 681 | 682 | //Cheaking ... is 'Click' events occurs upon arrows or not? 683 | arrows.forEach((x) => { 684 | if (x.click(mouseX, mouseY)) { 685 | setDragDetails({ arrowName: x.name }); 686 | } 687 | }); 688 | }; 689 | 690 | const canvasMouseMove = (e) => { 691 | const rect = canvasRef.current.getBoundingClientRect(); 692 | const mouseX = e.clientX - rect.left; 693 | const mouseY = e.clientY - rect.top; 694 | 695 | //Dragging Arrows Logic 696 | arrows.forEach((x) => { 697 | if (dragDeatils.arrowName === "startArrow") { 698 | setStart({ x: mouseX, y: mouseY }); 699 | } 700 | if (dragDeatils.arrowName === "endArrow") { 701 | setEnd({ x: mouseX, y: mouseY }); 702 | } 703 | }); 704 | }; 705 | 706 | const canvasMouseUp = (e) => { 707 | setDragDetails({ arrowName: undefined }); 708 | setStartLocation(null); 709 | setFinishLoaction(null); 710 | 711 | element.forEach((x) => { 712 | arrows.forEach((arrow) => { 713 | x.click( 714 | arrow.downPointX, 715 | arrow.downPointY, 716 | arrow.name, 717 | setStartLocation, 718 | setFinishLoaction 719 | ); 720 | }); 721 | }); 722 | }; 723 | 724 | return ( 725 | <> 726 | 733 | 734 | ); 735 | }; 736 | 737 | export default Canvas; 738 | -------------------------------------------------------------------------------- /src/pages/components/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Hr from "./Hr"; 3 | import "./../../css/Card.css"; 4 | 5 | const Card = ({ img, title, author, description }) => { 6 | return ( 7 |
8 | {`Card-${img}`} 9 |
10 |

{title}

11 |
12 |

{description}

13 |
{author}
14 |
15 |
16 | ); 17 | }; 18 | 19 | export default Card; 20 | -------------------------------------------------------------------------------- /src/pages/components/Circle.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./../../css/Circle.css"; 3 | 4 | export default function Circle({ element, length }) { 5 | return
{element}
; 6 | } 7 | -------------------------------------------------------------------------------- /src/pages/components/Custom/CustomButton.js: -------------------------------------------------------------------------------- 1 | import { Button } from "@material-ui/core"; 2 | import { withStyles } from "@material-ui/core/styles"; 3 | import { green, purple } from "@material-ui/core/colors"; 4 | 5 | const BootstrapButton = withStyles({ 6 | root: { 7 | boxShadow: "none", 8 | textTransform: "none", 9 | fontSize: 16, 10 | padding: "6px 12px", 11 | border: "1px solid", 12 | lineHeight: 1.5, 13 | backgroundColor: "#0063cc", 14 | borderColor: "#0063cc", 15 | fontFamily: [ 16 | "-apple-system", 17 | "BlinkMacSystemFont", 18 | '"Segoe UI"', 19 | "Roboto", 20 | '"Helvetica Neue"', 21 | "Arial", 22 | "sans-serif", 23 | '"Apple Color Emoji"', 24 | '"Segoe UI Emoji"', 25 | '"Segoe UI Symbol"', 26 | ].join(","), 27 | "&:hover": { 28 | backgroundColor: "#0069d9", 29 | borderColor: "#0062cc", 30 | boxShadow: "none", 31 | }, 32 | "&:active": { 33 | boxShadow: "none", 34 | backgroundColor: "#0062cc", 35 | borderColor: "#005cbf", 36 | }, 37 | "&:focus": { 38 | boxShadow: "0 0 0 0.2rem rgba(0,123,255,.5)", 39 | }, 40 | }, 41 | })(Button); 42 | 43 | const ColorButton = withStyles((theme) => ({ 44 | root: { 45 | color: theme.palette.getContrastText(purple[500]), 46 | backgroundColor: purple[500], 47 | "&:hover": { 48 | backgroundColor: purple[700], 49 | }, 50 | }, 51 | }))(Button); 52 | 53 | export default BootstrapButton; 54 | -------------------------------------------------------------------------------- /src/pages/components/Custom/CustomSlider.js: -------------------------------------------------------------------------------- 1 | import { Slider } from "@material-ui/core"; 2 | import { withStyles } from "@material-ui/core/styles"; 3 | 4 | // This For Customize 'SLIDER' 5 | 6 | const PrettoSlider = withStyles({ 7 | root: { 8 | color: "#7625e4", 9 | height: 8, 10 | }, 11 | thumb: { 12 | height: 16, 13 | width: 16, 14 | backgroundColor: "#fff", 15 | border: "2px solid currentColor", 16 | marginTop: -5.5, 17 | marginLeft: -10, 18 | "&:focus, &:hover, &$active": { 19 | boxShadow: "inherit", 20 | }, 21 | }, 22 | active: {}, 23 | valueLabel: { 24 | left: "calc(-50% + 4px)", 25 | }, 26 | track: { 27 | height: 6, 28 | borderRadius: 4, 29 | }, 30 | rail: { 31 | height: 6, 32 | borderRadius: 4, 33 | }, 34 | })(Slider); 35 | 36 | export default PrettoSlider; 37 | -------------------------------------------------------------------------------- /src/pages/components/CustomDraggbleNode.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./../../css/CustomDraggbleNode.css"; 3 | //Importing from 'React-redux' 4 | import { connect } from "react-redux"; 5 | import DoubleArrowIcon from "@material-ui/icons/DoubleArrow"; 6 | import LocationOnIcon from "@material-ui/icons/LocationOn"; 7 | import { purple } from "@material-ui/core/colors"; 8 | 9 | const CustomDraggbleNode = (props) => { 10 | const { id, isStartNode, isMousePressed } = props; 11 | 12 | const dragStart = (e) => { 13 | const target = e.target; 14 | e.dataTransfer.setData("card_id", target.id); 15 | isMousePressed(); 16 | }; 17 | 18 | const dragOver = (e) => { 19 | e.stopPropagation(); 20 | }; 21 | 22 | const dragEnd = () => { 23 | isMousePressed(); 24 | }; 25 | 26 | return ( 27 |
38 | {isStartNode ? ( 39 | 40 | ) : ( 41 | 42 | )} 43 |
44 | ); 45 | }; 46 | 47 | const mapStateToProps = (state) => { 48 | // console.log("satete"); 49 | 50 | const { start, end } = state; 51 | return { start, end }; 52 | }; 53 | 54 | const mapDispathchToProps = (dispatch) => { 55 | return { 56 | isMousePressed: () => { 57 | dispatch({ type: "ISMOUSEPRESSED_FOR_DFS" }); 58 | }, 59 | }; 60 | }; 61 | 62 | export default connect( 63 | mapStateToProps, 64 | mapDispathchToProps 65 | )(CustomDraggbleNode); 66 | -------------------------------------------------------------------------------- /src/pages/components/Hr.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Hr() { 4 | return ( 5 |
15 | ); 16 | } 17 | 18 | export default Hr; 19 | -------------------------------------------------------------------------------- /src/pages/components/Image.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./../../css/Image.css"; 3 | import Img from "./../../images/arrowImg.png"; 4 | 5 | export default function Image() { 6 | return arrow; 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/components/Logo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logoSrc from "./../../images/logo.svg"; 3 | import { makeStyles } from "@material-ui/core/styles"; 4 | import { NavLink } from "react-router-dom"; 5 | const Style = makeStyles({ 6 | mainLogoDiv: (heightInPixel, style) => ({ 7 | "& a": { 8 | color: "black", 9 | }, 10 | 11 | "& div": { 12 | height: `${heightInPixel}px`, 13 | display: "flex", 14 | flexDirection: "row ", 15 | justifyContent: "center", 16 | alignItems: "center", 17 | }, 18 | "& img": { 19 | height: `${heightInPixel}px`, 20 | }, 21 | 22 | "& span": { 23 | padding: "5px", 24 | fontSize: "1.05em", 25 | fontWeight: " 800", 26 | alignItems: "center", 27 | textTransform: "uppercase", 28 | display: "flex", 29 | justifyContent: "center", 30 | letterSpacing: "0.5px", 31 | }, 32 | }), 33 | }); 34 | 35 | const Logo = ({ heightInPixel, style, to }) => { 36 | const classes = Style(heightInPixel); 37 | const { mainLogoDiv } = classes; 38 | return ( 39 |
40 | 41 |
42 | MainLogo 43 | Algo / Visualizer 44 |
45 | 46 |
47 | ); 48 | }; 49 | 50 | export default Logo; 51 | -------------------------------------------------------------------------------- /src/pages/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Logo from "./Logo"; 3 | import "../../css/NavBar.css"; 4 | import { Link, NavLink } from "react-router-dom"; 5 | 6 | function NavBar() { 7 | // console.log("path of ->" + logo); 8 | return ( 9 | 24 | ); 25 | } 26 | 27 | export default NavBar; 28 | -------------------------------------------------------------------------------- /src/pages/components/SingleBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | 4 | const Style = makeStyles({ 5 | Bar: ({ width, height, barColor }) => ({ 6 | height: `${3 * height}px`, 7 | background: barColor, 8 | width: `${Math.floor(1300 / width)}px`, 9 | marginLeft: "2px", 10 | transition: "height .52s", 11 | border: "1px solid #f1f1f1", 12 | borderRadius: "2px", 13 | boxShadow: "3px 4px 8px -1px rgba(0,0,0,0.73)", 14 | }), 15 | }); 16 | 17 | function SingleBar({ width, height, color }) { 18 | const barStyleProp = { 19 | width: width, 20 | height: height, 21 | barColor: color, 22 | }; 23 | const classes = Style(barStyleProp); 24 | const { Bar } = classes; 25 | return
; 26 | } 27 | 28 | export default SingleBar; 29 | -------------------------------------------------------------------------------- /src/pages/components/SingleNode.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | 4 | import CustomDraggbleNode from "./CustomDraggbleNode"; 5 | 6 | //Importing from 'React-redux' 7 | import { connect } from "react-redux"; 8 | import "./../../css/SingleNode.css"; 9 | 10 | const Style = makeStyles({ 11 | Node: ({ isFinish, isStart, isWall, isVisited, color }) => ({ 12 | height: "33.22px", 13 | width: "33.22px", 14 | border: ".1px solid #fff", 15 | display: "inline-block", 16 | textAlign: "center", 17 | borderRadius: "2px", 18 | background: isVisited ? "yellow" : color, 19 | }), 20 | }); 21 | 22 | function SingleNode({ 23 | row, 24 | col, 25 | isVisited, 26 | setOrDeleteWall, 27 | setStart, 28 | value, 29 | setEnd, 30 | color, 31 | isMousePressedForDFS, 32 | setMousePress, 33 | animation, 34 | algoName, 35 | start, 36 | end, 37 | }) { 38 | let isStart = row === start.row && col === start.col; 39 | let isFinish = row === end.row && col === end.col; 40 | 41 | const { Node } = Style({ isFinish, isStart, isVisited, color }); 42 | 43 | const onMouseDownHandler = () => { 44 | if (!(isFinish || isStart)) { 45 | setMousePress(); 46 | setOrDeleteWall({ row, col }); 47 | } 48 | }; 49 | 50 | const onMouseUpHandler = () => { 51 | if (!(isFinish || isStart)) { 52 | if (isMousePressedForDFS) { 53 | setMousePress(); 54 | } 55 | } 56 | }; 57 | 58 | const onMouseEnterHandler = (e) => { 59 | if (!(isFinish || isStart)) { 60 | if (!isMousePressedForDFS) return; 61 | 62 | setOrDeleteWall({ row, col }); 63 | } 64 | }; 65 | 66 | const drop = (e) => { 67 | e.preventDefault(); 68 | const card_id = e.dataTransfer.getData("card_id"); 69 | const card = document.getElementById(card_id); 70 | 71 | if (card) { 72 | if (card.id === "start") { 73 | setStart({ row, col }); 74 | setMousePress(); 75 | } else { 76 | setEnd({ row, col }); 77 | setMousePress(); 78 | } 79 | } 80 | }; 81 | 82 | const dragOver = (e) => { 83 | e.preventDefault(); 84 | }; 85 | 86 | return ( 87 |
96 | {(isStart || isFinish) && ( 97 | 103 | )} 104 |
105 | ); 106 | } 107 | 108 | const mapStateToProps = (state) => { 109 | const { isMousePressedForDFS, start, end } = state; 110 | return { isMousePressedForDFS, start, end }; 111 | }; 112 | 113 | const mapDispathchToProps = (dispatch) => { 114 | return { 115 | setOrDeleteWall: (position) => { 116 | dispatch({ type: "ISWALLDFS", wallNode: position }); 117 | }, 118 | 119 | setStart: (startNode) => { 120 | dispatch({ type: "SET_STARTNODE", startNodeVal: startNode }); 121 | }, 122 | 123 | setEnd: (endNode) => { 124 | dispatch({ type: "SET_ENDNODE", endNodeVal: endNode }); 125 | }, 126 | 127 | setMousePress: () => { 128 | dispatch({ type: "ISMOUSEPRESSED_FOR_DFS" }); 129 | }, 130 | }; 131 | }; 132 | 133 | export default connect(mapStateToProps, mapDispathchToProps)(SingleNode); 134 | -------------------------------------------------------------------------------- /src/pages/components/SinglyLinkListViewer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Circle from "./Circle"; 4 | import Image from "./Image"; 5 | 6 | const Style = makeStyles({ 7 | LinkListContainer: ({ height }) => ({ 8 | width: "100%", 9 | padding: "0 5px 5px 5px", 10 | height: `${height}%`, 11 | // border: "2px solid #fff", 12 | display: "flex", 13 | background: "#f0f0f0", 14 | flexDirection: "row ", 15 | justifyContent: "center", 16 | alignItems: "center", 17 | marginBottom: "2px", 18 | overflow: "auto", 19 | flexWrap: "nowrap", 20 | }), 21 | }); 22 | 23 | function SinglyLinkListViewer({ heightInPercent, arr }) { 24 | const valueSendToStyle = { height: heightInPercent }; 25 | const classes = Style(valueSendToStyle); 26 | const { LinkListContainer } = classes; 27 | return ( 28 |
29 | {arr.map((e, i) => ( 30 | <> 31 | 32 | 33 | 34 | ))} 35 |
36 | ); 37 | } 38 | 39 | export default SinglyLinkListViewer; 40 | -------------------------------------------------------------------------------- /src/pages/components/SyncState.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function useSyncState(initialValue) { 4 | const [value, setValue] = useState(initialValue); 5 | const setter = (x) => 6 | new Promise((resolve) => { 7 | setValue(x); 8 | resolve(x); 9 | }); 10 | return [value, setter]; 11 | } 12 | 13 | export default useSyncState; 14 | -------------------------------------------------------------------------------- /src/pages/components/Toggler.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const useToggler = (arg) => { 4 | const [value, setValue] = useState(arg); 5 | 6 | const setToggle = () => { 7 | setValue(!value); 8 | }; 9 | 10 | return [value, setToggle]; 11 | }; 12 | 13 | export default useToggler; 14 | -------------------------------------------------------------------------------- /src/pages/components/VideoModal.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Modal } from "antd"; 3 | import VideoPlayer from "react-video-js-player"; 4 | 5 | function VideoModal({ isVisible, setVisible, videoUrl }) { 6 | return ( 7 | { 11 | setVisible(false); 12 | }} 13 | style={{ 14 | top: 30, 15 | display: "flex", 16 | alignItems: "center", 17 | justifyContent: "center", 18 | }} 19 | footer={null} 20 | > 21 | 22 | 23 | ); 24 | } 25 | 26 | export default VideoModal; 27 | -------------------------------------------------------------------------------- /src/pages/components/utils/algorithms/DfsAlgorithm.js: -------------------------------------------------------------------------------- 1 | const dfsAlgo = async ( 2 | matrix, 3 | setGrid, 4 | time, 5 | startNode, 6 | endNode, 7 | sleepFun, 8 | setVisiting 9 | ) => { 10 | async function isValidPath(gridArg, idx) { 11 | let x = idx.row, 12 | y = idx.col; 13 | return ( 14 | x >= 0 && 15 | x < gridArg.length && 16 | y >= 0 && 17 | y < gridArg[x].length && 18 | gridArg[x][y].val === 0 19 | ); 20 | } 21 | 22 | const hasPath = async (grid, start, end) => { 23 | grid[start.row][start.col].val = 1; 24 | 25 | return await searchInGrid(grid, start, end); 26 | }; 27 | 28 | const searchInGrid = async (grid, current, end) => { 29 | if (current.row === end.row && current.col === end.col) { 30 | return true; 31 | } 32 | 33 | let directions = [ 34 | [0, 1], 35 | [1, 0], 36 | [0, -1], 37 | [-1, 0], 38 | ]; 39 | 40 | let newGrid = grid.map((e, i) => 41 | e.map((x, j) => { 42 | setVisiting(true); 43 | if (x.val === 1 && !x.blockWall) { 44 | x.color = "#12d0f4"; 45 | x.animation = true; 46 | } 47 | return x; 48 | }) 49 | ); 50 | await sleepFun(time); 51 | setGrid(newGrid); 52 | 53 | let neighborIdx; 54 | 55 | for (let direction of directions) { 56 | neighborIdx = { 57 | row: current.row + direction[0], 58 | col: current.col + direction[1], 59 | }; 60 | 61 | if (await isValidPath(grid, neighborIdx)) { 62 | grid[neighborIdx.row][neighborIdx.col].val = 1; 63 | 64 | if (await searchInGrid(grid, neighborIdx, end)) { 65 | return true; 66 | } 67 | } 68 | } 69 | 70 | return false; 71 | }; 72 | 73 | return await hasPath(matrix, startNode, endNode); 74 | }; 75 | 76 | export default dfsAlgo; 77 | -------------------------------------------------------------------------------- /src/pages/components/utils/algorithms/DijkstraAlgo.js: -------------------------------------------------------------------------------- 1 | function dijkstraAlgo(setArr) { 2 | class PriorityQueue { 3 | constructor() { 4 | this.values = []; 5 | } 6 | enqueue(val, priority) { 7 | this.values.push({ val, priority }); 8 | this.sort(); 9 | } 10 | dequeue() { 11 | return this.values.shift(); 12 | } 13 | sort() { 14 | this.values.sort((a, b) => a.priority - b.priority); 15 | } 16 | } 17 | 18 | class Graph { 19 | constructor() { 20 | this.adjecencyList = {}; 21 | } 22 | 23 | addVartex(vertex) { 24 | if (!this.adjecencyList[vertex]) this.adjecencyList[vertex] = []; 25 | } 26 | 27 | addEdge(vertex1, vertex2, edgeObj) { 28 | this.adjecencyList[vertex1].push({ nodeName: vertex2, edgeObj }); 29 | this.adjecencyList[vertex2].push({ nodeName: vertex1, edgeObj }); 30 | } 31 | 32 | dijkstra(start, end) { 33 | const nodes = new PriorityQueue(); 34 | const distances = {}; 35 | const previous = {}; 36 | let smallest; 37 | const path = []; 38 | 39 | // for inital stateges start is 0 and other vertex is Infinity 40 | for (let vertex in this.adjecencyList) { 41 | if (vertex === start) { 42 | distances[vertex] = 0; 43 | nodes.enqueue(vertex, 0); 44 | } else { 45 | distances[vertex] = Infinity; 46 | nodes.enqueue(vertex, Infinity); 47 | } 48 | previous[vertex] = null; 49 | } 50 | 51 | while (nodes.values.length) { 52 | smallest = nodes.dequeue().val; 53 | if (smallest === end) { 54 | while (previous[smallest]) { 55 | path.push(smallest); 56 | smallest = previous[smallest]; 57 | } 58 | 59 | break; 60 | } 61 | 62 | if (smallest || distances[smallest] !== Infinity) { 63 | for (let neighbor in this.adjecencyList[smallest]) { 64 | //finding neighbor nodes 65 | let nextNode = this.adjecencyList[smallest][neighbor]; 66 | // calculating new distance to neighbors nodes 67 | let candidate = distances[smallest] + nextNode.edgeObj.value; 68 | // console.log(nextNode); 69 | if (candidate < distances[nextNode.nodeName]) { 70 | distances[nextNode.nodeName] = candidate; 71 | previous[nextNode.nodeName] = smallest; 72 | nodes.enqueue(nextNode.nodeName, candidate); 73 | } 74 | } 75 | } 76 | } 77 | 78 | path.push(smallest); 79 | path.reverse(); 80 | 81 | let current; 82 | let next; 83 | let arr = []; 84 | 85 | for (let i = 0; i < path.length; i++) { 86 | current = path[i]; 87 | next = path[i + 1]; 88 | for (let x of this.adjecencyList[current]) { 89 | if (x.nodeName === next) { 90 | arr.push(x.edgeObj); 91 | } 92 | } 93 | } 94 | 95 | // setArr(arr); 96 | return arr; 97 | } 98 | } 99 | 100 | return Graph; 101 | } 102 | 103 | export default dijkstraAlgo; 104 | -------------------------------------------------------------------------------- /src/pages/components/utils/algorithms/quickSortFun.js: -------------------------------------------------------------------------------- 1 | import sleep from "./../sleepFun"; 2 | 3 | const quickFun = async (setArr, ArrForSorting, time) => { 4 | // console.log(ArrForSorting); 5 | 6 | const swap = async (arr, a, b) => { 7 | await sleep(time); 8 | let temp = arr[a]; 9 | arr[a] = arr[b]; 10 | arr[a].color = "#FEE715FF"; 11 | arr[b] = temp; 12 | arr[b].color = "#FEE715FF"; 13 | }; 14 | 15 | let partition = async (arr, lowerBound, upperBound) => { 16 | let pivotIdx = upperBound; 17 | let pivotElement = arr[lowerBound].number; 18 | 19 | for (let i = upperBound; i > lowerBound; i--) { 20 | if (arr[i].number >= pivotElement) { 21 | // Swapping Arr[i] and Arr[pivotIndex] 22 | 23 | await swap(arr, i, pivotIdx); 24 | 25 | pivotIdx--; 26 | } 27 | } 28 | 29 | // Swapping Arr[pivotIdx] and Arr[lowerBound] 30 | await swap(arr, pivotIdx, lowerBound); 31 | 32 | return pivotIdx; 33 | }; 34 | 35 | let quickSort = async (arr, low, high) => { 36 | if (arr.length === 0) { 37 | return; 38 | } 39 | 40 | setArr([...arr]); 41 | 42 | if (low < high) { 43 | let index = await partition(arr, low, high); 44 | 45 | await quickSort(arr, low, index - 1); 46 | await quickSort(arr, index + 1, high); 47 | } 48 | }; 49 | 50 | await quickSort(ArrForSorting, 0, ArrForSorting.length - 1); 51 | }; 52 | 53 | export default quickFun; 54 | -------------------------------------------------------------------------------- /src/pages/components/utils/algorithms/singlyLinkedListAlgo.js: -------------------------------------------------------------------------------- 1 | class Node { 2 | constructor(val) { 3 | this.val = val; 4 | this.next = null; 5 | } 6 | } 7 | 8 | class SinglyList { 9 | constructor() { 10 | this.head = null; 11 | this.tail = null; 12 | this.length = 0; 13 | } 14 | 15 | push(val) { 16 | let newNode = new Node(val); 17 | if (!this.head) { 18 | this.head = newNode; 19 | this.tail = newNode; 20 | } else { 21 | this.tail.next = newNode; 22 | this.tail = newNode; 23 | } 24 | 25 | this.length++; 26 | return this; 27 | } 28 | 29 | pop() { 30 | if (!this.head) return undefined; 31 | 32 | let current = this.head; 33 | 34 | let newTail = current; 35 | 36 | //newTail :=> pointing the a Element from before current element 37 | 38 | // 1 --> 2 --> 3 -->4 39 | //newTail current 40 | // newTail current 41 | // newTail current 42 | 43 | while (current.next) { 44 | newTail = current; 45 | current = current.next; 46 | } 47 | 48 | this.tail = newTail; 49 | this.tail.next = null; 50 | this.length--; 51 | if (this.length === 0) { 52 | this.head = null; 53 | this.tail = null; 54 | } 55 | return current; 56 | } 57 | 58 | print() { 59 | const arr = []; 60 | let current = this.head; 61 | while (current) { 62 | arr.push(current.val); 63 | current = current.next; 64 | } 65 | 66 | return arr; 67 | } 68 | } 69 | 70 | export default SinglyList; 71 | -------------------------------------------------------------------------------- /src/pages/components/utils/arrowForCanvas.js: -------------------------------------------------------------------------------- 1 | function arrowFun(ctx) { 2 | class Arrow { 3 | x = this.scaleX(0); 4 | y = this.scaleY(0); 5 | 6 | constructor(size, color, name) { 7 | this.color = color; 8 | this.name = name; 9 | this.size = size; 10 | } 11 | 12 | downPointX = this.scaleX(this.size / 2) + this.x; 13 | downPointY = this.scaleY(2 * this.size) + this.y; 14 | 15 | updateDownPoint() { 16 | this.downPointX = this.scaleX(this.size / 2) + this.x; 17 | this.downPointY = this.scaleY(2 * this.size) + this.y; 18 | } 19 | 20 | draw() { 21 | ctx.beginPath(); // note usage below 22 | 23 | // triangle 1, at left 24 | ctx.fillStyle = this.color; 25 | 26 | //right 27 | ctx.moveTo(this.scaleX(0) + this.x, this.scaleY(this.size) + this.y); // start at top left corner of canvas 28 | 29 | //left 30 | ctx.lineTo( 31 | this.scaleX(this.size) + this.x, 32 | this.scaleY(this.size) + this.y 33 | ); // go 200px to right (x), straight line from 0 to 0 34 | 35 | //down 36 | ctx.lineTo( 37 | this.scaleX(this.size / 2) + this.x, 38 | this.scaleY(2 * this.size) + this.y 39 | ); // go to horizontal 100 (x) and vertical 200 (y) 40 | ctx.closePath(); 41 | ctx.fill(); // connect and fill 42 | // ctx.stroke(); 43 | 44 | // ctx.lineWidth = 0.5; 45 | // ctx.strokeSyle = "blue"; 46 | // ctx.stroke(); 47 | } 48 | 49 | scaleX(xVal) { 50 | return xVal * (window.innerWidth / 1550); 51 | } 52 | 53 | scaleY(yVal) { 54 | return yVal * (window.innerHeight / 722); 55 | } 56 | 57 | // This for moving triangle 58 | move(xPos, yPos) { 59 | this.x = this.scaleX(xPos); 60 | this.y = this.scaleY(yPos); 61 | this.draw(); 62 | this.updateDownPoint(); 63 | } 64 | 65 | area(x1, y1, x2, y2, x3, y3) { 66 | return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0); 67 | } 68 | 69 | click(mouseX, mouseY) { 70 | const rightPoint = { 71 | xPos: this.scaleX(0) + this.x, 72 | yPos: this.scaleY(this.size) + this.y, 73 | }; 74 | const leftPoint = { 75 | xPos: this.scaleX(this.size) + this.x, 76 | yPos: this.scaleY(this.size) + this.y, 77 | }; 78 | const downPoint = { 79 | xPos: this.scaleX(this.size / 2) + this.x, 80 | yPos: this.scaleY(2 * this.size) + this.y, 81 | }; 82 | 83 | /* Calculate area of triangle ABC */ 84 | let A = this.area( 85 | leftPoint.xPos, 86 | leftPoint.yPos, 87 | rightPoint.xPos, 88 | rightPoint.yPos, 89 | downPoint.xPos, 90 | downPoint.yPos 91 | ); 92 | 93 | /* Calculate area of triangle PBC */ 94 | let A1 = this.area( 95 | mouseX, 96 | mouseY, 97 | rightPoint.xPos, 98 | rightPoint.yPos, 99 | downPoint.xPos, 100 | downPoint.yPos 101 | ); 102 | 103 | /* Calculate area of triangle PAC */ 104 | let A2 = this.area( 105 | leftPoint.xPos, 106 | leftPoint.yPos, 107 | mouseX, 108 | mouseY, 109 | downPoint.xPos, 110 | downPoint.yPos 111 | ); 112 | 113 | /* Calculate area of triangle PAB */ 114 | let A3 = this.area( 115 | leftPoint.xPos, 116 | leftPoint.yPos, 117 | rightPoint.xPos, 118 | rightPoint.yPos, 119 | mouseX, 120 | mouseY 121 | ); 122 | 123 | /* Check if sum of A1, A2 and A3 is same as A */ 124 | //.toFixed -> it will take 2 numbers after '.' (eg: 8.25) 125 | return A.toFixed(2) === (A1 + A2 + A3).toFixed(2); 126 | } 127 | } 128 | 129 | return Arrow; 130 | } 131 | 132 | export default arrowFun; 133 | -------------------------------------------------------------------------------- /src/pages/components/utils/circleForCanvas.js: -------------------------------------------------------------------------------- 1 | function circle(ctx) { 2 | class Circle { 3 | radius = window.innerHeight / 160; 4 | nodeValue = null; 5 | 6 | constructor(x, y, color, nodeName) { 7 | this.x = this.scaleX(x); 8 | this.y = this.scaleY(y); 9 | this.nodeName = nodeName; 10 | this.color = color; 11 | } 12 | 13 | draw() { 14 | ctx.beginPath(); 15 | //Text inside Circle 16 | //This Style for Text which styled the text middle of cicle 17 | ctx.textAlign = "center"; 18 | ctx.textBaseline = "middle"; 19 | //This is Text inside Circle 20 | // ctx.fillText(this.nodeName, this.x, this.y); 21 | 22 | ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 23 | 24 | ctx.fillStyle = this.color; 25 | ctx.closePath(); 26 | ctx.fill(); 27 | 28 | // ctx.strokeStyle = this.color; 29 | // ctx.closePath(); 30 | // ctx.stroke(); 31 | } 32 | 33 | // scaleX and scaleY is calculate value X and Y posprosotinal of the canvas height and width 34 | // this is besically calculating X and Y value corrosponding the canvas height and width 35 | scaleX(xVal) { 36 | return xVal * (window.innerWidth / 1550); 37 | } 38 | 39 | scaleY(yVal) { 40 | return yVal * (window.innerHeight / 722); 41 | } 42 | 43 | setNodeValue(val) { 44 | this.nodeValue = val; 45 | } 46 | 47 | click( 48 | mouseX, 49 | mouseY, 50 | arrowPointerName, 51 | setStartLocation, 52 | setFinishLocation 53 | ) { 54 | // distance -> distance between 'Clicked Mouse point' and 'Center of the Circle' 55 | let distance = this.getDistance(mouseX, mouseY); 56 | 57 | // if calculated distance between 'Clicked Mouse point' and 'Center of the Circle is less than equal to Circle Radius then You clicked on Circle' 58 | 59 | if (distance <= this.radius) { 60 | if (arrowPointerName === "startArrow") { 61 | setStartLocation(this.nodeName.toUpperCase()); 62 | } 63 | 64 | if (arrowPointerName === "endArrow") { 65 | setFinishLocation(this.nodeName.toUpperCase()); 66 | } 67 | } 68 | } 69 | // this for calculation distance between 'Clicked Mouse point' and 'Center of the Circle' 70 | getDistance(mouseX, mouseY) { 71 | return Math.sqrt( 72 | (mouseX - this.x) * (mouseX - this.x) + 73 | (mouseY - this.y) * (mouseY - this.y) 74 | ); 75 | } 76 | 77 | setColor(colorName) { 78 | this.radius = window.innerHeight / 100; 79 | this.color = colorName; 80 | this.draw(); 81 | } 82 | } 83 | 84 | return Circle; 85 | } 86 | 87 | export default circle; 88 | -------------------------------------------------------------------------------- /src/pages/components/utils/lineForCanvas.js: -------------------------------------------------------------------------------- 1 | function line(ctx) { 2 | class Line { 3 | color = "#e65440"; 4 | lineWidth = 1; 5 | constructor(from, to) { 6 | this.from = from; 7 | this.to = to; 8 | this.value = this.weight(); 9 | } 10 | 11 | draw() { 12 | ctx.beginPath(); 13 | ctx.moveTo(this.scaleX(this.from.x), this.scaleY(this.from.y)); 14 | ctx.lineTo(this.scaleX(this.to.x), this.scaleY(this.to.y)); 15 | ctx.strokeStyle = this.color; 16 | ctx.lineWidth = this.lineWidth; 17 | ctx.stroke(); 18 | } 19 | 20 | scaleX(xVal) { 21 | return xVal * (window.innerWidth / 1550); 22 | } 23 | 24 | scaleY(yVal) { 25 | return yVal * (window.innerHeight / 722); 26 | } 27 | 28 | setColor(colorName) { 29 | this.color = colorName; 30 | this.lineWidth = 2; 31 | this.draw(); 32 | } 33 | 34 | // calculating length of lines 35 | weight() { 36 | const distanceX = Math.floor( 37 | this.scaleX(this.to.x) - this.scaleX(this.from.x) 38 | ); 39 | const distanceY = Math.floor( 40 | this.scaleY(this.to.y) - this.scaleY(this.from.y) 41 | ); 42 | 43 | return Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)); 44 | } 45 | } 46 | 47 | return Line; 48 | } 49 | 50 | export default line; 51 | -------------------------------------------------------------------------------- /src/pages/components/utils/reducer.js: -------------------------------------------------------------------------------- 1 | const initState = { 2 | walls: [], 3 | start: { col: 10, row: 7 }, 4 | end: { col: 30, row: 7 }, 5 | isMousePressedForDFS: false, 6 | }; 7 | 8 | function isInWallOrNot(arr, node) { 9 | if (arr.some((e) => e.col === node.col && e.row === node.row)) { 10 | return arr.filter((e) => e.col !== node.col || e.row !== node.row); 11 | } else { 12 | arr.push({ ...node }); 13 | } 14 | 15 | return arr; 16 | } 17 | 18 | const reducer = (state = initState, action) => { 19 | switch (action.type) { 20 | case "ISWALLDFS": 21 | const x = { 22 | ...state, 23 | walls: [...isInWallOrNot(state.walls, action.wallNode)], 24 | }; 25 | 26 | return x; 27 | 28 | case "RESETWALL": 29 | return { ...state, walls: [] }; 30 | 31 | case "SET_STARTNODE": 32 | return { ...state, start: action.startNodeVal }; 33 | 34 | case "SET_ENDNODE": 35 | return { ...state, end: action.endNodeVal }; 36 | case "ISMOUSEPRESSED_FOR_DFS": 37 | return { ...state, isMousePressedForDFS: !state.isMousePressedForDFS }; 38 | 39 | default: 40 | return state; 41 | } 42 | }; 43 | 44 | export default reducer; 45 | -------------------------------------------------------------------------------- /src/pages/components/utils/sleepFun.js: -------------------------------------------------------------------------------- 1 | const sleep = (ms) => { 2 | return new Promise((resolve) => setTimeout(resolve, ms)); 3 | }; 4 | 5 | export default sleep; 6 | -------------------------------------------------------------------------------- /src/pages/components/utils/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "redux"; 2 | import reducer from "./reducer"; 3 | 4 | const store = createStore(reducer); 5 | 6 | export default store; 7 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/videos/DijkstraVideo-No-Edit.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wasim15185/AlgoVisualizer/87c5c077edf1b0d0024e468ea6ed5a4035fd46d2/src/videos/DijkstraVideo-No-Edit.mp4 --------------------------------------------------------------------------------