decouple Util from other Metamaps modules

frontend/src/Metamaps/JIT.js

@@ -990,7 +990,7 @@ const JIT = {
       Visualize.mGraph.plot()
       midpoint.x = JIT.tempNode.pos.getc().x + (JIT.tempNode2.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
       midpoint.y = JIT.tempNode.pos.getc().y + (JIT.tempNode2.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
-      pixelPos = Util.coordsToPixels(midpoint)
+      pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
       $('#new_synapse').css('left', pixelPos.x + 'px')
       $('#new_synapse').css('top', pixelPos.y + 'px')
       Create.newSynapse.open()

frontend/src/Metamaps/PasteInput.js

@@ -2,6 +2,7 @@
 
 import Import from './Import'
 import Util from './Util'
+import Visualize from './Visualize'
 
 const PasteInput = {
   // thanks to https://github.com/kevva/url-regex
@@ -19,7 +20,7 @@ const PasteInput = {
     window.addEventListener("drop", function(e) {
       e = e || window.event;
       e.preventDefault();
-      var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
+      var coords = Util.pixelsToCoords(Visualize.mGraph, { x: e.clientX, y: e.clientY })
       if (e.dataTransfer.files.length > 0) {
         self.handleFile(e.dataTransfer.files[0], coords)
       }

frontend/src/Metamaps/Realtime/index.js

@@ -278,7 +278,7 @@ let Realtime = {
         x: event.pageX,
         y: event.pageY
       }
-      var coords = Util.pixelsToCoords(pixels)
+      var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
       self.sendCoords(coords)
     }
     $(document).on('mousemove.map', sendCoords)
@@ -289,7 +289,7 @@ let Realtime = {
           x: e.pageX,
           y: e.pageY
         }
-        var coords = Util.pixelsToCoords(pixels)
+        var coords = Util.pixelsToCoords(Visualize.mGraph, pixels)
         self.sendCoords(coords)
       }
       self.positionPeerIcons()
@@ -448,7 +448,7 @@ let Realtime = {
     var compassDiameter = 56
     var compassArrowSize = 24
 
-    var origPixels = Util.coordsToPixels(mapper.coords)
+    var origPixels = Util.coordsToPixels(Visualize.mGraph, mapper.coords)
     var pixels = self.limitPixelsToScreen(origPixels)
     $('#compass' + id).css({
       left: pixels.x + 'px',

frontend/src/Metamaps/Topic.js

@@ -211,7 +211,7 @@ const Topic = {
         // position the form
         midpoint.x = JIT.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
         midpoint.y = JIT.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
-        pixelPos = Util.coordsToPixels(midpoint)
+        pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
         $('#new_synapse').css('left', pixelPos.x + 'px')
         $('#new_synapse').css('top', pixelPos.y + 'px')
         // show the form

frontend/src/Metamaps/Util.js

@@ -2,8 +2,6 @@
 
 import { Parser, HtmlRenderer } from 'commonmark'
 
-import Visualize from './Visualize'
-
 const Util = {
   // helper function to determine how many lines are needed
   // Line Splitter Function
@@ -23,6 +21,7 @@ const Util = {
     }
     return b + s
   },
+
   nowDateFormatted: function () {
     var date = new Date(Date.now())
     var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
@@ -31,6 +30,7 @@ const Util = {
 
     return month + '/' + day + '/' + year
   },
+
   decodeEntities: function (desc) {
     var str, temp = document.createElement('p')
     temp.innerHTML = desc // browser handles the topics
@@ -38,12 +38,15 @@ const Util = {
     temp = null // delete the element
     return str
   }, // decodeEntities
+
   getDistance: function (p1, p2) {
     return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2))
   },
-  coordsToPixels: function (coords) {
+
-    if (Visualize.mGraph) {
+  // Try using Visualize.mGraph
-      var canvas = Visualize.mGraph.canvas,
+  coordsToPixels: function (mGraph, coords) {
+    if (mGraph) {
+      var canvas = mGraph.canvas,
         s = canvas.getSize(),
         p = canvas.getPos(),
         ox = canvas.translateOffsetX,
@@ -62,10 +65,12 @@ const Util = {
       }
     }
   },
-  pixelsToCoords: function (pixels) {
+
+  // Try using Visualize.mGraph
+  pixelsToCoords: function (mGraph, pixels) {
     var coords
-    if (Visualize.mGraph) {
+    if (mGraph) {
-      var canvas = Visualize.mGraph.canvas,
+      var canvas = mGraph.canvas,
         s = canvas.getSize(),
         p = canvas.getPos(),
         ox = canvas.translateOffsetX,