From 2bf2ec5a6cdec55422ab10fa963d570d81ea7581 Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 9 Jun 2019 21:48:30 +0200 Subject: [PATCH] link map WIP --- src/public/javascripts/dialogs/link_map.js | 73 ++++++------------- .../javascripts/services/library_loader.js | 2 +- src/public/stylesheets/link_map.css | 36 +++++++++ src/public/stylesheets/relation_map.css | 22 +++--- src/views/dialogs/link_map.ejs | 2 +- 5 files changed, 73 insertions(+), 62 deletions(-) create mode 100644 src/public/stylesheets/link_map.css diff --git a/src/public/javascripts/dialogs/link_map.js b/src/public/javascripts/dialogs/link_map.js index 9c6ed4062..de56b190c 100644 --- a/src/public/javascripts/dialogs/link_map.js +++ b/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 = $("
") .addClass("note-box") - .prop("id", noteBoxId) - .append($("").addClass("title").append(note.title)); + .prop("id", noteBoxId); + + linkService.createNoteLink(noteId, note.title).then($link => { + $noteBox.append($("").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) { diff --git a/src/public/javascripts/services/library_loader.js b/src/public/javascripts/services/library_loader.js index fe48119e6..ac8878878 100644 --- a/src/public/javascripts/services/library_loader.js +++ b/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" ] }; diff --git a/src/public/stylesheets/link_map.css b/src/public/stylesheets/link_map.css new file mode 100644 index 000000000..291c534aa --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/public/stylesheets/relation_map.css b/src/public/stylesheets/relation_map.css index 973da6f45..c315bcea2 100644 --- a/src/public/stylesheets/relation_map.css +++ b/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; } \ No newline at end of file diff --git a/src/views/dialogs/link_map.ejs b/src/views/dialogs/link_map.ejs index 2d138531f..9ebafc79f 100644 --- a/src/views/dialogs/link_map.ejs +++ b/src/views/dialogs/link_map.ejs @@ -8,7 +8,7 @@
-
+