Skip to content

Commit 66e898f

Browse files
andsprague1andsprague1
committed
Allowed the graph to be used to select nodes
1 parent 0ec20b3 commit 66e898f

File tree

3 files changed

+319
-80
lines changed

3 files changed

+319
-80
lines changed

‎Main/WebService/GraphBuilder.js‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
Raphael.fn.connection = function (obj1, obj2, line, bg) {
2+
if (obj1.line && obj1.from && obj1.to) {
3+
line = obj1;
4+
obj1 = line.from;
5+
obj2 = line.to;
6+
}
7+
var bb1 = obj1.getBBox(),
8+
bb2 = obj2.getBBox(),
9+
p = [{ x: bb1.x + bb1.width / 2, y: bb1.y - 1 },
10+
{ x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1 },
11+
{ x: bb1.x - 1, y: bb1.y + bb1.height / 2 },
12+
{ x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2 },
13+
{ x: bb2.x + bb2.width / 2, y: bb2.y - 1 },
14+
{ x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1 },
15+
{ x: bb2.x - 1, y: bb2.y + bb2.height / 2 },
16+
{ x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2 }],
17+
d = {}, dis = [];
18+
for (var i = 0; i < 4; i++) {
19+
for (var j = 4; j < 8; j++) {
20+
var dx = Math.abs(p[i].x - p[j].x),
21+
dy = Math.abs(p[i].y - p[j].y);
22+
if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
23+
dis.push(dx + dy);
24+
d[dis[dis.length - 1]] = [i, j];
25+
}
26+
}
27+
}
28+
if (dis.length == 0) {
29+
var res = [0, 4];
30+
} else {
31+
res = d[Math.min.apply(Math, dis)];
32+
}
33+
var x1 = p[res[0]].x,
34+
y1 = p[res[0]].y,
35+
x4 = p[res[1]].x,
36+
y4 = p[res[1]].y;
37+
dx = Math.max(Math.abs(x1 - x4) / 2, 10);
38+
dy = Math.max(Math.abs(y1 - y4) / 2, 10);
39+
var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
40+
y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
41+
x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
42+
y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
43+
var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
44+
if (line && line.line) {
45+
line.bg && line.bg.attr({ path: path });
46+
line.line.attr({ path: path });
47+
} else {
48+
var color = typeof line == "string" ? line : "#000";
49+
return {
50+
bg: bg && bg.split && this.path(path).attr({ stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3 }),
51+
line: this.path(path).attr({ stroke: color, fill: "none" }),
52+
from: obj1,
53+
to: obj2
54+
};
55+
}
56+
};
57+
58+
59+
60+
var shapes = [];
61+
var connections = [];
62+
var text = [];
63+
var ID = [];
64+
var elementIDindex = [];
65+
66+
var selectNode = function () {
67+
for (var i = shapes.length; i--;)
68+
{
69+
if (shapes[i].id == this.id)
70+
{
71+
//set the value for the combo box to i will trigger backend function ComponentLabelText
72+
document.getElementById('ComponentLabelText').selectedIndex = i;
73+
document.getElementById('loadSelectedComponent').click();
74+
75+
}
76+
}
77+
}
78+
79+
var dragger = function () {
80+
this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
81+
this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
82+
this.animate({ "fill-opacity": .2 }, 500);
83+
}
84+
var move = function (dx, dy) {
85+
var att = this.type == "rect" ? { x: this.ox + dx, y: this.oy + dy } : { cx: this.ox + dx, cy: this.oy + dy };
86+
this.attr(att);
87+
for (var i = connections.length; i--;) {
88+
rpaper.connection(connections[i]);
89+
}
90+
for (var i = shapes.length; i--;)
91+
{
92+
if (this.id == elementIDindex[i])
93+
{
94+
95+
}
96+
}
97+
}
98+
up = function () {
99+
this.animate({ "fill-opacity": 0 }, 500);
100+
}
101+
function LoadExperiment(x) {
102+
rpaper = Raphael("holder", 1000, 800),
103+
shapes = [],
104+
connections = [],
105+
text = [],
106+
ID = [];
107+
rpaper.clear();
108+
rpaper.rect(0, 0, 1000, 800, 10).attr({ fill: "#eee", stroke: "none" });
109+
110+
};
111+
function addNode(x, y, w, l, Text, Identifier) {
112+
shapes.push(rpaper.rect(x, y, w, l));
113+
ID.push(Identifier);
114+
text.push(rpaper.text(x + w / 2, y + l / 2, Text));
115+
116+
elementIDindex.push(shapes.id);
117+
118+
//for (var i = 0, ii = shapes.length; i < ii; i++) {
119+
// shapes[i].attr({ "stroke-width": 2, cursor: "move" });
120+
// shapes[i].drag(move, dragger, up);
121+
//}
122+
}
123+
function addLink(targetID, sourceID) {
124+
var i = 0;
125+
var j = 0;
126+
while (i < ID.length) {
127+
if (ID[i] == targetID) {
128+
break;
129+
}
130+
else {
131+
i++;
132+
}
133+
}
134+
while (j < ID.length) {
135+
if (ID[j] == sourceID) {
136+
break;
137+
}
138+
else {
139+
j++;
140+
}
141+
}
142+
143+
connections.push(rpaper.connection(shapes[i], shapes[j], "#000"));
144+
145+
}
146+
147+
function resetNodeHandlers() {
148+
149+
for (var i = 0, ii = shapes.length; i < ii; i++) {
150+
shapes[i].attr({ "stroke-width": 2, cursor: "move" });
151+
shapes[i].drag(move, dragger, up);
152+
shapes[i].click(selectNode);
153+
}
154+
}

‎Main/WebService/TraceLab_UI.aspx‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -50,84 +50,84 @@
5050
// // paper.text(290+30, 80+20, "Trace");
5151
// connections.push(paper.connection(shapes[0], shapes[1], "#000"));
5252
53-
//};
54-
var shapes = [];
55-
var connections = [];
56-
var text = [];
57-
var ID = [];
53+
//////};
54+
////var shapes = [];
55+
////var connections = [];
56+
////var text = [];
57+
////var ID = [];
5858
59-
var dragger = function () {
60-
this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
61-
this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
59+
//// var dragger = function () {
60+
//// this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
61+
//// this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
6262
63-
}
64-
move = function (dx, dy) {
65-
var att = this.type == "rect" ? { x: this.ox + dx, y: this.oy + dy } : { cx: this.ox + dx, cy: this.oy + dy };
66-
this.attr(att);
67-
for (var i = connections.length; i--;) {
68-
rpaper.connection(connections[i]);
69-
}
70-
}
71-
up = function () {
63+
//// }
64+
//// move = function (dx, dy) {
65+
//// var att = this.type == "rect" ? { x: this.ox + dx, y: this.oy + dy } : { cx: this.ox + dx, cy: this.oy + dy };
66+
//// this.attr(att);
67+
//// for (var i = connections.length; i--;) {
68+
//// rpaper.connection(connections[i]);
69+
//// }
70+
//// }
71+
//// up = function () {
7272
73-
}
74-
function LoadExperiment(x) {
75-
rpaper = Raphael("holder", 1000, 800),
76-
shapes=[],
77-
connections = [],
78-
text = [],
79-
ID = [];
80-
rpaper.clear();
81-
rpaper.rect(0, 0, 1000, 800, 10).attr({ fill: "#eee", stroke: "none" });
73+
//// }
74+
////function LoadExperiment(x) {
75+
//// rpaper = Raphael("holder", 1000, 800),
76+
//// shapes=[],
77+
//// connections = [],
78+
//// text = [],
79+
//// ID = [];
80+
//// rpaper.clear();
81+
//// rpaper.rect(0, 0, 1000, 800, 10).attr({ fill: "#eee", stroke: "none" });
8282
83-
};
84-
function addNode(x, y, w, l,Text,Identifier) {
85-
shapes.push(rpaper.rect(x, y, w, l));
86-
ID.push(Identifier);
87-
text.push(rpaper.text(x + w / 2, y + l / 2, Text));
83+
////};
84+
////function addNode(x, y, w, l,Text,Identifier) {
85+
//// shapes.push(rpaper.rect(x, y, w, l));
86+
//// ID.push(Identifier);
87+
//// text.push(rpaper.text(x + w / 2, y + l / 2, Text));
8888
89-
for (var i = 0, ii = shapes.length; i < ii; i++) {
90-
shapes[i].attr({"stroke-width": 2, cursor: "move" });
91-
shapes[i].drag(move, dragger, up);
92-
text[i].attr({cursor: "move"})
93-
text[i].drag(move, dragger, up);
94-
}
95-
}
96-
function addLink(targetID, sourceID)
97-
{
98-
var i = 0;
99-
var j = 0;
100-
while (i < ID.length) {
101-
if (ID[i] == targetID) {
102-
break;
103-
}
104-
else {
105-
i++;
106-
}
107-
}
108-
while (j < ID.length) {
109-
if (ID[j] == sourceID) {
110-
break;
111-
}
112-
else {
113-
j++;
114-
}
115-
}
89+
//// for (var i = 0, ii = shapes.length; i < ii; i++) {
90+
//// shapes[i].attr({"stroke-width": 2, cursor: "move" });
91+
//// shapes[i].drag(move, dragger, up);
92+
//// text[i].attr({cursor: "move"})
93+
//// text[i].drag(move, dragger, up);
94+
//// }
95+
////}
96+
////function addLink(targetID, sourceID)
97+
////{
98+
//// var i = 0;
99+
//// var j = 0;
100+
//// while (i < ID.length) {
101+
//// if (ID[i] == targetID) {
102+
//// break;
103+
//// }
104+
//// else {
105+
//// i++;
106+
//// }
107+
//// }
108+
//// while (j < ID.length) {
109+
//// if (ID[j] == sourceID) {
110+
//// break;
111+
//// }
112+
//// else {
113+
//// j++;
114+
//// }
115+
//// }
116116
117-
connections.push(rpaper.connection(shapes[i], shapes[j], "#000"));
117+
//// connections.push(rpaper.connection(shapes[i], shapes[j], "#000"));
118118
119-
}
119+
////}
120120
121-
function resetNodeHandlers()
122-
{
121+
////function resetNodeHandlers()
122+
////{
123123
124-
for (var i = 0, ii = shapes.length; i < ii; i++) {
125-
shapes[i].attr({ "stroke-width": 2, cursor: "move" });
126-
shapes[i].drag(move, dragger, up);
127-
text[i].attr({ cursor: "move" })
128-
text[i].drag(move, dragger, up);
129-
}
130-
}
124+
//// for (var i = 0, ii = shapes.length; i < ii; i++) {
125+
//// shapes[i].attr({ "stroke-width": 2, cursor: "move" });
126+
//// shapes[i].drag(move, dragger, up);
127+
//// text[i].attr({ cursor: "move" })
128+
//// text[i].drag(move, dragger, up);
129+
//// }
130+
////}
131131
132132
</script>
133133
</head>

0 commit comments

Comments
 (0)