diff --git a/src/public/javascripts/services/note_detail_relation_map.js b/src/public/javascripts/services/note_detail_relation_map.js index 1fc07405c..dfb2d7e80 100644 --- a/src/public/javascripts/services/note_detail_relation_map.js +++ b/src/public/javascripts/services/note_detail_relation_map.js @@ -3,11 +3,306 @@ import noteDetailService from "./note_detail.js"; import libraryLoader from "./library_loader.js"; const $noteDetailRelationMap = $("#note-detail-relation-map"); +const $relationMapCanvas = $("#relation-map-canvas"); async function show() { $noteDetailRelationMap.show(); await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP); + + jsPlumb.ready(function () { + const instance = jsPlumb.getInstance({ + Endpoint: ["Dot", {radius: 2}], + Connector: "StateMachine", + HoverPaintStyle: {stroke: "#1e8151", strokeWidth: 2 }, + ConnectionOverlays: [ + [ "Arrow", { + location: 1, + id: "arrow", + length: 14, + foldback: 0.8 + } ], + [ "Label", { label: "", id: "label", cssClass: "aLabel" }] + ], + Container: "relation-map-canvas" + }); + + instance.registerConnectionType("basic", { anchor:"Continuous", connector:"StateMachine" }); + + window.jsp = instance; + + let data; + let initDone = false; + + instance.bind("connection", function (info) { + const connection = info.connection; + let type; + + if (initDone) { + type = prompt("Specify new connection label:"); + + data.relations.push({ + connectionId: connection.id, + source: connection.sourceId, + target: connection.targetId, + type: type + }); + + saveData(); + } + else { + type = "none"; + } + + connection.getOverlay("label").setLabel(type); + }); + + jsPlumb.on($relationMapCanvas[0], "dblclick", function(e) { + newNode(jsPlumbUtil.uuid(),"new", e.offsetX, e.offsetY, "auto", "auto"); + }); + + function saveData() { + localStorage.setItem('triliumData', JSON.stringify(data)); + } + + function initNode(el) { + instance.draggable(el, { + handle: ".handle", + start:function(params) { + }, + drag:function(params) { + + }, + stop:function(params) { + const note = data.notes.find(note => note.id === params.el.id); + + if (!note) { + console.error(`Note ${params.el.id} not found!`); + return; + } + + [note.x, note.y] = params.finalPos; + + saveData(); + } + }); + + instance.makeSource(el, { + filter: ".endpoint", + anchor: "Continuous", + connectorStyle: { stroke: "#5c96bc", strokeWidth: 2, outlineStroke: "transparent", outlineWidth: 4 }, + connectionType:"basic", + extract:{ + "action":"the-action" + } + }); + + instance.makeTarget(el, { + dropOptions: { hoverClass: "dragHover" }, + anchor: "Continuous", + allowLoopback: true + }); + + // this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped + // version of this demo to find out about new nodes being added. + // + instance.fire("jsPlumbDemoNodeAdded", el); + + $(el).resizable({ + resize: function(event, ui) { +// instance.repaint(ui.helper.prop("id")); + + instance.repaintEverything(); + }, + stop: function(event, ui) { + const note = data.notes.find(note => note.id === ui.helper.prop("id")); + + note.width = ui.helper.width(); + note.height = ui.helper.height(); + + saveData(); + }, + handles: "all" + }); + } + + function newNode(id, title, x, y, width, height) { + const $noteBox = $("