adding iterative traversal animations

animations/trees/iterative/inorder/inorder.js

@@ -0,0 +1,266 @@
+//set up the main canvas dimensions for tree visualization
+//using 75% of 90% window width to leave some margin
+const width = window.innerWidth * 0.9 * 0.75;
+const height = 600;
+
+//create the main stage for tree visualization
+const stage = new Konva.Stage({
+  container: 'tree-container', //html div id
+  width: width,
+  height: height
+});
+
+//create and add a layer to the stage for drawing
+const layer = new Konva.Layer();
+stage.add(layer);
+
+//manually calculated x,y coordinates for visual balance
+const positions = {
+  1: { x: width / 2, y: 80 },      //root node centered
+  2: { x: width / 2 - 200, y: 180 }, //left child
+  3: { x: width / 2 + 200, y: 180 }, //right child
+  4: { x: width / 2 - 300, y: 280 }, //left-left grandchild
+  5: { x: width / 2 - 100, y: 280 }, //left-right grandchild
+  6: { x: width / 2 - 150, y: 380 }, //left-right-left great-grandchild
+  7: { x: width / 2 - 50, y: 380 },  //left-right-right great-grandchild
+  8: { x: width / 2 + 300, y: 280 }, //right-right grandchild
+  9: { x: width / 2 + 350, y: 380 }  //right-right-right great-grandchild
+};
+
+//binary tree structure definition--------------------------------------
+const tree = {
+  val: 1, //root node
+  left: {
+    val: 2,
+    left: { val: 4, left: null, right: null }, //leaf node
+    right: {
+      val: 5,
+      left: { val: 6, left: null, right: null }, //leaf node
+      right: { val: 7, left: null, right: null } //leaf node
+    }
+  },
+  right: {
+    val: 3,
+    left: null, //no left child
+    right: {
+      val: 8,
+      left: null, //no left child
+      right: { val: 9, left: null, right: null } //leaf node
+    }
+  }
+};
+
+//store references to all visual node elements
+const nodes = {};
+
+/**
+ * recursively draws the tree starting from given node
+ */
+function drawTree(node, parent = null) {
+  if (!node) return;  //base case
+  
+  //get pre-defined position for this node
+  const pos = positions[node.val];
+
+  //if not root node, draw line to parent
+  if (parent) {
+    const parentPos = positions[parent.val];
+    layer.add(new Konva.Line({
+      points: [parentPos.x, parentPos.y, pos.x, pos.y],
+      stroke: 'black',
+      strokeWidth: 2
+    }));
+  }
+
+  //create circle for node
+  const circle = new Konva.Circle({
+    x: pos.x,
+    y: pos.y,
+    radius: 20,
+    fill: 'white',  
+    stroke: 'black',
+    strokeWidth: 2
+  });
+
+  //create text label for node value
+  const text = new Konva.Text({
+    x: pos.x - 5,  //adjust slightly for centering
+    y: pos.y - 8,
+    text: node.val.toString(),
+    fontSize: 16,
+    fill: 'black'
+  });
+
+  //add elements to layer
+  layer.add(circle);
+  layer.add(text);
+
+  //store references for later manipulation
+  nodes[node.val] = { circle, text };
+
+  //recursively draw left and right children
+  drawTree(node.left, node);
+  drawTree(node.right, node);
+}
+
+//create a separate stage for stack visualization
+const stackStage = new Konva.Stage({
+  container: 'stack-visual', //html div id
+  width: 200,  //narrower since it's just for stack
+  height: 500  //tall enough to show several stack items
+});
+
+//create and add layer for stack visualization
+const stackLayer = new Konva.Layer();
+stackStage.add(stackLayer);
+
+//visual elements for stack representation
+let stackVisual = [];
+
+/**
+ * visualizes pushing a value onto the stack
+ */
+function pushStack(val) {
+  //create rectangle for stack element
+  const box = new Konva.Rect({
+    x: 50,
+    y: 400 - stackVisual.length * 30, //stack grows upward
+    width: 40,
+    height: 25,
+    fill: '#89CFF0',  //light blue color
+    stroke: 'black'
+  });
+
+  //create text label for stack element
+  const label = new Konva.Text({
+    x: 60,
+    y: 405 - stackVisual.length * 30,
+    text: val.toString(),
+    fontSize: 16,
+    fill: 'black'
+  });
+
+  //add to stack layer
+  stackLayer.add(box);
+  stackLayer.add(label);
+  
+  stackVisual.push({ box, label }); //store reference
+  stackLayer.draw(); //redraw stack layer
+}
+
+/**
+ * visualizes popping from the stack
+ */
+function popStack() {
+  const item = stackVisual.pop();
+  if (item) {
+    //remove visual elements
+    item.box.destroy();
+    item.label.destroy();
+    stackLayer.draw();
+  }
+}
+
+/**
+ * highlights a node with specified color
+ */
+function highlight(val, color = 'yellow') {
+  const node = nodes[val];
+  if (node) {
+    node.circle.fill(color);
+    layer.draw();  //redraw to show changes
+  }
+}
+
+/**
+ * resets all node highlights to white
+ */
+function resetHighlights() {
+  for (let val in nodes) {
+    nodes[val].circle.fill('white');
+  }
+  layer.draw();
+}
+
+/**
+ * updates the status display
+ */
+function updateStatus(current, reason) {
+  document.getElementById('currentVal').innerText = current ?? 'None';
+  document.getElementById('reason').innerText = reason;
+}
+
+/**
+ * logs a visited node to the sequence display
+ */
+function logVisit(val) {
+  const seq = document.getElementById('seq');
+  seq.innerText += ` ${val}`;
+}
+
+/**
+ * resets the entire visualization to initial state
+ */
+function resetAll() {
+  //clear stack visualization
+  while (stackVisual.length > 0) {
+    popStack();
+  }
+
+  //reset traversal state
+  stack.length = 0;
+  current = tree;
+  stepReady = true;
+
+  //clear displays
+  document.getElementById('seq').innerText = '';
+  updateStatus('None', 'Ready');
+  resetHighlights();
+}
+
+//traversal state variables
+let current = tree; //current node being processed
+const stack = []; //stack used for traversal
+let stepReady = true; //flag to control step-by-step execution
+
+//handler for step button - performs one step of inorder traversal
+document.getElementById("stepBtn").onclick = () => {
+  if (!stepReady) return;  //don't allow overlapping steps
+  stepReady = false;
+
+  if (current) {
+    //step 1: go as far left as possible
+    updateStatus(current.val, 'go left');
+    stack.push(current);
+    pushStack(current.val);
+    current = current.left;
+    stepReady = true;
+    return;
+  }
+
+  if (stack.length > 0) {
+    //step 2: visit node (inorder)
+    current = stack.pop();
+    updateStatus(current.val, 'visit node');
+    popStack();
+    highlight(current.val);
+    logVisit(current.val);
+    
+    //step 3: move to right subtree
+    setTimeout(() => {
+      highlight(current.val, 'white');
+      current = current.right;
+      stepReady = true;
+    }, 500);
+  } else {
+    //traversal complete
+    updateStatus('None', 'done!');
+  }
+};
+
+//event handler for reset button
+document.getElementById("resetBtn").onclick = resetAll;
+
+//initial render of the tree
+drawTree(tree);
+layer.draw();