button for creating subnote in relation map and other unrelated changed, WIP

src/public/javascripts/services/note_detail.js

@@ -187,6 +187,12 @@ async function loadNoteDetail(noteId) {
         noteTypeService.setNoteType(currentNote.type);
         noteTypeService.setNoteMime(currentNote.mime);
 
+        for (const componentType in components) {
+            if (componentType !== currentNote.type) {
+                components[componentType].cleanup();
+            }
+        }
+
         $noteDetailComponents.hide();
 
         const newSessionCreated = await handleProtectedSession();

src/public/javascripts/services/note_detail_code.js

@@ -97,5 +97,10 @@ export default {
     show,
     getContent,
     focus,
-    onNoteChange
-}
+    onNoteChange,
+    cleanup: () => {
+        if (codeEditor) {
+            codeEditor.setValue('');
+        }
+    }
+}

src/public/javascripts/services/note_detail_file.js

@@ -47,5 +47,6 @@ export default {
     show,
     getContent: () => null,
     focus: () => null,
-    onNoteChange: () => null
+    onNoteChange: () => null,
+    cleanup: () => null
 }

src/public/javascripts/services/note_detail_relation_map.js

@@ -7,6 +7,7 @@ import treeService from "./tree.js";
 const $noteDetailRelationMap = $("#note-detail-relation-map");
 const $relationMapCanvas = $("#relation-map-canvas");
 const $addChildNotesButton = $("#relation-map-add-child-notes");
+const $createChildNote = $("#relation-map-create-child-note");
 const $zoomInButton = $("#relation-map-zoom-in");
 const $zoomOutButton = $("#relation-map-zoom-out");
 
@@ -64,7 +65,12 @@ async function show() {
 
     loadMapData();
 
-    jsPlumb.ready(initJsPlumb);
+    jsPlumb.ready(() => {
+        initJsPlumbInstance();
+
+        loadNotesAndRelations();
+    });
+
 }
 
 async function loadNotesAndRelations() {
@@ -142,7 +148,23 @@ function initPanZoom() {
     $zoomOutButton.click(() => pz.zoomTo(0, 0, 0.8));
 }
 
-async function initJsPlumb () {
+function cleanup() {
+    if (instance) {
+        // delete all endpoints and connections
+        instance.deleteEveryEndpoint();
+
+        // without this we still end up with note boxes remaining in the canvas
+        $relationMapCanvas.empty();
+    }
+}
+
+function initJsPlumbInstance () {
+    if (instance) {
+        cleanup();
+
+        return;
+    }
+
     instance = jsPlumb.getInstance({
         Endpoint: ["Dot", {radius: 2}],
         Connector: "StateMachine",
@@ -183,13 +205,9 @@ async function initJsPlumb () {
         $relationMapCanvas.contextmenuRelation("open", e, { connection: c });
     });
 
-    await loadNotesAndRelations();
-
     // so that canvas is not panned when clicking/dragging note box
     $relationMapCanvas.on('mousedown touchstart', '.note-box, .connection-label', e => e.stopPropagation());
 
-    jsPlumb.fire("jsPlumbDemoLoaded", instance);
-
     initPanZoom();
 }
 
@@ -372,9 +390,29 @@ $addChildNotesButton.click(async () => {
     await loadNotesAndRelations();
 });
 
+$createChildNote.click(async () => {
+    const title = prompt("Enter title of new note", "new note");
+
+    if (!title.trim()) {
+        return;
+    }
+
+    const {note} = await server.post(`notes/${noteDetailService.getCurrentNoteId()}/children`, {
+        title,
+        target: 'into'
+    });
+
+    const [x, y] = getFreePosition();
+
+    mapData.notes.push({ id: note.noteId, x, y });
+
+    await createNoteBox(id, title, x, y);
+});
+
 export default {
     show,
     getContent: () => JSON.stringify(mapData),
     focus: () => null,
-    onNoteChange: () => null
+    onNoteChange: () => null,
+    cleanup
 }

src/public/javascripts/services/note_detail_render.js

@@ -35,5 +35,6 @@ export default {
     show: render,
     getContent: () => "",
     focus: () => null,
-    onNoteChange: () => null
+    onNoteChange: () => null,
+    cleanup: () => $noteDetailRenderContent.empty()
 }

src/public/javascripts/services/note_detail_search.js

@@ -29,5 +29,6 @@ export default {
     getContent,
     show,
     focus: () => null,
-    onNoteChange: () => null
+    onNoteChange: () => null,
+    cleanup: () => null
 }

src/public/javascripts/services/note_detail_text.js

@@ -111,5 +111,10 @@ export default {
     getEditor,
     getContent,
     focus,
-    onNoteChange
+    onNoteChange,
+    cleanup: () => {
+        if (textEditor) {
+            textEditor.setData('');
+        }
+    }
 }

src/services/notes.js

@@ -49,6 +49,18 @@ async function createNewNote(parentNoteId, noteData) {
 
     const parentNote = await repository.getNote(parentNoteId);
 
+    if (!noteData.type) {
+        if (parentNote.type === 'text' || parentNote.type === 'code') {
+            noteData.type = parentNote.type;
+            noteData.mime = parentNote.mime;
+        }
+        else {
+            // inheriting note type makes sense only for text and code
+            noteData.type = 'text';
+            noteData.mime = 'text/html';
+        }
+    }
+
     noteData.type = noteData.type || parentNote.type;
     noteData.mime = noteData.mime || parentNote.mime;
 

src/views/index.ejs

@@ -263,7 +263,11 @@
           <input type="file" id="file-upload" style="display: none" />
 
           <div id="note-detail-relation-map" class="note-detail-component">
-            <button id="relation-map-add-child-notes" class="btn" type="button">Add child notes</button>
+            <button id="relation-map-add-child-notes" class="btn" type="button"
+              title="Add all child notes of this relation map note">Add child notes</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"