feat: leetcode-tree-visualizer finished with custom test cases

Author: subrat611

index.html

@@ -58,6 +58,27 @@ <h1 class="text-xl font-medium font-mono text-center">
       </div>
 
       <!-- Input field to take test case -->
+      <div class="w-full flex flex-col items-center my-8">
+        <textarea
+          rows="3"
+          placeholder="eg: [1, 2, 3, null]"
+          class="border p-2 focus:outline-gray-600"
+        ></textarea>
+        <div class="space-x-4 mt-2">
+          <button
+            class="border w-[100px] py-2 bg-gray-800 rounded-md text-gray-50 font-medium hover:bg-gray-900"
+            id="run-btn"
+          >
+            Run
+          </button>
+          <button
+            class="border w-[100px] py-2 bg-gray-800 rounded-md text-gray-50 font-medium hover:bg-gray-900"
+            id="clear-btn"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
       <!-- place for tree render -->
       <canvas></canvas>
     </div>

src/main.ts

@@ -2,21 +2,87 @@ import TreeNode from "./data-structures/TreeNode";
 import renderTree from "./render/drawTree";
 
 const canvas = document.querySelector("canvas");
-const root = new TreeNode(10);
-const root1 = new TreeNode(12);
-root.setLeftNode(root1);
+const textArea = document.querySelector("textarea");
+const runBtn = document.querySelector("#run-btn");
+const clearBtn = document.querySelector("#clear-btn");
 
-const root2 = new TreeNode(13);
-root.setRightNode(root2);
+runBtn?.addEventListener("click", ()=> {
 
+    if(textArea?.value === "") return;
 
-const root3 = new TreeNode(13);
-root2.setRightNode(root3);
-root1.setLeftNode(root3);
+    const root = constructTree();
 
+    renderTree(root, canvas)
+})
 
-const root4 = new TreeNode(11);
-root2.setLeftNode(root4);
+clearBtn?.addEventListener("click", ()=> {
+    (textArea as HTMLTextAreaElement ).value = "";
+    const context = canvas?.getContext('2d');
+    context?.clearRect(0, 0, canvas!.width, canvas!.height)
+})
 
+function constructTree(): TreeNode {
 
-renderTree(root, canvas)
+    let parsedInputArray = parseInput(textArea!.value);
+
+    const queue:TreeNode[] = [];
+    
+    let idx = 0;
+    const root = new TreeNode(parsedInputArray[idx]);
+    idx++;
+    
+    queue.push(root);
+
+    while(queue.length > 0 && idx < parsedInputArray.length) {
+        const currentNode = queue.shift();
+
+        // left child
+        if(idx < parsedInputArray.length) {
+            
+            if(parsedInputArray[idx] != null) {
+                const leftNode = new TreeNode(parsedInputArray[idx]);
+                currentNode?.setLeftNode(leftNode);
+                queue.push(leftNode);
+            }
+            idx++;
+        }
+
+        // right child
+        if(idx < parsedInputArray.length) {
+            
+            if(parsedInputArray[idx] != null) {
+                const rightNode = new TreeNode(parsedInputArray[idx]);
+                currentNode?.setRightNode(rightNode);
+                queue.push(rightNode);
+            }
+            idx++;
+        }
+    }
+
+
+    return root;
+}
+
+function parseInput(input: string) {
+    let parsedInput = "";
+
+    for(let i=0; i<input.length; i++) {
+        const ch = input.charAt(i);
+
+        if(ch !== ' ' && ch !== '[' && ch !== ']') parsedInput += ch;
+    }
+
+    return parsedInput.split(',').map((ele)=> {
+        if(ele === 'null') return null;
+        return parseInt(ele);
+    })
+}
+
+window.addEventListener('resize', ()=> {
+    const context = canvas?.getContext('2d');
+    context?.clearRect(0, 0, canvas!.width, canvas!.height)
+
+    const root = constructTree();
+
+    renderTree(root, canvas)
+})