Skip to content

Commit

Permalink
add delete
Browse files Browse the repository at this point in the history 
added delete
  • Loading branch information
@jan4kretschmer
jan4kretschmer committed May 21, 2024
1 parent 4c1ca38 commit 6c4de76
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 41 deletions.
76 changes: 39 additions & 37 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,53 +19,55 @@
<script src="script.js" defer></script>
</head>

<body class="bg-gray-200 dark:bg-gray-800 p-4 sm:p-10 transition duration-500">
<div class="flex flex-col lg:flex-row space-y-6 lg:space-y-0 lg:space-x-6">
<div class="flex-1">
<div class="mb-4">
<body class="bg-gray-200 dark:bg-gray-800 p-4 sm:p-10 transition duration-500 overflow-x-hidden">
<div class="flex flex-col lg:flex-row space-y-6 lg:space-y-0 lg:space-x-6">
<div class="flex-1">
<div class="mb-4">
<input
type="text"
id="valueInput"
placeholder="Enter a value"
class="px-4 py-2 w-full border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
onclick="event.stopPropagation();"
onkeydown="if (event.keyCode === 13) addValues();"
/>
</div>
<div class="mb-4 flex space-x-4">
<button onclick="addValues()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Add Values</button>
<button onclick="printTraversals()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Print Traversals</button>
<button onclick="renderTree()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Render Tree</button>
</div>
<div class="mb-4">
/>
</div>
<div class="mb-4 flex space-x-4">
<button onclick="addValues()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Add Values</button>
<button onclick="deleteValue()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Delete Value</button>
<button onclick="undoLastOperation()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Undo Last Operation</button>
<button onclick="printTraversals()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Print Traversals</button>
<button onclick="renderTree()" class="flex-1 px-4 py-2 font-bold text-white bg-blue-500 rounded">Render Tree</button>
</div>
<div class="mb-4">
<textarea id="resultBox" class="px-4 py-2 w-full border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" readonly></textarea>
</div>
<div id="tree-container" class="relative"></div>
</div>
<div id="tree-container" class="relative"></div>
</div>
<div class="flex flex-col w-full lg:w-1/4 bg-gray-300 dark:bg-gray-700 p-4 rounded transition duration-500 space-y-6">
<div>
<h3 class="font-bold text-xl mb-4">Rotation Counts</h3>
<p>Left Rotations: <span id="left-rotations">0</span></p>
<p>Right Rotations: <span id="right-rotations">0</span></p>
<p>Left-Right Rotations: <span id="left-right-rotations">0</span></p>
<p>Right-Left Rotations: <span id="right-left-rotations">0</span></p>
</div>
<div>
<h3 class="font-bold text-xl mb-4">Tree Stats</h3>
<p>Tree Depth: <span id="tree-depth">0</span></p>
<p>Tree Complexity (number of nodes): <span id="tree-complexity">0</span></p>
<div class="flex flex-col w-full lg:w-1/4 bg-gray-300 dark:bg-gray-700 p-4 rounded transition duration-500 space-y-6">
<div>
<h3 class="font-bold text-xl mb-4">Rotation Counts</h3>
<p>Left Rotations: <span id="left-rotations">0</span></p>
<p>Right Rotations: <span id="right-rotations">0</span></p>
<p>Left-Right Rotations: <span id="left-right-rotations">0</span></p>
<p>Right-Left Rotations: <span id="right-left-rotations">0</span></p>
</div>
<div>
<h3 class="font-bold text-xl mb-4">Tree Stats</h3>
<p>Tree Depth: <span id="tree-depth">0</span></p>
<p>Tree Complexity (number of nodes): <span id="tree-complexity">0</span></p>
</div>
</div>
</div>
</div>
<div class="fixed bottom-4 left-4 flex items-center space-x-2">
<a href="https://github.com/VileEnd/avlTreeExam" target="_blank">
<img src="github-mark.png" alt="GitHub" style="width:32px;height:32px;opacity:0.7;">
</a>
<span>Made by <a href="https://github.com/VileEnd/avlTreeExam" target="_blank" class="text-blue-500 font-bold">Vileend</a></span>
</div>
<div class="fixed bottom-4 right-4">
<button onclick="resetTree()" class="px-4 py-2 font-bold text-white bg-red-500 rounded">Reset</button>
</div>
<div class="fixed bottom-4 left-4 flex items-center space-x-2">
<a href="https://github.com/VileEnd/avlTreeExam" target="_blank">
<img src="github-mark.png" alt="GitHub" style="width:32px;height:32px;opacity:0.7;">
</a>
<span>Made by <a href="https://github.com/VileEnd/avlTreeExam" target="_blank" class="text-blue-500 font-bold">Vileend</a></span>
</div>
<div class="fixed bottom-4 right-4">
<button onclick="resetTree()" class="px-4 py-2 font-bold text-white bg-red-500 rounded">Reset</button>
</div>
</body>

</html>
</html>
106 changes: 104 additions & 2 deletions docs/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class AVLTree {
constructor(uiUpdater) {
this.root = null;
this.uiUpdater = uiUpdater;
this.history = [];
}

height(node) {
Expand Down Expand Up @@ -131,6 +132,76 @@ class AVLTree {

addNode(key) {
this.root = this.insert(this.root, key);
this.history.push({ type: 'add', key: key });
}

deleteNode(key) {
this.root = this.delete(this.root, key);
this.history.push({ type: 'delete', key: key });
}

delete(root, key) {
if (!root) return root;

if (key < root.key) {
root.left = this.delete(root.left, key);
} else if (key > root.key) {
root.right = this.delete(root.right, key);
} else {
if (!root.left || !root.right) {
root = root.left ? root.left : root.right;
} else {
const temp = this.getMinValueNode(root.right);
root.key = temp.key;
root.right = this.delete(root.right, temp.key);
}
}

if (!root) return root;

root.height = 1 + Math.max(this.height(root.left), this.height(root.right));
const balance = this.getBalance(root);

if (balance > 1 && this.getBalance(root.left) >= 0) {
return this.rightRotate(root);
}

if (balance > 1 && this.getBalance(root.left) < 0) {
root.left = this.leftRotate(root.left);
return this.rightRotate(root);
}

if (balance < -1 && this.getBalance(root.right) <= 0) {
return this.leftRotate(root);
}

if (balance < -1 && this.getBalance(root.right) > 0) {
root.right = this.rightRotate(root.right);
return this.leftRotate(root);
}

this.updateNodeDepthAndBalance(root);
return root;
}

getMinValueNode(node) {
let current = node;
while (current.left) current = current.left;
return current;
}

undoLastOperation() {
const lastOperation = this.history.pop();
if (!lastOperation) return;

if (lastOperation.type === 'add') {
this.root = this.delete(this.root, lastOperation.key);
} else if (lastOperation.type === 'delete') {
this.root = this.insert(this.root, lastOperation.key);
}

renderTree();
printTraversals();
}

printPreOrder(node = this.root, logger = console.log) {
Expand Down Expand Up @@ -200,6 +271,29 @@ function addValues() {
}
}

function deleteValue() {
const valueInput = document.getElementById('valueInput');
const value = parseInt(valueInput.value, 10);
if (!isNaN(value)) {
tree.deleteNode(value);

let operations = localStorage.getItem('operations');
operations = operations ? JSON.parse(operations) : [];
operations.push({ type: 'deleteValue', value: value });
localStorage.setItem('operations', JSON.stringify(operations));

valueInput.value = '';
renderTree();
printTraversals();
} else {
alert('Please enter a valid number.');
}
}

function undoLastOperation() {
tree.undoLastOperation();
}

function collapse(d) {
if (d.children) {
d._children = d.children;
Expand Down Expand Up @@ -378,7 +472,13 @@ function updateDimensions() {
.attr("height", height + margin.top + margin.bottom);
}

window.onresize = updateDimensions;
window.onresize = () => {

updateDimensions();

renderTree();

};

function updateTreeStats() {
const treeDepth = tree.getDepth();
Expand Down Expand Up @@ -426,6 +526,8 @@ function executeSavedOperations() {
op.values.forEach(value => {
tree.addNode(value);
});
} else if (op.type === 'deleteValue') {
tree.deleteNode(op.value);
}
});
renderTree();
Expand All @@ -440,4 +542,4 @@ window.onload = function () {
updateDimensions();
printTraversals();
updateTreeStats();
};
};
14 changes: 12 additions & 2 deletions docs/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
body {
font-family: Arial, sans-serif;
padding: 20px;
overflow-x: hidden; /* Prevent horizontal scrolling on larger screens */
}

#tree-container {
min-height: 500px;
position: relative;
max-width: 100%; /* Ensure the container doesn't stretch beyond its parent */
overflow-x: auto; /* Enable horizontal scrolling */
overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
overflow-y: auto; /* Allow vertical scrolling */
}


/* Dark mode styles */
.dark .bg-gray-200 {
background-color: #3c4256;
}

.dark .bg-gray-300 {
background-color: #303544;
}

.dark .bg-blue-500 {
background-color: #3182ce;
}

.dark .bg-red-500 {
background-color: #e53e3e;
}

.dark .text-white {
color: #e2e8f0;
}

.dark .border-gray-300 {
border-color: #4a5568;
}

.dark .focus\:ring-blue-500 {
box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.5);
}

.dark {
background-color: #2D3748;
}

0 comments on commit 6c4de76

Please sign in to comment.