Merge branch 'next54'

src/public/app/layouts/desktop_layout.js

@@ -46,7 +46,7 @@ import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js"
 import MermaidWidget from "../widgets/mermaid.js";
 import BookmarkButtons from "../widgets/bookmark_buttons.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import BacklinksWidget from "../widgets/backlinks.js";
+import BacklinksWidget from "../widgets/floating_buttons/backlinks.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
 import FindWidget from "../widgets/find.js";
 import TocWidget from "../widgets/toc.js";
@@ -75,6 +75,8 @@ import InfoDialog from "../widgets/dialogs/info.js";
 import ConfirmDialog from "../widgets/dialogs/confirm.js";
 import PromptDialog from "../widgets/dialogs/prompt.js";
 import OptionsDialog from "../widgets/dialogs/options.js";
+import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
+import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -177,7 +179,10 @@ export default class DesktopLayout {
                                 )
                                 .child(new SharedInfoWidget())
                                 .child(new NoteUpdateStatusWidget())
-                                .child(new BacklinksWidget())
+                                .child(new FloatingButtons()
+                                    .child(new BacklinksWidget())
+                                    .child(new RelationMapButtons())
+                                )
                                 .child(new MermaidWidget())
                                 .child(
                                     new ScrollingContainer()
@@ -189,7 +194,10 @@ export default class DesktopLayout {
                                         .child(new SqlResultWidget())
                                 )
                                 .child(new FindWidget())
-                                .child(...this.customWidgets.get('node-detail-pane'))
+                                .child(
+                                    ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC
+                                    ...this.customWidgets.get('note-detail-pane')
+                                )
                             )
                         )
                         .child(...this.customWidgets.get('center-pane'))

src/public/app/widgets/basic_widget.js

@@ -133,7 +133,7 @@ class BasicWidget extends Component {
         }
     }
 
-    getNtxId() {
+    getClosestNtxId() {
         if (this.$widget) {
             return this.$widget.closest("[data-ntx-id]").attr("data-ntx-id");
         }

src/public/app/widgets/buttons/close_pane_button.js

@@ -18,7 +18,7 @@ export default class ClosePaneButton extends ButtonWidget {
                 // pane (which is being removed)
                 e.stopPropagation();
 
-                widget.triggerCommand("closeThisNoteSplit", { ntxId: widget.getNtxId() });
+                widget.triggerCommand("closeThisNoteSplit", { ntxId: widget.getClosestNtxId() });
             });
     }
 }

src/public/app/widgets/buttons/create_pane_button.js

@@ -7,6 +7,6 @@ export default class CreatePaneButton extends ButtonWidget {
         this.icon("bx-dock-right")
             .title("Create new split")
             .titlePlacement("bottom")
-            .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getNtxId() }));
+            .onClick(widget => widget.triggerCommand("openNewNoteSplit", { ntxId: widget.getClosestNtxId() }));
     }
 }

src/public/app/widgets/component.js

@@ -16,7 +16,7 @@ export default class Component {
         this.componentId = `comp-` + this.sanitizedClassName + '-' + utils.randomString(8);
         /** @type Component[] */
         this.children = [];
-        this.initialized = Promise.resolve();
+        this.initialized = null;
     }
 
     get sanitizedClassName() {
@@ -42,10 +42,16 @@ export default class Component {
 
     /** @returns {Promise} */
     handleEvent(name, data) {
-        return Promise.all([
+        const callMethodPromise = this.initialized
-            this.initialized.then(() => this.callMethod(this[name + 'Event'], data)),
+            ? this.initialized.then(() => this.callMethod(this[name + 'Event'], data))
-            this.handleEventInChildren(name, data)
+            : this.callMethod(this[name + 'Event'], data);
-        ]);
+
+        const childrenPromise = this.handleEventInChildren(name, data);
+
+        // don't create promises if not needed (optimization)
+        return callMethodPromise && childrenPromise
+            ? Promise.all([callMethodPromise, childrenPromise])
+            : null;
     }
 
     /** @returns {Promise} */
@@ -61,7 +67,8 @@ export default class Component {
             promises.push(child.handleEvent(name, data));
         }
 
-        return Promise.all(promises);
+        // don't create promises if not needed (optimization)
+        return promises.find(p => p) ? Promise.all(promises) : null;
     }
 
     /** @returns {Promise} */

src/public/app/widgets/containers/ribbon_container.js

@@ -186,9 +186,13 @@ export default class RibbonContainer extends NoteContextAwareWidget {
             const activeChild = this.getActiveRibbonWidget();
 
             if (activeChild && (refreshActiveTab || !wasAlreadyActive)) {
-                activeChild.handleEvent('noteSwitched', {noteContext: this.noteContext, notePath: this.notePath}).then(() => {
+                const handleEventPromise = activeChild.handleEvent('noteSwitched', {noteContext: this.noteContext, notePath: this.notePath});
+
+                if (handleEventPromise) {
+                    handleEventPromise.then(() => activeChild.focus?.());
+                } else {
                     activeChild.focus?.();
-                });
+                }
             }
         } else {
             this.lastActiveComponentId = null;

src/public/app/widgets/containers/right_pane_container.js

@@ -23,7 +23,12 @@ export default class RightPaneContainer extends FlexContainer {
             // right pane is displayed only if some child widget is active
             // we'll reevaluate the visibility based on events which are probable to cause visibility change
             // but these events needs to be finished and only then we check
-            promise.then(() => this.reevaluateIsEnabledCommand());
+            if (promise) {
+                promise.then(() => this.reevaluateIsEnabledCommand());
+            }
+            else {
+                this.reevaluateIsEnabledCommand();
+            }
         }
 
         return promise;

src/public/app/widgets/floating_buttons/backlinks.js

@@ -1,7 +1,7 @@
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import linkService from "../services/link.js";
+import linkService from "../../services/link.js";
-import server from "../services/server.js";
+import server from "../../services/server.js";
-import froca from "../services/froca.js";
+import froca from "../../services/froca.js";
 
 const TPL = `
 <div class="backlinks-widget">
@@ -11,10 +11,6 @@ const TPL = `
         }
     
         .backlinks-ticker {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            width: 130px;
             border-radius: 10px;
             border-color: var(--main-border-color);
             background-color: var(--more-accented-background-color);
@@ -30,10 +26,6 @@ const TPL = `
             cursor: pointer;
         }
                         
-        .backlinks-close-ticker {
-            cursor: pointer;
-        }
-                
         .backlinks-items {
             z-index: 10;
             position: absolute;
@@ -58,16 +50,10 @@ const TPL = `
             font-weight: bold;
             background-color: yellow;
         }
-        
-        /* relation map has already buttons in that position */
-        .type-relation-map .backlinks-ticker { top: 50px; }
-        .type-relation-map .backlinks-items { top: 100px; }
     </style>
     
     <div class="backlinks-ticker">
         <span class="backlinks-count"></span>
-        
-        <span class="bx bx-x backlinks-close-ticker"></span> 
     </div>   
     
     <div class="backlinks-items" style="display: none;"></div>
@@ -90,13 +76,6 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
             }
         });
 
-        this.$closeTickerButton = this.$widget.find('.backlinks-close-ticker');
-        this.$closeTickerButton.on("click", () => {
-            this.$ticker.hide();
-
-            this.clearItems();
-        });
-
         this.contentSized();
     }
 

src/public/app/widgets/floating_buttons/floating_buttons.js

@@ -0,0 +1,32 @@
+import Container from "../containers/container.js";
+
+const TPL = `
+<div class="floating-buttons">
+    <style>
+        .floating-buttons {
+            position: relative;
+        }
+        
+        .floating-buttons-children {
+            position: absolute; 
+            top: 10px; 
+            right: 10px;
+            display: flex;
+            flex-direction: row;
+            z-index: 100;
+        }
+    </style>
+    
+    <div class="floating-buttons-children"></div>
+</div>`;
+
+export default class FloatingButtons extends Container {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$children = this.$widget.find(".floating-buttons-children");
+
+        for (const widget of this.children) {
+            this.$children.append(widget.render());
+        }
+    }
+}

src/public/app/widgets/floating_buttons/relation_map_buttons.js

@@ -0,0 +1,51 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import dialogService from "../dialog.js";
+import server from "../../services/server.js";
+import toastService from "../../services/toast.js";
+
+const TPL = `
+<div>
+    <button class="relation-map-create-child-note btn btn-sm floating-button no-print" type="button"
+                title="Create new child note and add it into this relation map">
+        <span class="bx bx-folder-plus"></span>
+    
+        Create child note
+    </button>
+    
+    <button type="button"
+            class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop no-print"
+            title="Reset pan & zoom to initial coordinates and magnification"
+            style="right: 100px;"></button>
+    
+    <div class="btn-group floating-button no-print" style="right: 10px;">
+        <button type="button"
+                class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
+                title="Zoom In"></button>
+    
+        <button type="button"
+                class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
+                title="Zoom Out"></button>
+    </div>
+</div>`;
+
+export default class RelationMapButtons extends NoteContextAwareWidget {
+    isEnabled() {
+        return super.isEnabled() && this.note?.type === 'relation-map';
+    }
+
+    doRender() {
+        super.doRender();
+
+        this.$widget = $(TPL);
+        this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
+        this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
+        this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
+        this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
+
+        this.$createChildNote.on('click', () => this.triggerEvent('relationMapCreateChildNote', {ntxId: this.ntxId}));
+        this.$resetPanZoomButton.on('click', () => this.triggerEvent('relationMapResetPanZoom', {ntxId: this.ntxId}));
+
+        this.$zoomInButton.on('click', () => this.triggerEvent('relationMapResetZoomIn', {ntxId: this.ntxId}));
+        this.$zoomOutButton.on('click', () => this.triggerEvent('relationMapResetZoomOut', {ntxId: this.ntxId}));
+    }
+}

src/public/app/widgets/note_context_aware_widget.js

@@ -20,19 +20,23 @@ export default class NoteContextAwareWidget extends BasicWidget {
     }
 
     get note() {
-        return this.noteContext && this.noteContext.note;
+        return this.noteContext?.note;
     }
 
     get noteId() {
-        return this.note && this.note.noteId;
+        return this.note?.noteId;
     }
 
     get notePath() {
-        return this.noteContext && this.noteContext.notePath;
+        return this.noteContext.notePath && this.noteContext;
     }
 
     get hoistedNoteId() {
-        return this.noteContext && this.noteContext.hoistedNoteId;
+        return this.noteContext?.hoistedNoteId;
+    }
+
+    get ntxId() {
+        return this.noteContext?.ntxId;
     }
 
     isEnabled() {

src/public/app/widgets/type_widgets/relation_map.js

@@ -66,28 +66,6 @@ const linkOverlays = [
 
 const TPL = `
 <div class="note-detail-relation-map note-detail-printable">
-    <button class="relation-map-create-child-note btn btn-sm floating-button no-print" type="button"
-            title="Create new child note and add it into this relation map">
-        <span class="bx bx-folder-plus"></span>
-
-        Create child note
-    </button>
-
-    <button type="button"
-            class="relation-map-reset-pan-zoom btn icon-button floating-button bx bx-crop no-print"
-            title="Reset pan & zoom to initial coordinates and magnification"
-            style="right: 100px;"></button>
-
-    <div class="btn-group floating-button no-print" style="right: 10px;">
-        <button type="button"
-                class="relation-map-zoom-in btn icon-button bx bx-zoom-in"
-                title="Zoom In"></button>
-
-        <button type="button"
-                class="relation-map-zoom-out btn icon-button bx bx-zoom-out"
-                title="Zoom Out"></button>
-    </div>
-
     <div class="relation-map-wrapper">
        <div class="relation-map-container"></div>
     </div>
@@ -101,10 +79,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$relationMapContainer = this.$widget.find(".relation-map-container");
-        this.$createChildNote = this.$widget.find(".relation-map-create-child-note");
-        this.$zoomInButton = this.$widget.find(".relation-map-zoom-in");
-        this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
-        this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
 
         this.mapData = null;
         this.jsPlumbInstance = null;
@@ -151,30 +125,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
 
         this.clipboard = null;
 
-        this.$createChildNote.on('click', async () => {
-            const title = await dialogService.prompt({ message: "Enter title of new note",  defaultValue: "new note" });
-
-            if (!title.trim()) {
-                return;
-            }
-
-            const {note} = await server.post(`notes/${this.noteId}/children?target=into`, {
-                title,
-                content: '',
-                type: 'text'
-            });
-
-            toastService.showMessage("Click on canvas to place new note");
-
-            this.clipboard = { noteId: note.noteId, title };
-        });
-
-        this.$resetPanZoomButton.on('click', () => {
-            // reset to initial pan & zoom state
-            this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
-            this.pzInstance.moveTo(0, 0);
-        });
-
         this.$widget.on("drop", ev => this.dropNoteOntoRelationMapHandler(ev));
         this.$widget.on("dragover", ev => ev.preventDefault());
 
@@ -376,9 +326,6 @@ export default class RelationMapTypeWidget extends TypeWidget {
             // set to initial coordinates
             this.pzInstance.moveTo(0, 0);
         }
-
-        this.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
-        this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
     }
 
     saveCurrentTransform() {
@@ -642,4 +589,52 @@ export default class RelationMapTypeWidget extends TypeWidget {
     getContent() {
         return JSON.stringify(this.mapData);
     }
+
+    async relationMapCreateChildNoteEvent({ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        const title = await dialogService.prompt({ message: "Enter title of new note",  defaultValue: "new note" });
+
+        if (!title.trim()) {
+            return;
+        }
+
+        const {note} = await server.post(`notes/${this.noteId}/children?target=into`, {
+            title,
+            content: '',
+            type: 'text'
+        });
+
+        toastService.showMessage("Click on canvas to place new note");
+
+        this.clipboard = { noteId: note.noteId, title };
+    }
+
+    relationMapResetPanZoomEvent({ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        // reset to initial pan & zoom state
+        this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
+        this.pzInstance.moveTo(0, 0);
+    }
+
+    relationMapResetZoomInEvent({ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        this.pzInstance.zoomTo(0, 0, 1.2);
+    }
+
+    relationMapResetZoomOutEvent({ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        this.pzInstance.zoomTo(0, 0, 0.8);
+    }
 }