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

File tree

11 files changed

+396
-5
lines changed

11 files changed

+396
-5
lines changed

‎algorithm/scratch_paper/code.js

Whitespace-only changes.

‎css/stylesheet.css

+68-1
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ nav h3 {
230230

231231
nav,
232232
section,
233+
.sandbox_container,
233234
.viewer_container,
234235
.editor_container {
235236
position: absolute;
@@ -249,6 +250,11 @@ section {
249250
right: 50%;
250251
}
251252

253+
.sandbox_container{
254+
left: 50%;
255+
z-index: 100;
256+
}
257+
252258
.editor_container {
253259
left: 50%;
254260
}
@@ -258,6 +264,10 @@ section {
258264
border: none;
259265
}
260266

267+
.hide{
268+
display: none;
269+
}
270+
261271
.tab_container {
262272
top: 30px;
263273
background: #242424;
@@ -332,6 +342,7 @@ section {
332342
border-bottom: none;
333343
}
334344

345+
.close_bar,
335346
.files_bar {
336347
height: 30px;
337348
border-bottom: 1px solid #505050;
@@ -376,6 +387,11 @@ section {
376387
box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6), inset -16px 0 16px -16px rgba(0, 0, 0, .6);
377388
}
378389

390+
.close_bar {
391+
width: 100%;
392+
background-color: #3f3f3f;
393+
}
394+
379395
.explanation_container {
380396
border: none;
381397
top: 30px;
@@ -657,4 +673,55 @@ input[type=number]::-webkit-outer-spin-button {
657673
top: 30px;
658674
left: 0;
659675
}
660-
}
676+
}
677+
678+
.buttonContainer {
679+
width: 75px;
680+
height: 25px;
681+
display: block;
682+
position: relative;
683+
z-index: 100;
684+
background-color: white;
685+
}
686+
687+
.inputField {
688+
width: 25px;
689+
border: 0;
690+
}
691+
692+
.sb-button {
693+
border: 1px solid #515151;
694+
height: 25px;
695+
margin: 0 auto;
696+
}
697+
698+
.auto-gen {
699+
top: 30px;
700+
height: 100%;
701+
width: 100%;
702+
text-align: center;
703+
background-color: #262626;
704+
align-items: center;
705+
}
706+
707+
.inputs {
708+
display: inline-block;
709+
border: 0;
710+
background-color: #505050;
711+
height: 25px;
712+
width: 75px;
713+
}
714+
715+
.grid {
716+
width: 50%;
717+
height: 50%;
718+
float: left;
719+
-webkit-box-sizing: border-box;
720+
-moz-box-sizing: border-box;
721+
box-sizing: border-box;
722+
}
723+
724+
.fields {
725+
margin-top: 5px;
726+
margin-bottom: 5px;
727+
}

‎index.html

+7
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

+45
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

+128
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

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use strict';
2+
3+
const modules = require('../module');
4+
const array2d = require('./array2d');
5+
const array1d = require('./array1d');
6+
const util = require('./util');
7+
const Server = require('../server');
8+
const DOM = require('../dom');
9+
10+
const {
11+
getPath
12+
} = require('../server/helpers');
13+
14+
const closeCreate = () => {
15+
const $btnClose = $('#btn_close');
16+
17+
$btnClose.click(() => {
18+
$('.sandbox_container').remove();
19+
util.clearModules();
20+
reloadAlgorithm();
21+
});
22+
};
23+
24+
const reloadAlgorithm = () => {
25+
const {
26+
category,
27+
algorithm,
28+
file
29+
} = getPath();
30+
31+
Server.loadAlgorithm(category, algorithm).then((data) => {
32+
DOM.showAlgorithm(category, algorithm, data);
33+
});
34+
};
35+
36+
const createHTML = () => {
37+
$('.workspace').append("<div class='sandbox_container'>\
38+
<section class='close_bar'>\
39+
<div class='btn' id='btn_close'>\
40+
<div class='wrapper'>\
41+
<i class='fa fa-times' aria-hidden='true'></i>\
42+
</div>\
43+
</div>\
44+
</section>\
45+
<section class='auto-gen'>\
46+
<div class='grid' id='array1D-gen'>\
47+
<div> array1DTracer </div>\
48+
<i class='fa fa-ellipsis-h fa-5x' aria-hidden='true'></i>\
49+
<div class='fields'>\
50+
# of Columns: <input class='inputs'id='numColumns-1D' type='number' value='5'>\
51+
</div>\
52+
<div class='fields'>\
53+
Tracer Name: <input class='inputs'id='tracerName-1D' type='text' value='default'>\
54+
</div>\
55+
<button class='sb-button' id='button-1DMatrix'>Create 1DMatrix</button>\
56+
<button class='sb-button' id='button-generateJS-1D'>Generate Javascript</button>\
57+
</div>\
58+
<div class='grid' id='array2D-gen'>\
59+
<div> array2DTracer </div>\
60+
<i class='fa fa-th fa-5x' aria-hidden='true'></i>\
61+
<div class='fields'>\
62+
# of Rows: <input class='inputs'id='numRows-2D' type='number' value='5'>\
63+
</div>\
64+
<div class='fields'>\
65+
# of Columns: <input class='inputs'id='numColumns-2D' type='number' value='5'>\
66+
</div>\
67+
<div class='fields'>\
68+
Tracer Name: <input class='inputs'id='tracerName-2D' type='text' value='default'>\
69+
</div>\
70+
<button class='sb-button' id='button-2DMatrix'>Create 2DMatrix</button>\
71+
<button class='sb-button' id='button-generateJS-2D'>Generate Javascript</button>\
72+
</div>\
73+
<div class='grid' id='chart-gen'></div>\
74+
<div class='grid' id='graph-gen'></div>\
75+
</section>\
76+
</div>");
77+
};
78+
79+
const init = () => {
80+
81+
var check = $('.sandbox_container');
82+
if(!check.length){
83+
util.clearModules();
84+
createHTML();
85+
array2d.setup();
86+
array1d.setup();
87+
closeCreate();
88+
}
89+
};
90+
91+
module.exports = {
92+
init
93+
};

0 commit comments

Comments
 (0)