Skip to content

Commit 65722e7

Browse files
64json64json
committed
reshape workspace
1 parent 0ef7897 commit 65722e7

6 files changed

Lines changed: 75 additions & 82 deletions

File tree

‎css/stylesheet.css‎

Lines changed: 19 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,6 @@ button input {
102102

103103
.sidemenu {
104104
top: 30px;
105-
bottom: 0;
106-
left: 0;
107105
right: 85%;
108106
visibility: hidden;
109107
overflow: scroll;
@@ -134,53 +132,45 @@ button input {
134132
}
135133

136134
nav,
137-
section {
138-
position: absolute;
139-
border: 1px solid rgb(44, 44, 44);
140-
box-sizing: border-box;
141-
}
142-
135+
section,
143136
.viewer_container,
144137
.editor_container {
145138
position: absolute;
146-
}
147-
148-
.viewer_container {
149139
top: 0;
150140
bottom: 0;
151141
left: 0;
142+
right: 0;
143+
}
144+
145+
nav,
146+
section {
147+
border: 1px solid rgb(44, 44, 44);
148+
box-sizing: border-box;
149+
}
150+
151+
.viewer_container {
152152
right: 50%;
153153
}
154154

155155
.editor_container {
156-
top: 0;
157-
bottom: 0;
158156
left: 50%;
159-
right: 0;
160157
}
161158

162159
.module_container {
163-
top: 0;
164-
bottom: 50%;
165-
left: 0;
166-
right: 0;
167160
overflow: hidden;
168161
border: none;
169162
}
170163

171164
.tab_container {
172-
top: 50%;
173-
bottom: 30px;
174-
left: 0;
175-
right: 0;
165+
top: 30px;
176166
}
177167

178168
.tab {
179169
position: absolute;
180170
width: 100%;
181171
height: 100%;
182172
overflow: scroll;
183-
display: none;
173+
visibility: hidden;
184174
}
185175

186176
.tab > .wrapper {
@@ -189,30 +179,28 @@ section {
189179
}
190180

191181
.tab.active {
192-
display: block;
182+
visibility: visible;
183+
}
184+
185+
.module_wrapper .wrapper {
186+
padding: 16px;
187+
box-sizing: border-box;
193188
}
194189

195190
#tab_desc > .wrapper a {
196191
text-decoration: underline;
197192
}
198193

199194
.tab_bar {
200-
bottom: 0;
201-
left: 0;
202-
right: 0;
203195
height: 30px;
204196
}
205197

206198
.files_bar {
207-
left: 0;
208-
right: 0;
209199
height: 30px;
210200
}
211201

212202
.explanation_container {
213203
top: 30px;
214-
left: 0;
215-
right: 0;
216204
height: 30px;
217205
background: rgb(44, 44, 44);
218206
padding: 0 8px;
@@ -224,15 +212,10 @@ section {
224212
.data_container {
225213
top: 60px;
226214
bottom: 60%;
227-
left: 0;
228-
right: 0;
229215
}
230216

231217
.code_container {
232-
left: 0;
233218
top: 40%;
234-
right: 0;
235-
bottom: 0;
236219
}
237220

238221
pre {

‎index.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="description" content="Tool for visualizing algorithms." />
6-
<meta property="og:title" content="Algorithm Visualizer" />
7-
<meta property="og:description" content="Tool for visualizing algorithms." />
8-
<meta property="og:image" content="img/image.png" />
9-
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
5+
<meta name="description" content="Tool for visualizing algorithms."/>
6+
<meta property="og:title" content="Algorithm Visualizer"/>
7+
<meta property="og:description" content="Tool for visualizing algorithms."/>
8+
<meta property="og:image" content="img/image.png"/>
9+
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
1010
<title>Algorithm Visualizer</title>
1111
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
1212
<link rel="stylesheet" href="css/font-awesome.min.css">
@@ -63,7 +63,10 @@ <h3>
6363
</section>
6464
<div class="workspace">
6565
<div class="viewer_container">
66-
<section class="module_container"></section>
66+
<section class="tab_bar">
67+
<button class="active" id="btn_desc">Description</button>
68+
<button id="btn_trace">Trace</button>
69+
</section>
6770
<section class="tab_container">
6871
<div class="tab active" id="tab_desc">
6972
<div class="wrapper">
@@ -83,15 +86,9 @@ <h3>Reference</h3>
8386
<ul id="desc_ref"></ul>
8487
</div>
8588
</div>
86-
<div class="tab" id="tab_trace">
87-
<div class="wrapper">
88-
</div>
89+
<div class="tab module_container" id="tab_module">
8990
</div>
9091
</section>
91-
<section class="tab_bar">
92-
<button class="active" id="btn_desc">Description</button>
93-
<button id="btn_trace">Trace</button>
94-
</section>
9592
</div>
9693
<div class="editor_container">
9794
<section class="files_bar">

‎js/module/array2d.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
var $table = null;
2-
31
function Array2DTracer(module) {
42
if (Tracer.call(this, module || Array2DTracer)) {
53
Array2DTracer.prototype.init.call(this);
@@ -11,8 +9,8 @@ function Array2DTracer(module) {
119
Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
1210
constructor: Array2DTracer,
1311
init: function () {
14-
$table = $('<div class="mtbl-table">');
15-
this.$container.append($table);
12+
this.$table = this.capsule.$table = $('<div class="mtbl-table">');
13+
this.$container.append(this.$table);
1614
},
1715
resize: function () {
1816
Tracer.prototype.resize.call(this);
@@ -40,10 +38,10 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
4038
return true;
4139
}
4240

43-
$table.empty();
41+
this.$table.empty();
4442
for (var i = 0; i < D.length; i++) {
4543
var $row = $('<div class="mtbl-row">');
46-
$table.append($row);
44+
this.$table.append($row);
4745
for (var j = 0; j < D[i].length; j++) {
4846
var $cell = $('<div class="mtbl-cell">')
4947
.css(this.getCellCss())
@@ -156,7 +154,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
156154

157155
switch (step.type) {
158156
case 'notifying':
159-
var $row = $table.find('.mtbl-row').eq(step.x);
157+
var $row = this.$table.find('.mtbl-row').eq(step.x);
160158
$row.find('.mtbl-cell').eq(step.y).text(step.value);
161159
case 'notified':
162160
case 'select':
@@ -192,11 +190,11 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
192190
refresh: function () {
193191
Tracer.prototype.refresh.call(this);
194192

195-
var $parent = $table.parent();
196-
var top = $parent.height() / 2 - $table.height() / 2 + this.viewY;
197-
var left = $parent.width() / 2 - $table.width() / 2 + this.viewX;
198-
$table.css('margin-top', top);
199-
$table.css('margin-left', left);
193+
var $parent = this.$table.parent();
194+
var top = $parent.height() / 2 - this.$table.height() / 2 + this.viewY;
195+
var left = $parent.width() / 2 - this.$table.width() / 2 + this.viewX;
196+
this.$table.css('margin-top', top);
197+
this.$table.css('margin-left', left);
200198
},
201199
mousedown: function (e) {
202200
Tracer.prototype.mousedown.call(this, e);
@@ -240,7 +238,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
240238
},
241239
paintColor: function (sx, sy, ex, ey, colorClass, addClass) {
242240
for (var i = sx; i <= ex; i++) {
243-
var $row = $table.find('.mtbl-row').eq(i);
241+
var $row = this.$table.find('.mtbl-row').eq(i);
244242
for (var j = sy; j <= ey; j++) {
245243
var $cell = $row.find('.mtbl-cell').eq(j);
246244
if (addClass) $cell.addClass(colorClass);
@@ -249,7 +247,7 @@ Array2DTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
249247
}
250248
},
251249
clearColor: function () {
252-
$table.find('.mtbl-cell').removeClass(Object.keys(this.colorClass).join(' '));
250+
this.$table.find('.mtbl-cell').removeClass(Object.keys(this.colorClass).join(' '));
253251
},
254252
colorClass: {
255253
selected: 'selected',

‎js/module/log_tracer.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
function LogTracer(module) {
2-
return Tracer.call(this, module || LogTracer);
2+
if (Tracer.call(this, module || LogTracer)) {
3+
LogTracer.prototype.init.call(this);
4+
return true;
5+
}
6+
return false;
37
}
48

59
LogTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
610
constructor: LogTracer,
11+
init: function () {
12+
this.$wrapper = this.capsule.$wrapper = $('<div class="wrapper">');
13+
this.$container.append(this.$wrapper);
14+
},
715
_print: function (msg, delay) {
816
tm.pushStep(this.capsule, {type: 'print', msg: msg}, delay);
917
},
@@ -17,10 +25,15 @@ LogTracer.prototype = $.extend(true, Object.create(Tracer.prototype), {
1725
refresh: function () {
1826
this.scrollToEnd(Math.min(50, this.interval));
1927
},
28+
clear: function () {
29+
Tracer.prototype.clear.call(this);
30+
31+
this.$wrapper.empty();
32+
},
2033
printTrace: function (message) {
21-
$('#tab_trace .wrapper').append($('<span>').append(message + '<br/>'));
34+
this.$wrapper.append($('<span>').append(message + '<br/>'));
2235
},
2336
scrollToEnd: function (duration) {
24-
$('#tab_trace').animate({scrollTop: $('#tab_trace')[0].scrollHeight}, duration);
37+
this.$container.animate({scrollTop: this.$container[0].scrollHeight}, duration);
2538
}
2639
});

‎js/module/tracer_manager.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -60,27 +60,19 @@ TracerManager.prototype = {
6060
place: function () {
6161
var capsules = this.capsules;
6262
$.each(capsules, function (i, capsule) {
63-
var width = $module_container.width() / capsules.length;
64-
var height = $module_container.height();
65-
var left = width * i;
63+
var width = $module_container.width();
64+
var height = $module_container.height() / capsules.length;
65+
var top = height * i;
6666
capsule.$container.css({
67-
top: 0,
68-
left: left,
67+
top: top,
6968
width: width,
7069
height: height
7170
});
7271
capsule.tracer.resize();
7372
});
7473
},
75-
command: function () {
76-
var args = Array.prototype.slice.call(arguments);
77-
78-
var functionName = args.shift();
79-
$.each(this.capsules, function (i, capsule) {
80-
if (capsule.allocated) {
81-
capsule.tracer.module.prototype[functionName].apply(capsule.tracer, args);
82-
}
83-
});
74+
resize: function () {
75+
this.command('resize');
8476
},
8577
isPause: function () {
8678
return this.pause;
@@ -106,7 +98,7 @@ TracerManager.prototype = {
10698
}
10799
last.push($.extend(step, {capsule: capsule}));
108100
},
109-
newStep: function(){
101+
newStep: function () {
110102
this.traces.push([]);
111103
},
112104
pauseStep: function () {
@@ -169,5 +161,15 @@ TracerManager.prototype = {
169161
$('#btn_trace').click();
170162
this.traceIndex = -1;
171163
this.resumeStep();
164+
},
165+
command: function () {
166+
var args = Array.prototype.slice.call(arguments);
167+
168+
var functionName = args.shift();
169+
$.each(this.capsules, function (i, capsule) {
170+
if (capsule.allocated) {
171+
capsule.tracer.module.prototype[functionName].apply(capsule.tracer, args);
172+
}
173+
});
172174
}
173175
};

‎js/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ $('#btn_desc').click(function () {
252252
});
253253
$('#btn_trace').click(function () {
254254
$('.tab_container > .tab').removeClass('active');
255-
$('#tab_trace').addClass('active');
255+
$('#tab_module').addClass('active');
256256
$('.tab_bar > button').removeClass('active');
257257
$(this).addClass('active');
258258
});

0 commit comments

Comments
 (0)