re-center button, WIP

This commit is contained in:
azivner 2018-11-13 22:05:32 +01:00
parent db17b05db1
commit 83c6f86d26
2 changed files with 27 additions and 1 deletions

View File

@ -14,6 +14,7 @@ const $relationMapContainer = $("#relation-map-container");
const $createChildNote = $("#relation-map-create-child-note"); const $createChildNote = $("#relation-map-create-child-note");
const $zoomInButton = $("#relation-map-zoom-in"); const $zoomInButton = $("#relation-map-zoom-in");
const $zoomOutButton = $("#relation-map-zoom-out"); const $zoomOutButton = $("#relation-map-zoom-out");
const $centerButton = $("#relation-map-center");
let mapData; let mapData;
let jsPlumbInstance; let jsPlumbInstance;
@ -168,7 +169,7 @@ function initPanZoom() {
pzInstance = panzoom($relationMapContainer[0], { pzInstance = panzoom($relationMapContainer[0], {
maxZoom: 2, maxZoom: 2,
minZoom: 0.1, minZoom: 0.3,
smoothScroll: false, smoothScroll: false,
onMouseDown: function(event) { onMouseDown: function(event) {
if (clipboard) { if (clipboard) {
@ -512,6 +513,26 @@ function getMousePosition(evt) {
}; };
} }
$centerButton.click(() => {
if (mapData.notes.length === 0) {
return; // nothing to recenter on
}
let totalX = 0, totalY = 0;
for (const note of mapData.notes) {
totalX += note.x;
totalY += note.y;
}
let averageX = totalX / mapData.notes.length;
let averageY = totalY / mapData.notes.length;
console.log(averageX, averageY);
//pzInstance.moveTo(averageX, averageY);
});
$component.on("drop", dropNoteOntoRelationMapHandler); $component.on("drop", dropNoteOntoRelationMapHandler);
$component.on("dragover", ev => ev.preventDefault()); $component.on("dragover", ev => ev.preventDefault());

View File

@ -6,6 +6,11 @@
Create child note Create child note
</button> </button>
<button type="button"
class="btn icon-button floating-button jam jam-align-center"
title="Re-center view on notes"
id="relation-map-center" style="right: 100px;"></button>
<div class="btn-group floating-button" style="right: 20px;"> <div class="btn-group floating-button" style="right: 20px;">
<button type="button" <button type="button"
class="btn icon-button jam jam-search-plus" class="btn icon-button jam jam-search-plus"