when hovering over a note, outgoing and incoming connections are highlighted, set limit 3 seconds to the layout

This commit is contained in:
zadam 2019-08-28 22:16:12 +02:00
parent f331172c7d
commit ec06b940f4
4 changed files with 20 additions and 9 deletions

View File

@ -64,9 +64,9 @@ export default class LinkMap {
const layout = new Springy.Layout.ForceDirected( const layout = new Springy.Layout.ForceDirected(
graph, graph,
// param explanation here: https://github.com/dhotson/springy/issues/58 // param explanation here: https://github.com/dhotson/springy/issues/58
800.0, // Spring stiffness 400.0, // Spring stiffness
400.0, // Node repulsion 400.0, // Node repulsion
0.2 // Damping 0.15 // Damping
); );
const getNoteBox = noteId => { const getNoteBox = noteId => {
@ -91,6 +91,10 @@ export default class LinkMap {
$noteBox.addClass("link-map-active-note"); $noteBox.addClass("link-map-active-note");
} }
$noteBox
.mouseover(() => $(".link-" + noteId).addClass("jsplumb-connection-hover"))
.mouseout(() => $(".link-" + noteId).removeClass("jsplumb-connection-hover"));
this.$linkMapContainer.append($noteBox); this.$linkMapContainer.append($noteBox);
this.jsPlumbInstance.draggable($noteBox[0], { this.jsPlumbInstance.draggable($noteBox[0], {
@ -125,7 +129,10 @@ export default class LinkMap {
}); });
if (connection) { if (connection) {
connection.canvas.id = connectionId; $(connection.canvas)
.prop("id", connectionId)
.addClass('link-' + edge.source.id)
.addClass('link-' + edge.target.id);
} }
else { else {
console.log(`connection not created for`, edge); console.log(`connection not created for`, edge);
@ -148,6 +155,9 @@ export default class LinkMap {
); );
this.renderer.start(); this.renderer.start();
// long rendering is annoying and by 3rd seconds the basic layout should be finished
setTimeout(() => this.renderer.stop(), 3000);
} }
initPanZoom() { initPanZoom() {

View File

@ -367,7 +367,7 @@ body {
background-color: var(--button-background-color); background-color: var(--button-background-color);
border-color: var(--button-border-color); border-color: var(--button-border-color);
border-width: 1px 0 1px 0; border-width: 1px 0 1px 0;
border-radius: 3px; border-radius: 4px;
border-style: solid; border-style: solid;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -381,10 +381,6 @@ body {
font-weight: bold; font-weight: bold;
} }
.note-detail-sidebar .widget-header-actions {
padding-right: 10px;
}
.note-detail-sidebar .widget-header-action { .note-detail-sidebar .widget-header-action {
color: var(--link-color) !important; color: var(--link-color) !important;
cursor: pointer; cursor: pointer;

View File

@ -39,3 +39,8 @@
.link-map-active-note { .link-map-active-note {
background-color: var(--more-accented-background-color) !important; background-color: var(--more-accented-background-color) !important;
} }
.link-map-container .jsplumb-connection-hover path {
stroke-width: 2 !important;
stroke: var(--main-text-color);
}

View File

@ -37,7 +37,7 @@ async function getLinkMap(req) {
// no new note discovered, no need to search any further // no new note discovered, no need to search any further
break; break;
} }
console.log(newNoteIds.size, maxNotes);
if (newNoteIds.size > maxNotes) { if (newNoteIds.size > maxNotes) {
// too many notes to display // too many notes to display
break; break;