From 7af59727658b86d411cdb005e6e0b5c8d3acbe02 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sun, 11 Dec 2016 19:01:48 -0500
Subject: [PATCH] monkey patch scale/translate functions so they update the URL

---
 frontend/src/Metamaps/Util.js       |  7 ++++++-
 frontend/src/Metamaps/Visualize.js  | 23 +++++++++++++++++++++++
 frontend/test/Metamaps/Util.spec.js |  3 +++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Metamaps/Util.js b/frontend/src/Metamaps/Util.js
index 2cb70f8d..4b55342a 100644
--- a/frontend/src/Metamaps/Util.js
+++ b/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}`)
   }
 }
 
diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js
index b207d05c..6aafb697 100644
--- a/frontend/src/Metamaps/Visualize.js
+++ b/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
diff --git a/frontend/test/Metamaps/Util.spec.js b/frontend/test/Metamaps/Util.spec.js
index e22329d3..21996571 100644
--- a/frontend/test/Metamaps/Util.spec.js
+++ b/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')
+  })
 })