remember pan and zoom

src/public/javascripts/services/note_detail_relation_map.js

@@ -241,12 +241,30 @@ async function show() {
 
         jsPlumb.fire("jsPlumbDemoLoaded", instance);
 
-        panzoom($relationMapCanvas[0]);
+        const pz = panzoom($relationMapCanvas[0], {
+            maxZoom: 2,
+            minZoom: 0.1
+        });
+
+        if (mapData.transform) {
+            pz.moveTo(mapData.transform.x, mapData.transform.y);
+            pz.zoomTo(0, 0, mapData.transform.scale);
+        }
+
+        $relationMapCanvas[0].addEventListener('zoom', function(e) {
+            mapData.transform = pz.getTransform();
+            saveData();
+        });
+
+        $relationMapCanvas[0].addEventListener('panend', function(e) {
+            mapData.transform = pz.getTransform();
+            saveData();
+        }, true);
     });
 }
 
 function saveData() {
-    noteDetailService.saveNote();
+    noteDetailService.noteChanged();
 }
 
 function initNode(el) {

src/public/libraries/panzoom.js

@@ -1,4 +1,6 @@
 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.panzoom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+        'use strict';
+
         /* globals SVGElement */
         /**
          * Allows to drag and zoom svg elements
@@ -54,6 +56,7 @@ function createPanZoom(domElement, options) {
                 domController.initTransform(transform)
             }
 
+            var filterKey = typeof options.filterKey === 'function' ? options.filterKey : noop;
             var realPinch = typeof options.realPinch === 'boolean' ? options.realPinch : false
             var bounds = options.bounds
             var maxZoom = typeof options.maxZoom === 'number' ? options.maxZoom : Number.POSITIVE_INFINITY
@@ -126,7 +129,6 @@ function createPanZoom(domElement, options) {
 
             function resume() {
                 if (paused) {
-      console.log('resujme')
                     listenForEvents()
                     paused = false
                 }
@@ -461,6 +463,11 @@ function createPanZoom(domElement, options) {
                     z = -1 // `=` - zoom in (equal sign on US layout is under `+`)
                 }
 
+                if (filterKey(e, x, y, z)) {
+                    // They don't want us to handle the key: https://github.com/anvaka/panzoom/issues/45
+                    return;
+                }
+
                 if (x || y) {
                     e.preventDefault()
                     e.stopPropagation()
@@ -484,7 +491,9 @@ function createPanZoom(domElement, options) {
             }
 
             function onTouch(e) {
+                // let the override the touch behavior
                 beforeTouch(e);
+
                 if (e.touches.length === 1) {
                     return handleSingleFingerTouch(e, e.touches[0])
                 } else if (e.touches.length === 2) {
@@ -506,6 +515,17 @@ function createPanZoom(domElement, options) {
                 e.preventDefault()
             }
 
+            function beforeDoubleClick(e) {
+                if (options.onDoubleClick && !options.onDoubleClick(e)) {
+                    // if they return `false` from onTouch, we don't want to stop
+                    // events propagation. Fixes https://github.com/anvaka/panzoom/issues/46
+                    return
+                }
+
+                e.preventDefault()
+                e.stopPropagation()
+            }
+
             function handleSingleFingerTouch(e) {
                 var touch = e.touches[0]
                 var offset = getOffsetXY(touch)
@@ -599,11 +619,9 @@ function createPanZoom(domElement, options) {
             }
 
             function onDoubleClick(e) {
+                beforeDoubleClick(e);
                 var offset = getOffsetXY(e)
                 smoothZoom(offset.x, offset.y, zoomDoubleClickSpeed)
-
-    e.preventDefault()
-    e.stopPropagation()
             }
 
             function onMouseDown(e) {