diff --git a/src/public/javascripts/dialogs/link_map.js b/src/public/javascripts/dialogs/link_map.js index 59b44e61e..fae79d6eb 100644 --- a/src/public/javascripts/dialogs/link_map.js +++ b/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.SPRINGY); + await libraryLoader.requireLibrary(libraryLoader.LINK_MAP); 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) { diff --git a/src/public/javascripts/services/library_loader.js b/src/public/javascripts/services/library_loader.js index e6354e9ab..fe48119e6 100644 --- a/src/public/javascripts/services/library_loader.js +++ b/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 } \ No newline at end of file