From 6972ae889a9ce3a2a4f712f78005de6119d802b8 Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 3 Jul 2022 23:10:13 +0200 Subject: [PATCH] converted relation map buttons to floating pattern --- src/public/app/widgets/basic_widget.js | 2 +- .../app/widgets/buttons/close_pane_button.js | 2 +- .../app/widgets/buttons/create_pane_button.js | 2 +- .../floating_buttons/relation_map_buttons.js | 33 ++++--------- .../app/widgets/note_context_aware_widget.js | 12 +++-- .../app/widgets/type_widgets/relation_map.js | 48 +++++++++++++++++++ 6 files changed, 67 insertions(+), 32 deletions(-) diff --git a/src/public/app/widgets/basic_widget.js b/src/public/app/widgets/basic_widget.js index 5c8cccdeb..f8a1c3ce8 100644 --- a/src/public/app/widgets/basic_widget.js +++ b/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"); } diff --git a/src/public/app/widgets/buttons/close_pane_button.js b/src/public/app/widgets/buttons/close_pane_button.js index 2fc5d52c8..6c2621afd 100644 --- a/src/public/app/widgets/buttons/close_pane_button.js +++ b/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() }); }); } } diff --git a/src/public/app/widgets/buttons/create_pane_button.js b/src/public/app/widgets/buttons/create_pane_button.js index d90236453..9b48e0c46 100644 --- a/src/public/app/widgets/buttons/create_pane_button.js +++ b/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() })); } } diff --git a/src/public/app/widgets/floating_buttons/relation_map_buttons.js b/src/public/app/widgets/floating_buttons/relation_map_buttons.js index a2b3ac864..be6ff9d2b 100644 --- a/src/public/app/widgets/floating_buttons/relation_map_buttons.js +++ b/src/public/app/widgets/floating_buttons/relation_map_buttons.js @@ -29,6 +29,10 @@ const TPL = ` `; 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 () => { - const title = await dialogService.prompt({ message: "Enter title of new note", defaultValue: "new note" }); + this.$createChildNote.on('click', () => this.triggerEvent('relationMapCreateChildNote', {ntxId: this.ntxId})); + this.$resetPanZoomButton.on('click', () => this.triggerEvent('relationMapResetPanZoom', {ntxId: this.ntxId})); - 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.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2)); - this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8)); + this.$zoomInButton.on('click', () => this.triggerEvent('relationMapResetZoomIn', {ntxId: this.ntxId})); + this.$zoomOutButton.on('click', () => this.triggerEvent('relationMapResetZoomOut', {ntxId: this.ntxId})); } } diff --git a/src/public/app/widgets/note_context_aware_widget.js b/src/public/app/widgets/note_context_aware_widget.js index b30225080..ed0b56985 100644 --- a/src/public/app/widgets/note_context_aware_widget.js +++ b/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() { diff --git a/src/public/app/widgets/type_widgets/relation_map.js b/src/public/app/widgets/type_widgets/relation_map.js index 39cb55f87..615b9d069 100644 --- a/src/public/app/widgets/type_widgets/relation_map.js +++ b/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); + } }