diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js index 73c1b600..858a6ab7 100644 --- a/frontend/src/Metamaps/JIT.js +++ b/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() diff --git a/frontend/src/Metamaps/PasteInput.js b/frontend/src/Metamaps/PasteInput.js index f0425032..e44a284e 100644 --- a/frontend/src/Metamaps/PasteInput.js +++ b/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) } diff --git a/frontend/src/Metamaps/Realtime/index.js b/frontend/src/Metamaps/Realtime/index.js index ca17ddb1..49fd357d 100644 --- a/frontend/src/Metamaps/Realtime/index.js +++ b/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', diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index ddf20840..91c720aa 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/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 diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js index 49797ab4..773b622f 100644 --- a/frontend/src/Metamaps/Util.js +++ b/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) { - var canvas = Visualize.mGraph.canvas, + + // Try using Visualize.mGraph + 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) { - var canvas = Visualize.mGraph.canvas, + if (mGraph) { + var canvas = mGraph.canvas, s = canvas.getSize(), p = canvas.getPos(), ox = canvas.translateOffsetX,