From e7cea59ba7b5381fd7157dbe9b1b4e734b6e3ede Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Mon, 12 Nov 2018 21:18:22 +0100
Subject: [PATCH] fixes for relation map rendering

---
 src/public/javascripts/dialogs/info.js        |  4 +--
 src/public/javascripts/dialogs/prompt.js      |  4 +--
 .../services/note_detail_relation_map.js      | 35 ++++++++++---------
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/public/javascripts/dialogs/info.js b/src/public/javascripts/dialogs/info.js
index f64f83ce0..db8860d64 100644
--- a/src/public/javascripts/dialogs/info.js
+++ b/src/public/javascripts/dialogs/info.js
@@ -11,9 +11,7 @@ function info(message) {
 
     $dialog.modal();
 
-    return new Promise((res, rej) => {
-        resolve = res;
-    });
+    return new Promise((res, rej) => { resolve = res; });
 }
 
 $dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
diff --git a/src/public/javascripts/dialogs/prompt.js b/src/public/javascripts/dialogs/prompt.js
index eeb983b16..93c9b323f 100644
--- a/src/public/javascripts/dialogs/prompt.js
+++ b/src/public/javascripts/dialogs/prompt.js
@@ -13,9 +13,7 @@ function ask(message, defaultValue = '') {
 
     $dialog.modal();
 
-    return new Promise((res, rej) => {
-        resolve = res;
-    });
+    return new Promise((res, rej) => { resolve = res; });
 }
 
 $dialog.on('shown.bs.modal', () => $answer.focus().select());
diff --git a/src/public/javascripts/services/note_detail_relation_map.js b/src/public/javascripts/services/note_detail_relation_map.js
index 643c39e2e..0d5cdcda9 100644
--- a/src/public/javascripts/services/note_detail_relation_map.js
+++ b/src/public/javascripts/services/note_detail_relation_map.js
@@ -6,6 +6,7 @@ import treeService from "./tree.js";
 import contextMenuWidget from "./context_menu.js";
 import infoService from "./info.js";
 import promptDialog from "../dialogs/prompt.js";
+import infoDialog from "../dialogs/info.js";
 
 const $component = $("#note-detail-relation-map");
 const $relationMapContainer = $("#relation-map-container");
@@ -62,10 +63,6 @@ function loadMapData() {
 }
 
 async function show() {
-    const result = await promptDialog.ask("Enter name of new note:", "new note");
-
-    alert(result);
-
     $component.show();
 
     await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP);
@@ -95,15 +92,22 @@ async function loadNotesAndRelations() {
             || (rel.sourceNoteId === relation.targetNoteId && rel.targetNoteId === relation.sourceNoteId)));
 
         if (match) {
-            match.type = 'biDirectional';
+            match.type = relation.type = 'biDirectional';
+            relation.render = false; // don't render second relation
         } else {
             relation.type = 'uniDirectional';
-            relations.push(relation);
+            relation.render = true;
         }
+
+        relations.push(relation);
     }
 
     mapData.notes = mapData.notes.filter(note => note.id in data.noteTitles);
 
+    // delete all endpoints and connections
+    // this is done at this point (after async operations) to reduce flicker to the minimum
+    jsPlumbInstance.deleteEveryEndpoint();
+
     jsPlumbInstance.batch(async function () {
         for (const note of mapData.notes) {
             const title = data.noteTitles[note.id];
@@ -112,7 +116,7 @@ async function loadNotesAndRelations() {
         }
 
         for (const relation of relations) {
-            if (relation.name === 'isChildOf') {
+            if (!relation.render) {
                 continue;
             }
 
@@ -256,7 +260,7 @@ async function connectionCreatedHandler(info, originalEvent) {
         return;
     }
 
-    const name = prompt("Specify new relation name:");
+    const name = await promptDialog.ask("Specify new relation name:");
 
     if (!name || !name.trim()) {
         jsPlumbInstance.deleteConnection(connection);
@@ -273,7 +277,7 @@ async function connectionCreatedHandler(info, originalEvent) {
         && rel.name === name);
 
     if (relationExists) {
-        alert("Connection '" + name + "' between these notes already exists.");
+        await infoDialog.info("Connection '" + name + "' between these notes already exists.");
 
         jsPlumbInstance.deleteConnection(connection);
 
@@ -284,8 +288,7 @@ async function connectionCreatedHandler(info, originalEvent) {
 
     relations.push({ attributeId: attribute.attributeId , targetNoteId, sourceNoteId, name });
 
-    connection.id = attribute.attributeId;
-    connection.getOverlay("label").setLabel(name);
+    await refresh();
 }
 
 $relationMapContainer.on("contextmenu", ".note-box", e => {
@@ -318,7 +321,7 @@ async function noteContextMenuHandler(event, cmd) {
     }
     else if (cmd === "edit-title") {
         const $title = $noteBox.find(".title a");
-        const title = prompt("Enter new note title:", $title.text());
+        const title = await promptDialog.ask("Enter new note title:", $title.text());
 
         if (!title) {
             return;
@@ -382,16 +385,13 @@ async function createNoteBox(id, title, x, y) {
 }
 
 async function refresh() {
-    // delete all endpoints and connections
-    jsPlumbInstance.deleteEveryEndpoint();
-
     await loadNotesAndRelations();
 }
 
 let clipboard = null;
 
 $createChildNote.click(async () => {
-    const title = prompt("Enter title of new note", "new note");
+    const title = await promptDialog.ask("Enter title of new note", "new note");
 
     if (!title.trim()) {
         return;
@@ -443,7 +443,8 @@ async function dropNoteOntoRelationMapHandler(ev) {
         const exists = mapData.notes.some(n => n.noteId === note.noteId);
 
         if (exists) {
-            alert(`Note "${note.title}" is already placed into the diagram`);
+            await infoDialog.info(`Note "${note.title}" is already placed into the diagram`);
+
             continue;
         }