API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 21st, 2014
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.79 KB | None | 0 0
raw download clone embed print report
  1. var graph = new joint.dia.Graph;
  2. var paper = new joint.dia.Paper({
  3. el: $('#paper'),
  4. width: 1200,
  5. height:800,
  6. gridSize: 10,
  7. model: graph
  8. });
  9. joint.shapes.basic.Computer = joint.shapes.basic.Generic.extend({
  10.  
  11. markup: '<g class="rotatable"><g class="scalable"><image/></g></g><text/>',
  12.  
  13. defaults: joint.util.deepSupplement({
  14.  
  15. type: 'basic.Computer',
  16. attrs: {
  17. image: {
  18. 'width': 50,
  19. 'height': 50
  20. }
  21. }
  22. }, joint.shapes.basic.Generic.prototype.defaults)
  23. });
  24.  
  25. joint.shapes.basic.Switch = joint.shapes.basic.Generic.extend({
  26.  
  27. markup: '<g class="rotatable"><g class="scalable"><image/></g></g><text/>',
  28.  
  29. defaults: joint.util.deepSupplement({
  30.  
  31. type: 'basic.Switch',
  32. attrs: {
  33. image: {
  34. 'width': 100,
  35. 'height': 100
  36. }
  37. }
  38. }, joint.shapes.basic.Generic.prototype.defaults)
  39. });
  40.  
  41. var addDashLink = function(elm1, elm2) {
  42. var myLink = new joint.shapes.erd.Line({
  43. source: { id: elm1.id },
  44. target: { id: elm2.id },
  45. attrs: { '.connection': {'stroke-width': 1 , 'stroke-dasharray': '5 2'}}
  46. });
  47. graph.addCell(myLink);
  48. return myLink;
  49. };
  50.  
  51. var addNormalLink = function(elm1, elm2) {
  52. var myLink = new joint.shapes.erd.Line({
  53. source: { id: elm1.id },
  54. target: { id: elm2.id },
  55. attrs: { '.connection': {'stroke-width': 3 }}
  56. });
  57. graph.addCell(myLink);
  58. return myLink;
  59. };
  60.  
  61. joint.shapes.basic.Controller = joint.shapes.basic.Generic.extend({
  62. markup: '<g class="rotatable"><g class="scalable"><image/></g></g><text/>',
  63. defaults: joint.util.deepSupplement({
  64.  
  65. type: 'basic.Controller',
  66. attrs: {
  67. image: {
  68. 'width': 150,
  69. 'height': 150
  70. }
  71. }
  72. }, joint.shapes.basic.Generic.prototype.defaults)
  73.  
  74. });
  75.  
  76. var id = 0;
  77. var addSwitch = function(){
  78. var _switch = new joint.shapes.basic.Switch({
  79. size: { width: 100 , height: 100},
  80. attrs:{
  81. image: { 'xlink:href':'./switch.png', id: id },
  82. }
  83. });
  84. // console.log("AAAAAAAAAA");
  85. switch_[switch_.length] = _switch;
  86. console.log(switch_.length);
  87. }
  88.  
  89.  
  90. var controller = new joint.shapes.basic.Controller({
  91. size: { width: 150 , height: 150},
  92. attrs:{
  93. image: { 'xlink:href': "./nrs.png"}
  94. }
  95. });
  96.  
  97. var same_sign = function(a, b){
  98. return (( a * b) >= 0);
  99. }
  100.  
  101. var intersect = function(x1, y1, x2, y2, x3, y3, x4,y4){
  102. var a1, a2, b1, b2, c1, c2;
  103. var r1, r2 , r3, r4;
  104. var denom, offset, num;
  105.  
  106. // Compute a1, b1, c1, where line joining points 1 and 2
  107. // is "a1 x + b1 y + c1 = 0".
  108.  
  109. if( (x2 == x3 && y2 == y3) ||(x2 == x4 && y2 ==y4)){
  110. return false;
  111. }
  112.  
  113. a1 = y2 - y1;
  114. b1 = x1 - x2;
  115. c1 = (x2 * y1) - (x1 * y2);
  116.  
  117. // Compute r3 and r4.
  118. r3 = ((a1 * x3) + (b1 * y3) + c1);
  119. r4 = ((a1 * x4) + (b1 * y4) + c1);
  120. // Check signs of r3 and r4. If both point 3 and point 4 lie on
  121. // same side of line 1, the line segments do not intersect.
  122. if ((r3 != 0) && (r4 != 0) && same_sign(r3, r4)){
  123. return false;
  124. }
  125.  
  126. // Compute a2, b2, c2
  127. a2 = y4 - y3;
  128. b2 = x3 - x4;
  129. c2 = (x4 * y3) - (x3 * y4);
  130. // Compute r1 and r2
  131. r1 = (a2 * x1) + (b2 * y1) + c2;
  132. r2 = (a2 * x2) + (b2 * y2) + c2;
  133. // Check signs of r1 and r2. If both point 1 and point 2 lie
  134. // on same side of second line segment, the line segments do
  135. // not intersect.
  136. if ((r1 != 0) && (r2 != 0) && (same_sign(r1, r2))){
  137. return false;
  138. }
  139. //Line segments intersect: compute intersection point.
  140. denom = (a1 * b2) - (a2 * b1);
  141. if (denom == 0) {
  142. return true;
  143. }
  144. if (denom < 0){
  145. offset = -denom / 2;
  146. }else{
  147. offset = denom / 2 ;
  148. }
  149.  
  150. // The denom/2 is to get rounding instead of truncating. It
  151. // is added or subtracted to the numerator, depending upon the
  152. // sign of the numerator.
  153. num = (b1 * c2) - (b2 * c1);
  154. if (num < 0){
  155. x = (num - offset) / denom;
  156. }else {
  157. x = (num + offset) / denom;
  158. }
  159.  
  160. num = (a2 * c1) - (a1 * c2);
  161. if (num < 0){
  162. y = ( num - offset) / denom;
  163. } else {
  164. y = (num + offset) / denom;
  165. }
  166. // lines_intersect
  167. return true;
  168. }
  169.  
  170. //[0 , 1 .. ,n ] ,each element stores information such as location or color..
  171. var switch_ =[];
  172.  
  173. //relationship between each node
  174. var list = [[0,5],[1,2] ,[1,3], [ 1,4], [2,3] ,[2,4] , [3,4] , [4,5] , [ 3,5], [1,5]];
  175.  
  176. //record min or max value of X (y) coordinates
  177. var minLocationX;
  178. var minLocationY;
  179. var maxLocationX;
  180. var maxLocationY;
  181.  
  182. //init;
  183. console.log(graph) ;
  184. var numbers = 6;
  185. for(var i = 0 ; i <numbers ; i++){
  186.  
  187. addSwitch();
  188. id = id +1;
  189. }
  190.  
  191.  
  192. //declare two dimensional array, which[i][0] stands for x coordinates of ith element
  193. //[i][1] stands for y of ith element
  194. var switchLocation = new Array(switch_.length);
  195. for (var i =0; i <switch_.length ;i++){
  196. switchLocation[i] =new Array(2);
  197. }
  198.  
  199. var alreadyAddElement = 0;
  200. //set position
  201. console.log("DDDDDDDDDDDDDDDDD");
  202. for(var i = 0 ; i <switch_.length ; i++){
  203. console.log(switch_[i]);
  204. switch_[i].set({
  205. position: { x : 400+180 * (Math.cos(Math.PI/180*(360/switch_.length)*i)),
  206. y: 500+180 *Math.sin(Math.PI/180*(360/ switch_.length)*i) }
  207. });
  208. switchLocation[i][0] =400+180 * (Math.cos(Math.PI/180*(360/ switch_.length)*i))
  209. console.log(switchLocation[i][0] +"locationx");
  210.  
  211. switchLocation[i][1] = 500+180 *Math.sin(Math.PI/180*(360/ switch_.length)*i)
  212. console.log(switchLocation[i][1]+"locationy");
  213.  
  214. //console.log("------------------------------------------");
  215. //console.log(50 * Math.cos(Math.PI/180*(360/switchArray.length)*i));
  216. }
  217.  
  218. //add all switch into graph
  219. for(var i =0 ; i < switch_.length ; i++){
  220. console.log("AAERRR");
  221. graph.addCell(switch_[i]);
  222. }
  223. console.log("BBBBBBBBBBBBBBBBBBBBBBB");
  224. addLinkWithDetection();
  225. console.log("BBBBBBBBBBBBBBBBBBBBBBB2");
  226. controller.set({
  227. position: { x :(maxLocationX)/2 ,
  228. y: 0 }
  229. });
  230. console.log("BBBBBBBBBBBBBBBBBBBBBBB3");
  231. graph.addCell(controller);
  232.  
  233. for(var i =0 ; i < switch_.length ; i++){
  234. addDashLink(controller , switch_[i]);
  235. };
  236. paper.$el.css('pointer-events', 'none');
  237.  
  238. for( var i = 0 ; i < numbers ; i++){
  239. $('#' + i).hover(function(){
  240. // Hover over code
  241. var title = $(this).attr('title');
  242. var text = "";
  243. var txt = $('<div class="tooltip"></div>');
  244.  
  245.  
  246. $(this).data('tipText', title).removeAttr('title');
  247. //console.log(list.length)+ "AAA");;
  248. for(var k =0 ; k < list.length ; k++){
  249. console.log(list[k][0] + "LIST" +$(this).attr('id'));
  250. console.log(txt.val());
  251. if (list[k][0] == $(this).attr('id')){
  252. //text += "->" +list[k][1] + "\r\n";
  253. text += "->" +list[k][1] + '<br />';
  254.  
  255. console.log(list[k][1] + "ENTER");
  256. }
  257. else if( list[k][1] ==$(this).attr('id')){
  258. //text = text.concat(list[k][0] +"->");
  259. text += list[k][0] +"->" + '<br / >';
  260. console.log(list[k][0] + "ENTER");
  261. }
  262.  
  263. }
  264. txt.appendTo('body')
  265. .html(text)
  266. txt.fadeIn('slow');
  267. //txt.text(txt.val());
  268. console.log(text + "text");
  269.  
  270. }, function() {
  271. // Hover out code
  272. $(this).attr('title', $(this).data('tipText'));
  273. $('.tooltip').remove();
  274. }).mousemove(function(e) {
  275. var mousex = e.pageX + 20; //Get X coordinates
  276. var mousey = e.pageY + 10; //Get Y coordinates
  277. $('.tooltip')
  278. .css({ top: mousey, left: mousex })
  279. });
  280. $('#' + i).css('pointer-events' , 'auto');
  281. }
  282.  
  283.  
  284. //addComputer();
  285. /*
  286. var computer = new joint.shapes.basic.Computer({
  287. position: { x: 335, y: 50 },
  288. size: { width: 50, height: 50 },
  289. attrs: {
  290. image: {'xlink:href': "./computer.png"}
  291. }
  292. });
  293. graph.addCell(computer);
  294. */
  295.  
  296.  
  297.  
  298. /*
  299. var link = new joint.dia.Link({
  300.  
  301. source: { id: computer1.id },
  302. target: { id: computer2.id },
  303. attrs: { '.connection': {'stroke-width': 5 }}
  304. });
  305. graph.addCell(link);
  306. */
  307.  
  308.  
  309. function addLinkWithDetection (){
  310. for(var i = 0 ; i <list.length; i++){
  311. nodeLocation();
  312. //addNormalLink(switchArray[list[i][0]], switchArray[list[i][1]];
  313. alreadyAddElement ++;
  314. }
  315.  
  316. minLocationX = Number.MAX_VALUE;
  317. minLocationY = Number.MAX_VALUE;
  318. maxLocationX = Number.MIN_VALUE;
  319. maxLocationY = Number.MIN_VALUE;
  320. for(var i = 0 ; i < switch_.length ; i++){
  321.  
  322. console.log(switchLocation[i][0] + " " + i);
  323. //console.log(locationX);
  324.  
  325. if(switchLocation[i][0] < minLocationX ){
  326. minLocationX = switchLocation[i][0];
  327. }
  328. if(switchLocation[i][1] < minLocationY ){
  329. minLocationY = switchLocation[i][1];
  330. }
  331.  
  332. if(switchLocation[i][0] > maxLocationX ){
  333. maxLocationX = switchLocation[i][0];
  334. }
  335.  
  336. if(switchLocation[i][1] > maxLocationY ){
  337. maxLocationY = switchLocation[i][1];
  338. }
  339. }
  340. console.log(maxLocationX +"MAX");
  341. console.log(maxLocationY);
  342. for(var i =0 ; i < switch_.length ; i++){
  343. switch_[i].set({
  344. position: { x :(switchLocation[i][0]-minLocationX) * 1000 / (maxLocationX-minLocationX),
  345. y: (switchLocation[i][1]-minLocationY)*600 / (maxLocationY-minLocationY)+100 }
  346. });
  347. }
  348. }
  349.  
  350. var x1;
  351. var y1;
  352. var x2;
  353. var y2;
  354. function nodeLocation (){
  355. x1 =switchLocation[list[alreadyAddElement][0]][0]
  356. y1 =switchLocation[list[alreadyAddElement][0]][1]
  357. x2 =switchLocation[list[alreadyAddElement][1]][0]
  358. y2 = switchLocation[list[alreadyAddElement][1]][1]
  359. var distancexy = Math.sqrt((x2 -x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
  360. var _continue = true;
  361. var angle =0;
  362. var leftTryTime = 360;
  363. //just for debug
  364. var record;
  365. var recordangle;
  366. while(_continue == true && leftTryTime >0){
  367. console.log("------------------------------------------------------" + alreadyAddElement);
  368. _continue = false;
  369. for(var i = 0 ; i < alreadyAddElement ; i++){
  370. //console.log(alreadyAddId);
  371. var tx1 =switchLocation[list[i][0]][0]
  372. var ty1 =switchLocation[list[i][0]][1]
  373. var tx2 =switchLocation[list[i][1]][0]
  374. var ty2 = switchLocation[list[i][1]][1]
  375. var sx2; // store x2 if need
  376. var sy2;
  377. var distancetxty = Math.sqrt((tx2 -tx1) * (tx2 - tx1) + (ty2 - ty1) * (ty2 - ty1));
  378. var intersection = intersect(x1,y1,x2,y2,tx1,ty1,tx2,ty2);
  379.  
  380. //console.log(tx1 + " " + tx2 + " " + ty1+" " + ty2);
  381. //console.log(list[i][0] + " " + list[i][1]);
  382. if( intersection){
  383. //console.log("184");
  384. var ok = true
  385. for(var i = 0 ; i < alreadyAddElement ; i++){
  386. var dot = ((x2-x1) * (tx2-tx1) + (y2-y1) * (ty2 - ty1)) / Math.sqrt((y2-y1) * (y2-y1) + (x2-x1) * (x2-x1)) / Math.sqrt((ty2-ty1) * (ty2-ty1) + (tx2-tx1) * (tx2-tx1))
  387. var tx1 =switchLocation[list[i][0]][0]
  388. var ty1 =switchLocation[list[i][0]][1]
  389. var tx2 =switchLocation[list[i][1]][0]
  390. var ty2 = switchLocation[list[i][1]][1]
  391. if(dot < -0.992 || dot > 0.992){
  392. ok = false
  393. }
  394. }
  395. if(ok){
  396. sx2 = x2;
  397. sy2 = y2;
  398. record = alreadyAddElement;
  399. recordangle = angle;
  400. }
  401. _continue = true;
  402. }
  403.  
  404. else if(intersection == false){
  405. var dot = ((x2-x1) * (tx2-tx1) + (y2-y1) * (ty2 - ty1)) / Math.sqrt((y2-y1) * (y2-y1) + (x2-x1) * (x2-x1)) / Math.sqrt((ty2-ty1) * (ty2-ty1) + (tx2-tx1) * (tx2-tx1))
  406.  
  407. if( !((x2 == tx1 || y2 == ty1) ||
  408. (x2 ==ty2 && y2 ==ty2))){
  409. //console.log(dot + " BCC");
  410. if(!isFinite(dot) || (dot < -0.992 || dot > 0.992)){
  411. _continue = true;
  412. //console.log("ENTER");
  413. }
  414. }
  415. }
  416. //console.log(_continue);
  417. }
  418.  
  419. if(_continue == true){
  420. x2 = x1 + distancexy *Math.cos(angle * Math.PI /180)
  421. //console.log(angle +" angle");
  422. y2 = y1 + distancexy * Math.sin(angle * Math.PI/180)
  423. //console.log(x1 + " " + x2 + " " + y1+" " + y2);
  424. //console.log(x2 + " " + y2+ "motify");
  425. angle = angle +1;
  426. leftTryTime --;
  427. for(var i = 0 ; i < alreadyAddElement ; i++){
  428. for(var k = 0 ; k < 2 ; k++){
  429. //console.log(list[i][k] +" " + list[alreadyAddElement][1]);
  430. //console.log(list[i][k] == list[alreadyAddElement][1]);
  431. if(list[i][k] == list[alreadyAddElement][1]){
  432.  
  433. switchLocation[list[i][k]][0] = x2;
  434. switchLocation[list[i][k]][1] = y2;
  435. }
  436. }
  437. }
  438. }
  439. }
  440. if(leftTryTime == 0){
  441. console.log(record +" record " + angle + "angle" );
  442. x2 = sx2;
  443. y2 = sy2;
  444. console.log(x2 + "ABCDEFG" + y2);
  445. for(var i = 0 ; i < alreadyAddElement ; i++){
  446. for(var k = 0 ; k < 2 ; k++){
  447. //console.log(list[i][k] +" " + list[alreadyAddElement][1]);
  448. //console.log(list[i][k] == list[alreadyAddElement][1]);
  449. if(list[i][k] == list[alreadyAddElement][1]){
  450.  
  451. switchLocation[list[i][k]][0] = x2;
  452. switchLocation[list[i][k]][1] = y2;
  453. }
  454. }
  455. }
  456. }
  457.  
  458. switch_[list[alreadyAddElement][1]].set({
  459. position: { x : x2, y: y2 }
  460. });
  461.  
  462. switchLocation[list[alreadyAddElement][1]][0] = x2;
  463. switchLocation[list[alreadyAddElement][1]][1] = y2;
  464. addNormalLink(switch_[list[alreadyAddElement][0]], switch_[list[alreadyAddElement][1]]);
  465.  
  466. //}
  467. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!