converted relation map buttons to floating pattern

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/floating_buttons/relation_map_buttons.js

@@ -29,6 +29,10 @@ const TPL = `
 </div>`;
 
 export default class RelationMapButtons extends NoteContextAwareWidget {
+    isEnabled() {
+        return super.isEnabled() && this.note?.type === 'relation-map';
+    }
+
     doRender() {
         super.doRender();
 
@@ -38,31 +42,10 @@ export default class RelationMapButtons extends NoteContextAwareWidget {
         this.$zoomOutButton = this.$widget.find(".relation-map-zoom-out");
         this.$resetPanZoomButton = this.$widget.find(".relation-map-reset-pan-zoom");
 
-        this.$createChildNote.on('click', async () => {
+        this.$createChildNote.on('click', () => this.triggerEvent('relationMapCreateChildNote', {ntxId: this.ntxId}));
-            const title = await dialogService.prompt({ message: "Enter title of new note",  defaultValue: "new note" });
+        this.$resetPanZoomButton.on('click', () => this.triggerEvent('relationMapResetPanZoom', {ntxId: this.ntxId}));
 
-            if (!title.trim()) {
+        this.$zoomInButton.on('click', () => this.triggerEvent('relationMapResetZoomIn', {ntxId: this.ntxId}));
-                return;
+        this.$zoomOutButton.on('click', () => this.triggerEvent('relationMapResetZoomOut', {ntxId: this.ntxId}));
-            }
-
-            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.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
-        this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
     }
 }

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

@@ -589,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);
+    }
 }