Merge pull request #203 from nadr0/auto-generate-tracers · odingit/AlgorithmVisualizer@0136803 · GitHub
Skip to content

Commit 0136803

Browse files
64json64json
authored
Merge pull request algorithm-visualizer#203 from nadr0/auto-generate-tracers
Auto generate tracers
2 parents ea94f34 + 10f14a3 commit 0136803

11 files changed

Lines changed: 396 additions & 5 deletions

File tree

‎algorithm/scratch_paper/code.js‎

Whitespace-only changes.

‎css/stylesheet.css‎

Lines changed: 68 additions & 1 deletion

‎index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@ <h3>
3030
</h3>
3131
</button>
3232
<div class="top-menu-buttons">
33+
<div class="btn" id="btn_generate">
34+
<div class="wrapper">
35+
<i class='fa fa-pencil' aria-hidden='true'></i>
36+
<span class="btn-text">Generate</span>
37+
</div>
38+
</div>
39+
3340
<div class="btn" id="btn_share">
3441
<div class="wrapper">
3542
<i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">

‎js/create/array1d.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use strict';
2+
3+
const array2D = require('./array2d');
4+
const modules = require('../module');
5+
const util = require('./util');
6+
7+
const getTracerName = () =>{
8+
return document.getElementById("tracerName-1D").value;
9+
}
10+
11+
const getNumColumns = () => {
12+
var column_field = document.getElementById('numColumns-1D');
13+
return column_field.value;
14+
};
15+
16+
const setup = () => {
17+
var button_1DMatrix = document.getElementById("button-1DMatrix");
18+
var logger;
19+
var arr1DTracer;
20+
button_1DMatrix.addEventListener('click',function(){
21+
util.clearModules();
22+
arr1DTracer = new modules.Array1DTracer();
23+
var arrElem = document.querySelector('.module_wrapper');
24+
arrElem.addEventListener("mousewheel", array2D.mousescroll, false);
25+
arrElem.addEventListener("DOMMouseScroll", array2D.mousescroll, false);
26+
logger = new modules.LogTracer('Generated Javascript');
27+
28+
var numColumns = getNumColumns();
29+
var data = array2D.fauxData(1,numColumns)[0];
30+
31+
arr1DTracer.setData(data);
32+
array2D.tableToInputFields(1, numColumns);
33+
util.positionModules();
34+
arr1DTracer.refresh();
35+
},false);
36+
var button_JS = document.getElementById('button-generateJS-1D');
37+
button_JS.addEventListener('click',function(){
38+
array2D.generateJS(logger, 'Array1DTracer',getTracerName());
39+
},false);
40+
};
41+
42+
43+
module.exports = {
44+
setup
45+
};

‎js/create/array2d.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
'use strict';
2+
3+
const modules = require('../module');
4+
const util = require('./util');
5+
6+
7+
const getTracerName = () =>{
8+
return document.getElementById("tracerName-2D").value;
9+
}
10+
11+
const getNumRows = () => {
12+
var row_field = document.getElementById('numRows-2D');
13+
return row_field.value;
14+
}
15+
16+
const getNumColumns = () => {
17+
var column_field = document.getElementById('numColumns-2D');
18+
return column_field.value;
19+
}
20+
21+
const fauxData = (r, c) => {
22+
var D = [];
23+
for (var i = 0; i < r; i++) {
24+
D.push([]);
25+
for (var j = 0; j < c; j++) {
26+
D[i].push(Math.floor(Math.random()* 10 + 1));
27+
}
28+
}
29+
return D;
30+
}
31+
32+
const tableToInputFields = (numRows, numColumns) => {
33+
var table = document.querySelector('.mtbl-table');
34+
35+
for(var i = 0; i < numRows; i++){
36+
for(var j = 0; j < numColumns; j++){
37+
var elem = document.createElement('input');
38+
elem.type = 'Number';
39+
elem.value = Math.floor(Math.random() * 10 + 1);
40+
elem.classList.add('mtbl-col','inputField');
41+
table.childNodes[i].childNodes[j].innerHTML = '';
42+
table.childNodes[i].childNodes[j].appendChild(elem);
43+
}
44+
}
45+
}
46+
47+
const generateJS = (logger, tracer, tracerName) => {
48+
if(!logger) return;
49+
50+
logger.clear();
51+
var table = document.querySelector('.mtbl-table');
52+
53+
var numRows = table.childNodes.length;
54+
var numColumns = table.childNodes[0].childNodes.length;
55+
56+
logger.print('Copy and paste this code in your data.js file!');
57+
logger.print('');
58+
59+
logger.print('let myTable = [');
60+
61+
var line = '';
62+
var i;
63+
var j;
64+
var comma = ',';
65+
for(i = 0; i < numRows; i++){
66+
line = '[';
67+
for(j = 0; j < numColumns-1; j++){
68+
line += table.childNodes[i].childNodes[j].childNodes[0].value + ',';
69+
}
70+
if(i === numRows - 1){comma = '';}
71+
line += table.childNodes[i].childNodes[j++].childNodes[0].value + ']' + comma;
72+
logger.print(line);
73+
}
74+
logger.print(']');
75+
76+
77+
logger.print("let myTableTracer = new "+ tracer +" ('"+tracerName+"')");
78+
logger.print('myTableTracer._setData (myTable)');
79+
80+
util.enabledHightlighting();
81+
}
82+
83+
const mousescroll = (e) =>{
84+
var colmElem = document.querySelector('.mtbl-col');
85+
var delta = (e.wheelDelta !== undefined && e.wheelDelta) ||
86+
(e.detail !== undefined && -e.detail);
87+
88+
var inputFields = document.getElementsByClassName("inputField");
89+
for (var i = 0; i < inputFields.length; i++) {
90+
inputFields[i].style.width = (parseFloat(colmElem.style.fontSize) * 2.5) + "px";
91+
}
92+
93+
}
94+
95+
const setup = () => {
96+
var button_2DMatrix = document.getElementById("button-2DMatrix");
97+
var logger;
98+
var arr2DTracer;
99+
button_2DMatrix.addEventListener('click',function(){
100+
util.clearModules();
101+
arr2DTracer = new modules.Array2DTracer();
102+
var arrElem = document.querySelector('.module_wrapper');
103+
arrElem.addEventListener("mousewheel", mousescroll, false);
104+
arrElem.addEventListener("DOMMouseScroll", mousescroll, false);
105+
logger = new modules.LogTracer('Generated Javascript');
106+
107+
var numRows = getNumRows();
108+
var numColumns = getNumColumns();
109+
var data = fauxData(numRows, numColumns);
110+
111+
arr2DTracer.setData(data);
112+
tableToInputFields(numRows, numColumns);
113+
util.positionModules();
114+
arr2DTracer.refresh();
115+
},false);
116+
var button_JS = document.getElementById('button-generateJS-2D');
117+
button_JS.addEventListener('click',function(){
118+
generateJS(logger, 'Array2DTracer', getTracerName());
119+
},false);
120+
}
121+
122+
module.exports = {
123+
setup,
124+
mousescroll,
125+
fauxData,
126+
tableToInputFields,
127+
generateJS
128+
};

‎js/create/index.js‎

Lines changed: 93 additions & 0 deletions

0 commit comments

Comments
 (0)