updating post order animation
This commit is contained in:
Jidong Xiao
committed by
JamesFlare1212
JamesFlare1212
parent
50bbf8c2a7
commit
fea90f2b4d
@@ -1,11 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- Author: Evan Lee -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Morris Post‑Order Traversal Animation & Code Display</title>
|
||||
<title>Morris Post Order Traversal Animation & Code Display</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Load Konva.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/konva@8.3.13/konva.min.js"></script>
|
||||
<script src="../../konva.js"></script>
|
||||
<script src="script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -46,10 +46,10 @@ const codeContent = [
|
||||
'<span class="line-number">43.</span> }',
|
||||
'<span class="line-number">44.</span> reverse(tail); <span style="color:green">// restore structure</span>',
|
||||
'<span class="line-number">45.</span> }'
|
||||
];
|
||||
];
|
||||
|
||||
// Initialize code display with proper structure for highlighting
|
||||
function initCodeDisplay() {
|
||||
// Initialize code display with proper structure for highlighting
|
||||
function initCodeDisplay() {
|
||||
const codeDisplay = document.getElementById('codeDisplay');
|
||||
codeContent.forEach((line, index) => {
|
||||
const lineDiv = document.createElement('div');
|
||||
@@ -58,10 +58,10 @@ const codeContent = [
|
||||
lineDiv.innerHTML = line;
|
||||
codeDisplay.appendChild(lineDiv);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Function to highlight a specific line of code
|
||||
function highlightLine(lineNum) {
|
||||
// Function to highlight a specific line of code
|
||||
function highlightLine(lineNum) {
|
||||
// First, remove all highlights
|
||||
const codeLines = document.querySelectorAll('.code-line');
|
||||
codeLines.forEach(line => {
|
||||
@@ -78,10 +78,10 @@ const codeContent = [
|
||||
targetLine.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wait for the "Next Step" button click.
|
||||
function waitForNext() {
|
||||
// Wait for the "Next Step" button click.
|
||||
function waitForNext() {
|
||||
return new Promise(resolve => {
|
||||
const btn = document.getElementById('nextStep');
|
||||
btn.disabled = false;
|
||||
@@ -90,23 +90,23 @@ const codeContent = [
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Append text to the output.
|
||||
function appendOutput(text) {
|
||||
// Append text to the output.
|
||||
function appendOutput(text) {
|
||||
const out = document.getElementById('output');
|
||||
out.innerText += text;
|
||||
}
|
||||
}
|
||||
|
||||
// Update the explanation text.
|
||||
function updateExplanation(text) {
|
||||
// Update the explanation text.
|
||||
function updateExplanation(text) {
|
||||
document.getElementById('treeExplanation').innerHTML =
|
||||
'Post-order traversal output: <span id="output">' +
|
||||
document.getElementById('output').innerText + '</span><br>' + text;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree node class using Konva for visualization.
|
||||
class TreeNode {
|
||||
// Tree node class using Konva for visualization.
|
||||
class TreeNode {
|
||||
constructor(val, x, y) {
|
||||
this.val = val;
|
||||
this.left = null;
|
||||
@@ -136,19 +136,19 @@ const codeContent = [
|
||||
this.threadEdge = null;
|
||||
this.reversedEdges = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Konva stage and layer.
|
||||
const stage = new Konva.Stage({
|
||||
// Initialize Konva stage and layer.
|
||||
const stage = new Konva.Stage({
|
||||
container: 'container',
|
||||
width: document.querySelector('.tree-container').clientWidth - 30,
|
||||
height: document.querySelector('.tree-container').clientHeight - 140
|
||||
});
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
});
|
||||
const layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
// Calculate connection points for arrow drawing.
|
||||
function calculateConnectionPoints(fromNode, toNode) {
|
||||
// Calculate connection points for arrow drawing.
|
||||
function calculateConnectionPoints(fromNode, toNode) {
|
||||
const nodeRadius = 20;
|
||||
const dx = toNode.x - fromNode.x;
|
||||
const dy = toNode.y - fromNode.y;
|
||||
@@ -159,10 +159,10 @@ const codeContent = [
|
||||
toX: toNode.x - nodeRadius * Math.cos(angle),
|
||||
toY: toNode.y - nodeRadius * Math.sin(angle)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Create an arrow between two nodes.
|
||||
function createArrow(fromNode, toNode, color = '#888', dashed = false) {
|
||||
// Create an arrow between two nodes.
|
||||
function createArrow(fromNode, toNode, color = '#888', dashed = false) {
|
||||
const points = calculateConnectionPoints(fromNode, toNode);
|
||||
const arrow = new Konva.Arrow({
|
||||
points: [points.fromX, points.fromY, points.toX, points.toY],
|
||||
@@ -176,95 +176,95 @@ const codeContent = [
|
||||
});
|
||||
layer.add(arrow);
|
||||
return arrow;
|
||||
}
|
||||
}
|
||||
|
||||
// Draw an edge between two nodes.
|
||||
function drawEdge(parent, child, isLeft = true) {
|
||||
// Draw an edge between two nodes.
|
||||
function drawEdge(parent, child, isLeft = true) {
|
||||
const arrow = createArrow(parent, child);
|
||||
layer.add(arrow);
|
||||
if (isLeft) { parent.leftEdge = arrow; }
|
||||
else { parent.rightEdge = arrow; }
|
||||
arrow.moveToBottom();
|
||||
return arrow;
|
||||
}
|
||||
}
|
||||
|
||||
// Create and remove thread edges.
|
||||
function createThreadEdge(fromNode, toNode) {
|
||||
// Create and remove thread edges.
|
||||
function createThreadEdge(fromNode, toNode) {
|
||||
if (fromNode.threadEdge) { fromNode.threadEdge.destroy(); }
|
||||
const threadArrow = createArrow(fromNode, toNode, '#ff5722', true);
|
||||
fromNode.threadEdge = threadArrow;
|
||||
threadArrow.moveToTop();
|
||||
layer.draw();
|
||||
return threadArrow;
|
||||
}
|
||||
}
|
||||
|
||||
function removeThreadEdge(node) {
|
||||
function removeThreadEdge(node) {
|
||||
if (node && node.threadEdge) {
|
||||
node.threadEdge.destroy();
|
||||
node.threadEdge = null;
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight and unhighlight a node.
|
||||
function highlightNode(node, color = '#8bc34a') {
|
||||
// Highlight and unhighlight a node.
|
||||
function highlightNode(node, color = '#8bc34a') {
|
||||
if (node && node.shape) { node.shape.to({ fill: color, duration: 0.25 }); }
|
||||
}
|
||||
}
|
||||
|
||||
function unhighlightNode(node, color = 'white') {
|
||||
function unhighlightNode(node, color = 'white') {
|
||||
if (node && node.shape) { node.shape.to({ fill: color, duration: 0.25 }); }
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate tree layout.
|
||||
const stageWidth = stage.width();
|
||||
const stageHeight = stage.height();
|
||||
const centerX = stageWidth / 2;
|
||||
const topY = 40;
|
||||
const levelHeight = stageHeight / 4;
|
||||
// Calculate tree layout.
|
||||
const stageWidth = stage.width();
|
||||
const stageHeight = stage.height();
|
||||
const centerX = stageWidth / 2;
|
||||
const topY = 40;
|
||||
const levelHeight = stageHeight / 4;
|
||||
|
||||
// Build the 9-node binary tree.
|
||||
const node1 = new TreeNode(1, centerX, topY);
|
||||
const node2 = new TreeNode(2, centerX - stageWidth/4, topY + levelHeight);
|
||||
const node3 = new TreeNode(3, centerX + stageWidth/4, topY + levelHeight);
|
||||
const node4 = new TreeNode(4, centerX - stageWidth/3, topY + 2*levelHeight);
|
||||
const node5 = new TreeNode(5, centerX - stageWidth/6, topY + 2*levelHeight);
|
||||
const node6 = new TreeNode(6, centerX - stageWidth/4, topY + 3*levelHeight);
|
||||
const node7 = new TreeNode(7, centerX - stageWidth/12, topY + 3*levelHeight);
|
||||
const node8 = new TreeNode(8, centerX + stageWidth/3, topY + 2*levelHeight);
|
||||
const node9 = new TreeNode(9, centerX + stageWidth/4, topY + 3*levelHeight);
|
||||
// Build the 9-node binary tree.
|
||||
const node1 = new TreeNode(1, centerX, topY);
|
||||
const node2 = new TreeNode(2, centerX - stageWidth/4, topY + levelHeight);
|
||||
const node3 = new TreeNode(3, centerX + stageWidth/4, topY + levelHeight);
|
||||
const node4 = new TreeNode(4, centerX - stageWidth/3, topY + 2*levelHeight);
|
||||
const node5 = new TreeNode(5, centerX - stageWidth/6, topY + 2*levelHeight);
|
||||
const node6 = new TreeNode(6, centerX - stageWidth/4, topY + 3*levelHeight);
|
||||
const node7 = new TreeNode(7, centerX - stageWidth/12, topY + 3*levelHeight);
|
||||
const node8 = new TreeNode(8, centerX + stageWidth/3, topY + 2*levelHeight);
|
||||
const node9 = new TreeNode(9, centerX + stageWidth/4, topY + 3*levelHeight);
|
||||
|
||||
node1.left = node2;
|
||||
node1.right = node3;
|
||||
node2.left = node4;
|
||||
node2.right = node5;
|
||||
node5.left = node6;
|
||||
node5.right = node7;
|
||||
node3.right = node8;
|
||||
node8.left = node9;
|
||||
node1.left = node2;
|
||||
node1.right = node3;
|
||||
node2.left = node4;
|
||||
node2.right = node5;
|
||||
node5.left = node6;
|
||||
node5.right = node7;
|
||||
node3.right = node8;
|
||||
node8.left = node9;
|
||||
|
||||
const nodes = [node1, node2, node3, node4, node5, node6, node7, node8, node9];
|
||||
nodes.forEach(n => {
|
||||
const nodes = [node1, node2, node3, node4, node5, node6, node7, node8, node9];
|
||||
nodes.forEach(n => {
|
||||
layer.add(n.shape);
|
||||
layer.add(n.label);
|
||||
});
|
||||
});
|
||||
|
||||
drawEdge(node1, node2, true);
|
||||
drawEdge(node1, node3, false);
|
||||
drawEdge(node2, node4, true);
|
||||
drawEdge(node2, node5, false);
|
||||
drawEdge(node5, node6, true);
|
||||
drawEdge(node5, node7, false);
|
||||
drawEdge(node3, node8, false);
|
||||
drawEdge(node8, node9, true);
|
||||
drawEdge(node1, node2, true);
|
||||
drawEdge(node1, node3, false);
|
||||
drawEdge(node2, node4, true);
|
||||
drawEdge(node2, node5, false);
|
||||
drawEdge(node5, node6, true);
|
||||
drawEdge(node5, node7, false);
|
||||
drawEdge(node3, node8, false);
|
||||
drawEdge(node8, node9, true);
|
||||
|
||||
nodes.forEach(n => {
|
||||
nodes.forEach(n => {
|
||||
n.shape.moveToTop();
|
||||
n.label.moveToTop();
|
||||
});
|
||||
layer.draw();
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
// Visualize the reversal process.
|
||||
async function visualizeReversal(head) {
|
||||
// Visualize the reversal process.
|
||||
async function visualizeReversal(head) {
|
||||
const connections = [];
|
||||
let current = head;
|
||||
while (current !== null && current.right !== null) {
|
||||
@@ -292,33 +292,56 @@ const codeContent = [
|
||||
await waitForNext();
|
||||
}
|
||||
return prev;
|
||||
}
|
||||
}
|
||||
|
||||
// Restore the original tree structure.
|
||||
async function visualizeRestore(head) {
|
||||
// Restore the original tree structure.
|
||||
async function visualizeRestore(head) {
|
||||
// Clear all reversed edges
|
||||
nodes.forEach(node => {
|
||||
if (node.reversedEdges) {
|
||||
node.reversedEdges.forEach(edge => edge.destroy());
|
||||
node.reversedEdges = [];
|
||||
}
|
||||
});
|
||||
let current = head;
|
||||
while (current !== null && current.right !== null) {
|
||||
if (!current.rightEdge) {
|
||||
current.rightEdge = createArrow(current, current.right, '#888');
|
||||
current.rightEdge.moveToBottom();
|
||||
}
|
||||
current = current.right;
|
||||
}
|
||||
|
||||
// Restore all original edges in the tree
|
||||
// First ensure the correct node relationships
|
||||
node1.left = node2;
|
||||
node1.right = node3;
|
||||
node2.left = node4;
|
||||
node2.right = node5;
|
||||
node5.left = node6;
|
||||
node5.right = node7;
|
||||
node3.right = node8;
|
||||
node8.left = node9;
|
||||
|
||||
// Then recreate any missing visual edges
|
||||
if (!node1.leftEdge) node1.leftEdge = createArrow(node1, node2, '#888');
|
||||
if (!node1.rightEdge) node1.rightEdge = createArrow(node1, node3, '#888');
|
||||
if (!node2.leftEdge) node2.leftEdge = createArrow(node2, node4, '#888');
|
||||
if (!node2.rightEdge) node2.rightEdge = createArrow(node2, node5, '#888');
|
||||
if (!node5.leftEdge) node5.leftEdge = createArrow(node5, node6, '#888');
|
||||
if (!node5.rightEdge) node5.rightEdge = createArrow(node5, node7, '#888');
|
||||
if (!node3.rightEdge) node3.rightEdge = createArrow(node3, node8, '#888');
|
||||
if (!node8.leftEdge) node8.leftEdge = createArrow(node8, node9, '#888');
|
||||
|
||||
// Move all arrows to the bottom
|
||||
nodes.forEach(node => {
|
||||
if (node.leftEdge) node.leftEdge.moveToBottom();
|
||||
if (node.rightEdge) node.rightEdge.moveToBottom();
|
||||
});
|
||||
|
||||
// Move all nodes to the top
|
||||
nodes.forEach(n => {
|
||||
n.shape.moveToTop();
|
||||
n.label.moveToTop();
|
||||
});
|
||||
layer.draw();
|
||||
}
|
||||
|
||||
// Reverse a chain of right pointers.
|
||||
async function reverseChain(head) {
|
||||
layer.draw();
|
||||
}
|
||||
|
||||
// Reverse a chain of right pointers.
|
||||
async function reverseChain(head) {
|
||||
updateExplanation("Visualizing the reversal of pointers");
|
||||
await waitForNext();
|
||||
const reversedHead = await visualizeReversal(head);
|
||||
@@ -330,13 +353,27 @@ const codeContent = [
|
||||
curr = next;
|
||||
}
|
||||
return prev;
|
||||
}
|
||||
}
|
||||
|
||||
// Restore the chain.
|
||||
async function restoreChain(head) {
|
||||
// Restore the chain.
|
||||
async function restoreChain(head) {
|
||||
updateExplanation("Visualizing the restoration of original pointers");
|
||||
await waitForNext();
|
||||
await visualizeRestore(head);
|
||||
|
||||
// Store the original tree structure before restoring
|
||||
const originalTree = {
|
||||
node1: { left: node1.left, right: node1.right },
|
||||
node2: { left: node2.left, right: node2.right },
|
||||
node3: { left: node3.left, right: node3.right },
|
||||
node4: { left: node4.left, right: node4.right },
|
||||
node5: { left: node5.left, right: node5.right },
|
||||
node6: { left: node6.left, right: node6.right },
|
||||
node7: { left: node7.left, right: node7.right },
|
||||
node8: { left: node8.left, right: node8.right },
|
||||
node9: { left: node9.left, right: node9.right }
|
||||
};
|
||||
|
||||
// Reverse the linked list back
|
||||
let prev = null, curr = head, next;
|
||||
while (curr !== null) {
|
||||
next = curr.right;
|
||||
@@ -344,11 +381,34 @@ const codeContent = [
|
||||
prev = curr;
|
||||
curr = next;
|
||||
}
|
||||
return prev;
|
||||
}
|
||||
|
||||
// Reverse traverse the right edge of a subtree.
|
||||
async function reverseTraverseRightEdge(head) {
|
||||
// Restore the original tree structure
|
||||
node1.left = originalTree.node1.left;
|
||||
node1.right = originalTree.node1.right;
|
||||
node2.left = originalTree.node2.left;
|
||||
node2.right = originalTree.node2.right;
|
||||
node3.left = originalTree.node3.left;
|
||||
node3.right = originalTree.node3.right;
|
||||
node4.left = originalTree.node4.left;
|
||||
node4.right = originalTree.node4.right;
|
||||
node5.left = originalTree.node5.left;
|
||||
node5.right = originalTree.node5.right;
|
||||
node6.left = originalTree.node6.left;
|
||||
node6.right = originalTree.node6.right;
|
||||
node7.left = originalTree.node7.left;
|
||||
node7.right = originalTree.node7.right;
|
||||
node8.left = originalTree.node8.left;
|
||||
node8.right = originalTree.node8.right;
|
||||
node9.left = originalTree.node9.left;
|
||||
node9.right = originalTree.node9.right;
|
||||
|
||||
await visualizeRestore(prev);
|
||||
|
||||
return prev;
|
||||
}
|
||||
|
||||
// Reverse traverse the right edge of a subtree.
|
||||
async function reverseTraverseRightEdge(head) {
|
||||
if (!head) return;
|
||||
highlightLine(-1); // Clear code highlighting during reverse traversal
|
||||
updateExplanation("Executing reverseTraverseRightEdge on node " + head.val);
|
||||
@@ -371,10 +431,10 @@ const codeContent = [
|
||||
await waitForNext();
|
||||
await restoreChain(tail);
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
|
||||
// Morris Post‑Order Traversal Animation.
|
||||
async function postorderTraversal(root) {
|
||||
// Morris Post‑Order Traversal Animation.
|
||||
async function postorderTraversal(root) {
|
||||
// Ensure all nodes are white at start
|
||||
nodes.forEach(n => { unhighlightNode(n, 'white'); });
|
||||
|
||||
@@ -385,14 +445,16 @@ const codeContent = [
|
||||
|
||||
highlightLine(1);
|
||||
updateExplanation("Initializing current = root (node 1)");
|
||||
let current = root;
|
||||
// Highlight current node immediately after initialization
|
||||
highlightNode(current, '#ffeb3b');
|
||||
layer.draw();
|
||||
await waitForNext();
|
||||
|
||||
highlightLine(2);
|
||||
updateExplanation("Declaring rightmost pointer");
|
||||
await waitForNext();
|
||||
|
||||
let current = root;
|
||||
|
||||
// Main loop
|
||||
while (current !== null) {
|
||||
// Clear previous highlighting
|
||||
@@ -546,16 +608,16 @@ const codeContent = [
|
||||
n.label.moveToTop();
|
||||
});
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function() {
|
||||
stage.width(document.querySelector('.tree-container').clientWidth - 30);
|
||||
stage.height(document.querySelector('.tree-container').clientHeight - 140);
|
||||
layer.draw();
|
||||
});
|
||||
});
|
||||
|
||||
window.onload = function() {
|
||||
window.onload = function() {
|
||||
initCodeDisplay();
|
||||
document.getElementById('nextStep').disabled = false;
|
||||
postorderTraversal(node1);
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user