added panzoom to link map

src/public/javascripts/dialogs/link_map.js

@@ -62,16 +62,18 @@ const linkOverlays = [
 const $dialog = $("#link-map-dialog");
 
 let jsPlumbInstance = null;
+let pzInstance = null;
 
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP);
+    await libraryLoader.requireLibrary(libraryLoader.LINK_MAP);
-    await libraryLoader.requireLibrary(libraryLoader.SPRINGY);
 
     jsPlumb.ready(() => {
         initJsPlumbInstance();
 
+        initPanZoom();
+
         loadNotesAndRelations();
     });
 
@@ -133,6 +135,23 @@ async function loadNotesAndRelations() {
     renderer.start();
 }
 
+function initPanZoom() {
+    if (pzInstance) {
+        return;
+    }
+
+    pzInstance = panzoom($linkMapContainer[0], {
+        maxZoom: 2,
+        minZoom: 0.3,
+        smoothScroll: false,
+        filterKey: function (e, dx, dy, dz) {
+            // if ALT is pressed then panzoom should bubble the event up
+            // this is to preserve ALT-LEFT, ALT-RIGHT navigation working
+            return e.altKey;
+        }
+    });
+}
+
 function initJsPlumbInstance() {
     if (jsPlumbInstance) {
         // delete all endpoints and connections
@@ -160,8 +179,6 @@ function initJsPlumbInstance() {
     jsPlumbInstance.registerConnectionType("inverse", { anchor:"Continuous", connector:"StateMachine", overlays: inverseRelationsOverlays });
 
     jsPlumbInstance.registerConnectionType("link", { anchor:"Continuous", connector:"StateMachine", overlays: linkOverlays });
-
-    jsPlumbInstance.bind("connection", (info, originalEvent) => connectionCreatedHandler(info, originalEvent));
 }
 
 function noteIdToId(noteId) {

src/public/javascripts/services/library_loader.js

@@ -34,7 +34,16 @@ const RELATION_MAP = {
     ]
 };
 
-const SPRINGY = {js: ["libraries/springy.js"]};
+const LINK_MAP = {
+    js: [
+        "libraries/jsplumb.js",
+        "libraries/panzoom.js",
+        "libraries/springy.js"
+    ],
+    css: [
+        "stylesheets/relation_map.css"
+    ]
+};
 
 async function requireLibrary(library) {
     if (library.css) {
@@ -70,5 +79,5 @@ export default {
     ESLINT,
     COMMONMARK,
     RELATION_MAP,
-    SPRINGY
+    LINK_MAP
 }