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