measure realtime coordinates & implement node rendering

Author: bk408

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "lightsalmon",
         "treeutils"
     ]
 }

README.md

@@ -0,0 +1,35 @@
+
+# Process
+
+- Understand the concept
+- create binary node tree properties in BinaryTreeNode.js
+- Set default_config in treeUtils.js
+- Create drawBinaryTree.js
+
+- Initialize canvas via query selector
+- creation function drawBinaryTree & pass root canvasElement as argument
+- Find maxWidth & maxHeight for window
+- Initialize the canvas dimensions
+- Calculate required width & height to draw the tree structure
+
+
+- create getRequiredHeightAndWidth function in treeUtils.js
+- calculate the height of canvas
+- calculate the width of canvas 
+
+
+- calculate center points
+
+- Create recursivelyDrawNotes function  in drawBinaryTree.js
+- Find x & y - position for circle 
+
+
+- Create drawNode function in treeUtils.js
+- Create draw circle, draw border & write value in circle 
+
+-  recursively Left node created  in drawBinaryTree.js
+-  recursively Right node created in drawBinaryTree.js
+
+- connectEdges function created in treeUtils.js
+- coordinates create for curve
+- Create draw curve 

drawBinaryTree.js

@@ -1,46 +1,124 @@
-import { BinaryTreeNode } from "./BinaryTreeNode.js"
-import { getRequiredHeightAndWidth } from "./treeutils.js";
-
+import { BinaryTreeNode } from "./BinaryTreeNode.js";
+import {
+  DEFAULT_CONFIG,
+  connectEdges,
+  drawNode,
+  getRequiredHeightAndWidth,
+} from "./treeutils.js";
 
 const canvas = document.querySelector("canvas");
 
 function drawBinaryTree(root, canvasElement) {
-    
-    const maxWidth = window.innerWidth;  // taking max width of window
-    const maxHeight = window.innerHeight; // taking max height of window
+  const maxWidth = window.innerWidth; // taking max width of window
+  const maxHeight = window.innerHeight; // taking max height of window
+
+  // Initialize the canvas dimensions
+  canvasElement.width = maxWidth;
+  canvasElement.height = maxHeight;
+
+  // calculate required width & height to draw the tree structure
+  const { requiredCanvasHeight, requiredCanvasWidth } =
+    getRequiredHeightAndWidth(root);
 
-    // Initialize the canvas dimensions
-    canvasElement.width = maxWidth;
-    canvasElement.height = maxHeight;
+  // calculate center Points
 
-    // calculate required width & height to draw the tree structure
-   const { requiredCanvasHeight, requiredCanvasWidth } =
-     getRequiredHeightAndWidth(root);
+  const windowWidthCenter = maxWidth / 2;
+  const requiredWidthCenter = requiredCanvasWidth / 2;
 
+  const xStart = windowWidthCenter - requiredWidthCenter;
+  const xEnd = windowWidthCenter + requiredWidthCenter;
 
-    // calculate center Points
-    
-    const windowWidthCenter = maxWidth / 2;
-    const requiredWidthCenter = requiredCanvasWidth / 2;
+  const horizontalConfig = { xStart, xEnd };
 
-    const xStart = windowWidthCenter - requiredWidthCenter;
-    const xEnd = windowWidthCenter + requiredWidthCenter;
+  // Draw
 
-    const horizontalConfig = { xStart, xEnd }
-    
-    // Draw
+  recursivelyDrawNotes(root, canvasElement, 0.5, horizontalConfig);
 }
 
+function recursivelyDrawNotes(
+  root,
+  canvasElement,
+  currentLine,
+  horizontalConfig
+) {
+  const { xStart, xEnd } = horizontalConfig;
+
+  const xPos = (xStart + xEnd) / 2; // Find x-position for circle
+  const yPos = currentLine * DEFAULT_CONFIG.nodeHeightSpacing; // Find y-position for circle
+
+  drawNode(root.value, canvasElement, xPos, yPos); // draw the circle
+
+  if (root.left !== null) {
+    // recursively Left node created
+    const leftNodeHorizontalConfig = { xStart, xEnd: xPos };
+    recursivelyDrawNotes(
+      root.left,
+      canvasElement,
+      currentLine + 1,
+      leftNodeHorizontalConfig
+    );
+
+    connectEdges(
+      canvasElement,
+      {
+        xStart: xPos,
+        xEnd: (xStart + xPos) / 2,
+      },
+      {
+        yStart: yPos + DEFAULT_CONFIG.radius,
+        yEnd:
+          (currentLine + 1) * DEFAULT_CONFIG.nodeHeightSpacing -
+          DEFAULT_CONFIG.radius,
+      }
+    );
+  }
+
+  if (root.right !== null) {
+    // recursively right node created
+    const rightNodeHorizontalConfig = { xStart: xPos, xEnd };
+    recursivelyDrawNotes(
+      root.right,
+      canvasElement,
+      currentLine + 1,
+      rightNodeHorizontalConfig
+    );
+
+    connectEdges(
+      canvasElement,
+      {
+        xStart: xPos,
+        xEnd: (xPos + xEnd) / 2,
+      },
+      {
+        yStart: yPos + DEFAULT_CONFIG.radius,
+        yEnd:
+          (currentLine + 1) * DEFAULT_CONFIG.nodeHeightSpacing -
+          DEFAULT_CONFIG.radius,
+      }
+    );
+  }
+}
 
-const root = new BinaryTreeNode(1);  // creating first node
+const root = new BinaryTreeNode(1); // creating first node
 
 const node2 = new BinaryTreeNode(2);
 root.setLeft(node2);
 
 const node3 = new BinaryTreeNode(3);
 root.setRight(node3);
 
-console.log(root);
+const node4 = new BinaryTreeNode(4);
+node3.setLeft(node4);
 
+const node7 = new BinaryTreeNode(7);
+node3.setRight(node7);
+
+const node5 = new BinaryTreeNode(5);
+node2.setLeft(node5);
+
+const node6 = new BinaryTreeNode(6);
+node2.setRight(node6);
+
+console.log(root);
 
-drawBinaryTree(root, canvas)
+drawBinaryTree(root, canvas);

treeutils.js

@@ -1,19 +1,62 @@
 export const DEFAULT_CONFIG = {
-    radius: 20,
-    nodeWidthSpacing: 25,  // width spacing
-    nodeHeightSpacing: 100,  // line height
-    nodeFontSize: 10   // font size
-}
+  radius: 20,
+  nodeWidthSpacing: 25, // width spacing
+  nodeHeightSpacing: 100, // line height
+  nodeFontSize: 10, // font size
+};
 
 export function getRequiredHeightAndWidth(root) {
   const heightOfTree = root.getHeight(); // calculate the height of canvas
   const maxLeafNodes = Math.pow(2, heightOfTree); // calculate the width of canvas
 
   const requiredCanvasHeight = heightOfTree * DEFAULT_CONFIG.nodeHeightSpacing; // calculate the height of canvas
-    const requiredCanvasWidth = maxLeafNodes * DEFAULT_CONFIG.nodeWidthSpacing; // calculate the width of canvas
-    
-    return {
-        requiredCanvasHeight,
-        requiredCanvasWidth
-    }
-}
+  const requiredCanvasWidth = maxLeafNodes * DEFAULT_CONFIG.nodeWidthSpacing; // calculate the width of canvas
+
+  return {
+    requiredCanvasHeight,
+    requiredCanvasWidth,
+  };
+}
+
+export function drawNode(value, canvasElement, x, y) {
+  const context = canvasElement.getContext("2d"); // tool to draw
+
+  // draw circle
+
+  context.beginPath();
+  context.arc(x, y, DEFAULT_CONFIG.radius, 0, 2 * Math.PI, false);
+  context.fillStyle = "lightsalmon";
+  context.fill();
+
+  // draw circle border
+
+  context.beginPath();
+  context.arc(x, y, DEFAULT_CONFIG.radius, 0, 2 * Math.PI, false);
+  context.strokeStyle = "brown";
+  context.stroke();
+
+  // write value
+
+  context.font = `${DEFAULT_CONFIG.nodeFontSize}pt serif`;
+  context.fillStyle = "brown";
+  context.textAlign = "center";
+  context.fillText(value, x, y + DEFAULT_CONFIG.nodeFontSize / 2);
+}
+
+// Connecting edges of nodes
+export function connectEdges(canvasElement, xCoordinates, yCoordinates) {
+  const { xStart, xEnd } = xCoordinates;
+  const { yStart, yEnd } = yCoordinates;
+
+  const start = { x: xStart, y: yStart };
+  const end = { x: xEnd, y: yEnd };
+
+  // draw curve
+
+  const context = canvasElement.getContext("2d");
+  context.beginPath();
+  context.strokeStyle = "brown";
+  context.moveTo(start.x, start.y);
+  context.lineTo(end.x, end.y);
+  context.stroke();
+}