created draw tree, info cards, inserting into tree

Author: adammehaney

src/components/BST.astro

@@ -1,5 +1,4 @@
 ---
-import BSTNode from './BST_node.astro';
 ---
 
 <div class="tree">
@@ -11,8 +10,8 @@ import BSTNode from './BST_node.astro';
 	.tree {
 		display: flex;
 		flex-direction: column;
-		gap: 50px;
-		height: 100vh;
+		gap: 20px;
+		height: 30vh;
 	}
 	div div {
 		display: flex;

src/components/BST_node.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+    href?: string;
+    target?: string;
+}
+
+const {href, target } = Astro.props;
+---
+<a href={href} target={target}>
+    <slot />
+</a>
+<style>
+    a {
+        color: black;
+        font-weight: bold;
+        background-color: var(--secondary);
+        border-radius: var(--border-radius);
+        width: 30%;
+        padding: 10px;
+        margin-top: 30px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        transition-duration: 0.4s;
+        transition-timing-function: ease-in-out;
+    }
+
+    a:hover {
+        background: linear-gradient(90deg, var(--primary), var(--secondary));
+        cursor: pointer;
+    }
+</style>

src/components/button.astro

@@ -0,0 +1,15 @@
+<div>
+    <slot>
+        
+    </slot>
+</div>
+<style>
+    div {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--background-secondary);
+        padding: 20px;
+        border-radius: var(--border-radius);
+        border: 1px solid var(--secondary);
+    }
+</style>

src/components/infopanel.astro

@@ -23,14 +23,17 @@ const { title } = Astro.props;
 </html>
 <style is:global>
 	:root {
-		--background-secondary: #000000ff;
+		--background-secondary: rgb(32, 54, 100);
 		--background: #14213dff;
 		--secondary: #fca311ff;
 		--primary: #e5e5e5ff;
 		--white: #ffffffff;
+		--border-radius: 20px;
 	}
 	* {
 		color: var(--primary);
+		margin: 0;
+		padding: 0;
 	}
 	html {
 		font-family: system-ui, sans-serif;
@@ -50,9 +53,9 @@ const { title } = Astro.props;
 	}
 	h1, h2, h3, h4 {
 		text-transform: uppercase;
-		line-height: 0;
+		/* line-height: 0; */
 		text-align: left;
-		margin-bottom: 1em;
+		/* margin-bottom: 1em; */
 	}
 	h2, h3, h4 {
 		color: var(--secondary);

src/layouts/Layout.astro

@@ -1,13 +1,37 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import BST from '../components/BST.astro';
+import InfoPanel from '../components/infopanel.astro';
+import Button from '../components/button.astro';
 ---
 
 <Layout title="Welcome to Astro.">
 	<main>
 		<h1>Binary Search Tree</h1>
 		<h2>Visualizer</h2>
 		<BST />
+		<InfoPanel>
+			<h2>Inserting into a Binary Tree</h2>
+			<form id="insert-form" onsubmit="return false;" method="post" name="myForm">
+				<label for="fname">Value you want to add: </label>
+				<input id="insert-form-input" type="text"  name="fname"><br><br>
+				<input type="submit" value="Submit">
+			</form>
+			<Button>Insert</Button>
+		</InfoPanel>
+		<InfoPanel>
+			<h2>PreOrder Representation</h2>
+			<code id="preorder-list"></code>
+			<Button>Preorder Traversals</Button>
+		</InfoPanel>
+		<InfoPanel>
+			<h2>InOrder Representation</h2>
+			<code id="inorder-list"></code>
+		</InfoPanel>
+		<InfoPanel>
+			<h2>PostOrder Representation</h2>
+			<code id="postorder-list"></code>
+		</InfoPanel>
 	</main>
 </Layout>
 
@@ -21,4 +45,4 @@ import BST from '../components/BST.astro';
 		font-size: 20px;
 		line-height: 1.6;
 	}
-</style>
+</style>

src/pages/index.astro

@@ -59,13 +59,23 @@ const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;
 		}
 	}
 
-	function drawNode(ctx: CanvasRenderingContext2D, position: Vector2D) {
+	function drawNode(ctx: CanvasRenderingContext2D, rootValue: number, position: Vector2D) {
+		ctx.fillStyle = "#000000ff";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.font = "20px system-ui, sans-serif"
+		ctx.fillText(rootValue.toString(), position.x, position.y);
+
+		ctx.fillStyle = "white";
+
 		ctx.beginPath();
-		ctx.arc(position.x, position.y, 10, 0, Math.PI * 2, true);
+		ctx.arc(position.x, position.y, 20, 0, Math.PI * 2, true);
 
 		ctx.fill();
 	}
 	function connectPoints(ctx: CanvasRenderingContext2D, position1: Vector2D, position2: Vector2D) {
+		ctx.lineWidth = 5;
+
 		ctx.beginPath();
 		ctx.moveTo(position1.x, position1.y);
 		ctx.lineTo(position2.x, position2.y);
@@ -135,53 +145,103 @@ const canvas = document.getElementById("main-canvas") as HTMLCanvasElement;
 
 		return result
 	}
+	function insert(tree: BinaryTree, value: number) {
+		if (value > tree.getRoot()) {
+			if (tree.getLeft() === null && tree.getRight() === null) {
+				tree.insertRight(value);
+			} else {
+				insert(tree.getRight(), value)
+			}
+		} else {
+			if (tree.getLeft() === null && tree.getRight() === null) {
+				tree.insertLeft(value);
+			} else {
+				insert(tree.getLeft(), value)
+			}
+		}
+	}
+    function drawTree(ctx: CanvasRenderingContext2D, tree: BinaryTree, canvasWidth: number, scale: number, i=0, rootPosition: any=null) {          
+        if (tree) {
+            if (rootPosition === null) {
+                rootPosition = new Vector2D(canvasWidth / 2, 50);
+            }
+
+			drawNode(ctx, tree.getRoot(), rootPosition);
+
+            if (tree.getLeft()) {
+                let leftPosition = new Vector2D(rootPosition.x - (100 / (i + 1)) * scale, rootPosition.y + 50);
+
+				drawNode(ctx, tree.getLeft().getRoot(), leftPosition);
+				connectPoints(ctx, rootPosition, leftPosition);
+                drawTree(ctx, tree.getLeft(), canvasWidth, scale, i + 1, leftPosition);
+            }
+            if (tree.getRight()) {
+                let rightPosition = new Vector2D(rootPosition.x + (100 / (i + 1)) * scale, rootPosition.y + 50);
+
+				drawNode(ctx, tree.getRight().getRoot(), rightPosition);
+				connectPoints(ctx, rootPosition, rightPosition);
+                drawTree(ctx, tree.getRight(), canvasWidth, scale, i + 1, rightPosition);
+            }
+        }
+    }
+	function updateTraversals(tree: BinaryTree) {
+		var preOrderElement = document.getElementById('preorder-list') as HTMLElement;
+		preOrderElement.innerText = preOrder(tree).toString();
+
+		var inOrderElement = document.getElementById('inorder-list') as HTMLElement;
+		inOrderElement.innerText = inOrder(tree).toString();
+
+		var postOrderElement = document.getElementById('postorder-list') as HTMLElement;
+		postOrderElement.innerText = postOrder(tree).toString();
+	}
 
-	if (canvas.getContext) {
-		const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+	function buildCanvas() {
+		if (canvas.getContext) {
+			const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+	
+			var scale = 1;
+			canvas.style.width = '50vw';
+			canvas.style.height = '50vh';
+			canvas.width = canvas.offsetWidth;
+			canvas.height = canvas.offsetHeight;
+	
+			ctx.globalCompositeOperation='destination-over';
+	
+			ctx.fillStyle = "white";
+			ctx.strokeStyle = "#fca311ff";
+	
+			var tree = new BinaryTree(1);
+			tree.insertLeft(2);
+			tree.insertRight(7);
+			tree.getLeft().insertLeft(3);
+			tree.getLeft().insertRight(6);
+			tree.getLeft().getLeft().insertLeft(4);
+			tree.getLeft().getLeft().insertRight(5);
+			tree.getRight().insertLeft(8);
+			tree.getRight().insertRight(9);
+	
+			updateTraversals(tree);
+	
+			console.log("MIN", minRoot(tree));
+			console.log("MAX", maxRoot(tree));
+	
+			drawTree(ctx, tree, canvas.width, scale);
+
+			var number = document.getElementById('insert-form-input') as HTMLInputElement;
+			var numberForm = document.getElementById('insert-form') as HTMLElement;
+
+			// if (numberForm.addEventListener){
+				
+			// }
+			numberForm.addEventListener("submit", function (){
+				console.log(number.value);
+				insert(tree, parseInt(number.value))
+				drawTree(ctx, tree, canvas.width, scale);
+				updateTraversals(tree);
+			}, false);
+		}
+	}
 
-		var scale = 1;
-		canvas.style.width = '50vw';
-		canvas.style.height = '50vh';
-		canvas.width = canvas.offsetWidth;
-		canvas.height = canvas.offsetHeight;
+	buildCanvas();
 
-		ctx.fillStyle = "white";
-		ctx.strokeStyle = "#fca311ff";
-
-		// const points = [
-		// 	[canvas.offsetWidth / 2, 10],
-		// 	[canvas.offsetWidth / 4, 100],
-		// 	[canvas.offsetWidth / 1.5, 100],
-		// 	[canvas.offsetWidth / 8, 200],
-		// 	[canvas.offsetWidth / 2.5, 200],
-		// 	[canvas.offsetWidth / 1.2, 200],
-		// 	[canvas.offsetWidth / 16, 300],
-		// 	[canvas.offsetWidth / 4.5, 300],
-		// ];
-
-		// points.forEach((point) => {
-		// 	drawLine(ctx, point[0], point[1]);
-		// });
-
-		// points.forEach((point) => {
-		// 	drawNode(ctx, point[0], point[1]);
-		// });
-
-		var tree = new BinaryTree(1)
-		tree.insertLeft(2)
-		tree.insertRight(7)
-		tree.getLeft().insertLeft(3)
-		tree.getLeft().insertRight(6)
-		tree.getLeft().getLeft().insertLeft(4)
-		tree.getLeft().getLeft().insertRight(5)
-		tree.getRight().insertLeft(8)
-		tree.getRight().insertRight(9)
-
-		let preOrderTree = postOrder(tree);
-		for (let i = 0; i < preOrderTree.length; i++) {
-			console.log(preOrderTree[i]);
-		}
-
-		console.log("MIN", minRoot(tree));
-		console.log("MAX", maxRoot(tree));
-	}
+	window.addEventListener("resize", buildCanvas);