Merge pull request #738 from metamaps/window.resize.fix

Makes it so that resizing the browser window doesn't change the user's current location on the map

frontend/src/Metamaps/Listeners.js

@@ -7,6 +7,7 @@ import Mobile from './Mobile'
 import Realtime from './Realtime'
 import Selected from './Selected'
 import Topic from './Topic'
+import Util from './Util'
 import Visualize from './Visualize'
 import { Search } from './GlobalUI'
 
@@ -108,16 +109,19 @@ const Listeners = {
     })
 
     $(window).resize(function () {
-      if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
+      if (Visualize && Visualize.mGraph) {
+        Util.resizeCanvas(Visualize.mGraph.canvas)
+      }
+
       if (Active.Map && Realtime.inConversation) Realtime.positionVideos()
       Mobile.resizeTitle()
     })
   },
-  centerAndReveal: function(nodes, opts) {
+  centerAndReveal: function (nodes, opts) {
     if (nodes.length < 1) return
     var node = nodes[nodes.length - 1]
     if (opts.center && opts.reveal) {
-      Topic.centerOn(node.id, function() {
+      Topic.centerOn(node.id, function () {
         Topic.fetchRelatives(nodes)
       })
     } else if (opts.center) {

frontend/src/Metamaps/Util.js

@@ -1,3 +1,5 @@
+/* global $ */
+
 import { Parser, HtmlRenderer } from 'commonmark'
 
 import Visualize from './Visualize'
@@ -126,6 +128,25 @@ const Util = {
     // use safe: true to filter xss
     return new HtmlRenderer({ safe: true })
       .render(new Parser().parse(text))
+  },
+  logCanvasAttributes: function(canvas){
+    return {
+      scaleX: canvas.scaleOffsetX,
+      scaleY: canvas.scaleOffsetY,
+      centreCoords: Util.pixelsToCoords({ x: canvas.canvases[0].size.width / 2, y: canvas.canvases[0].size.height / 2 }),
+    };
+  },
+  resizeCanvas: function(canvas){
+    // Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen
+    const oldAttr = Util.logCanvasAttributes(canvas);
+        
+    // Resize the canvas to fill the new window size. Based on how JIT works, this also resets the map back to scale 1 and tranlations = 0
+    canvas.resize($(window).width(), $(window).height())
+  
+    // Return the map to the original scale, and then put the previous central map-coordinate back to the centre of user's newly resized screen
+    canvas.scale(oldAttr.scaleX, oldAttr.scaleY)
+    const newAttr = Util.logCanvasAttributes(canvas);
+    canvas.translate(newAttr.centreCoords.x - oldAttr.centreCoords.x, newAttr.centreCoords.y - oldAttr.centreCoords.y)
   }
 }