monkey patch scale/translate functions so they update the URL

frontend/src/Metamaps/Util.js

@@ -1,4 +1,4 @@
-/* global $ */
+/* global $, window, document, history */
 
 import { Parser, HtmlRenderer, Node } from 'commonmark'
 import { emojiIndex } from 'emoji-mart'
@@ -236,6 +236,11 @@ const Util = {
       obj[item[0]] = item[1]
       return obj
     }, {})
+  },
+  updateQueryParams: function(newValues) {
+    const qp = Object.assign({}, Util.queryParams(), newValues)
+    const newString = Object.keys(qp).filter(key => !!key).map(key => `${key}=${qp[key]}`).join('&')
+    history.replaceState({}, document.title, `${window.location.pathname}?${newString}`)
   }
 }
 

frontend/src/Metamaps/Visualize.js

@@ -149,6 +149,29 @@ const Visualize = {
       self.mGraph.graph.empty()
     }
 
+    // monkey patch scale function
+    const oldScale = self.mGraph.canvas.scale
+    self.mGraph.canvas.scale = function(x, y, disablePlot) {
+      const returnValue = oldScale.apply(self.mGraph.canvas, arguments)
+      Util.updateQueryParams({ scale: self.mGraph.canvas.scaleOffsetX.toFixed(2) })
+      return returnValue
+    }
+
+    // monkey patch translate function
+    const oldTranslate = self.mGraph.canvas.translate
+    let translateTimeout = null
+    self.mGraph.canvas.translate = function(x, y, disablePlot) {
+      const returnValue = oldTranslate.apply(self.mGraph.canvas, arguments)
+      window.clearTimeout(translateTimeout)
+      translateTimeout = window.setTimeout(() => {
+        const newX = self.mGraph.canvas.translateOffsetX.toFixed(2)
+        const newY = self.mGraph.canvas.translateOffsetY.toFixed(2)
+        Util.updateQueryParams({ translate: `${newX},${newY}` })
+        translateTimeout = null
+        return returnValue
+      }, 50)
+    }
+
     const queryParams = Util.queryParams()
     if (typeof queryParams.scale === 'string') {
       const scale = parseFloat(queryParams.scale) || 0

frontend/test/Metamaps/Util.spec.js

@@ -132,4 +132,7 @@ describe('Metamaps.Util.js', function() {
   describe('queryParams', function() {
     it.skip('TODO need window')
   })
+  describe('updateQueryParams', function() {
+    it.skip('TODO need window')
+  })
 })