link map is kept centered on the active note box

libraries/panzoom.js

@@ -115,12 +115,16 @@ function createPanZoom(domElement, options) {
     zoomTo: publicZoomTo,
     zoomAbs: zoomAbs,
     smoothZoom: smoothZoom,
-    getTransform: getTransformModel,
     showRectangle: showRectangle,
 
     pause: pause,
     resume: resume,
     isPaused: isPaused,
+
+    getTransform: getTransformModel,
+    getMinZoom: getMinZoom,
+    getMaxZoom: getMaxZoom,
+    getOwner: () => owner
   }
 
   eventify(api);
@@ -216,6 +220,14 @@ function createPanZoom(domElement, options) {
     return transform
   }
 
+  function getMinZoom() {
+    return minZoom;
+  }
+
+  function getMaxZoom() {
+    return maxZoom;
+  }
+
   function getPoint() {
     return {
       x: transform.x,
@@ -345,8 +357,14 @@ function createPanZoom(domElement, options) {
     transform.x = size.x - ratio * (size.x - transform.x)
     transform.y = size.y - ratio * (size.y - transform.y)
 
+    // TODO: https://github.com/anvaka/panzoom/issues/112
+    if (bounds && boundsPadding === 1 && minZoom === 1) {
+      transform.scale *= ratio
+      keepTransformInsideBounds()
+    } else {
       var transformAdjusted = keepTransformInsideBounds()
       if (!transformAdjusted) transform.scale *= ratio
+    }
 
     triggerEvent('zoom')
 
@@ -1613,10 +1631,7 @@ function _addWheelListener( elem, eventName, callback, useCapture ) {
     // it's time to fire the callback
     return callback( event );
 
-  }, {
-    capture: useCapture || false ,
-    passive: false
-  });
+  }, useCapture || false );
 }
 
 function _removeWheelListener( elem, eventName, callback, useCapture ) {

src/public/javascripts/services/link_map.js

@@ -146,6 +146,10 @@ export default class LinkMap {
                 $noteBox
                     .css("left", (middleW + p.x * 100) + "px")
                     .css("top", (middleH + p.y * 100) + "px");
+
+                if ($noteBox.hasClass("link-map-active-note")) {
+                    this.moveToCenterOfElement($noteBox[0]);
+                }
             },
             () => {},
             () => {},
@@ -160,6 +164,21 @@ export default class LinkMap {
         setTimeout(() => this.renderer.stop(), 3000);
     }
 
+    moveToCenterOfElement(element) {
+        const elemBounds = element.getBoundingClientRect();
+        const containerBounds = this.pzInstance.getOwner().getBoundingClientRect();
+
+        const centerX = -elemBounds.left + containerBounds.left + (containerBounds.width / 2) - (elemBounds.width / 2);
+        const centerY = -elemBounds.top + containerBounds.top + (containerBounds.height / 2) - (elemBounds.height / 2);
+
+        const transform = this.pzInstance.getTransform();
+
+        const newX = transform.x + centerX;
+        const newY = transform.y + centerY;
+
+        this.pzInstance.moveTo(newX, newY);
+    }
+
     initPanZoom() {
         if (this.pzInstance) {
             return;

src/public/stylesheets/link_map.css

@@ -6,7 +6,7 @@
 .link-map-container .note-box {
     padding: 8px;
     position: absolute !important;
-    background-color: var(--accented-background-color);
+    background-color: var(--main-background-color);
     color: var(--main-text-color);
     z-index: 4;
     border: 1px solid #666;
@@ -37,7 +37,7 @@
 }
 
 .link-map-active-note {
-    background-color: var(--more-accented-background-color) !important;
+    background-color: var(--accented-background-color) !important;
 }
 
 .link-map-container .jsplumb-connection-hover path {