JamesFlare/CSCI-1200
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updating post order animation

Browse Source
This commit is contained in:
Jidong Xiao
2025-04-28 02:16:21 -04:00
committed by JamesFlare1212
parent 50bbf8c2a7
commit fea90f2b4d
2 changed files with 557 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
animations/trees/morris/morrisPostOrder.html
View File

@@ -1,11 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Author: Evan Lee -->
<html> <html>
<head> <head>
<meta charset="UTF-8"> <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"> <link rel="stylesheet" href="style.css">
<!-- Load Konva.js --> <!-- 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> <script src="script.js" defer></script>
</head> </head>
<body> <body>

84
animations/trees/morris/script.js
View File

@@ -296,24 +296,47 @@ const codeContent = [
// Restore the original tree structure. // Restore the original tree structure.
async function visualizeRestore(head) { async function visualizeRestore(head) {
// Clear all reversed edges
nodes.forEach(node => { nodes.forEach(node => {
if (node.reversedEdges) { if (node.reversedEdges) {
node.reversedEdges.forEach(edge => edge.destroy()); node.reversedEdges.forEach(edge => edge.destroy());
node.reversedEdges = []; node.reversedEdges = [];
} }
}); });
let current = head;
while (current !== null && current.right !== null) { // Restore all original edges in the tree
if (!current.rightEdge) { // First ensure the correct node relationships
current.rightEdge = createArrow(current, current.right, '#888'); node1.left = node2;
current.rightEdge.moveToBottom(); node1.right = node3;
} node2.left = node4;
current = current.right; 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 => { nodes.forEach(n => {
n.shape.moveToTop(); n.shape.moveToTop();
n.label.moveToTop(); n.label.moveToTop();
}); });
layer.draw(); layer.draw();
} }
@@ -336,7 +359,21 @@ const codeContent = [
async function restoreChain(head) { async function restoreChain(head) {
updateExplanation("Visualizing the restoration of original pointers"); updateExplanation("Visualizing the restoration of original pointers");
await waitForNext(); 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; let prev = null, curr = head, next;
while (curr !== null) { while (curr !== null) {
next = curr.right; next = curr.right;
@@ -344,6 +381,29 @@ const codeContent = [
prev = curr; prev = curr;
curr = next; curr = next;
} }
// 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; return prev;
} }
@@ -385,14 +445,16 @@ const codeContent = [
highlightLine(1); highlightLine(1);
updateExplanation("Initializing current = root (node 1)"); updateExplanation("Initializing current = root (node 1)");
let current = root;
// Highlight current node immediately after initialization
highlightNode(current, '#ffeb3b');
layer.draw();
await waitForNext(); await waitForNext();
highlightLine(2); highlightLine(2);
updateExplanation("Declaring rightmost pointer"); updateExplanation("Declaring rightmost pointer");
await waitForNext(); await waitForNext();
let current = root;
// Main loop // Main loop
while (current !== null) { while (current !== null) {
// Clear previous highlighting // Clear previous highlighting