link map WIP

src/public/javascripts/dialogs/link_map.js

@@ -2,6 +2,7 @@ import server from '../services/server.js';
 import noteDetailService from "../services/note_detail.js";
 import libraryLoader from "../services/library_loader.js";
 import treeCache from "../services/tree_cache.js";
+import linkService from "../services/link.js";
 
 const $linkMapContainer = $("#link-map-container");
 
@@ -15,41 +16,6 @@ const uniDirectionalOverlays = [
     [ "Label", { label: "", id: "label", cssClass: "connection-label" }]
 ];
 
-const biDirectionalOverlays = [
-    [ "Arrow", {
-        location: 1,
-        id: "arrow",
-        length: 14,
-        foldback: 0.8
-    } ],
-    [ "Label", { label: "", id: "label", cssClass: "connection-label" }],
-    [ "Arrow", {
-        location: 0,
-        id: "arrow2",
-        length: 14,
-        direction: -1,
-        foldback: 0.8
-    } ]
-];
-
-const inverseRelationsOverlays = [
-    [ "Arrow", {
-        location: 1,
-        id: "arrow",
-        length: 14,
-        foldback: 0.8
-    } ],
-    [ "Label", { label: "", location: 0.2, id: "label-source", cssClass: "connection-label" }],
-    [ "Label", { label: "", location: 0.8, id: "label-target", cssClass: "connection-label" }],
-    [ "Arrow", {
-        location: 0,
-        id: "arrow2",
-        length: 14,
-        direction: -1,
-        foldback: 0.8
-    } ]
-];
-
 const linkOverlays = [
     [ "Arrow", {
         location: 1,
@@ -81,9 +47,9 @@ async function showDialog() {
 }
 
 async function loadNotesAndRelations() {
-    const noteId = noteDetailService.getActiveNoteId();
+    const activeNoteId = noteDetailService.getActiveNoteId();
 
-    const links = await server.get(`notes/${noteId}/link-map`);
+    const links = await server.get(`notes/${activeNoteId}/link-map`);
 
     const noteIds = new Set(links.map(l => l.noteId).concat(links.map(l => l.targetNoteId)));
 
@@ -113,17 +79,33 @@ async function loadNotesAndRelations() {
 
         const $noteBox = $("<div>")
             .addClass("note-box")
-            .prop("id", noteBoxId)
-            .append($("<span>").addClass("title").append(note.title));
+            .prop("id", noteBoxId);
+
+        linkService.createNoteLink(noteId, note.title).then($link => {
+            $noteBox.append($("<span>").addClass("title").append($link));
+        });
+
+        if (activeNoteId === noteId) {
+            $noteBox.addClass("link-map-active-note");
+        }
 
         jsPlumbInstance.getContainer().appendChild($noteBox[0]);
 
+        jsPlumbInstance.draggable($noteBox[0], {
+            start: params => {
+                renderer.stop();
+            },
+            drag: params => {},
+            stop: params => {}
+        });
+
+
         return $noteBox;
     }
 
     const renderer = new Springy.Renderer(
         layout,
-        () => {}, //cleanup(),
+        () => {},
         (edge, p1, p2) => {
             const connectionId = edge.source.id + '-' + edge.target.id;
 
@@ -137,7 +119,7 @@ async function loadNotesAndRelations() {
             const connection = jsPlumbInstance.connect({
                 source: noteIdToId(edge.source.id),
                 target: noteIdToId(edge.target.id),
-                type: 'relation' // FIXME
+                type: 'link'
             });
 
             connection.canvas.id = connectionId;
@@ -194,19 +176,12 @@ function initJsPlumbInstance() {
 
     jsPlumbInstance = jsPlumb.getInstance({
         Endpoint: ["Dot", {radius: 2}],
-        Connector: "StateMachine",
         ConnectionOverlays: uniDirectionalOverlays,
         HoverPaintStyle: { stroke: "#777", strokeWidth: 1 },
         Container: $linkMapContainer.attr("id")
     });
 
-    jsPlumbInstance.registerConnectionType("uniDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: uniDirectionalOverlays });
-
-    jsPlumbInstance.registerConnectionType("biDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: biDirectionalOverlays });
-
-    jsPlumbInstance.registerConnectionType("inverse", { anchor:"Continuous", connector:"StateMachine", overlays: inverseRelationsOverlays });
-
-    jsPlumbInstance.registerConnectionType("link", { anchor:"Continuous", connector:"StateMachine", overlays: linkOverlays });
+    jsPlumbInstance.registerConnectionType("link", { anchor: "Continuous", connector: "Straight", overlays: linkOverlays });
 }
 
 function noteIdToId(noteId) {

src/public/javascripts/services/library_loader.js

@@ -41,7 +41,7 @@ const LINK_MAP = {
         "libraries/springy.js"
     ],
     css: [
-        "stylesheets/relation_map.css"
+        "stylesheets/link_map.css"
     ]
 };
 

src/public/stylesheets/link_map.css

@@ -0,0 +1,36 @@
+.link-map-active-note {
+    background-color: var(--more-accented-background-color) !important;
+}
+
+#link-map-container .note-box {
+    padding: 8px;
+    position: absolute !important;
+    background-color: var(--accented-background-color);
+    color: var(--main-text-color);
+    z-index: 4;
+    border: 1px solid #666;
+    box-shadow: 2px 2px 19px #999;
+    border-radius: 8px;
+    opacity: 0.8;
+    font-size: 11px;
+    width: auto;
+    height: auto;
+    max-width: 150px;
+    min-width: 120px;
+    max-height: 100px;
+    overflow: hidden;
+}
+
+#link-map-container .note-box:hover {
+    background-color: var(--more-accented-background-color);
+}
+
+#link-map-container .note-box .title {
+    font-size: larger;
+    font-weight: 600;
+}
+
+#link-map-container .floating-button {
+    position: absolute !important;
+    z-index: 100;
+}

src/public/stylesheets/relation_map.css

@@ -10,7 +10,7 @@
     outline: none; /* remove dotted outline on click */
 }
 
-.note-box {
+.note-detail-relation-map .note-box {
     padding: 16px;
     position: absolute !important;
     background-color: var(--accented-background-color);
@@ -29,20 +29,20 @@
     overflow: hidden;
 }
 
-.note-box:hover {
+.note-detail-relation-map .note-box:hover {
     background-color: var(--more-accented-background-color);
 }
 
-.note-box .title {
+.note-detail-relation-map .note-box .title {
     font-size: larger;
     font-weight: 600;
 }
 
-.connection-label.jtk-hover, .jtk-source-hover, .jtk-target-hover {
+.note-detail-relation-map .connection-label.jtk-hover, .jtk-source-hover, .jtk-target-hover {
     background-color: var(--more-accented-background-color);
 }
 
-.connection-label {
+.note-detail-relation-map .connection-label {
     background-color: var(--accented-background-color);
     color: var(--main-text-color);
     opacity: 0.8;
@@ -52,7 +52,7 @@
     cursor: pointer;
 }
 
-.endpoint {
+.note-detail-relation-map .endpoint {
     position: absolute;
     bottom: 37%;
     right: 5px;
@@ -63,21 +63,21 @@
     box-shadow: 0 0 2px black;
 }
 
-.endpoint:hover {
+.note-detail-relation-map .endpoint:hover {
     box-shadow: 0 0 6px black;
 }
 
-.dragHover {
+.note-detail-relation-map .dragHover {
     border: 2px solid orange;
 }
 
-path, .jtk-endpoint { cursor:pointer; }
+.note-detail-relation-map path, .note-detail-relation-map .jtk-endpoint { cursor:pointer; }
 
-.ui-contextmenu {
+.note-detail-relation-map .ui-contextmenu {
     z-index: 100;
 }
 
-.floating-button {
+.note-detail-relation-map .floating-button {
     position: absolute !important;
     z-index: 100;
 }

src/views/dialogs/link_map.ejs

@@ -8,7 +8,7 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="modal-body" style="outline: none;">
+            <div class="modal-body" style="outline: none; overflow: hidden;">
                 <div id="link-map-container"></div>
             </div>
         </div>