From 41fca4c4f36734f5e64a0dc71112f2c23528cec4 Mon Sep 17 00:00:00 2001 From: azivner Date: Thu, 25 Oct 2018 14:01:03 +0200 Subject: [PATCH] fixes, getting rid of resizing for now --- .../services/note_detail_relation_map.js | 77 +++++++++---------- src/public/stylesheets/relation-map.css | 6 ++ src/routes/api/notes.js | 4 +- 3 files changed, 43 insertions(+), 44 deletions(-) diff --git a/src/public/javascripts/services/note_detail_relation_map.js b/src/public/javascripts/services/note_detail_relation_map.js index de4308cab..ffa02e21b 100644 --- a/src/public/javascripts/services/note_detail_relation_map.js +++ b/src/public/javascripts/services/note_detail_relation_map.js @@ -31,7 +31,7 @@ async function show() { } jsPlumb.ready(async function () { - const uniDirectionalConnection = [ + const uniDirectionalOverlays = [ [ "Arrow", { location: 1, id: "arrow", @@ -41,7 +41,7 @@ async function show() { [ "Label", { label: "", id: "label", cssClass: "aLabel" }] ]; - const biDirectionalConnection = [ + const biDirectionalOverlays = [ [ "Arrow", { location: 1, id: "arrow", @@ -66,9 +66,9 @@ async function show() { }); - instance.registerConnectionType("uniDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: uniDirectionalConnection }); + instance.registerConnectionType("uniDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: uniDirectionalOverlays }); - instance.registerConnectionType("biDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: biDirectionalConnection }); + instance.registerConnectionType("biDirectional", { anchor:"Continuous", connector:"StateMachine", overlays: biDirectionalOverlays }); // instance.bind("connection", function (info) { // const connection = info.connection; @@ -91,7 +91,7 @@ async function show() { // }); jsPlumb.on($relationMapCanvas[0], "dblclick", function(e) { - newNode(jsPlumbUtil.uuid(),"new", e.offsetX, e.offsetY, "auto", "auto"); + newNode(jsPlumbUtil.uuid(),"new", e.offsetX, e.offsetY); }); $relationMapCanvas.contextmenu({ @@ -174,23 +174,41 @@ async function show() { $relationMapCanvas.contextmenuRelation("open", e, { connection: c }); }); - const noteIds = mapData.notes.map(note => note.noteId); + const noteIds = mapData.notes.map(note => note.id); const data = await server.post("notes/relation-map", { noteIds }); + const relations = []; + + for (const relation of data.relations) { + const match = relations.find(rel => + rel.name === relation.name + && ((rel.sourceNoteId === relation.sourceNoteId && rel.targetNoteId === relation.targetNoteId) + || (rel.sourceNoteId === relation.targetNoteId && rel.targetNoteId === relation.sourceNoteId))); + + if (match) { + match.type = 'biDirectional'; + } + else { + relation.type = 'uniDirectional'; + relations.push(relation); + } + } + + mapData.notes = mapData.notes.filter(note => note.id in data.noteTitles); + instance.batch(function () { const maxY = mapData.notes.filter(note => !!note.y).map(note => note.y).reduce((a, b) => Math.max(a, b), 0); let curX = 100; let curY = maxY + 200; for (const note of mapData.notes) { + const title = data.noteTitles[note.id]; + if (note.x && note.y) { - newNode(note.id, note.title, note.x, note.y, note.width + "px", note.height + "px"); + newNode(note.id, title, note.x, note.y); } else { - note.width = "auto"; - note.height = "auto"; - - newNode(note.id, note.title, curX, curY, note.width, note.height); + newNode(note.id, title, curX, curY); if (curX > 1000) { curX = 100; @@ -202,19 +220,17 @@ async function show() { } } - for (const relation of mapData.relations) { + for (const relation of relations) { if (relation.name === 'isChildOf') { continue; } - const connection = instance.connect({ id: relation.id, source: relation.source, target: relation.target, type: "uniDirectional" }); + const connection = instance.connect({ id: `${relation.sourceNoteId}${relation.targetNoteId}`, source: relation.sourceNoteId, target: relation.targetNoteId, type: relation.type }); relation.connectionId = connection.id; connection.getOverlay("label").setLabel(relation.name); connection.canvas.setAttribute("data-connection-id", connection.id); - - //instance.recalculateOffsets(connection); } initDone = true; @@ -280,26 +296,9 @@ function initNode(el) { // 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 = mapData.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) { +function newNode(id, title, x, y) { const $noteBox = $("
") .addClass("note-box") .prop("id", id) @@ -307,9 +306,7 @@ function newNode(id, title, x, y, width, height) { .append($("").addClass("title").text(title)) .append($("
").addClass("endpoint")) .css("left", x + "px") - .css("top", y + "px") - .css("width", width) - .css("height", height); + .css("top", y + "px"); instance.getContainer().appendChild($noteBox[0]); @@ -329,15 +326,11 @@ $addChildNotesButton.click(async () => { continue; } - const note = { - id: child.noteId, - width: "auto", - height: "auto" - }; + const note = { id: child.noteId }; mapData.notes.push(note); - newNode(note.id, note.title, curX, curY, note.width, note.height); + newNode(note.id, note.title, curX, curY); if (curX > 1000) { curX = 100; diff --git a/src/public/stylesheets/relation-map.css b/src/public/stylesheets/relation-map.css index 72d006cda..bad651adb 100644 --- a/src/public/stylesheets/relation-map.css +++ b/src/public/stylesheets/relation-map.css @@ -17,6 +17,12 @@ background-color: white; font-size: 11px; transition: background-color 0.25s ease-in; + width: auto; + height: auto; + max-width: 200px; + min-width: 150px; + max-height: 200px; + overflow: hidden; } .note-box:hover { diff --git a/src/routes/api/notes.js b/src/routes/api/notes.js index 4f526897f..bac00d042 100644 --- a/src/routes/api/notes.js +++ b/src/routes/api/notes.js @@ -105,11 +105,11 @@ async function getRelationMap(req) { const questionMarks = noteIds.map(noteId => '?').join(','); - (await repository.getEntities(`SELECT * FROM notes WHERE noteId IN (${questionMarks})`, noteIds)) + (await repository.getEntities(`SELECT * FROM notes WHERE isDeleted = 0 AND noteId IN (${questionMarks})`, noteIds)) .forEach(note => resp.noteTitles[note.noteId] = note.title); // FIXME: this actually doesn't take into account inherited relations! But maybe it is better this way? - resp.relations = (await repository.getEntities(`SELECT * FROM attributes WHERE type = 'relation' AND noteId IN (${questionMarks})`, noteIds)) + resp.relations = (await repository.getEntities(`SELECT * FROM attributes WHERE isDeleted = 0 AND type = 'relation' AND noteId IN (${questionMarks})`, noteIds)) .map(relation => { return { sourceNoteId: relation.noteId, targetNoteId: relation.value,