import server from "./server.js"; 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 = $("