Skip to content

Instantly share code, notes, and snippets.

@peterwzhang
Last active April 19, 2021 03:33
Show Gist options
  • Save peterwzhang/6705757360af6df3d3396fd2b41af2ab to your computer and use it in GitHub Desktop.
Save peterwzhang/6705757360af6df3d3396fd2b41af2ab to your computer and use it in GitHub Desktop.
This script adds "Insert Keys" and "Remove Keys" functionality to the usfca RBTree visualizer.
// ==UserScript==
// @name RedBlackTree++
// @version 1
// @description This script adds "Insert Keys" and "Remove Keys" functionality to the usfca RBTree visualizer.
// @author Peter Zhang
// @match https://www.cs.usfca.edu/~galles/visualization/RedBlack.html
// @grant none
// ==/UserScript==
//copy everything inside of the setup function below if you want to just paste the code in the console
function setup(){
const cParent = document.getElementById("AlgorithmSpecificControls");
const controller = cParent.getElementsByTagName("td");
function toggleUIOff(){
controller[8].getElementsByTagName("input")[0].setAttribute("disabled","");
controller[9].getElementsByTagName("input")[0].setAttribute("disabled","");
controller[10].getElementsByTagName("input")[0].setAttribute("disabled","");
controller[11].getElementsByTagName("input")[0].setAttribute("disabled","");
}
function toggleUIOn(){
controller[8].getElementsByTagName("input")[0].removeAttribute("disabled");
controller[9].getElementsByTagName("input")[0].removeAttribute("disabled");
controller[10].getElementsByTagName("input")[0].removeAttribute("disabled");
controller[11].getElementsByTagName("input")[0].removeAttribute("disabled");
}
function insClickHandler(_event) {
toggleUIOff();
const keys = insKeysInp.getElementsByTagName("input")[0].value.split(',');
for (let i = 0; i <= keys.length; i++){
const disabled = setInterval(function() {
if (i < keys.length && controller[0].getElementsByTagName("input")[0].disabled == false){
controller[0].getElementsByTagName("input")[0].value = keys[i];
controller[1].getElementsByTagName("input")[0].click();
toggleUIOff();
clearInterval(disabled);
}
else if (controller[0].getElementsByTagName("input")[0].disabled == false){
toggleUIOn();
}
}, 100);
}
}
function delClickHandler(_event) {
toggleUIOff();
const keys = delKeysInp.getElementsByTagName("input")[0].value.split(',');
for (let i = 0; i <= keys.length; i++){
const disabled = setInterval(function() {
if (i < keys.length && controller[2].getElementsByTagName("input")[0].disabled == false){
controller[2].getElementsByTagName("input")[0].value = keys[i];
controller[3].getElementsByTagName("input")[0].click();
toggleUIOff();
clearInterval(disabled);
}
else if (controller[2].getElementsByTagName("input")[0].disabled == false){
toggleUIOn();
}
}, 100);
}
}
const insKeysInp = document.createElement("td");
insKeysInp.innerHTML = "<input type='Text' value='' size='12'>";
cParent.appendChild(insKeysInp);
const insKeysBtn = document.createElement("td");
insKeysBtn.innerHTML = "<input type='Button' value='Insert Keys'>";
insKeysBtn.addEventListener("click", insClickHandler);
cParent.appendChild(insKeysBtn);
const delKeysInp = document.createElement("td");
delKeysInp.innerHTML = "<input type='Text' value='' size='12'>";
cParent.appendChild(delKeysInp);
const delKeysBtn = document.createElement("td");
delKeysBtn.innerHTML = "<input type='Button' value='Delete Keys'>";
delKeysBtn.addEventListener("click", delClickHandler);
cParent.appendChild(delKeysBtn);
document.getElementById("header").innerHTML = " \n\t\t\t\t<h1>Red/Black Tree++</h1>\n\t\t\t";
}
window.addEventListener("load", setup, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment