mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
some refactorings on relation map
This commit is contained in:
parent
02fd8f8133
commit
bbe36fc7fb
@ -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)) {
|
||||||
@ -173,10 +179,6 @@ function initPanZoom() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$zoomInButton.click(() => pzInstance.zoomTo(0, 0, 1.2));
|
|
||||||
$zoomOutButton.click(() => pzInstance.zoomTo(0, 0, 0.8));
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanup() {
|
function cleanup() {
|
||||||
if (jsPlumbInstance) {
|
if (jsPlumbInstance) {
|
||||||
// delete all endpoints and connections
|
// delete all endpoints and connections
|
||||||
@ -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);
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user