<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
const nodeCoords = {};
function scrollToPosition (x, y) {
window.scrollTo (
x - window.innerWidth / 2,
y - window.innerHeight / 2
);
};
window.onload = function () {
const svgEl = document.getElementsByTagName("svg")[0].children[0];
for (let i = 0; i < svgEl.children.length; i++) {
const node = svgEl.children[i];
// filter out non-nodes
if (!node.classList.contains("node")) continue;
const nodeName = node.children[0].textContent;
const boundingRect = node.getBoundingClientRect();
const position =
{ x: boundingRect.x + window.scrollX,
y: boundingRect.y + window.scrollY };
nodeCoords[nodeName] = position
}
function scrollToNode(event) {
const nodeName = location.hash.slice(1);
const pos = nodeCoords[decodeURI(nodeName)];
if (pos) {
event.preventDefault();
scrollToPosition(pos.x, pos.y);
history.pushState('', '', window.location.pathname)
} else {
console.log('Node not found: ' + nodeName);
}
};
window.addEventListener('hashchange', scrollToNode, false);
// Scroll to first node
const firstNodePos = nodeCoords[Object.keys(nodeCoords)[0]];
if (firstNodePos) {
scrollToPosition(firstNodePos.x, firstNodePos.y);
}
document.getElementsByClassName("loading-backdrop")[0].remove();
};
</script>
<style>
body {
margin: 0;
}
.loading-backdrop {
position: fixed;
width: 100%;
height: 100%;
background-color: #00000040;
}
.loading-modal {
padding: 30px;
text-align: center;
font-size: 1.5em;
background-color: white;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
</style>
</head>
<body>
<div class="loading-backdrop">
<div class="loading-modal">Loading...</div>
</div>