zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 23:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next54'

Browse source
This commit is contained in:
zadam 2022-07-09 22:30:43 +02:00
parent ea3bce25d9 6972ae889a
commit af16a5856a
12 changed files with 183 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/public/app/layouts/desktop_layout.js
View file

@ -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'))

2
src/public/app/widgets/basic_widget.js
View file

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

2
src/public/app/widgets/buttons/close_pane_button.js
View file

@ -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() });
});
}
}

2
src/public/app/widgets/buttons/create_pane_button.js
View file

@ -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() }));
}
}

19
src/public/app/widgets/component.js
View file

@ -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} */

8
src/public/app/widgets/containers/ribbon_container.js
View file

@ -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;

7
src/public/app/widgets/containers/right_pane_container.js
View file

@ -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;

31
src/public/app/widgets/backlinks.js → src/public/app/widgets/floating_buttons/backlinks.js
View file

@ -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 = `
<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);
@ -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; }
</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();
}

32
src/public/app/widgets/floating_buttons/floating_buttons.js Normal file
View file

@ -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());
}
}
}

51
src/public/app/widgets/floating_buttons/relation_map_buttons.js Normal file
View file

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

12
src/public/app/widgets/note_context_aware_widget.js
View file

@ -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() {

101
src/public/app/widgets/type_widgets/relation_map.js
View file

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