From e5b96b078168f620b6a8dfadb896efe43b95d05a Mon Sep 17 00:00:00 2001
From: Oliver Gorwits <oliver@cpan.org>
Date: Sat, 30 Dec 2017 14:55:00 +0000
Subject: [PATCH] tidy and refactor

---
 .../Netdisco/Web/Plugin/Device/Neighbors.pm   |   2 -
 share/views/ajax/device/netmap.tt             | 338 ++++++++++--------
 2 files changed, 191 insertions(+), 149 deletions(-)

diff --git a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm b/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
index 3725c087..62077891 100644
--- a/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
+++ b/lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
@@ -98,7 +98,6 @@ ajax '/ajax/data/device/netmap' => require_login sub {
       ]) : ())
     }, {
       columns => [qw/left_ip speed right_ip/],
-      '+select' => [\'row_number() over()'], '+as' => ['row_number'],
       result_class => 'DBIx::Class::ResultClass::HashRefInflator',
     });
 
@@ -118,7 +117,6 @@ ajax '/ajax/data/device/netmap' => require_login sub {
         FROMID => $link->{left_ip},
         TOID   => $link->{right_ip},
         SPEED  => $link->{speed},
-        ID     => $link->{row_number},
       };
 
       ++$ok_dev{$link->{left_ip}};
diff --git a/share/views/ajax/device/netmap.tt b/share/views/ajax/device/netmap.tt
index 5ab8cf9e..96584e23 100644
--- a/share/views/ajax/device/netmap.tt
+++ b/share/views/ajax/device/netmap.tt
@@ -1,87 +1,8 @@
 <script>
 
-function isFullScreen() {
-  return (document.webkitFullscreenElement || document.mozFullScreenElement || document.fullscreenElement);
-}
-
-function requestFullScreen(elt) {
-  if (isFullScreen()) {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    }
-  }
-  else {
-    if (elt.requestFullscreen) {
-      elt.requestFullscreen();
-    } else if (elt.msRequestFullscreen) {
-      elt.msRequestFullscreen();
-    } else if (elt.mozRequestFullScreen) {
-      elt.mozRequestFullScreen();
-    } else if (elt.webkitRequestFullscreen) {
-      elt.webkitRequestFullscreen();
-    }
-  }
-}
-
-$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
-  resizeGraphContainer();
-  $('#nd2_fullscreen-netmap').text(function() {
-      return (isFullScreen() ? '\uf066' : '\uf065');
-  });
-});
-
-// custom resize function as there is no event to fire and we need
-// to react to the sidebar.
-function resizeGraphContainer() {
-  setTimeout(function(){
-    var netmap_pane = jQuery('#netmap_pane');
-    graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
-    graph.height( window.innerHeight - 100 ).resume();
-    d3.select("#nd2_netmap-spinner-container").attr("transform",
-      "translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")")
-  }, 500)
-}
-
-$('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
-$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
-$(window).on("resize", resizeGraphContainer);
-
-var radius = 12;
-var tau = 2 * Math.PI;
-
-var arc = d3.svg.arc()
-  .innerRadius(radius * 0.5)
-  .outerRadius(radius * 0.8)
-  .startAngle(0)
-  .endAngle(0.33 * tau);
-
-var arc2 = d3.svg.arc()
-  .innerRadius(radius * 0.5)
-  .outerRadius(radius * 0.8)
-  .startAngle(0)
-  .endAngle(tau);
-
-function spin(selection, duration) {
-  duration = duration || 1500;
-  if (! graph.inspect().status.forceRunning) {
-    d3.select('#nd2_netmap-spinner').style('fill', '#CCFFCC').attr('d', arc2);
-    return;
-  }
-  d3.select('#nd2_netmap-spinner').style('fill', '#FFE4B5').attr('d', arc);
-  selection.transition()
-    .ease("linear")
-    .duration(duration)
-    .attrTween("transform", function() {
-        return d3.interpolateString("rotate(0)", "rotate(360)");
-    });
-  setTimeout(function() { spin(selection, duration); }, duration);
-}
+// ***********************************************
+// ************ retrieve network map *************
+// ***********************************************
 
 $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(mapdata) {
 
@@ -121,27 +42,86 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
     graph['nd2']['centernode'] = mapdata['centernode'];
     graph['nd2']['dragging'] = false;
 
-    graph.inspect().main.force.on('end.setupfornetdisco', function() {
-      graph.inspect().main.nodes.each(function(n) { n.fixed = true });
+    // ***************************************
+    // *********** fullscreen icon ***********
+    // ***************************************
 
-      if (mapdata['newnodes'] && ('[% params.mapshow %]' != 'neighbors')) {
-        $.post(
-          '[% uri_for('/ajax/data/device/netmappositions') %]'
-          ,$("#nd_vlan-entry, #nd_devgrp-select, input[name='mapshow']").serialize()
-            + '&positions=' + JSON.stringify(graph.positions())
-        );
-      }
-
-      graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
-        graph['nd2']['dragging'] = false;
+    graph.inspect().dom.svg
+      .append("g")
+      .attr("id", "nd2_fullscreen-netmap-container")
+      .attr("transform", "translate(" + (graph.width() - 17) + ",17)")
+      .append("svg:text")
+      .attr("id", "nd2_fullscreen-netmap")
+      .attr("class", "link")
+      .attr("text-anchor", "start")
+      .attr("font-family", "FontAwesome")
+      .text('\uf065')
+      .on("click", function() {
+        requestFullScreen(document.getElementById('netmap_pane'));
       });
 
+    // **************************************************
+    // *********** force running spinner icon ***********
+    // **************************************************
+
+    graph.inspect().dom.svg
+      .append("g")
+      .attr("id", "nd2_netmap-spinner-container")
+      .attr("transform", "translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")")
+      .append("path")
+      .attr("id", "nd2_netmap-spinner");
+
+    graph.inspect().main.force.on('start.nd2spinner', function() {
+      d3.select("#nd2_netmap-spinner").call(spin);
+    });
+
+    // *****************************************************
+    // *********** link labels which track links ***********
+    // *****************************************************
+
+    graph.inspect().main.force.on('tick.movelinklabel', function() {
+      graph.inspect().dom.svg.selectAll('text.nd_netmap-linklabel')
+        .attr('x', function(d) {
+          var sx = graph.nodeDataById($(this).attr('data-source'));
+          var tx = graph.nodeDataById($(this).attr('data-target'));
+          if (!(sx && tx)) { return 0 }
+          return ((sx.x + tx.x) / 2);
+        })
+        .attr('y', function(d) {
+          var sy = graph.nodeDataById($(this).attr('data-source'));
+          var ty = graph.nodeDataById($(this).attr('data-target'));
+          if (!(sy && ty)) { return 0 }
+          return ((sy.y + ty.y) / 2);
+        });
+    });
+
+    graph.inspect().main.force.on('start.movelinklabel', function() {
+      mapdata['data']['links'].forEach(function(link) {
+        graph.inspect().dom.svg.select('g.graph')
+          .append('svg:text')
+          .attr('class', 'nd_netmap-linklabel')
+          .attr('data-source', link['FROMID'])
+          .attr('data-target', link['TOID'])
+          .attr('text-anchor', 'middle')
+          [% ".attr('fill', 'black')" IF params.showspeed %]
+          .text(link['SPEED']);
+      });
+
+      graph.inspect().main.force.on('start.movelinklabel', null);
+    });
+
+    // **********************************************************
+    // ********* node lasso and group-dragging support **********
+    // **********************************************************
+
+    graph.inspect().main.force.on('start.draggednode', function() {
       graph.inspect().main.nodes.on('mousedown.dragall', function(n) {
         if (this.nodeName !== 'circle') { return }
         graph['nd2']['dragging'] = true;
         graph['nd2']['dragStartX'] = n.x;
         graph['nd2']['dragStartY'] = n.y;
         graph['nd2']['draggedNode'] = n.index;
+        console.log(graph['nd2']);
       });
 
       graph.inspect().main.nodes.on('mousemove.dragall', function(draggedNode) {
@@ -163,67 +143,38 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
           });
       });
 
-      graph.inspect().main.force.on('start.nd2spinner', function() {
-        d3.select("#nd2_netmap-spinner").call(spin);
+      graph.inspect().main.nodes.on('mouseup.dragall', function(n) {
+        graph['nd2']['dragging'] = false;
       });
 
-      graph.inspect().main.force.on('end.setupfornetdisco', null);
+      graph.inspect().main.force.on('start.draggednode', null);
     });
 
-    graph.inspect().main.force.on('tick.movelinklabel', function() {
-      graph.inspect().dom.svg.selectAll('text.nd_netmap-linklabel')
-        .attr('x', function(d) {
-          var text = d3.select(this);
-          var sx = graph.nodeDataById(text.attr('data-source')).x;
-          var tx = graph.nodeDataById(text.attr('data-target')).x;
-          return ((sx + tx) / 2);
-        })
-        .attr('y', function(d) {
-          var text = d3.select(this);
-          var sy = graph.nodeDataById(text.attr('data-source')).y;
-          var ty = graph.nodeDataById(text.attr('data-target')).y;
-          return ((sy + ty) / 2);
-        });
+    // ********************************************************
+    // ********* save new node positions back to DB ***********
+    // ********************************************************
+
+    graph.inspect().main.force.on('end.savepositions', function() {
+      graph.inspect().main.nodes.each(function(n) { n.fixed = true });
+
+      if (mapdata['newnodes'] && ('[% params.mapshow %]' != 'neighbors')) {
+        $.post(
+          '[% uri_for('/ajax/data/device/netmappositions') %]'
+          ,$("#nd_vlan-entry, #nd_devgrp-select, input[name='mapshow']").serialize()
+            + '&positions=' + JSON.stringify(graph.positions())
+        );
+      }
+
+      graph.inspect().main.force.on('end.savepositions', null);
     });
 
-    graph.inspect().dom.svg
-      .append("svg:text")
-      .attr("id", "nd2_fullscreen-netmap")
-      .attr("class", "link")
-      .attr("x", (graph.width() - 17))
-      .attr("y", 17)
-      .attr("text-anchor", "start")
-      .attr("font-family", "FontAwesome")
-      .text(function() { return '\uf065' })
-      .on("click", function() {
-        requestFullScreen(document.getElementById('netmap_pane'));
-      });
-
-    graph.inspect().dom.svg
-      .append("g")
-      .attr("id", "nd2_netmap-spinner-container")
-      .attr("transform", "translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")")
-      .append("path")
-      .attr("id", "nd2_netmap-spinner");
+    // *****************************
+    // ********* DO IT!! ***********
+    // *****************************
 
     graph.start(mapdata);
-    d3.select("#nd2_netmap-spinner").call(spin);
-
-    graph.inspect().main.links.each(function(l) {
-      var link = d3.select(this);
-      var data = link.datum();
-      graph.inspect().dom.svg.select('g.graph')
-        .append('svg:text')
-        .attr('class', 'nd_netmap-linklabel')
-        .attr('x', function(d) { return data.source.x; })
-        .attr('y', function(d) { return data.source.y; })
-        .attr('data-source', function(d) { return data.source.ID; })
-        .attr('data-target', function(d) { return data.target.ID; })
-        .attr('text-anchor', 'middle')
-        [% ".attr('fill', 'black')" IF params.showspeed %]
-        .text(function(d) { return data.SPEED; });
-    });
 
+    // about a second after render starts, zoom in a bit
     if ('[% params.mapshow %]' == 'neighbors') {
       setTimeout(function() {
         if ('[% params.dynamicsize %]' == 'on') {
@@ -234,9 +185,102 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]?[% my_query %]', function(m
         }
       }, 1500);
     }
-  });
+  }); // document.onReady
 
+}); // getJSON
+
+// ***********************************************
+// ******** force engine status spinner  *********
+// ***********************************************
+
+var radius = 12;
+var tau = 2 * Math.PI;
+
+var arc = d3.svg.arc()
+  .innerRadius(radius * 0.5)
+  .outerRadius(radius * 0.8)
+  .startAngle(0)
+  .endAngle(0.33 * tau);
+
+var circle = d3.svg.arc()
+  .innerRadius(radius * 0.5)
+  .outerRadius(radius * 0.8)
+  .startAngle(0)
+  .endAngle(tau);
+
+function spin(selection, duration) {
+  duration = duration || 1500;
+  if (! graph.inspect().status.forceRunning) {
+    d3.select('#nd2_netmap-spinner').style('fill', '#CCFFCC').attr('d', circle);
+    return;
+  }
+  d3.select('#nd2_netmap-spinner').style('fill', '#FFE4B5').attr('d', arc);
+  selection.transition()
+    .ease("linear")
+    .duration(duration)
+    .attrTween("transform", function() {
+        return d3.interpolateString("rotate(0)", "rotate(360)");
+    });
+  setTimeout(function() { spin(selection, duration); }, duration);
+}
+
+// ***********************************************
+// ************ full screen handling *************
+// ***********************************************
+
+function isFullScreen() {
+  return (document.webkitFullscreenElement || document.mozFullScreenElement || document.fullscreenElement);
+}
+
+function requestFullScreen(elt) {
+  if (isFullScreen()) {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    }
+  }
+  else {
+    if (elt.requestFullscreen) {
+      elt.requestFullscreen();
+    } else if (elt.msRequestFullscreen) {
+      elt.msRequestFullscreen();
+    } else if (elt.mozRequestFullScreen) {
+      elt.mozRequestFullScreen();
+    } else if (elt.webkitRequestFullscreen) {
+      elt.webkitRequestFullscreen();
+    }
+  }
+}
+
+$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
+  resizeGraphContainer();
+  $('#nd2_fullscreen-netmap').text(function() {
+    return (isFullScreen() ? '\uf066' : '\uf065');
+  });
 });
 
+// custom resize function as there is no event to fire and we need
+// to react to the sidebar.
+function resizeGraphContainer() {
+  setTimeout(function(){
+    var netmap_pane = jQuery('#netmap_pane');
+    graph.width( parseInt(netmap_pane.parent().css('width')) ).resume();
+    graph.height( window.innerHeight - 100 ).resume();
+    d3.select("#nd2_netmap-spinner-container").attr("transform",
+      "translate(" + (graph.width() - 15) + "," + (graph.height() - 15) + ")");
+    d3.select("#nd2_fullscreen-netmap-container").attr("transform",
+      "translate(" + (graph.width() - 17) + ",17)");
+  }, 500)
+}
+
+$('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
+$('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
+$(window).on("resize", resizeGraphContainer);
+
 // vim: ft=javascript
 </script>