AVL tree thingy

Great thingy

by Thomaat

HTML

<div class="AVLTree">
  <svg></svg>
</div>
<input type="text" class="addNodeText">
<br>
<input type="button" value="add node ^" class="addNode">
<br>
<input type="text" class="moveNodeLeftText">
<br>
<input type="button" value="make selected left child of ^" class="moveNodeLeft">
<br>
<input type="text" class="moveNodeRightText">
<br>
<input type="button" value="make selected right child of ^" class="moveNodeRight">
<br>
<input type="text" class="replaceNodeText">
<br>
<input type="button" value="replace selected with ^" class="replaceNode">
<br>
<input type="button" value="create new step" class="createNewStep">
<br>
<label></label>

CSS

.AVLTree svg {
  width: 1200px;
  height: 400px;
  border: 1px solid #000;
  float: left;
  overflow: scroll;
}

.AVLTree path {
  stroke: #000;
  stroke-width: 5px;
}

.AVLTree circle {
  stroke: #000;
  fill: #fff;
  stroke-width: 5px;
  z-index: 1;
}

.AVLTree text {
  font-size: 3rem;
}

JavaScript

let selected;
let canvas = document.querySelector(".AVLTree svg");
let step = 1;
canvas.setAttribute("class", "step_" + step);
let nodes = [];

function updateTextPosition(node) {
  let xPositionText = (node.x - node.text.getBBox().width / 2);
  let yPositionText = (node.y + node.text.getBBox().height / 4);
  node.text.setAttribute("x", xPositionText);
  node.text.setAttribute("y", yPositionText);
}

function updateSelected(node) {
	selected = node;
  document.querySelector("label").innerHTML = "selected : " + selected.value;
}

function createNode(value) {
	var node = {};
  node.value = value;
  node.y = 50;
  let amountOfOrphanedNodes = 0;
  for (let i = 0; i < nodes.length; i++) {
  	if (nodes[i].parent == null) {
    	amountOfOrphanedNodes++;
    }
  }
  node.x = 600 + 100 * amountOfOrphanedNodes;
  
  setupCircle(node);
	setupText(node);
  
  updateSelected(node);
  nodes.push(node);
  
 	makeClickable(node);
}

function makeClickable(node) {
let elements = document.querySelectorAll(".AVLTree .edge" + node.value + ", .AVLTree .text" + node.value);
  [].forEach.call(elements, function(element) {
  	element.addEventListener("click", function() {
  		updateSelected(node);
  	});
  });
}

function setupCircle(node) {
  node.element = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
  node.element.setAttribute("cx", node.x);
  node.element.setAttribute("cy", node.y);
  node.element.setAttribute("r", "40");
  node.element.setAttribute("class", "edge" + node.value);
	canvas.appendChild(node.element);
}

function setupText(node) {
  node.text = document.createElementNS("http://www.w3.org/2000/svg", 'text');
  node.text.textContent = node.value;
  node.text.setAttribute("fill", "#000");
  node.text.setAttribute("class", "text" + node.value);
  canvas.appendChild(node.text);
  updateTextPosition(node);
}

function swapNodes(newNode, oldNode) {
	let tempNode = {};
  for (let propKey in newNode) {
  	tempNode[ propKey ] = newNode[ propKey ];
  }
 ...