-
Notifications
You must be signed in to change notification settings - Fork 0
/
ann-render.html
82 lines (73 loc) · 2.33 KB
/
ann-render.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling for the rendered ANN */
.arrow-container {
display: flex;
align-items: center;
margin-left: 20px;
}
.arrow {
font-size: 20px;
}
.line {
border-left: 2px solid black;
height: 20px;
margin-left: 10px;
}
.indent {
width: 20px;
}
.value {
margin-left: 10px;
}
</style>
</head>
<body>
<textarea id="input" rows="10" cols="50" placeholder="Enter Arrow Notes Notation here"></textarea>
<button id="renderButton">Render</button>
<div id="ann-container"></div>
<script>
// Parse the ANN input into a structured data format
function parseAnnInput(input) {
// For this example, we'll just split lines
return input.trim().split('\n');
}
// Render the parsed ANN data
function renderAnn(data, parentElement) {
data.forEach(line => {
const depth = line.indexOf('-');
const value = line.trim().replace(/[-|l]/g, '').trim();
const arrowContainer = document.createElement('div');
arrowContainer.className = 'arrow-container';
const arrow = document.createElement('div');
arrow.className = 'arrow';
arrow.innerHTML = '->';
const lineDiv = document.createElement('div');
lineDiv.className = 'line';
lineDiv.style.height = (depth * 20) + 'px';
const indent = document.createElement('div');
indent.className = 'indent';
const valueElement = document.createElement('div');
valueElement.className = 'value';
valueElement.textContent = value;
arrowContainer.appendChild(arrow);
arrowContainer.appendChild(lineDiv);
arrowContainer.appendChild(indent);
arrowContainer.appendChild(valueElement);
parentElement.appendChild(arrowContainer);
});
}
// Handle the "Render" button click
const renderButton = document.getElementById('renderButton');
renderButton.addEventListener('click', () => {
const input = document.getElementById('input').value;
const annContainer = document.getElementById('ann-container');
annContainer.innerHTML = ''; // Clear previous rendering
const parsedData = parseAnnInput(input);
renderAnn(parsedData, annContainer);
});
</script>
</body>
</html>