drag all selected notes instead of just one

src/public/javascripts/services/drag_and_drop.js

@@ -8,11 +8,17 @@ const dragAndDropSetup = {
             return false;
         }
 
+        node.setSelected(true);
+
+        const selectedNodes = treeService.getSelectedNodes().map(node => {
+            return {
+                noteId: node.data.noteId,
+                title: node.data.title
+            }
+        });
+
         // this is for dragging notes into relation map
-        data.dataTransfer.setData("text", JSON.stringify({
+        data.dataTransfer.setData("text", JSON.stringify(selectedNodes));
-            noteId: node.data.noteId,
-            title: node.data.title
-        }));
 
         // This function MUST be defined to enable dragging for the tree.
         // Return false to cancel dragging of node.
@@ -27,9 +33,6 @@ const dragAndDropSetup = {
         // This function MUST be defined to enable dropping of items on the tree.
         // data.hitMode is 'before', 'after', or 'over'.
 
-        const nodeToMove = data.otherNode;
-        nodeToMove.setSelected(true);
-
         const selectedNodes = treeService.getSelectedNodes();
 
         if (data.hitMode === "before") {

src/public/javascripts/services/note_detail_relation_map.js

@@ -383,6 +383,13 @@ function getFreePosition() {
     return [100, maxY + 200];
 }
 
+async function refresh() {
+    // delete all endpoints and connections
+    jsPlumbInstance.deleteEveryEndpoint();
+
+    await loadNotesAndRelations();
+}
+
 $addChildNotesButton.click(async () => {
     const children = await server.get("notes/" + noteDetailService.getCurrentNoteId() + "/children");
 
@@ -411,10 +418,7 @@ $addChildNotesButton.click(async () => {
 
     saveData();
 
-    // delete all endpoints and connections
+    await refresh();
-    jsPlumbInstance.deleteEveryEndpoint();
-
-    await loadNotesAndRelations();
 });
 
 let clipboard = null;
@@ -448,27 +452,46 @@ function getZoom() {
     return matches[1];
 }
 
-
+async function dropNoteOntoRelationMapHandler(ev) {
-function dragover_handler(ev) {
-    ev.preventDefault();
-    // Set the dropEffect to move
-    //ev.dataTransfer.dropEffect = "move";
-
-    console.log("DRAGOVER");
-}
-
-function drop_handler(ev) {
     ev.preventDefault();
 
-    const note = JSON.parse(ev.originalEvent.dataTransfer.getData("text"));
+    const notes = JSON.parse(ev.originalEvent.dataTransfer.getData("text"));
 
     let {x, y} = getMousePosition(ev);
 
     // modifying position so that cursor is on the top-center of the box
-    x -= 80;
+    const startX = x -= 80;
     y -= 15;
 
-    createNoteBox(note.noteId, note.title, x, y);
+    const currentNoteId = treeService.getCurrentNode().data.noteId;
+
+    for (const note of notes) {
+        if (note.noteId === currentNoteId) {
+            // we don't allow placing current (relation map) into itself
+            // the reason is that when dragging notes from the tree, the relation map is always selected
+            // since it's focused.
+            continue;
+        }
+
+        const exists = mapData.notes.some(n => n.noteId === note.noteId);
+
+        if (exists) {
+            alert(`Note "${note.title}" is already placed into the diagram`);
+            continue;
+        }
+
+        mapData.notes.push({id: note.noteId, x, y});
+
+        if (x - startX > 1000) {
+            x = startX;
+            y += 200;
+        }
+        else {
+            x += 200;
+        }
+    }
+
+    await refresh();
 }
 
 function getMousePosition(evt) {
@@ -482,8 +505,8 @@ function getMousePosition(evt) {
     };
 }
 
-$component.on("drop", drop_handler);
+$component.on("drop", dropNoteOntoRelationMapHandler);
-$component.on("dragover", dragover_handler);
+$component.on("dragover", ev => ev.preventDefault());
 
 export default {
     show,

src/views/details/relation_map.ejs

@@ -1,20 +1,19 @@
 <div id="note-detail-relation-map" class="note-detail-component">
-    <button id="relation-map-add-child-notes" class="btn" type="button"
+    <button id="relation-map-create-child-note" class="btn btn-sm" type="button"
-            title="Add all child notes of this relation map note">Add child notes</button>
+            title="Create new child note and add it into this relation map">
+        <span class="jam jam-plus"></span>
 
-    &nbsp;
+        Create child note
-
+    </button>
-    <button id="relation-map-create-child-note" class="btn" type="button"
-            title="Create new child note and add it into this relation map">Create child note</button>
 
     <div class="btn-group" style="float: right; padding-right: 20px;">
         <button type="button"
-                class="btn icon-button jam jam-plus"
+                class="btn icon-button jam jam-search-plus"
                 title="Zoom In"
                 id="relation-map-zoom-in"></button>
 
         <button type="button"
-                class="btn icon-button jam jam-minus"
+                class="btn icon-button jam jam-search-minus"
                 title="Zoom Out"
                 id="relation-map-zoom-out"></button>
     </div>