홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
51056590 1 parent 78c10bf5

GUI -- Refactoring updateNodes() to make the code more readable. 

Change-Id: Ib375b5573a4670a67dd94a6532caf078be33beb0
Inline Side-by-side
Showing 1 changed file with 119 additions and 115 deletions
...@@ -164,11 +164,6 @@ ...@@ -164,11 +164,6 @@
164 } 164 }
165 165
166 166
167 - function updateNodes() {
168 - $log.debug('TODO updateNodes()...');
169 - // TODO...
170 - }
171 -
172 function fStart() { 167 function fStart() {
173 $log.debug('TODO fStart()...'); 168 $log.debug('TODO fStart()...');
174 // TODO... 169 // TODO...
...@@ -428,8 +423,8 @@ ...@@ -428,8 +423,8 @@
428 s = d.el.classed('selected'), 423 s = d.el.classed('selected'),
429 c = devBaseColor(d), 424 c = devBaseColor(d),
430 a = instColor(d.master, o), 425 a = instColor(d.master, o),
431 - g, r, 426 + icon = d.el.select('g.deviceIcon'),
432 - icon = d.el.select('g.deviceIcon'); 427 + g, r;
433 428
434 if (s) { 429 if (s) {
435 g = c.glyph; 430 g = c.glyph;
...@@ -442,10 +437,8 @@ ...@@ -442,10 +437,8 @@
442 r = c.rect; 437 r = c.rect;
443 } 438 }
444 439
445 - icon.select('use') 440 + icon.select('use').style('fill', g);
446 - .style('fill', g); 441 + icon.select('rect').style('fill', r);
447 - icon.select('rect')
448 - .style('fill', r);
449 } 442 }
450 443
451 function instColor(id, online) { 444 function instColor(id, online) {
...@@ -459,17 +452,8 @@ ...@@ -459,17 +452,8 @@
459 .data(network.nodes, function (d) { return d.id; }); 452 .data(network.nodes, function (d) { return d.id; });
460 453
461 // operate on existing nodes... 454 // operate on existing nodes...
462 - node.filter('.device').each(function (d) { 455 + node.filter('.device').each(deviceExisting);
463 - var node = d.el; 456 + node.filter('.host').each(hostExisting);
464 - node.classed('online', d.online);
465 - updateDeviceLabel(d);
466 - positionNode(d, true);
467 - });
468 -
469 - node.filter('.host').each(function (d) {
470 - updateHostLabel(d);
471 - positionNode(d, true);
472 - });
473 457
474 // operate on entering nodes: 458 // operate on entering nodes:
475 var entering = node.enter() 459 var entering = node.enter()
...@@ -486,62 +470,11 @@ ...@@ -486,62 +470,11 @@
486 .transition() 470 .transition()
487 .attr('opacity', 1); 471 .attr('opacity', 1);
488 472
489 - // augment device nodes... 473 + // augment nodes...
490 - entering.filter('.device').each(function (d) { 474 + entering.filter('.device').each(deviceEnter);
491 - var node = d3.select(this), 475 + entering.filter('.host').each(hostEnter);
492 - glyphId = d.type || 'unknown',
493 - label = trimLabel(deviceLabel(d)),
494 - noLabel = !label,
495 - box, dx, dy, icon;
496 -
497 - // provide ref to element from backing data....
498 - d.el = node;
499 -
500 - node.append('rect').attr({ rx: 5, ry: 5 });
501 - node.append('text').text(label).attr('dy', '1.1em');
502 - box = adjustRectToFitText(node);
503 - node.select('rect').attr(box);
504 -
505 - icon = is.addDeviceIcon(node, glyphId);
506 - d.iconDim = icon.dim;
507 -
508 - if (noLabel) {
509 - dx = -icon.dim/2;
510 - dy = -icon.dim/2;
511 - } else {
512 - box = adjustRectToFitText(node);
513 - dx = box.x + iconConfig.xoff;
514 - dy = box.y + iconConfig.yoff;
515 - }
516 -
517 - icon.attr('transform', sus.translate(dx, dy));
518 - });
519 -
520 - // augment host nodes...
521 - entering.filter('.host').each(function (d) {
522 - var node = d3.select(this),
523 - cfg = config.icons.host,
524 - r = cfg.radius[d.type] || cfg.defaultRadius,
525 - textDy = r + 10,
526 - //TODO: iid = iconGlyphUrl(d),
527 - _dummy;
528 -
529 - // provide ref to element from backing data....
530 - d.el = node;
531 -
532 - //TODO: showHostVis(node);
533 -
534 - node.append('circle').attr('r', r);
535 - if (iid) {
536 - //TODO: addHostIcon(node, r, iid);
537 - }
538 - node.append('text')
539 - .text(hostLabel)
540 - .attr('dy', textDy)
541 - .attr('text-anchor', 'middle');
542 - });
543 476
544 - // operate on both existing and new nodes, if necessary 477 + // operate on both existing and new nodes:
545 updateDeviceColors(); 478 updateDeviceColors();
546 479
547 // operate on exiting nodes: 480 // operate on exiting nodes:
...@@ -553,47 +486,118 @@ ...@@ -553,47 +486,118 @@
553 .style('opacity', 0) 486 .style('opacity', 0)
554 .remove(); 487 .remove();
555 488
556 - // host node exits.... 489 + // node specific....
557 - exiting.filter('.host').each(function (d) { 490 + exiting.filter('.host').each(hostExit);
558 - var node = d.el; 491 + exiting.filter('.device').each(deviceExit);
559 - node.select('use') 492 +
560 - .style('opacity', 0.5) 493 + // finally, resume the force layout
561 - .transition()
562 - .duration(800)
563 - .style('opacity', 0);
564 -
565 - node.select('text')
566 - .style('opacity', 0.5)
567 - .transition()
568 - .duration(800)
569 - .style('opacity', 0);
570 -
571 - node.select('circle')
572 - .style('stroke-fill', '#555')
573 - .style('fill', '#888')
574 - .style('opacity', 0.5)
575 - .transition()
576 - .duration(1500)
577 - .attr('r', 0);
578 - });
579 -
580 - // device node exits....
581 - exiting.filter('.device').each(function (d) {
582 - var node = d.el;
583 - node.select('use')
584 - .style('opacity', 0.5)
585 - .transition()
586 - .duration(800)
587 - .style('opacity', 0);
588 -
589 - node.selectAll('rect')
590 - .style('stroke-fill', '#555')
591 - .style('fill', '#888')
592 - .style('opacity', 0.5);
593 - });
594 fResume(); 494 fResume();
595 } 495 }
596 496
497 + // ==========================
498 + // updateNodes - subfunctions
499 +
500 + function deviceExisting(d) {
501 + var node = d.el;
502 + node.classed('online', d.online);
503 + updateDeviceLabel(d);
504 + positionNode(d, true);
505 + }
506 +
507 + function hostExisting(d) {
508 + updateHostLabel(d);
509 + positionNode(d, true);
510 + }
511 +
512 + function deviceEnter(d) {
513 + var node = d3.select(this),
514 + glyphId = d.type || 'unknown',
515 + label = trimLabel(deviceLabel(d)),
516 + devCfg = deviceIconConfig,
517 + noLabel = !label,
518 + box, dx, dy, icon;
519 +
520 + d.el = node;
521 +
522 + node.append('rect').attr({ rx: 5, ry: 5 });
523 + node.append('text').text(label).attr('dy', '1.1em');
524 + box = adjustRectToFitText(node);
525 + node.select('rect').attr(box);
526 +
527 + icon = is.addDeviceIcon(node, glyphId);
528 +
529 + if (noLabel) {
530 + dx = -icon.dim/2;
531 + dy = -icon.dim/2;
532 + } else {
533 + box = adjustRectToFitText(node);
534 + dx = box.x + devCfg.xoff;
535 + dy = box.y + devCfg.yoff;
536 + }
537 +
538 + icon.attr('transform', sus.translate(dx, dy));
539 + }
540 +
541 + function hostEnter(d) {
542 + var node = d3.select(this);
543 +
544 + //cfg = config.icons.host,
545 + //r = cfg.radius[d.type] || cfg.defaultRadius,
546 + //textDy = r + 10,
547 + //TODO: iid = iconGlyphUrl(d),
548 + // _dummy;
549 +
550 + d.el = node;
551 +
552 + //TODO: showHostVis(node);
553 +
554 + node.append('circle').attr('r', r);
555 + //if (iid) {
556 + //TODO: addHostIcon(node, r, iid);
557 + //}
558 + node.append('text')
559 + .text(hostLabel)
560 + //.attr('dy', textDy)
561 + .attr('text-anchor', 'middle');
562 + }
563 +
564 + function hostExit(d) {
565 + var node = d.el;
566 + node.select('use')
567 + .style('opacity', 0.5)
568 + .transition()
569 + .duration(800)
570 + .style('opacity', 0);
571 +
572 + node.select('text')
573 + .style('opacity', 0.5)
574 + .transition()
575 + .duration(800)
576 + .style('opacity', 0);
577 +
578 + node.select('circle')
579 + .style('stroke-fill', '#555')
580 + .style('fill', '#888')
581 + .style('opacity', 0.5)
582 + .transition()
583 + .duration(1500)
584 + .attr('r', 0);
585 + }
586 +
587 + function deviceExit(d) {
588 + var node = d.el;
589 + node.select('use')
590 + .style('opacity', 0.5)
591 + .transition()
592 + .duration(800)
593 + .style('opacity', 0);
594 +
595 + node.selectAll('rect')
596 + .style('stroke-fill', '#555')
597 + .style('fill', '#888')
598 + .style('opacity', 0.5);
599 + }
600 +
597 601
598 // ========================== 602 // ==========================
599 // force layout tick function 603 // force layout tick function
......