Noder kan ikke ligge over hverandre

Author: kennidenni

Graphs/DfsBfs.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8"/>
     <title>DFS / BFS</title>
     <link rel="stylesheet" type="text/css" href="css/style.css"/>
+
     <script>var algorithm = "DFS/BFS";
     var collapse = "YES"; </script>
     <script src="js/jquery.min.js"></script>

Graphs/graphs.html

@@ -5,12 +5,6 @@
     <title>Graphs</title>
     <link rel="stylesheet" type="text/css" href="css/style.css"/>
 
-    <!-- Insert this line above script imports  -->
-    <script>if (typeof module === 'object') {
-        window.module = module;
-        module = undefined;
-    }</script>
-
     <script>var algorithm = "Graphs";
     var collapse = "NO"; </script>
     <script src="js/jquery.min.js"></script>

Graphs/js/adjacencyList.ts

@@ -2,7 +2,7 @@
 ///<reference path="dfsBfsController.ts"/>
 declare var $;
 
-var adjacencyList: number[][] = [];
+let adjacencyList: number[][] = [];
 
 function addNewAdjList(nodeId: number) {
     adjacencyList.push([]);

Graphs/js/dfsBfsController.ts

@@ -4,30 +4,30 @@
 ///<reference path="eventManager.ts"/>
 ///<reference path="visitedArray.ts"/>
 
-var visited: boolean [];
-var bfsQueue: number [];
-var currentNode;
-var highlightEventDuration = 0;
-var visitEventDuration = 2000;
+let visited: boolean [];
+let bfsQueue: number [];
+let currentNode: number;
+let highlightEventDuration = 0;
+let visitEventDuration = 2000;
 
 function startBfs(startIndex: number) {
-    resetVisited(nodes)
-    bfsQueue = []
+    resetVisited(nodes);
+    bfsQueue = [];
     currentNode = startIndex;
 
     bfsQueue.push(startIndex);
 
     while (bfsQueue.length != 0) {
-        var v = bfsQueue.shift();
+        let v: number = bfsQueue.shift();
         popFromBfsQueue(v);
         visit(v);
 
-        var adjacent = adjacencyList[v];
-        for (var i = 0; i < adjacent.length; i++) {
-            var w: number = adjacent[i];
+        let adjacent = adjacencyList[v];
+        for (let i = 0; i < adjacent.length; i++) {
+            let w: number = adjacent[i];
             if (!visited[w] && $.inArray(w, bfsQueue)) {
-                addToBfsQueue(w)
-                bfsQueue.push(w)
+                addToBfsQueue(w);
+                bfsQueue.push(w);
             }
         }
     }
@@ -36,33 +36,33 @@ function startBfs(startIndex: number) {
 }
 
 function addToBfsQueue(v: number) {
-    var forward = function (id) {
+    let forward = function (id) {
         return function () {
             addQueueElement(id);
         };
-    }(v)
+    }(v);
 
-    var backwards = function (id) {
+    let backwards = function (id) {
         return function () {
             popQueueElement(id);
         };
-    }(v)
+    }(v);
 
     manager.addEvent(new FrontendEvent(forward, backwards, visitEventDuration))
 }
 
 function popFromBfsQueue(v: number) {
-    var forward = function (id) {
+    let forward = function (id) {
         return function () {
             popQueueElement(id);
         };
-    }(v)
+    }(v);
 
-    var backwards = function (id) {
+    let backwards = function (id) {
         return function () {
             addQueueElement(id);
         };
-    }(v)
+    }(v);
 
     manager.addEvent(new FrontendEvent(forward, backwards, visitEventDuration))
 }
@@ -78,8 +78,8 @@ function startDfs(startIndex: number) {
 function dfs(v: number) {
     visit(v);
 
-    var adjacent = adjacencyList[v];
-    for (var i = 0; i < adjacent.length; i++) {
+    let adjacent = adjacencyList[v];
+    for (let i = 0; i < adjacent.length; i++) {
         if (visited[adjacent[i]]) continue;
         setHighlightEdge(getEdgeId(v, adjacent[i]), true);
         dfs(adjacent[i]);
@@ -89,7 +89,7 @@ function dfs(v: number) {
 }
 
 function setHighlightEdge(edgeId: number, highlight: boolean) {
-    var forward = function (id, h) {
+    let forward = function (id, h) {
         return function () {
             if (h) {
                 $("#edge" + id).css({"stroke": "rgb(16, 130, 219)", "stroke-width": "6"});
@@ -98,9 +98,9 @@ function setHighlightEdge(edgeId: number, highlight: boolean) {
                 $("#edge" + id).css({"stroke": "rgb(0, 0, 0)", "stroke-width": "4"});
             } //remove highlight
         };
-    }(edgeId, highlight)
+    }(edgeId, highlight);
 
-    var backwards = function (id, h) {
+    let backwards = function (id, h) {
         return function () {
             if (h) {
                 $("#edge" + id).css({"stroke": "rgb(0, 0, 0)", "stroke-width": "4"});
@@ -109,84 +109,84 @@ function setHighlightEdge(edgeId: number, highlight: boolean) {
                 $("#edge" + id).css({"stroke": "rgb(16, 130, 219)", "stroke-width": "6"});
             } // add highlight
         };
-    }(edgeId, highlight)
+    }(edgeId, highlight);
 
     manager.addEvent(new FrontendEvent(forward, backwards, highlightEventDuration))
 }
 
 function visit(id: number) {
     visited[id] = true;
-    var forward = function (v, curr) {
+    let forward = function (v, curr) {
         return function () {
             $("#node" + curr).css("border", "6px solid black");
             $("#node" + v).css("background-color", "rgb(80, 250, 80)");
             $("#node" + v).css("border", "6px solid rgb(16, 130, 219)");
             $("#insElemNr" + v).html("<p>" + v + "</p><div> T </div>");
             $("#insElemNr" + v).addClass("marked");
         };
-    }(id, currentNode)
+    }(id, currentNode);
 
-    var backwards = function (v, curr) {
+    let backwards = function (v, curr) {
         return function () {
             $("#node" + v).css("background-color", "white")
             $("#node" + v).css("border", "6px solid black")
             $("#node" + curr).css("border", "6px solid rgb(16, 130, 219)")
             $("#insElemNr" + v).html("<p>" + v + "</p><div> F </div>");
             $("#insElemNr" + v).removeClass("marked");
         };
-    }(id, currentNode)
+    }(id, currentNode);
 
     manager.addEvent(new FrontendEvent(forward, backwards, visitEventDuration));
     currentNode = id;
 }
 
 function resetAfterSearch() {
-    var forward = function (curr) {
+    let forward = function (curr) {
         return function () {
             $("#node" + curr).css("border", "6px solid black");
-            for (var i = 0; i < nodes; i++) {
+            for (let i = 0; i < nodes; i++) {
                 $("#node" + i).css("background-color", "white");
             }
         };
-    }(currentNode)
+    }(currentNode);
 
-    var backwards = function (curr) {
+    let backwards = function (curr) {
         return function () {
-            $("#node" + curr).css("border", "6px solid rgb(16, 130, 219)")
-            for (var i = 0; i < nodes; i++) {
+            $("#node" + curr).css("border", "6px solid rgb(16, 130, 219)");
+            for (let i = 0; i < nodes; i++) {
                 $("#node" + i).css("background-color", "rgb(80, 250, 80)");
             }
         };
-    }(currentNode)
+    }(currentNode);
 
     manager.addEvent(new FrontendEvent(forward, backwards, visitEventDuration));
 }
 
 function resetVisited(numNodes: number) {
     visited = [];
-    for (var i = 0; i < numNodes; i++) visited.push(false);
+    for (let i = 0; i < numNodes; i++) visited.push(false);
     setInitialArray();
 }
 
 function instantCollapseAll() {
-    for (var i = 0; i < nodes; i++) {
-        var width: number = $("#adjList" + i).width();
+    for (let i = 0; i < nodes; i++) {
+        let width: number = $("#adjList" + i).width();
         $("#adjList" + i).css({left: -width});
     }
 }
 
 function collapseAdjacencyList(index: number) {
-    for (var i = 0; i < nodes; i++) {
+    for (let i = 0; i < nodes; i++) {
         $("#adjList" + i).finish();
     }
 
-    var width: number = $("#adjList" + index).width();
+    let width: number = $("#adjList" + index).width();
     $("#adjList" + index).animate({left: -width});
 
 }
 
 function expandAdjacencyList(index: number) {
-    for (var i = 0; i < nodes; i++) {
+    for (let i = 0; i < nodes; i++) {
         $("#adjList" + i).finish();
         collapseAdjacencyList(i)
     }

Graphs/js/eventManager.js

@@ -5,43 +5,44 @@
 /** Manager for events stored in queue. Manager is also responsible for executing events automatically */
 var eventManager = /** @class */ (function () {
     function eventManager() {
-        this.delayTime = 1000;
+        this.delayTime = 1000; // Original value
         this.nextEvents = [];
         this.previousEvents = [];
+        this.paused = true;
     }
     // Executing the next event in the queue, adding it to 'previous'
     eventManager.prototype.next = function () {
         if (this.nextEvents.length == 0) {
             return;
         }
         var event = this.nextEvents.shift();
-        console.log(this.nextEvents);
         event.next();
-        console.log(event.next());
         this.previousEvents.push(event);
         if (event.duration == 0)
             this.next();
     };
     // Executing the previous event
     eventManager.prototype.previous = function () {
+        this.pause();
         if (this.previousEvents.length == 0)
             return;
         var event = this.previousEvents.pop();
-        this.delayTime = 0; //TODO: Should there be a delay when stepping backwards?
+        //this.delayTime = 500; //this line set to 0 caused: when resuming all animations are played out. Intention Delay when stepping backwards.
         event.previous();
         this.nextEvents.unshift(event);
     };
     eventManager.prototype.addEvent = function (event) {
         this.nextEvents.push(event);
     };
     eventManager.prototype.start = function () {
-        clearInterval(this.eventThread);
         var manager = this; // Anonymous functions cannot access this...
+        this.paused = false;
         this.eventThread = setInterval(function () {
             manager.next();
         }, manager.delayTime);
     };
     eventManager.prototype.pause = function () {
+        this.paused = true;
         clearInterval(this.eventThread);
     };
     return eventManager;

Graphs/js/eventManager.ts

@@ -7,65 +7,66 @@ declare var $;
 
 /** Manager for events stored in queue. Manager is also responsible for executing events automatically */
 class eventManager {
-    delayTime: number = 1000;
+    delayTime: number = 1000; // Original value
     nextEvents: FrontendEvent[] = [];
     previousEvents: FrontendEvent[] = [];
-    eventThread;
+    eventThread: number;
+    paused: boolean = true;
 
     // Executing the next event in the queue, adding it to 'previous'
     next() {
         if (this.nextEvents.length == 0) {
             return;
         }
-        var event = this.nextEvents.shift();
-        console.log(this.nextEvents);
+        let event: FrontendEvent = (<FrontendEvent> this.nextEvents.shift());
         event.next();
-        console.log(event.next());
         this.previousEvents.push(event);
         if (event.duration == 0)
             this.next();
     }
 
     // Executing the previous event
     previous() {
+        this.pause();
         if (this.previousEvents.length == 0)
             return;
-        var event = this.previousEvents.pop();
-        this.delayTime = 0; //TODO: Should there be a delay when stepping backwards?
+        let event: FrontendEvent = (<FrontendEvent> this.previousEvents.pop());
+        //this.delayTime = 500; //this line set to 0 caused: when resuming all animations are played out. Intention Delay when stepping backwards.
         event.previous();
         this.nextEvents.unshift(event);
     }
 
-    addEvent(event) {
+    addEvent(event: FrontendEvent) {
         this.nextEvents.push(event);
     }
 
     start() {
-        clearInterval(this.eventThread);
-        var manager = this; // Anonymous functions cannot access this...
+        let manager = this; // Anonymous functions cannot access this...
+        this.paused = false;
         this.eventThread = setInterval(function () {
             manager.next();
         }, manager.delayTime);
     }
 
     pause() {
+        this.paused = true;
         clearInterval(this.eventThread);
     }
 }
 
 class FrontendEvent {
-    next;
-    previous;
+    next: Function;
+    previous: Function;
     duration: number;
 
-    constructor(n, p, d: number) {
+    constructor(n: Function, p: Function, d: number) {
         this.next = n;
         this.previous = p;
         this.duration = d;
     }
 }
 
-var manager: eventManager = new eventManager();
+let manager: eventManager = new eventManager();
 
 /*
 /** How to add FrontendEvents to manager