diff --git a/dijkstra-prim-visualization/src/App.css b/dijkstra-prim-visualization/src/App.css deleted file mode 100644 index 902778b..0000000 --- a/dijkstra-prim-visualization/src/App.css +++ /dev/null @@ -1,6 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} diff --git a/dijkstra-prim-visualization/src/App.jsx b/dijkstra-prim-visualization/src/App.jsx index fab882f..07fd84c 100644 --- a/dijkstra-prim-visualization/src/App.jsx +++ b/dijkstra-prim-visualization/src/App.jsx @@ -1,4 +1,3 @@ -import "./App.css"; import Canvas from "./components/Canvas/Canvas"; import Navbar from "./components/Navbar/Navbar"; import { GraphParamsProvider } from "./GraphParamsContext"; diff --git a/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css b/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css index 1fe0ea1..674305c 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css +++ b/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css @@ -1,4 +1,6 @@ .canvas { background-color: black; cursor: crosshair; + height: 100%; + width: 100%; }/*# sourceMappingURL=Canvas.module.css.map */ \ No newline at end of file diff --git a/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css.map b/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css.map index 0c345b0..811f2c0 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css.map +++ b/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.css.map @@ -1 +1 @@ -{"version":3,"sources":["Canvas.module.scss","Canvas.module.css"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,iBAAA;ACCF","file":"Canvas.module.css"} \ No newline at end of file +{"version":3,"sources":["Canvas.module.scss","Canvas.module.css"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;ACCF","file":"Canvas.module.css"} \ No newline at end of file diff --git a/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.scss b/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.scss index 2cbb2f8..0922886 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.scss +++ b/dijkstra-prim-visualization/src/components/Canvas/Canvas.module.scss @@ -1,4 +1,6 @@ .canvas { background-color: black; cursor: crosshair; + height: 100%; + width: 100%; } diff --git a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.jsx b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.jsx index 6b66a1e..d7e372c 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.jsx +++ b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.jsx @@ -11,9 +11,14 @@ import classes from "./Edge.module.css"; * @param {number} props.y2 - The y-coordinate of the ending point. * @returns {JSX.Element} - The rendered component. */ -const Edge = ({ id, x1, y1, x2, y2 }) => { +const Edge = ({ id, x1, y1, x2, y2, weight }) => { return ( - + + + + {weight} + + ); }; diff --git a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css index 19eec4d..ae64cec 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css +++ b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css @@ -1,4 +1,5 @@ .line { stroke: #ff0000; stroke-width: 2; + transition: all 0.5s linear; }/*# sourceMappingURL=Edge.module.css.map */ \ No newline at end of file diff --git a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css.map b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css.map index 7de7530..4d1ee20 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css.map +++ b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.css.map @@ -1 +1 @@ -{"version":3,"sources":["Edge.module.scss","Edge.module.css"],"names":[],"mappings":"AAAA;EACE,eAAA;EACA,eAAA;ACCF","file":"Edge.module.css"} \ No newline at end of file +{"version":3,"sources":["Edge.module.scss","Edge.module.css"],"names":[],"mappings":"AAAA;EACE,eAAA;EACA,eAAA;EACA,2BAAA;ACCF","file":"Edge.module.css"} \ No newline at end of file diff --git a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.scss b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.scss index 56071fd..0de7612 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.scss +++ b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edge/Edge.module.scss @@ -1,4 +1,5 @@ .line { stroke: #ff0000; stroke-width: 2; + transition: all 0.5s linear; } diff --git a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edges.jsx b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edges.jsx index f52eaaa..2228e30 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Edges/Edges.jsx +++ b/dijkstra-prim-visualization/src/components/Canvas/Edges/Edges.jsx @@ -3,17 +3,11 @@ import React from "react"; import Edge from "./Edge/Edge"; /** - * Renders edges on the canvas. - * @param {Object[]} edges - An array of edge objects. - * @param {string} edges[].id - The unique identifier of the edge. - * @param {Object} edges[].firstNode - The first node of the edge. - * @param {number} edges[].firstNode.x - The x-coordinate of the first node. - * @param {number} edges[].firstNode.y - The y-coordinate of the first node. - * @param {Object} edges[].secondNode - The second node of the edge. - * @param {number} edges[].secondNode.x - The x-coordinate of the second node. - * @param {number} edges[].secondNode.y - The y-coordinate of the second node. - * @param {number} edges[].weight - The weight of the edge. - * @returns {JSX.Element} - The rendered edges and their weights. + * Renders the edges on the canvas. + * + * @component + * @param {Object[]} edges - The array of edges to be rendered. + * @returns {JSX.Element} The rendered edges. */ const Edges = ({ edges }) => { return ( @@ -26,14 +20,8 @@ const Edges = ({ edges }) => { y1={edge.firstNode.y} x2={edge.secondNode.x} y2={edge.secondNode.y} + weight={edge.weight} /> - - {edge.weight} - ))} diff --git a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.jsx b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.jsx index 5e3c746..2c4883f 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.jsx +++ b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.jsx @@ -1,5 +1,5 @@ import PropTypes from "prop-types"; -import classes from "./Node.module.css"; +import styles from "./Node.module.css"; /** * Renders a node on the canvas. @@ -12,14 +12,21 @@ import classes from "./Node.module.css"; */ const Node = ({ id, cx, cy, onNodeClick }) => { return ( - onNodeClick(event, { id: id, x: cx, y: cy })} - /> + > + + + {id} + + ); }; diff --git a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css index f4ca90d..e2ca060 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css +++ b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css @@ -1,7 +1,14 @@ +.node { + cursor: pointer; +} + .circle { stroke: #fff; - stroke-width: 1.5; - cursor: pointer; + stroke-width: 2; fill: #fff; transition: all 0.2s linear; +} + +.text { + color: black; }/*# sourceMappingURL=Node.module.css.map */ \ No newline at end of file diff --git a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css.map b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css.map index 2045c16..98c8570 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css.map +++ b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.css.map @@ -1 +1 @@ -{"version":3,"sources":["Node.module.scss","Node.module.css"],"names":[],"mappings":"AAAA;EACE,YAAA;EACA,iBAAA;EACA,eAAA;EACA,UAAA;EACA,2BAAA;ACCF","file":"Node.module.css"} \ No newline at end of file +{"version":3,"sources":["Node.module.scss","Node.module.css"],"names":[],"mappings":"AAAA;EACE,eAAA;ACCF;;ADEA;EACE,YAAA;EACA,eAAA;EACA,UAAA;EACA,2BAAA;ACCF;;ADEA;EACE,YAAA;ACCF","file":"Node.module.css"} \ No newline at end of file diff --git a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.scss b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.scss index bff8ba0..853313e 100644 --- a/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.scss +++ b/dijkstra-prim-visualization/src/components/Canvas/Nodes/Node/Node.module.scss @@ -1,7 +1,14 @@ +.node { + cursor: pointer; +} + .circle { stroke: #fff; - stroke-width: 1.5; - cursor: pointer; + stroke-width: 2; fill: #fff; transition: all 0.2s linear; } + +.text { + color: black; +} diff --git a/dijkstra-prim-visualization/src/components/Navbar/Navbar.jsx b/dijkstra-prim-visualization/src/components/Navbar/Navbar.jsx index 4de23c0..890045f 100644 --- a/dijkstra-prim-visualization/src/components/Navbar/Navbar.jsx +++ b/dijkstra-prim-visualization/src/components/Navbar/Navbar.jsx @@ -1,43 +1,29 @@ import { useContext } from "react"; import { GraphParamsContext } from "../../GraphParamsContext"; -import { primWrapper } from "../../algorithms/prim"; -import { dijkstraWrapper } from "../../algorithms/dijkstra"; +import { startAnimations } from "./animations"; +import { runDijkstra, runPrim } from "./NavbarUtils"; /** - * Navbar component displays buttons to print nodes and edges. + * Navbar component displays buttons to manage all the logic of the website. * @returns {JSX.Element} Navbar component */ const Navbar = () => { const { nodes, edges } = useContext(GraphParamsContext); - const runPrim = () => { - const result = primWrapper(nodes, edges); - console.log(result); + const animatePrim = () => { + const edgeIds = runPrim(nodes, edges); + startAnimations(edgeIds); }; - const runDijkstra = () => { - const result = dijkstraWrapper(nodes, edges); - console.log(result); + const animateDijkstra = () => { + const edgeIds = runDijkstra(nodes, edges); + startAnimations(edgeIds); }; return ( <> - - - - + + ); }; diff --git a/dijkstra-prim-visualization/src/components/Navbar/NavbarUtils.js b/dijkstra-prim-visualization/src/components/Navbar/NavbarUtils.js new file mode 100644 index 0000000..f4c9bea --- /dev/null +++ b/dijkstra-prim-visualization/src/components/Navbar/NavbarUtils.js @@ -0,0 +1,40 @@ +import { primWrapper } from "../../algorithms/prim"; +import { dijkstraWrapper } from "../../algorithms/dijkstra"; + +const runPrim = (nodes, edges) => { + const result = primWrapper(nodes, edges); + console.log(result); + const edgeIds = getEdgeIDs(result.steps); + + return edgeIds; +}; + +const runDijkstra = (nodes, edges) => { + const result = dijkstraWrapper(nodes, edges); + console.log(result); + const edgeIds = getEdgeIDs(result.steps); + + return edgeIds; +}; + +/** + * Returns an array of edge IDs based on the given steps. + * @param {Array} steps - The steps array. + * @returns {Array} - The array of edge IDs. + */ +const getEdgeIDs = (steps) => { + if (!Array.isArray(steps)) { + console.error("Invalid argument: steps must be an array"); + return; + } + + return steps.map((step) => { + const edgeCandidateOne = document.getElementById(`${step.from}-${step.to}`); + + return edgeCandidateOne + ? `${step.from}-${step.to}` + : `${step.to}-${step.from}`; // edgeCandidateTwo + }); +}; + +export { runPrim, runDijkstra }; diff --git a/dijkstra-prim-visualization/src/components/Navbar/animations.js b/dijkstra-prim-visualization/src/components/Navbar/animations.js new file mode 100644 index 0000000..cd95c6c --- /dev/null +++ b/dijkstra-prim-visualization/src/components/Navbar/animations.js @@ -0,0 +1,38 @@ +const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); + +/** + * Starts the animations for the given edge IDs. + * @param {string[]} edgeIds - The IDs of the edges to animate. + * @returns {Promise} - A promise that resolves when the animations are complete. + */ +const startAnimations = async (edgeIds) => { + const changeStrokeColor = async (edgeIds) => { + for (const id of edgeIds) { + const edge = document.getElementById(id); + edge.style.stroke = "green"; + edge.style.strokeWidth = "10"; + + await sleep(1000); + } + + for (const id of edgeIds) { + const edge = document.getElementById(id); + edge.style.stroke = "violet"; + } + + await sleep(3000); + }; + + const resetColors = async (edgeIds) => { + for (const id of edgeIds) { + const edge = document.getElementById(id); + edge.style.stroke = "red"; + edge.style.strokeWidth = "2"; + } + }; + + await changeStrokeColor(edgeIds); + await resetColors(edgeIds); +}; + +export { startAnimations }; diff --git a/dijkstra-prim-visualization/src/index.css b/dijkstra-prim-visualization/src/index.css index eff67ec..38d5436 100644 --- a/dijkstra-prim-visualization/src/index.css +++ b/dijkstra-prim-visualization/src/index.css @@ -18,6 +18,11 @@ body { margin: 0; display: flex; place-items: center; - min-width: 320px; - min-height: 100vh; + width: 100vw; + height: 100vh; +} + +#root { + width: 100%; + height: 100%; }