Skip to content

Commit 8653a70

Browse files
kennidennikennidenni
committed
ferdig med å fikse play, pluss endre stil og noen bugs
1 parent d17d59f commit 8653a70

File tree

8 files changed

+202
-18
lines changed

8 files changed

+202
-18
lines changed

‎Graphs/css/style.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ div#graphUI.dfs {
1616
width: 42%;
1717
border: solid 3px #b6b6b6;
1818
border-radius: 10px;
19+
margin-left: -15%;
1920
}
2021

2122
div#queueUI {
@@ -123,6 +124,7 @@ div.nodeUI {
123124
position: absolute;
124125
border-radius: 10000px; /* Just to be sure.. */
125126
background-color: white;
127+
126128
}
127129

128130
div.nodeUI.selected {
@@ -132,8 +134,8 @@ div.nodeUI.selected {
132134
div.nodeUI p {
133135
font-size: 3em;
134136
font-weight: bold;
135-
margin-left: 15px;
136-
margin-top: 3px;
137+
margin-left: 12px;
138+
margin-top: -3px;
137139
}
138140

139141
svg#edgeSvg line {
@@ -211,7 +213,7 @@ ul.insElements li {
211213

212214
ul.insElements li div {
213215
position: relative;
214-
width: 25px;
216+
width: 50px;
215217
border: 2px solid black;
216218
border-radius: 4px;
217219
padding: 10px;

‎Graphs/index.html‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
<head>
44
<meta charset="UTF-8"/>
55
<title>DFS / BFS</title>
6+
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
67
<link rel="stylesheet" type="text/css" href="css/style.css"/>
78

8-
<script>var algorithm = "DFS/BFS";
9-
var collapse = "YES"; </script>
109
<script src="js/jquery.min.js"></script>
1110
<script src="js/bootstrap.min.js"></script>
11+
12+
<script>var algorithm = "DFS/BFS";
13+
var collapse = "YES"; </script>
1214
<script src="js/graphStructureController.js"></script>
1315
<script src="js/eventManager.js"></script>
1416
<script src="js/adjacencyList.js"></script>
@@ -22,16 +24,22 @@
2224
<svg id="edgeSvg" height="100%" width="100%"></svg>
2325
</div>
2426
<div id="queueUI"></div>
27+
<br>
2528
<div id="buttonDiv" class="bottom-container left-bottom">
26-
<button id="dfs" class="my-button" onclick="startDfs(0);">DFS</button>
27-
<button id="bfs" class="my-button" onclick="startBfs(0);">BFS</button>
28-
<button id="reset" class="my-button" onclick="resetAll();">Reset</button>
29+
<button id="dfs" class="btn btn-primary" onclick="helpStartDfs();">DFS</button>
30+
<button id="bfs" class="btn btn-primary" onclick="helpStartBfs();">BFS</button>
31+
<button id="reset" class="btn btn-primary" onclick="resetAll();">Reset</button>
32+
<br>
33+
<br>
34+
<button id="backward" class="btn btn-primary" onclick="manager.previous();">Previous</button>
35+
<button id="forward" class="btn btn-primary" onclick="manager.next();">Next</button>
36+
<button id="Test1" class="btn btn-primary" onclick="exampleGraphStar();">Example1</button>
37+
<button id="Test2" class="btn btn-primary" onclick="exampleGraphAllConnected();">Example2</button>
2938
<br>
3039
<br>
31-
<button id="prev" class="my-button" onclick="manager.previous();">Previous</button>
32-
<button id="next" class="my-button" onclick="manager.next();">Next</button>
33-
<button id="Test1" class="my-button" onclick="exampleGraphStar();">Example1</button>
34-
<button id="Test2" class="my-button" onclick="exampleGraphAllConnected();">Example2</button>
40+
<button id="slow" class="btn btn-success" onclick="manager.slow()">Slow</button>
41+
<button id="medium" class="btn btn-success" onclick="manager.medium()">Medium</button>
42+
<button id="fast" class="btn btn-success" onclick="manager.fast()">Fast</button>
3543

3644
</div>
3745
<div id="bottomRight" class="bottom-container right-bottom">

‎Graphs/js/dfsBfsController.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,34 @@ var bfsQueue;
88
var currentNode;
99
var highlightEventDuration = 0;
1010
var visitEventDuration = 2000;
11+
var paused = true;
12+
var algoRunning = "";
13+
function helpStartBfs() {
14+
if (algoRunning != "BFS") {
15+
resetForNewAlgo();
16+
algoRunning = "BFS";
17+
startBfs(0);
18+
$("#dfs").html("DFS");
19+
paused = true;
20+
}
21+
togglePauseBfs();
22+
}
23+
function togglePauseBfs() {
24+
if (paused) {
25+
manager.start();
26+
$('#backward').attr('disabled', 'disabled');
27+
$('#forward').attr('disabled', 'disabled');
28+
$("#bfs").html("Pause");
29+
paused = false;
30+
}
31+
else {
32+
$('#backward').removeAttr('disabled');
33+
$('#forward').removeAttr('disabled');
34+
$("#bfs").html("Resume");
35+
manager.pause();
36+
paused = true;
37+
}
38+
}
1139
function startBfs(startIndex) {
1240
resetVisited(nodes);
1341
bfsQueue = [];
@@ -54,6 +82,32 @@ function popFromBfsQueue(v) {
5482
}(v);
5583
manager.addEvent(new FrontendEvent(forward, backwards, visitEventDuration));
5684
}
85+
function helpStartDfs() {
86+
if (algoRunning != "DFS") {
87+
resetForNewAlgo();
88+
algoRunning = "DFS";
89+
startDfs(0);
90+
$("#bfs").html("BFS");
91+
paused = true;
92+
}
93+
togglePauseDfs();
94+
}
95+
function togglePauseDfs() {
96+
if (paused) {
97+
paused = false;
98+
manager.start();
99+
$('#backward').attr('disabled', 'disabled');
100+
$('#forward').attr('disabled', 'disabled');
101+
$("#dfs").html("Pause");
102+
}
103+
else {
104+
paused = true;
105+
manager.pause();
106+
$('#backward').removeAttr('disabled');
107+
$('#forward').removeAttr('disabled');
108+
$("#dfs").html("Resume");
109+
}
110+
}
57111
function startDfs(startIndex) {
58112
resetVisited(nodes);
59113
currentNode = startIndex;

‎Graphs/js/dfsBfsController.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,36 @@ let bfsQueue: number [];
99
let currentNode: number;
1010
let highlightEventDuration = 0;
1111
let visitEventDuration = 2000;
12+
let paused = true;
13+
let algoRunning = "";
14+
15+
function helpStartBfs() {
16+
if (algoRunning != "BFS") {
17+
resetForNewAlgo();
18+
algoRunning = "BFS";
19+
startBfs(0);
20+
$("#dfs").html("DFS");
21+
paused = true;
22+
}
23+
togglePauseBfs();
24+
}
25+
26+
function togglePauseBfs() {
27+
if (paused) {
28+
manager.start();
29+
$('#backward').attr('disabled', 'disabled');
30+
$('#forward').attr('disabled', 'disabled');
31+
$("#bfs").html("Pause");
32+
paused = false;
33+
34+
} else {
35+
$('#backward').removeAttr('disabled');
36+
$('#forward').removeAttr('disabled');
37+
$("#bfs").html("Resume");
38+
manager.pause();
39+
paused = true;
40+
}
41+
}
1242

1343
function startBfs(startIndex: number) {
1444
resetVisited(nodes);
@@ -67,6 +97,32 @@ function popFromBfsQueue(v: number) {
6797
manager.addEvent(new FrontendEvent(forward, backwards, visitEventDuration))
6898
}
6999

100+
function helpStartDfs() {
101+
if (algoRunning != "DFS") {
102+
resetForNewAlgo();
103+
algoRunning = "DFS";
104+
startDfs(0);
105+
$("#bfs").html("BFS");
106+
paused = true;
107+
}
108+
togglePauseDfs();
109+
}
110+
111+
function togglePauseDfs() {
112+
if (paused) {
113+
paused = false;
114+
manager.start();
115+
$('#backward').attr('disabled', 'disabled');
116+
$('#forward').attr('disabled', 'disabled');
117+
$("#dfs").html("Pause");
118+
} else {
119+
paused = true;
120+
manager.pause();
121+
$('#backward').removeAttr('disabled');
122+
$('#forward').removeAttr('disabled');
123+
$("#dfs").html("Resume");
124+
}
125+
}
70126

71127
function startDfs(startIndex: number) {
72128
resetVisited(nodes);

‎Graphs/js/eventManager.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ var eventManager = /** @class */ (function () {
2727
if (this.previousEvents.length == 0)
2828
return;
2929
var event = this.previousEvents.pop();
30-
//this.delayTime = 500; //this line set to 0 caused: when resuming all animations are played out. Intention Delay when stepping backwards.
3130
event.previous();
3231
this.nextEvents.unshift(event);
3332
};
@@ -50,6 +49,24 @@ var eventManager = /** @class */ (function () {
5049
this.nextEvents = [];
5150
this.previousEvents = [];
5251
};
52+
eventManager.prototype.slow = function () {
53+
this.delayTime = 2000;
54+
this.helpSetInterval();
55+
};
56+
eventManager.prototype.medium = function () {
57+
this.delayTime = 1000;
58+
this.helpSetInterval();
59+
};
60+
eventManager.prototype.fast = function () {
61+
this.delayTime = 500;
62+
this.helpSetInterval();
63+
};
64+
eventManager.prototype.helpSetInterval = function () {
65+
if (!this.paused) {
66+
this.pause();
67+
this.start();
68+
}
69+
};
5370
return eventManager;
5471
}());
5572
var FrontendEvent = /** @class */ (function () {

‎Graphs/js/eventManager.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
*/
55

6-
declare var $;
6+
declare var $: any;
77

88
/** Manager for events stored in queue. Manager is also responsible for executing events automatically */
99
class eventManager {
@@ -31,7 +31,6 @@ class eventManager {
3131
if (this.previousEvents.length == 0)
3232
return;
3333
let event: FrontendEvent = (<FrontendEvent> this.previousEvents.pop());
34-
//this.delayTime = 500; //this line set to 0 caused: when resuming all animations are played out. Intention Delay when stepping backwards.
3534
event.previous();
3635
this.nextEvents.unshift(event);
3736
}
@@ -58,6 +57,28 @@ class eventManager {
5857
this.nextEvents = [];
5958
this.previousEvents = [];
6059
}
60+
61+
slow() {
62+
this.delayTime = 2000;
63+
this.helpSetInterval();
64+
}
65+
66+
medium() {
67+
this.delayTime = 1000;
68+
this.helpSetInterval();
69+
}
70+
71+
fast() {
72+
this.delayTime = 500;
73+
this.helpSetInterval();
74+
}
75+
76+
helpSetInterval() {
77+
if (!this.paused) {
78+
this.pause();
79+
this.start();
80+
}
81+
}
6182
}
6283

6384
class FrontendEvent {

‎Graphs/js/graphStructureController.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,18 @@ function resetAll() {
2323
manager.clear();
2424
nodes = 0;
2525
edges = 0;
26-
manager = new eventManager();
26+
}
27+
function resetForNewAlgo() {
28+
manager.clear();
29+
$("#queueUI").find("div.nodeUI").each(function () {
30+
$(this).remove();
31+
});
32+
$("#edge").each(function () {
33+
$(this).css({ "stroke": "rgb(0, 0, 0)", "stroke-width": "4" });
34+
});
35+
deselectAllNodes();
36+
removeVisitedArray();
37+
resetAfterSearch();
2738
}
2839
function checkOverlap(x, y) {
2940
var overlap = false;
@@ -59,6 +70,7 @@ function exampleGraphStar() {
5970
twoNodesClicked(0, 5);
6071
twoNodesClicked(6, 0);
6172
twoNodesClicked(7, 0);
73+
instantCollapseAll();
6274
}
6375
function exampleGraphAllConnected() {
6476
resetAll();
@@ -100,4 +112,5 @@ function exampleGraphAllConnected() {
100112
twoNodesClicked(2, 6);
101113
twoNodesClicked(7, 6);
102114
twoNodesClicked(2, 4);
115+
instantCollapseAll();
103116
}

‎Graphs/js/graphStructureController.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,26 @@ function twoNodesClicked(n1: number, n2: number) {
2323
addEdge(edges++, n1, n2);
2424
}
2525

26-
2726
function resetAll() {
2827
resetGraphUI();
2928
resetAdjList();
3029
removeVisitedArray();
3130
manager.clear();
3231
nodes = 0;
3332
edges = 0;
34-
manager = new eventManager();
33+
}
34+
35+
function resetForNewAlgo() {
36+
manager.clear();
37+
$("#queueUI").find("div.nodeUI").each(function () {
38+
$(this).remove();
39+
});
40+
$("#edge").each(function () {
41+
$(this).css({"stroke": "rgb(0, 0, 0)", "stroke-width": "4"});
42+
});
43+
deselectAllNodes();
44+
removeVisitedArray();
45+
resetAfterSearch();
3546
}
3647

3748
function checkOverlap(x: number, y: number) {
@@ -71,6 +82,7 @@ function exampleGraphStar() {
7182
twoNodesClicked(0, 5);
7283
twoNodesClicked(6, 0);
7384
twoNodesClicked(7, 0);
85+
instantCollapseAll();
7486
}
7587

7688
function exampleGraphAllConnected() {
@@ -113,4 +125,5 @@ function exampleGraphAllConnected() {
113125
twoNodesClicked(2, 6);
114126
twoNodesClicked(7, 6);
115127
twoNodesClicked(2, 4);
128+
instantCollapseAll();
116129
}

0 commit comments

Comments
 (0)