From e51276f53290f785e26d7b198840932f7d712e3e Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 21 Jun 2022 23:27:34 +0200 Subject: [PATCH 1/5] floating buttons WIP --- src/public/app/layouts/desktop_layout.js | 9 ++- .../{ => floating_buttons}/backlinks.js | 31 ++------- .../floating_buttons/floating_buttons.js | 32 +++++++++ .../floating_buttons/relation_map_buttons.js | 68 +++++++++++++++++++ .../app/widgets/type_widgets/relation_map.js | 53 --------------- 5 files changed, 112 insertions(+), 81 deletions(-) rename src/public/app/widgets/{ => floating_buttons}/backlinks.js (80%) create mode 100644 src/public/app/widgets/floating_buttons/floating_buttons.js create mode 100644 src/public/app/widgets/floating_buttons/relation_map_buttons.js diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index de933fbb2..70656e413 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() 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..a2b3ac864 --- /dev/null +++ b/src/public/app/widgets/floating_buttons/relation_map_buttons.js @@ -0,0 +1,68 @@ +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 { + 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', 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.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2)); + this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8)); + } +} diff --git a/src/public/app/widgets/type_widgets/relation_map.js b/src/public/app/widgets/type_widgets/relation_map.js index 663ba033c..39cb55f87 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() { From ae46b3df58b2116ef651b3a4dba83123a65f9496 Mon Sep 17 00:00:00 2001 From: zadam Date: Thu, 23 Jun 2022 22:17:47 +0200 Subject: [PATCH 2/5] fix typo in the custom widget location --- src/public/app/layouts/desktop_layout.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 70656e413..8bf118092 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -194,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')) From 42e262a1c2ba14f61fe5d3668a835bdcc8a6c66b Mon Sep 17 00:00:00 2001 From: zadam Date: Thu, 23 Jun 2022 23:03:35 +0200 Subject: [PATCH 3/5] 10x speed-up of event propagation --- src/public/app/widgets/component.js | 19 +++++++++++++------ .../widgets/containers/ribbon_container.js | 8 ++++++-- .../containers/right_pane_container.js | 7 ++++++- 3 files changed, 25 insertions(+), 9 deletions(-) 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; From aa4dade1e5930480a81800418fe4505c4bf41613 Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 29 Jun 2022 22:38:35 +0200 Subject: [PATCH 4/5] fix dragging out tab creating multiple windows, closes #2944 --- src/public/app/services/tab_manager.js | 33 +++++++++++++++++++++----- src/public/app/utils/mutex.js | 2 +- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/public/app/services/tab_manager.js b/src/public/app/services/tab_manager.js index 59318d6e3..2156400c7 100644 --- a/src/public/app/services/tab_manager.js +++ b/src/public/app/services/tab_manager.js @@ -142,6 +142,11 @@ export default class TabManager extends Component { return this.noteContexts; } + /** @returns {NoteContext[]} */ + getMainNoteContexts() { + return this.noteContexts.filter(nc => nc.isMainContext()); + } + /** @returns {NoteContext} */ getNoteContextById(ntxId) { const noteContext = this.noteContexts.find(nc => nc.ntxId === ntxId); @@ -294,11 +299,23 @@ export default class TabManager extends Component { this.setCurrentNotePathToHash(); } + /** + * @param ntxId + * @returns {Promise} true if note context has been removed, false otherwise + */ async removeNoteContext(ntxId) { // removing note context is async process which can take some time, if users presses CTRL-W quickly, two // close events could interleave which would then lead to attempting to activate already removed context. - await this.mutex.runExclusively(async () => { - const noteContextToRemove = this.getNoteContextById(ntxId); + return await this.mutex.runExclusively(async () => { + let noteContextToRemove; + + try { + noteContextToRemove = this.getNoteContextById(ntxId); + } + catch { + // note context not found + return false; + } if (noteContextToRemove.isMainContext()) { // forbid removing last main note context @@ -308,7 +325,7 @@ export default class TabManager extends Component { if (mainNoteContexts.length === 1) { await this.clearLastMainNoteContext(noteContextToRemove); - return; + return false; } } @@ -338,6 +355,8 @@ export default class TabManager extends Component { } this.removeNoteContexts(noteContextsToRemove); + + return true; }); } @@ -445,12 +464,14 @@ export default class TabManager extends Component { } } - moveTabToNewWindowCommand({ntxId}) { + async moveTabToNewWindowCommand({ntxId}) { const {notePath, hoistedNoteId} = this.getNoteContextById(ntxId); - this.removeNoteContext(ntxId); + const removed = await this.removeNoteContext(ntxId); - this.triggerCommand('openInWindow', {notePath, hoistedNoteId}); + if (removed) { + this.triggerCommand('openInWindow', {notePath, hoistedNoteId}); + } } async reopenLastTabCommand() { diff --git a/src/public/app/utils/mutex.js b/src/public/app/utils/mutex.js index a48b2660e..483e0f345 100644 --- a/src/public/app/utils/mutex.js +++ b/src/public/app/utils/mutex.js @@ -19,7 +19,7 @@ export default class Mutex { const unlock = await this.lock(); try { - await cb(); + return await cb(); } finally { unlock(); From 6972ae889a9ce3a2a4f712f78005de6119d802b8 Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 3 Jul 2022 23:10:13 +0200 Subject: [PATCH 5/5] 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); + } }