gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 03:29:02 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

some refactorings on relation map

Browse Source
This commit is contained in:
azivner 2018-11-12 09:57:48 +01:00
parent 02fd8f8133
commit bbe36fc7fb
2 changed files with 24 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/public/javascripts/services/note_detail_relation_map.js
View File

@ -136,9 +136,11 @@ function initPanZoom() {
smoothScroll: false, smoothScroll: false,
onMouseDown: function(event) { onMouseDown: function(event) {
if (clipboard) { if (clipboard) {
const {x, y} = getMousePos(event); let {x, y} = getMousePosition(event);
console.log(x, y); // modifying position so that cursor is on the top-center of the box
x -= 80;
y -= 15;
createNoteBox(clipboard.id, clipboard.title, x, y); createNoteBox(clipboard.id, clipboard.title, x, y);
@ -151,10 +153,10 @@ function initPanZoom() {
} }
}); });
pzInstance.on('transform', () => { pzInstance.on('transform', () => { // gets triggered on any transform change
jsPlumbInstance.setZoom(getZoom()); jsPlumbInstance.setZoom(getZoom());
updateTransform(); saveCurrentTransform();
}); });
if (mapData.transform) { if (mapData.transform) {
@ -163,7 +165,11 @@ function initPanZoom() {
pzInstance.moveTo(mapData.transform.x, mapData.transform.y); pzInstance.moveTo(mapData.transform.x, mapData.transform.y);
} }
function updateTransform() { $zoomInButton.click(() => pzInstance.zoomTo(0, 0, 1.2));
$zoomOutButton.click(() => pzInstance.zoomTo(0, 0, 0.8));
}
function saveCurrentTransform() {
const newTransform = pzInstance.getTransform(); const newTransform = pzInstance.getTransform();
if (JSON.stringify(newTransform) !== JSON.stringify(mapData.transform)) { if (JSON.stringify(newTransform) !== JSON.stringify(mapData.transform)) {
@ -171,10 +177,6 @@ function initPanZoom() {
saveData(); saveData();
} }
}
$zoomInButton.click(() => pzInstance.zoomTo(0, 0, 1.2));
$zoomOutButton.click(() => pzInstance.zoomTo(0, 0, 0.8));
} }
function cleanup() { function cleanup() {
@ -342,9 +344,9 @@ async function createNoteBox(id, title, x, y) {
jsPlumbInstance.getContainer().appendChild($noteBox[0]); jsPlumbInstance.getContainer().appendChild($noteBox[0]);
jsPlumbInstance.draggable($noteBox[0], { jsPlumbInstance.draggable($noteBox[0], {
start:function(params) {}, start: params => {},
drag:function(params) {}, drag: params => {},
stop:function(params) { stop: params => {
const note = mapData.notes.find(note => note.id === params.el.id); const note = mapData.notes.find(note => note.id === params.el.id);
if (!note) { if (!note) {
@ -418,7 +420,7 @@ $addChildNotesButton.click(async () => {
let clipboard = null; let clipboard = null;
$createChildNote.click(async () => { $createChildNote.click(async () => {
const title = "new note" || prompt("Enter title of new note", "new note"); const title = prompt("Enter title of new note", "new note");
if (!title.trim()) { if (!title.trim()) {
return; return;
@ -460,7 +462,7 @@ function drop_handler(ev) {
console.log("DROP!", ev); console.log("DROP!", ev);
} }
function getMousePos(evt) { function getMousePosition(evt) {
const rect = $relationMapContainer[0].getBoundingClientRect(); const rect = $relationMapContainer[0].getBoundingClientRect();
const zoom = getZoom(); const zoom = getZoom();
@ -471,26 +473,6 @@ function getMousePos(evt) {
}; };
} }
$relationMapContainer.click(function(event) {
console.log("HEY!");
console.log(event.clientX, event.clientY);
if (clipboard) {
const {x, y} = getMousePos(event);
console.log(x, y);
createNoteBox(clipboard.id, clipboard.title, x, y);
//mapData.notes.push({ id: clipboard.id, x, y });
clipboard = null;
}
return true;
});
$component.on("drop", drop_handler); $component.on("drop", drop_handler);
$component.on("dragover", dragover_handler); $component.on("dragover", dragover_handler);

9
src/public/stylesheets/relation-map.css
View File

@ -1,16 +1,13 @@
#note-detail-relation-map { #note-detail-relation-map {
height: 100%; height: 100%;
} overflow: hidden !important;
/* this is removing dotted border around focused/active relation map */
#note-detail-relation-map, #note-detail-relation-map:active, #note-detail-relation-map:focus {
outline: none;
} }
#relation-map-wrapper { #relation-map-wrapper {
position: relative; position: relative;
overflow: hidden !important; overflow: hidden !important;
height: 800px; height: 4000px; /* we need to set fixed height. This number is probably enough to cover any screen */
outline: none; /* remove dotted outline on click */
} }
.note-box { .note-box {