Mercurial > hg > Members > nobuyasu > html > graphViewer
annotate show.html @ 19:3c02336869d4 draft
modified show.html
| author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
|---|---|
| date | Thu, 21 Mar 2013 20:57:33 +0900 |
| parents | cfdce8445a14 |
| children | 864c47b06e85 |
| rev | line source |
|---|---|
| 11 | 1 #{extends 'main.html' /} |
| 2 #{set title:messages.get('AAEvidenceSiftingModel.userdesktops.show.title') /} | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
3 |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
4 #{set 'moreStyles'} |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
5 <link rel="stylesheet" href="/aat/public/viewer/css/viewer_form.css"> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
6 #{/set} |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
7 #{set 'moreScripts'} |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
8 <script type="text/javascript" src="@{'/public/viewer/js/lib/jquery-ui-1.8.23-min.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
9 <script type="text/javascript" src="@{'/public/viewer/js/lib/jquery.ui.touch-punch.min.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
10 <script type="text/javascript" src="@{'/public/viewer/js/lib/jsBezier-0.4-min.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
11 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-util-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
12 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-dom-adapter-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
13 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
14 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-defaults-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
15 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-renderers-svg-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
16 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
17 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
18 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
19 <script type="text/javascript" src="@{'/public/viewer/js/1.3.15/jquery.jsPlumb-1.3.15-all-min.js'}" charset="${_response_encoding}"></script> |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
20 #{/set} |
| 11 | 21 |
| 22 <div id="page"> | |
| 23 <div class="title"> | |
| 24 &{'AAEvidenceSiftingModel.userdesktops.show.title'} [ ${desktop.project.name} ] | |
| 25 </div> | |
| 26 <ul > | |
| 27 <li>> <a href="@{AAEvidenceSiftingModel.UserHomes.index()}">&{'navigation.back'}</a></li> | |
| 28 <li>> <a href="@{AAEvidenceSiftingModel.Projects.show(desktop.id)}">&{'AAEvidenceSiftingModel.projects.show.title'}</a></li> | |
| 29 </ul> | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
30 <script type="text/javascript">var _desktopid = ${desktop.id};function desktopid(){return _desktopid;}</script> |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
31 <div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid |
|
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
32 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'> |
| 11 | 33 <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div> |
| 13 | 34 <div id="closeTraverseDisplay" style='position:absolute; right:5px; top:-3px; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >CLOSE</div> |
| 11 | 35 <div style='position:absolute; width:90%; height:90%;'> |
| 36 <div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'> | |
| 37 <div id="traverseDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'> | |
| 38 Traverse | |
| 39 </div> | |
| 40 <div style='position:absolute; top:30px; width:100%; margin-left:10px;'> Direction: | |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
41 <label style='position:relative;' ><input id="direction_in" type='radio' value='in' name='direction' checked value='in' checked />IN</label> |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
42 <label style='position:relative;'><input id="direction_out" type='radio' value='out' name='direction' value='out'/>OUT</label> |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
43 </form> |
| 11 | 44 </div> |
| 45 <div id="traverseDisplayBody" style='position:absolute; left:20px; top:50px;'> | |
| 46 Please click any node. | |
| 47 </div> | |
| 48 </div> | |
| 49 </div> | |
|
17
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
50 <span class='button' style='position:absolute; width:100px; left:75px; bottom:5px; opacity:1;' onclick='traverseAction();'>traverse</span> |
| 11 | 51 </div> |
| 52 | |
| 53 <div id="miniDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'> | |
| 54 <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div> | |
| 13 | 55 <div id="closeMiniDisplay" style='position:absolute; right:5px; top:-3px; z-index:10; color:white;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','yellow');" onmouseout="$('#closeMiniDisplay').css('color','white')" >CLOSE</div> |
| 11 | 56 <div style='position:absolute; width:90%; height:90%;'> |
| 57 <div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'> | |
| 58 <div id="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'> | |
| 59 </div> | |
| 60 <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'> | |
| 61 Please click any node. | |
| 62 </div> | |
| 63 </div> | |
| 64 </div> | |
|
14
6b91db54a9f3
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
13
diff
changeset
|
65 <nobr style='position:absolute; width:100%; bottom:5px;'> |
|
17
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
66 <span class='button' id="acceptButton" style='position:absolute; width:50px; left:5px; bottom:5px; opacity:1;' value='accept' onclick="statePost($('#acceptButton'));">accept</span> |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
67 <span class='button' id="rejectButton" style='position:absolute; width:50px; left:65px; bottom:5px; opacity:1; ' value='rejecte' onclick="statePost($('#rejectButton'));">reject</span> |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
68 <span class='button' id="retractButton" style='position:absolute; width:50px; left:125px; bottom:5px; opacity:1; ' value='retract' onclick="statePost($('#retractButton'));">retract</span> |
|
14
6b91db54a9f3
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
13
diff
changeset
|
69 </nobr> |
| 11 | 70 </div> |
| 71 | |
| 72 <div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'> | |
| 73 <div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'> | |
| 74 </div> | |
| 75 </div> | |
| 76 | |
| 77 <script type="text/javascript"> | |
| 78 var BASE_URL = ""; | |
| 79 if(!Array.prototype.filter){ | |
| 80 Array.prototype.filter=function(func){ | |
| 81 var arr=[]; | |
| 82 for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); | |
| 83 return arr; | |
| 84 } | |
| 85 } | |
| 86 | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
87 var arrowConnector = { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
88 connector:"StateMachine", |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
89 // paintStyle:{lineWidth:3,strokeStyle:"#056"}, |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
90 paintStyle:{lineWidth:2,strokeStyle:"#aaf"}, |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
91 hoverPaintStyle:{strokeStyle:"#dbe300"}, |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
92 endpoint:"Blank", |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
93 anchor:"Continuous", |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
94 overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]] |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
95 }; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
96 |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
97 var arrowBothConnector = { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
98 connector:"StateMachine", |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
99 paintStyle:{lineWidth:2,strokeStyle:"#aaf"}, |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
100 hoverPaintStyle:{strokeStyle:"#dbe300"}, |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
101 endpoint:"Blank", |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
102 }; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
103 |
| 11 | 104 function GraphData() { |
| 105 var graphData = {}; | |
| 106 graphData.nodes = {}; | |
| 107 graphData.edges = {}; | |
| 108 return graphData; | |
| 109 } | |
| 110 | |
| 111 function Edge(fromNode, toNode, relation) { | |
| 112 var obj = {from:fromNode, to:toNode, rel:relation }; | |
| 113 return obj; | |
| 114 } | |
| 115 | |
| 116 var DragHandler = { | |
| 117 _oElem : null, | |
| 118 _id : null, | |
| 119 attach : function(oElem) { | |
| 120 oElem.onmousedown = DragHandler._dragBegin; | |
| 121 return oElem; | |
| 122 }, | |
| 123 _dragBegin : function(e) { | |
| 124 var oElem = DragHandler._oElem = this; | |
| 125 if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; } | |
| 126 if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; } | |
| 127 var x = parseInt(oElem.style.left); | |
| 128 var y = parseInt(oElem.style.top); | |
| 129 e = e ? e : window.event; | |
| 130 oElem.mouseX = e.clientX; | |
| 131 oElem.mouseY = e.clientY; | |
| 132 document.onmousemove = DragHandler._drag; | |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
133 document.onmouseup = DragHandler._dragEnd; |
| 11 | 134 return false; |
| 135 }, | |
| 136 _drag : function(e) { | |
| 137 var oElem = DragHandler._oElem; | |
| 138 var x = parseInt(oElem.style.left); | |
| 139 var y = parseInt(oElem.style.top); | |
| 140 e = e ? e : window.event; | |
| 141 var nextX = x + (e.clientX - oElem.mouseX); | |
| 142 var nextY = y + (e.clientY - oElem.mouseY); | |
| 143 oElem.style.left = nextX + 'px'; | |
| 144 oElem.style.top = nextY + 'px'; | |
| 145 oElem.mouseX = e.clientX; | |
| 146 oElem.mouseY = e.clientY; | |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
147 if (oElem.nodeId) { |
|
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
148 var id = oElem.nodeId; |
|
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
149 var node = GRAPH_DATA.nodes[id]; |
| 11 | 150 node.position.x = nextX; |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
151 node.position.y = nextY; |
| 11 | 152 } |
| 153 return false; | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
154 }, |
| 11 | 155 _dragEnd : function() { |
| 156 var oElem = DragHandler._oElem; | |
| 157 document.onmousemove = null; | |
| 158 document.onmouseup = null; | |
| 159 DragHandler._oElem = null; | |
|
17
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
160 if (oElem.nodeId) { |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
161 var x = parseInt(oElem.style.left); |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
162 var y = parseInt(oElem.style.top); |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
163 nodePositionPost(oElem.nodeId, x, y); |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
164 } |
| 11 | 165 } |
| 166 | |
| 167 }; | |
| 168 | |
| 169 function writeMiniDisplay(title,str) { | |
| 170 $('#miniDisplayBody')[0].innerHTML = str; | |
| 171 if(title) { | |
| 172 $('#miniDisplayTitle')[0].innerHTML = title; | |
| 173 } | |
| 174 } | |
| 175 | |
| 176 function writeJSONDataToMiniDisplay(jsonObj) { | |
| 177 var str = ""; | |
| 178 for (var key in jsonObj.property) { | |
| 179 if (key != 'edgeInfo' ) { | |
| 180 str = str + key + ": "+ jsonObj.property[key] + "<br>"; | |
| 181 } | |
| 182 } | |
| 183 writeMiniDisplay(jsonObj.property.title, str); | |
| 184 } | |
| 185 | |
| 186 function getTraverseDivTemplate(kind, inNum, outNum) { | |
| 187 return "<div><label id='traverseLabel'><input type='checkbox' checked value='"+kind+"'/>"+kind+"</label><br>in:"+inNum+" out:"+outNum+"</div>"; | |
| 188 } | |
| 189 | |
| 190 function createTraverseView(info) { | |
| 191 var viewHtml = ""; | |
| 192 for (var kind in info) { | |
| 193 var data = info[kind]; | |
| 194 var inNum = 0; | |
| 195 var outNum = 0; | |
| 196 if (data['in']) { | |
| 197 inNum = data['in']; | |
| 198 } | |
| 199 if (data['out']) { | |
| 200 outNum = data['out']; | |
| 201 } | |
| 202 viewHtml = viewHtml + getTraverseDivTemplate(kind, inNum, outNum); | |
| 203 } | |
| 204 return viewHtml; | |
| 205 } | |
| 206 | |
| 207 function createEdgeInfoView(node) { | |
| 208 var id = node.property.id; | |
| 209 var edgeInfo = node.property.edgeInfo; | |
| 210 var str = ""; | |
| 211 var info = {}; | |
| 212 for (var i=0; i<edgeInfo.length; i++) { | |
| 213 var kind = edgeInfo[i].kind; | |
| 214 var dir = edgeInfo[i].direction; | |
| 215 var num = edgeInfo[i].num; | |
| 216 info[kind] = {}; | |
| 217 info[kind][dir] = num; | |
| 218 } | |
| 219 var viewHTML = createTraverseView(info); | |
| 220 edgeInfo.viewHtml = viewHTML; | |
| 221 $('#traverseDisplayBody')[0].innerHTML = viewHTML; | |
| 222 } | |
| 223 | |
| 224 function init() { | |
| 225 jsPlumb.importDefaults({ | |
| 226 Connector : [ "Straight", { curviness:50 } ], | |
| 227 PaintStyle : { strokeStyle:"gray", lineWidth:2 }, | |
| 228 EndpointStyle : {}, | |
| 229 Anchors: ["BottomCenter","TopCenter"], | |
| 230 }); | |
| 231 var rootDiv = $('#graphMain'); | |
| 232 var rootLeft = rootDiv.offset().left; | |
| 233 var rootTop = rootDiv.offset().top; | |
| 234 $('#traverseDisplay').css( { | |
| 235 left: rootLeft, | |
| 236 top: rootTop | |
| 237 }); | |
| 238 var heightStr = $('#traverseDisplay').css('height').split('px')[0]; | |
| 239 var height = parseInt(heightStr); | |
| 240 $('#miniDisplay').css( { | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
241 left: rootLeft + 'px', |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
242 top: rootTop + height + 50 + 'px' |
| 11 | 243 }); |
| 244 } | |
| 245 | |
| 246 function showMiniDisplay(node) { | |
| 247 $("#miniDisplay").css("visibility", "visible"); | |
| 248 writeJSONDataToMiniDisplay(node); | |
| 249 } | |
| 250 | |
| 251 function showTraverseDisplay(node) { | |
| 252 this.id = node.property.id; | |
| 253 if (!node.property.edgeInfo) { console.log("not found node.edgeInfo "); return; } | |
| 254 if (!node.property.edgeInfo.viewHtml) { | |
| 255 createEdgeInfoView(node); | |
| 256 } | |
| 257 $('#traverseDisplayBody')[0].innerHTML = node.property.edgeInfo.viewHtml; | |
| 258 $("#traverseDisplay").css("visibility", "visible"); | |
| 259 } | |
| 260 | |
| 261 var nodeNum = 0; | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
262 var OFFSET = 300; |
| 11 | 263 var miniD = $('#miniDisplay')[0].style; |
| 264 var offsetLeft = parseInt(miniD.width.split('px')[0]); | |
| 265 var offsetTop = parseInt(miniD.height.split('px')[0]); | |
| 266 function calcNewNodePosition() { | |
| 267 var position = {}; | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
268 position = {x: offsetLeft+OFFSET, y: nodeNum*OFFSET + offsetTop / 3}; |
| 11 | 269 nodeNum++; |
| 270 return position; | |
| 271 } | |
| 272 | |
| 273 /* | |
| 274 * | |
| 275 */ | |
| 276 function clickNodeDiv(id) { | |
| 277 var graphData = GRAPH_DATA; | |
| 278 var node = graphData.nodes[id]; | |
| 279 var rels = {evidence:1, | |
| 280 dependency:1, | |
| 281 derived:1, | |
| 282 version:1, | |
| 283 agreement:1}; | |
| 284 showRelationNodes(graphData, node, rels); | |
| 285 } | |
| 286 | |
| 287 function addEdgeInfo(id, kind, direction) { | |
| 288 var nodes = GRAPH_DATA.nodes; | |
| 289 var edges = GRAPH_DATA.edges; | |
| 290 | |
| 291 } | |
| 292 | |
|
12
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
293 function showEdgesAndNodes(graphData,jsonData,kind) { |
| 11 | 294 var nodes = graphData.nodes; |
| 295 var jsonNodes = jsonData.nodes; | |
| 296 for (var i=0; i<jsonNodes.length; i++) { | |
| 297 var id = jsonNodes[i].id; | |
| 298 updateNode(nodes[id]); | |
| 299 } | |
| 300 var edges = graphData.edges; | |
| 301 var jsonEdges = jsonData.edges; | |
|
12
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
302 for (var i=0; i<jsonEdges.length; i++) { |
|
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
303 var edge = edges[jsonEdges[i].id]; |
|
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
304 edge.property.kind = kind; |
|
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
305 showEdge(graphData, edge); |
| 11 | 306 } |
| 307 showAllEdge(graphData); | |
| 308 } | |
| 309 | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
310 function getEvidence(id, kind, direction, edgeInfoId) { |
| 11 | 311 $.ajax({ |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
312 url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid() + "&id="+id+"&kind="+kind+"&direction="+direction+"&edgeinfoid="+edgeInfoId, |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
313 success:function(o) { console.log(this.url); parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]); showEdgesAndNodes(GRAPH_DATA, o, kind);}, |
| 11 | 314 type:"GET", cache:true, |
| 315 error:function(o) { console.log("getEvidence error : ", o); } | |
| 316 }); | |
| 317 } | |
| 318 | |
|
17
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
319 function postToServer(parameter) { |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
320 $.ajax({ |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
321 url:"/aat/aaevidencesiftingmodel.userdesktops/update?"+parameter, |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
322 success:function(o) {console.log("success postToServer URL:"+this.url); }, |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
323 type:"POST", cache:true, |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
324 error:function(o) { console.log("post error : ", o); } |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
325 }); |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
326 } |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
327 |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
328 function statePost(buttonEle) { |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
329 var id = this.id; |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
330 var state = buttonEle.html(); |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
331 postToServer("id="+id+"&state="+state); |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
332 } |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
333 |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
334 function nodePositionPost(id, coordX, coordY) { |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
335 postToServer("id="+id+"&coordX="+coordX+"&coordY="+coordY); |
|
17
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
336 } |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
337 |
|
02b5c7fe5d08
implemented post function for state change and node position
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
16
diff
changeset
|
338 function traverseAction() { |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
339 var inDirChecked = $('#direction_in').is(':checked'); |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
340 var outDirChecked = $('#direction_out').is(':checked'); |
| 11 | 341 var labelTags = $('[id=traverseLabel]'); |
| 342 var kinds = []; | |
| 343 for (var i=0;i<labelTags.length; i++ ) { | |
| 344 var inputTag = labelTags[i].children[0]; | |
| 345 if (inputTag.checked) { | |
| 346 kinds.push(inputTag.value); | |
| 347 } | |
| 348 } | |
| 349 var id = this.id; | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
350 var edgeInfoArray = GRAPH_DATA.nodes[id].property.edgeInfo; |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
351 var edgeInfos = {}; |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
352 for (var i=0; i<edgeInfoArray.length; i++) { |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
353 var edgeInfo = edgeInfoArray[i]; |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
354 var kind = edgeInfo.kind; |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
355 edgeInfos[kind] = {}; |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
356 edgeInfos[kind][edgeInfo.direction] = edgeInfo; |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
357 } |
| 11 | 358 for (var i=0; i<kinds.length; i++) { |
| 359 var kind = kinds[i]; | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
360 var edgeInfo = edgeInfos[kind]; |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
361 if (inDirChecked && edgeInfo.in) getEvidence(id, kind, "in", edgeInfo.in.id); |
|
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
362 if (outDirChecked && edgeInfo.out ) getEvidence(id, kind, "out", edgeInfo.out.id); |
| 11 | 363 } |
| 364 } | |
| 365 | |
| 366 function createNodeDiv(node) { | |
| 367 node.view = $("<div class='graphNode'/>"); | |
| 368 node.view.click(function(){ clickNodeDiv(node.property.id) }); | |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
369 if(!node.position) { |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
370 node.position = calcNewNodePosition(); |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
371 } |
| 11 | 372 node.view.hover(); |
| 373 var div = $("<div class='graphNodeContent' />")[0]; | |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
374 div.id = node.property.id; |
| 11 | 375 div.innerHTML = node.property.title; |
| 376 node.view[0].appendChild(div); | |
| 377 return node; | |
| 378 } | |
| 379 | |
| 380 function updateNodeElement(node) { | |
| 381 var created = false; | |
| 382 if(!node.view) { | |
| 383 created = true; | |
| 384 createNodeDiv(node); | |
| 385 } | |
| 386 var div = node.view; | |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
387 node.view[0].nodeId = node.property.id; |
| 11 | 388 // div.text(node.property.title); |
| 389 div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);}); | |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
390 DragHandler.attach($(node.view)[0]); |
| 11 | 391 var kindBackground = {agree:"#aaf", rejected:"#fff"}; |
| 392 var kindBorder = {agree:"#66a", rejected:"#a66"}; | |
| 393 div.css("background", kindBackground[node.kind]||"white"); | |
| 394 div.css("border-color", kindBorder[node.kind] ||"#58f"); | |
| 395 div.css({ | |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
396 left: node.position.x + 'px', |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
397 top: node.position.y + 'px' |
|
15
ed6b969b2fc8
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
14
diff
changeset
|
398 }); |
| 11 | 399 return created; |
| 400 } | |
| 401 | |
| 402 | |
| 403 function updateNode(node) { | |
| 404 if(updateNodeElement(node)) { | |
| 405 var fc = $('#graphRoot')[0].firstChild; | |
| 406 if(fc) { | |
| 407 $('#graphRoot')[0].insertBefore(node.view[0], fc); | |
| 408 } else { | |
| 409 $('#graphRoot').append(node.view); | |
| 410 } | |
| 411 } | |
| 412 } | |
| 413 | |
| 414 var ViewParam = { | |
| 415 offsetTop:100, | |
| 416 offsetBottom:100, | |
| 417 offsetLeft:100, | |
| 418 offsetRight:100, | |
| 419 nodeWidth:120, | |
| 420 nodeHeight:60, | |
| 421 intervalX:140, | |
| 422 intervalY:120 | |
| 423 }; | |
| 424 | |
| 425 function parseJSONGraphData(memory ,jsonObj) { | |
| 426 var nodes = jsonObj.nodes; | |
| 427 for (var i=0; i<nodes.length; i++) { | |
| 428 var node = nodes[i]; | |
| 429 if (memory.nodes[node.id]) continue; | |
| 430 memory.nodes[node.id] = {}; | |
| 431 memory.nodes[node.id].in = []; | |
| 432 memory.nodes[node.id].out = []; | |
| 433 memory.nodes[node.id].both = []; | |
| 434 memory.nodes[node.id].property = node; | |
|
19
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
435 if (node.coordX) { |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
436 memory.nodes[node.id].position = {}; |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
437 memory.nodes[node.id].position.x = node.coordX; |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
438 memory.nodes[node.id].position.y = node.coordY; |
|
3c02336869d4
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
18
diff
changeset
|
439 } |
| 11 | 440 } |
| 441 if (!jsonObj.edges) return memory; | |
| 442 var edges = jsonObj.edges; | |
| 443 for (var i=0; i<edges.length; i++) { | |
| 444 var edge = edges[i]; | |
| 445 var edgeId = edge.id; | |
| 446 if (memory.edges[edgeId]) continue; | |
| 447 memory.edges[edgeId] = {}; | |
| 448 memory.edges[edgeId].property = edge; | |
|
12
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
449 memory.edges[edgeId].visible = false; |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
450 memory.nodes[edge.from].out.push(edgeId); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
451 memory.nodes[edge.to].in.push(edgeId); |
| 11 | 452 } |
| 453 return memory; | |
| 454 } | |
| 455 | |
| 456 function showEdge(graphData, edge) { | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
457 function connectEdge(fromNode, toNode, kind) { |
| 11 | 458 var c; |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
459 c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowConnector); |
| 11 | 460 // jsPlumb.select({source:fromNode.view[0]}).removeAllOverlays(); |
|
12
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
461 c.setLabel({label:"<span style='color:#129; font-size:1.5em;'>"+kind+"</span>",cssStyle:""}); |
| 11 | 462 return c; |
| 463 } | |
| 464 if (edge.visible) return; | |
| 465 var fromNode = graphData.nodes[edge.property.from]; | |
| 466 var toNode = graphData.nodes[edge.property.to]; | |
| 467 if (!fromNode.view && !toNode.view) return; | |
|
12
549962a324ac
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
11
diff
changeset
|
468 var kind = edge.property.kind; |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
469 connectEdge(fromNode, toNode, kind); |
| 11 | 470 edge.visible = true; |
| 471 } | |
| 472 | |
| 473 function createNodeFromEdge(graphData, edge, baseNode) { | |
| 474 if(edge.visible) return; | |
| 475 var fromNode = graphData.nodes[edge.property.from]; | |
| 476 if (!fromNode.view) { | |
| 477 updateNode(fromNode); | |
| 478 } | |
| 479 var toNode = graphData.nodes[edge.property.to]; | |
| 480 if (!toNode.view) { | |
| 481 updateNode(toNode); | |
| 482 } | |
| 483 showEdge(graphData, edge); | |
| 484 } | |
| 485 | |
| 486 function getRelationEdgeIds(node) { | |
| 487 var edgeIds = []; | |
| 488 for (var i=0; i<node.in.length; i++) edgeIds.push(node.in[i]); | |
| 489 for (var i=0; i<node.out.length; i++) edgeIds.push(node.out[i]); | |
| 490 for (var i=0; i<node.both.length; i++) edgeIds.push(node.both[i]); | |
| 491 return edgeIds; | |
| 492 } | |
| 493 | |
| 494 function getRelationNodeIds(graphData, node) { | |
| 495 var nodes = graphData.nodes; | |
| 496 var edges = graphData.edges; | |
| 497 var nodeIds = []; | |
| 498 for (var i=0; i<node.in.length; i++) { | |
| 499 var edgeId = node.in[i]; | |
| 500 nodeIds.push(edges[edgeId].property.from); | |
| 501 } | |
| 502 for (var i=0; i<node.out.length; i++) { | |
| 503 var edgeId = node.out[i]; | |
| 504 nodeIds.push(edges[edgeId].property.to); | |
| 505 } | |
| 506 for (var i=0; i<node.both.length; i++) { | |
| 507 var edgeId = node.both[i]; | |
| 508 var fromId = edges[edgeId].property.from; | |
| 509 var toId = edges[edgeId].property.to; | |
| 510 if (fromId == node.property.id) { | |
| 511 nodeIds.push(toId); | |
| 512 } else { | |
| 513 nodeIds.push(fromId); | |
| 514 } | |
| 515 } | |
| 516 return nodeIds; | |
| 517 } | |
| 518 | |
| 519 /* | |
| 520 * This function output all NODE that are related [node] | |
| 521 */ | |
| 522 function updateRelationNodes(graphData, node) { | |
| 523 var id = node.property.id; | |
| 524 var edges = graphData.edges; | |
| 525 var edgeIds = getRelationEdgeIds(node); | |
| 526 for (var i=0; i<edgeIds.length; i++ ) { | |
| 527 createNodeFromEdge(graphData, edges[edgeIds[i]]); | |
| 528 } | |
| 529 jsPlumb.removeAllEndpoints(); | |
| 530 jsPlumb.draggable($('.graphNode')); | |
| 531 } | |
| 532 | |
| 533 /* | |
| 534 * rels = {dependency:1, evidence:1}; | |
| 535 * showRelationNodes(graphData, node, rels); | |
| 536 */ | |
| 537 function showRelationNodes(graphData, node, rels) { | |
| 538 var id = node.property.id; | |
| 539 var edges = graphData.edges; | |
| 540 var edgeIds = getRelationEdgeIds(node); | |
| 541 for (var i=0; i<edgeIds.length; i++) { | |
| 542 var edge = edges[edgeIds[i]]; | |
| 543 if (rels[edge.property.rel]) { | |
| 544 createNodeFromEdge(graphData, edges[edgeIds[i]]); | |
| 545 } | |
| 546 } | |
| 547 jsPlumb.removeAllEndpoints(); | |
| 548 jsPlumb.draggable($('.graphNode')); | |
| 549 } | |
| 550 | |
| 551 var BASE_THETA = -30; | |
| 552 var BASE_ANGLE = 180; | |
| 553 var BASE_DISTANCE = 180; | |
| 554 function calcChildNodePosition(parent, num) { | |
| 555 var pX = parent.position.x; | |
| 556 var pY = parent.position.y; | |
| 557 var deg = BASE_ANGLE - num * BASE_THETA; | |
| 558 var theta = deg * (Math.PI / 180); | |
| 559 var cX = pX - (BASE_DISTANCE * Math.cos(theta)); | |
| 560 var cY = pY - (BASE_DISTANCE * Math.sin(theta)); | |
| 561 return {x:cX, y:cY}; | |
| 562 } | |
| 563 | |
| 564 function showAllEdge(graphData) { | |
| 565 var edges = graphData.edges; | |
| 566 for (var id in edges) { | |
| 567 showEdge(graphData, edges[id]); | |
| 568 } | |
| 569 jsPlumb.removeAllEndpoints(); | |
| 570 jsPlumb.draggable($('.graphNode')); | |
| 571 } | |
| 572 | |
| 573 var EDGE_LIST = { | |
| 574 evidence:'evidence', | |
| 575 dependency:'dependency', | |
| 576 version:'version', | |
| 577 derived:'derived', | |
| 578 agreement:'agreement' | |
| 579 }; | |
| 580 | |
| 581 function recursiveCalcPosition(graphData, parentNode) { | |
| 582 if (!parentNode.position) updateNode(parentNode); | |
| 583 childNodeIds = getRelationNodeIds(graphData, parentNode); | |
| 584 /* calcration of childNode position */ | |
| 585 var numCalcChild = 0; | |
| 586 var childArray = {}; | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
587 for (var i=0; i<childNodeIds.length; i++) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
588 var id = childNodeIds[i]; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
589 var childNode = graphData.nodes[id]; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
590 if (childNode.position) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
591 numCalcChild++; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
592 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
593 } |
| 11 | 594 for (var i=0; i<childNodeIds.length; i++) { |
| 595 var id = childNodeIds[i]; | |
| 596 var childNode = graphData.nodes[id]; | |
| 597 childArray[id] = childNode; | |
| 598 if (!childNode.position) { | |
| 599 childNode.position = calcChildNodePosition(parentNode, numCalcChild); | |
| 600 numCalcChild++; | |
| 601 } | |
| 602 } | |
| 603 /* calcration of grandchildNode position */ | |
| 604 for (var id in childArray) { | |
| 605 var childNode = childArray[id]; | |
| 606 var grandChildIds = getRelationNodeIds(graphData, childNode); | |
| 607 for (var i=0; i<grandChildIds.length; i++) { | |
| 608 var gId = grandChildIds[i]; | |
| 609 var grandChild = graphData.nodes[gId]; | |
| 610 if (!grandChild.position) { | |
| 611 recursiveCalcPosition(graphData, childNode); | |
| 612 } | |
| 613 } | |
| 614 } | |
| 615 } | |
| 616 | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
617 function createNodeElement(node) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
618 var created = false; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
619 if(!node.view) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
620 created = true; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
621 createNodeDiv(node); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
622 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
623 var div = node.view; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
624 node.view[0].nodeId = node.property.id; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
625 // div.text(node.property.title); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
626 div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);}); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
627 DragHandler.attach($(node.view)[0]); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
628 var kindBackground = {agree:"#aaf", rejected:"#fff"}; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
629 var kindBorder = {agree:"#66a", rejected:"#a66"}; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
630 div.css("background", kindBackground[node.kind]||"white"); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
631 div.css("border-color", kindBorder[node.kind] ||"#58f"); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
632 div.css({ |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
633 left: node.position.x, |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
634 top: node.position.y |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
635 }); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
636 return created; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
637 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
638 |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
639 |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
640 function showNode(node) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
641 if(createNodeElement(node)) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
642 var fc = $('#graphRoot')[0].firstChild; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
643 if(fc) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
644 $('#graphRoot')[0].insertBefore(node.view[0], fc); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
645 } else { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
646 $('#graphRoot').append(node.view); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
647 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
648 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
649 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
650 |
| 11 | 651 var GRAPH_DATA = new GraphData(); |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
652 |
| 11 | 653 function startUserDesktopUI() { |
| 654 function showFirstEvidenceList(graphData) { | |
| 655 var nodes = graphData.nodes; | |
| 656 for (var id in nodes) { | |
| 657 updateNode(nodes[id]); | |
| 658 } | |
| 659 } | |
| 660 var gData = GRAPH_DATA; | |
| 661 showFirstEvidenceList(gData); | |
| 662 } | |
| 663 | |
| 664 function start() { | |
| 665 init(); | |
| 666 $.ajax({ | |
|
18
cfdce8445a14
modified show.html for post edgeInfoId
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
17
diff
changeset
|
667 url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid(), |
| 11 | 668 success:function(o) { parseJSONGraphData(GRAPH_DATA, o); startUserDesktopUI();}, |
| 669 type:"GET", cache:false, | |
| 670 error:function(o) { console.log("first get error : ",o); } | |
| 671 }); | |
| 672 } | |
| 673 | |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
674 function addLoadEvent(func) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
675 var oldonload = window.onload; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
676 if (typeof window.onload != 'function') { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
677 window.onload = func; |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
678 } else { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
679 window.onload = function() { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
680 if (oldonload) { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
681 oldonload(); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
682 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
683 func(); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
684 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
685 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
686 } |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
687 |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
688 addLoadEvent(function() { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
689 beginScript(); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
690 }); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
691 |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
692 function beginScript() { |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
693 DragHandler.attach($('#miniDisplay')[0]); |
|
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
694 DragHandler.attach($('#traverseDisplay')[0]); |
| 11 | 695 start(); |
|
16
1af36503e849
modified show.html
Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
parents:
15
diff
changeset
|
696 } |
| 11 | 697 |
| 698 </script> | |
| 699 | |
| 700 | |
| 701 | |
| 702 | |
| 703 |