Merge pull request #8 from AdiletBaimyrza/adilet/canvas-navbar-styling

Adilet/canvas navbar styling

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";

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 */

dijkstra-prim-visualization/src/components/Canvas/Canvas.module.scss

@@ -1,4 +1,6 @@
 .canvas {
   background-color: black;
   cursor: crosshair;
+  height: 100%;
+  width: 100%;
 }

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 (
-    <line className={classes.line} id={id} x1={x1} y1={y1} x2={x2} y2={y2} />
+    <g>
+      <line className={classes.line} id={id} x1={x1} y1={y1} x2={x2} y2={y2} />
+      <text x={(x1 + x2) / 2} y={(y1 + y2) / 2} fill="white">
+        {weight}
+      </text>
+    </g>
   );
 };
 

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 */

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;
 }

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}
           />
-          <text
-            x={(edge.firstNode.x + edge.secondNode.x) / 2}
-            y={(edge.firstNode.y + edge.secondNode.y) / 2}
-            fill="white"
-          >
-            {edge.weight}
-          </text>
         </React.Fragment>
       ))}
     </>

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 (
-    <circle
-      className={classes.circle}
-      id={id}
-      cx={cx}
-      cy={cy}
-      r="14" // TODO: Make the radius a prop to allow for customization
+    <g
+      className={styles.node}
       onClick={(event) => onNodeClick(event, { id: id, x: cx, y: cy })}
-    />
+    >
+      <circle className={styles.circle} id={id} cx={cx} cy={cy} r="16" />
+      <text
+        id={styles.text}
+        x={cx}
+        y={cy}
+        textAnchor="middle"
+        dominantBaseline="middle"
+      >
+        {id}
+      </text>
+    </g>
   );
 };
 

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 */

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;
+}

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 (
     <>
-      <button onClick={runPrim}>Run prim's algorithm</button>
-      <button onClick={runDijkstra}>Run dijkstra's algorithm</button>
-      <button
-        onClick={() => {
-          console.log(nodes);
-        }}
-      >
-        Print nodes
-      </button>
-      <button
-        onClick={() => {
-          console.log(edges);
-        }}
-      >
-        Print edges
-      </button>
+      <button onClick={animatePrim}>Run prim's algorithm</button>
+      <button onClick={animateDijkstra}>Run dijkstra's algorithm</button>
     </>
   );
 };

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 };

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<void>} - 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 };

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%;
 }