added panzoom to link map

This commit is contained in:
zadam 2019-06-09 11:50:11 +02:00
parent 69e48ff4d7
commit 412b0377e9
2 changed files with 32 additions and 6 deletions

View File

@ -62,16 +62,18 @@ const linkOverlays = [
const $dialog = $("#link-map-dialog"); const $dialog = $("#link-map-dialog");
let jsPlumbInstance = null; let jsPlumbInstance = null;
let pzInstance = null;
async function showDialog() { async function showDialog() {
glob.activeDialog = $dialog; glob.activeDialog = $dialog;
await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP); await libraryLoader.requireLibrary(libraryLoader.LINK_MAP);
await libraryLoader.requireLibrary(libraryLoader.SPRINGY);
jsPlumb.ready(() => { jsPlumb.ready(() => {
initJsPlumbInstance(); initJsPlumbInstance();
initPanZoom();
loadNotesAndRelations(); loadNotesAndRelations();
}); });
@ -133,6 +135,23 @@ async function loadNotesAndRelations() {
renderer.start(); 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() { function initJsPlumbInstance() {
if (jsPlumbInstance) { if (jsPlumbInstance) {
// delete all endpoints and connections // delete all endpoints and connections
@ -160,8 +179,6 @@ function initJsPlumbInstance() {
jsPlumbInstance.registerConnectionType("inverse", { anchor:"Continuous", connector:"StateMachine", overlays: inverseRelationsOverlays }); jsPlumbInstance.registerConnectionType("inverse", { anchor:"Continuous", connector:"StateMachine", overlays: inverseRelationsOverlays });
jsPlumbInstance.registerConnectionType("link", { anchor:"Continuous", connector:"StateMachine", overlays: linkOverlays }); jsPlumbInstance.registerConnectionType("link", { anchor:"Continuous", connector:"StateMachine", overlays: linkOverlays });
jsPlumbInstance.bind("connection", (info, originalEvent) => connectionCreatedHandler(info, originalEvent));
} }
function noteIdToId(noteId) { function noteIdToId(noteId) {

View File

@ -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) { async function requireLibrary(library) {
if (library.css) { if (library.css) {
@ -70,5 +79,5 @@ export default {
ESLINT, ESLINT,
COMMONMARK, COMMONMARK,
RELATION_MAP, RELATION_MAP,
SPRINGY LINK_MAP
} }