Skip to content

Commit c7d9fff

Browse files
bk408bk408
committed
Create algorithm to parsed the data & construct the tree & render on canvas
1 parent 2ec06f9 commit c7d9fff

File tree

6 files changed

+132
-49
lines changed

6 files changed

+132
-49
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"cSpell.words": [
33
"bezier",
4+
"Btns",
45
"lightsalmon",
56
"treeutils"
67
]

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,5 @@
3535

3636
- Calculate coordinates for bezier curve
3737
- Node connect using Bezier curve
38+
39+

‎drawBinaryTree.js

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
connectEdges,
55
drawNode,
66
getRequiredHeightAndWidth,
7+
treeConstructor,
78
} from "./treeutils.js";
89

910
const canvas = document.querySelector("canvas");
@@ -98,48 +99,37 @@ function recursivelyDrawNotes(
9899
);
99100
}
100101
}
102+
let preValue = "";
101103

102-
const root = new BinaryTreeNode(1); // creating first node
104+
function init(value) {
105+
preValue = value;
103106

104-
const node2 = new BinaryTreeNode(2);
105-
root.setLeft(node2);
107+
clearCanvas();
108+
const root = treeConstructor(value);
106109

107-
const node3 = new BinaryTreeNode(3);
108-
root.setRight(node3);
109-
110-
const node4 = new BinaryTreeNode(4);
111-
node2.setLeft(node4);
112-
113-
const node5 = new BinaryTreeNode(5);
114-
node2.setRight(node5);
115-
116-
const node6 = new BinaryTreeNode(6);
117-
node3.setLeft(node6);
118-
119-
const node7 = new BinaryTreeNode(7);
120-
node3.setRight(node7);
121-
122-
const node8 = new BinaryTreeNode(8);
123-
node4.setLeft(node8);
124-
125-
const node9 = new BinaryTreeNode(9);
126-
node4.setRight(node9);
127-
128-
const node10 = new BinaryTreeNode(10);
129-
node5.setLeft(node10);
110+
drawBinaryTree(root, canvas);
111+
}
130112

131-
const node11 = new BinaryTreeNode(11);
132-
node5.setRight(node11);
113+
function clearCanvas() {
114+
const context = canvas.getContext("2d");
115+
context.clearRect(0, 0, canvas.width, canvas.height);
116+
}
133117

134-
const node12 = new BinaryTreeNode(12);
135-
node6.setRight(node12);
118+
const textarea = document.querySelector("textarea");
119+
const applyBtn = document.querySelector(".applyBtn");
120+
const clearBtn = document.querySelector(".clearBtn");
136121

137-
const node13 = new BinaryTreeNode(13);
138-
node7.setLeft(node13);
122+
applyBtn.addEventListener("click", () => {
123+
if (textarea.value === "") return;
139124

140-
const node14 = new BinaryTreeNode(14);
141-
node9.setLeft(node14);
125+
init(textarea.value);
126+
});
142127

143-
console.log(root);
128+
clearBtn.addEventListener("click", () => {
129+
textarea.value = "";
130+
clearCanvas();
131+
});
144132

145-
drawBinaryTree(root, canvas);
133+
window.addEventListener("resize", () => {
134+
init(preValue);
135+
});

‎index.html

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>My-binary Tree Visualizer</title>
7-
<link rel="stylesheet" href="style.css">
8-
</head>
9-
<body>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="inputContainer">
11+
<textarea class="input" rows="5"></textarea>
12+
<div class="actionBtns">
13+
<button class="applyBtn">Apply</button>
14+
<button class="clearBtn">Clear</button>
15+
</div>
16+
</div>
17+
1018
<canvas></canvas>
1119
<script type="module" src="drawBinaryTree.js"></script>
12-
</body>
13-
</html>
20+
</body>
21+
</html>

‎style.css

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,31 @@
1-
*{
2-
box-sizing: border-box;
3-
margin: 0;
4-
padding: 0;
5-
}
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
.inputContainer {
8+
position: absolute;
9+
top: 1rem;
10+
left: 1rem;
11+
display: flex;
12+
flex-direction: column;
13+
gap: 1rem;
14+
width: 10rem;
15+
}
16+
17+
textarea {
18+
resize: none;
19+
width: 100%;
20+
}
21+
22+
.actionBtns {
23+
width: 100%;
24+
display: flex;
25+
gap: 1rem;
26+
}
27+
28+
button {
29+
width: 5rem;
30+
height: 2rem;
31+
}

‎treeutils.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { BinaryTreeNode } from "./BinaryTreeNode.js";
2+
13
export const DEFAULT_CONFIG = {
24
radius: 20,
35
nodeWidthSpacing: 25, // width spacing
@@ -75,3 +77,57 @@ export function connectEdges(canvasElement, xCoordinates, yCoordinates) {
7577

7678
context.stroke();
7779
}
80+
81+
export function treeConstructor(input) {
82+
input = parseInput(input);
83+
84+
const queue = [];
85+
86+
let idx = 0;
87+
88+
const root = new BinaryTreeNode(input[idx]);
89+
idx++;
90+
91+
queue.push(root);
92+
93+
while (queue.length > 0 && idx < input.length) {
94+
const node = queue.shift();
95+
96+
// Left child
97+
if (idx < input.length) {
98+
if (input[idx] !== null) {
99+
const leftNode = new BinaryTreeNode(input[idx]);
100+
node.setLeft(leftNode);
101+
queue.push(leftNode);
102+
}
103+
idx++;
104+
}
105+
106+
// Right Child
107+
108+
if (idx < input.length) {
109+
if (input[idx] !== null) {
110+
const rightNode = new BinaryTreeNode(input[idx]);
111+
node.setRight(rightNode);
112+
queue.push(rightNode);
113+
}
114+
idx++;
115+
}
116+
}
117+
118+
return root;
119+
}
120+
121+
function parseInput(input) {
122+
let parseInput = "";
123+
124+
for (let i = 0; i < input.length; i++) {
125+
const ch = input.charAt(i);
126+
if (ch !== "") parseInput += ch;
127+
}
128+
129+
return parseInput.split(",").map((elem) => {
130+
if (elem === "null") return null;
131+
else return elem;
132+
});
133+
}

0 commit comments

Comments
 (0)