diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index de933fbb2..8bf118092 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/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')) 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/component.js b/src/public/app/widgets/component.js index b9eddeaf0..cc461c637 100644 --- a/src/public/app/widgets/component.js +++ b/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([ - this.initialized.then(() => this.callMethod(this[name + 'Event'], data)), - this.handleEventInChildren(name, data) - ]); + const callMethodPromise = this.initialized + ? this.initialized.then(() => this.callMethod(this[name + 'Event'], 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} */ diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js index c5b371538..6cd4db53e 100644 --- a/src/public/app/widgets/containers/ribbon_container.js +++ b/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; diff --git a/src/public/app/widgets/containers/right_pane_container.js b/src/public/app/widgets/containers/right_pane_container.js index 204c48cb4..e991a7cff 100644 --- a/src/public/app/widgets/containers/right_pane_container.js +++ b/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; diff --git a/src/public/app/widgets/backlinks.js b/src/public/app/widgets/floating_buttons/backlinks.js similarity index 80% rename from src/public/app/widgets/backlinks.js rename to src/public/app/widgets/floating_buttons/backlinks.js index 2e32d5a6f..2b622b81a 100644 --- a/src/public/app/widgets/backlinks.js +++ b/src/public/app/widgets/floating_buttons/backlinks.js @@ -1,7 +1,7 @@ -import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import linkService from "../services/link.js"; -import server from "../services/server.js"; -import froca from "../services/froca.js"; +import NoteContextAwareWidget from "../note_context_aware_widget.js"; +import linkService from "../../services/link.js"; +import server from "../../services/server.js"; +import froca from "../../services/froca.js"; const TPL = `
@@ -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); @@ -29,11 +25,7 @@ const TPL = ` .backlinks-count { 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; }
- -
@@ -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(); } diff --git a/src/public/app/widgets/floating_buttons/floating_buttons.js b/src/public/app/widgets/floating_buttons/floating_buttons.js new file mode 100644 index 000000000..98a715db6 --- /dev/null +++ b/src/public/app/widgets/floating_buttons/floating_buttons.js @@ -0,0 +1,32 @@ +import Container from "../containers/container.js"; + +const TPL = ` +
+ + +
+
`; + +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()); + } + } +} diff --git a/src/public/app/widgets/floating_buttons/relation_map_buttons.js b/src/public/app/widgets/floating_buttons/relation_map_buttons.js new file mode 100644 index 000000000..be6ff9d2b --- /dev/null +++ b/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 = ` +
+ + + + +
+ + + +
+
`; + +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})); + } +} 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 663ba033c..615b9d069 100644 --- a/src/public/app/widgets/type_widgets/relation_map.js +++ b/src/public/app/widgets/type_widgets/relation_map.js @@ -66,28 +66,6 @@ const linkOverlays = [ const TPL = `
- - - - -
- - - -
-
@@ -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); + } }