Skip to content

Commit c5dbcf2

Browse files
committed
Slite fortsatt litt med view, men har laget tomme metoder
1 parent 06edd7c commit c5dbcf2

File tree

5 files changed

+214
-246
lines changed

5 files changed

+214
-246
lines changed

PortJob/UnionFind/js/bootstrap.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

PortJob/UnionFind/js/drawGraph.ts

+57-75
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
declare var $;
66
declare var javaLog;
77

8-
var animationTime: number = 2500;
8+
var animationTime:number = 2500;
99
var idCounter = 0;
1010

1111
class GraphNode {
@@ -18,7 +18,7 @@ class GraphNode {
1818
top: number;
1919
connectedLines: Array<Line>;
2020

21-
constructor(id: number, value: number) {
21+
constructor(id:number, value:number) {
2222
this.id = id;
2323
this.value = value;
2424
this.children = new Array;
@@ -28,7 +28,7 @@ class GraphNode {
2828
this.top = 0;
2929
}
3030

31-
positionNode(xLayer: number, yLayer: number, time: number): number {
31+
positionNode(xLayer:number, yLayer:number, time:number) : number {
3232

3333
// Basis
3434
if (this.children.length == 0) {
@@ -42,16 +42,16 @@ class GraphNode {
4242
xLayer = child.positionNode(xLayer, yLayer + 1, time);
4343
}
4444

45-
var rightChildNodeLeft: number = this.children[this.children.length - 1].left;
46-
var leftChildNodeLeft: number = this.children[0].left;
45+
var rightChildNodeLeft : number = this.children[this.children.length - 1].left;
46+
var leftChildNodeLeft : number = this.children[0].left;
4747
var x = ((rightChildNodeLeft - leftChildNodeLeft) / 2) + leftChildNodeLeft;
4848

4949
this.moveBothDirections(x, yLayer * 50, time);
5050
return xLayer;
5151
}
5252
}
5353

54-
addChild(child: GraphNode) {
54+
addChild(child : GraphNode) {
5555
// remove from last parents child list
5656
if (child.parent !== undefined && child.parent !== null) {
5757
child.parent.removeChild(child);
@@ -61,7 +61,7 @@ class GraphNode {
6161
this.children.push(child);
6262

6363
//Add line
64-
var line: Line = new Line(idCounter++, this, child);
64+
var line : Line = new Line(idCounter++, this, child);
6565
this.connectedLines.push(line);
6666
child.connectedLines.push(line);
6767
}
@@ -70,7 +70,7 @@ class GraphNode {
7070
removeChild(child: GraphNode) {
7171
//Remove child from children-array
7272
if (this.children.indexOf(child) != -1) {
73-
var index: number = this.children.indexOf(child);
73+
var index:number = this.children.indexOf(child);
7474
this.children.splice(index, 1);
7575
}
7676

@@ -79,7 +79,7 @@ class GraphNode {
7979
}
8080

8181
//Remove the line between us
82-
var line: Line = this.removeLineToNode(child);
82+
var line:Line = this.removeLineToNode(child);
8383
child.removeLineToNode(this);
8484

8585
//Remove the line from the screen
@@ -89,27 +89,27 @@ class GraphNode {
8989

9090
}
9191

92-
removeLineToNode(node: GraphNode): Line {
93-
for (var i: number = 0; i < this.connectedLines.length; i++) {
92+
removeLineToNode(node : GraphNode) : Line {
93+
for (var i : number = 0; i < this.connectedLines.length; i++) {
9494
if (this.connectedLines[i].child.id == node.id || this.connectedLines[i].parent.id == node.id) {
9595
return this.connectedLines.splice(i, 1)[0]; //Remove from array and return the line (for screen removal)
9696
}
9797
}
9898
}
9999

100-
moveSideways(newLeftValue: number, time: number) {
100+
moveSideways(newLeftValue:number, time:number) {
101101
this.left = newLeftValue;
102-
$("#node" + this.id).clearQueue().animate({left: newLeftValue + "px"}, time);
103-
for (var i: number = 0; i < this.connectedLines.length; i++) {
102+
$("#node" + this.id).clearQueue().animate({left : newLeftValue + "px"}, time);
103+
for (var i : number = 0; i < this.connectedLines.length; i++) {
104104
this.connectedLines[i].animateLinePoint(this, time);
105105
}
106106
}
107107

108-
moveBothDirections(newLeftValue: number, newTopValue: number, time: number) {
108+
moveBothDirections(newLeftValue:number, newTopValue:number, time:number) {
109109
this.left = newLeftValue;
110110
this.top = newTopValue;
111-
$("#node" + this.id).clearQueue().animate({left: newLeftValue + "px", top: newTopValue + "px"}, time);
112-
for (var i: number = 0; i < this.connectedLines.length; i++) {
111+
$("#node" + this.id).clearQueue().animate({left: newLeftValue + "px", top : newTopValue + "px"}, time);
112+
for (var i : number = 0; i < this.connectedLines.length; i++) {
113113
this.connectedLines[i].animateLinePoint(this, time);
114114
}
115115
}
@@ -125,11 +125,11 @@ class GraphNode {
125125

126126
// This class holds information about svg-lines between nodes
127127
class Line {
128-
id: number;
129-
parent: GraphNode;
130-
child: GraphNode;
128+
id : number;
129+
parent : GraphNode;
130+
child : GraphNode;
131131

132-
constructor(id: number, parent: GraphNode, child: GraphNode) {
132+
constructor(id : number, parent : GraphNode, child : GraphNode) {
133133
this.id = id;
134134
this.parent = parent;
135135
this.child = child;
@@ -138,55 +138,39 @@ class Line {
138138
var $parent = $("#node" + parent.id);
139139
var $child = $("#node" + child.id);
140140
// JQuery have no support for creating svg elements yet, using JavaScript instead
141-
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
142-
newLine.setAttribute('id', 'line' + this.id);
143-
newLine.setAttribute('x1', $parent.position().left + width / 2);
144-
newLine.setAttribute('y1', $parent.position().top + width / 2);
145-
newLine.setAttribute('x2', $child.position().left + width / 2);
146-
newLine.setAttribute('y2', $child.position().top + width / 2); // TODO: Line is placed too late after node has moved
141+
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
142+
newLine.setAttribute('id' , 'line' + this.id);
143+
newLine.setAttribute('x1' , $parent.position().left + width/2);
144+
newLine.setAttribute('y1' , $parent.position().top + width/2);
145+
newLine.setAttribute('x2' , $child.position().left + width/2);
146+
newLine.setAttribute('y2' , $child.position().top + width/2); // TODO: Line is placed too late after node has moved
147147
$("#graphUL svg#lines").append(newLine);
148148
$("#line" + id).removeClass('hidden');
149149
}
150150

151151
//Animate either the child side of the line or the parent side based on what node is passed
152-
animateLinePoint(node: GraphNode, animationTime: number) {
153-
var width: number = $("#node" + node.id).outerWidth();
152+
animateLinePoint(node:GraphNode, animationTime:number) {
153+
var width : number = $("#node" + node.id).outerWidth();
154154

155155
var $line = $("#line" + this.id);
156-
var parentPoint: boolean = (this.parent.id == node.id);
156+
var parentPoint:boolean = (this.parent.id == node.id);
157157
if (parentPoint) {
158-
$({x1: $line.attr('x1')})
159-
.animate({x1: this.parent.left + width / 2}, {
160-
duration: animationTime, step: function (now) {
161-
$line.attr('x1', now);
162-
}
163-
});
164-
$({y1: $line.attr('y1')})
165-
.animate({y1: this.parent.top + width / 2}, {
166-
duration: animationTime, step: function (now) {
167-
$line.attr('y1', now);
168-
}
169-
});
158+
$({x1:$line.attr('x1')})
159+
.animate({x1: this.parent.left + width/2}, {duration:animationTime,step:function(now){$line.attr('x1', now);}});
160+
$({y1:$line.attr('y1')})
161+
.animate({y1: this.parent.top + width/2}, {duration:animationTime,step:function(now){$line.attr('y1', now);}});
170162
} else {
171163
$({x2: $line.attr('x2')})
172-
.animate({x2: this.child.left + width / 2}, {
173-
duration: animationTime, step: function (now) {
174-
$line.attr('x2', now);
175-
}
176-
});
164+
.animate({x2: this.child.left + width/2}, {duration: animationTime, step: function (now) {$line.attr('x2', now);}});
177165
$({y2: $line.attr('y2')})
178-
.animate({y2: this.child.top + width / 2}, {
179-
duration: animationTime, step: function (now) {
180-
$line.attr('y2', now);
181-
}
182-
});
166+
.animate({y2: this.child.top + width/2}, {duration: animationTime, step: function (now) {$line.attr('y2', now);}});
183167
}
184168
}
185169
}
186170

187171
// Top node - not visible
188-
var superNode: GraphNode = new GraphNode(-1, 0);
189-
var allNodes: Array<GraphNode> = new Array;
172+
var superNode : GraphNode = new GraphNode(-1, 0);
173+
var allNodes : Array<GraphNode> = new Array;
190174

191175
function createAndDrawNodes(numberOfNodes) {
192176

@@ -195,8 +179,8 @@ function createAndDrawNodes(numberOfNodes) {
195179
superNode.children = new Array;
196180
allNodes = new Array;
197181

198-
for (var i = 0; i < numberOfNodes; i++) {
199-
var node: GraphNode = new GraphNode(i, i);
182+
for (var i=0; i<numberOfNodes; i++) {
183+
var node : GraphNode = new GraphNode(i, i);
200184

201185
// Add node to nodeList
202186
allNodes.push(node);
@@ -213,18 +197,18 @@ function createAndDrawNodes(numberOfNodes) {
213197
positioningNodes(1500);
214198
}
215199

216-
function positioningNodes(time: number) {
200+
function positioningNodes(time:number) {
217201
// Position the whole graph
218202
superNode.positionNode(0, -1, time);
219203
centerDivWidthNodes(time);
220204
}
221205

222-
function getTotalWidthOfNodes(): number {
223-
var leftNodePx: number = 2000;
224-
var rightNodePx: number = -2000;
225-
var width: number = 0;
226-
allNodes.forEach(function (node) {
227-
var left: number = node.left;
206+
function getTotalWidthOfNodes() : number {
207+
var leftNodePx : number = 2000;
208+
var rightNodePx : number = -2000;
209+
var width : number = 0;
210+
allNodes.forEach(function(node) {
211+
var left : number = node.left;
228212
if (left < leftNodePx) {
229213
leftNodePx = left;
230214
}
@@ -237,32 +221,30 @@ function getTotalWidthOfNodes(): number {
237221
}
238222

239223
function getSpaceBetweenDivAndLeftNode() {
240-
var divWidth: number = $("div#nodes").width();
224+
var divWidth : number = $("div#nodes").width();
241225
return divWidth / 2 - getTotalWidthOfNodes() / 2;
242226
}
243227

244-
function centerDivWidthNodes(time: number): void {
228+
function centerDivWidthNodes(time:number) : void {
245229
$("#graphUL").finish(); // if already animating, finish animation
246-
$("#graphUL").animate({left: getSpaceBetweenDivAndLeftNode()}, time);
230+
$("#graphUL").animate({ left : getSpaceBetweenDivAndLeftNode() }, time);
247231
}
248232

249-
window.addEventListener('resize', function () {
250-
centerDivWidthNodes(animationTime)
251-
});
233+
window.addEventListener('resize', function() { centerDivWidthNodes(animationTime) });
252234

253-
function getGraphState(): string {
254-
var state: Array<Array<number>> = [];
255-
for (var nodeIndex: number = 0; nodeIndex < allNodes.length; nodeIndex++) {
235+
function getGraphState() : string{
236+
var state:Array<Array<number>> = [];
237+
for (var nodeIndex:number = 0; nodeIndex < allNodes.length; nodeIndex++) {
256238
state.push(new Array);
257-
for (var childIndex: number = 0; childIndex < allNodes[nodeIndex].children.length; childIndex++) {
239+
for (var childIndex:number = 0; childIndex < allNodes[nodeIndex].children.length; childIndex++) {
258240
state[nodeIndex].push(allNodes[nodeIndex].children[childIndex].id);
259241
}
260242
}
261243
return JSON.stringify(state).toString();
262244
}
263245

264-
function getArrayState(): string {
265-
var state: Array<number> = [];
246+
function getArrayState() : string {
247+
var state:Array<number> = [];
266248

267249
for (var i = 0; i < allNodes.length; i++) {
268250
state.push(parseInt($("#arrayElem" + i + " div.content").text()));

PortJob/UnionFind/js/jquery.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)