feat(mermaid): basic horizontal layout

This commit is contained in:
Elian Doran 2025-03-21 21:52:05 +02:00
parent 56da5f7761
commit 395d76a156
No known key found for this signature in database
3 changed files with 20 additions and 7 deletions

View File

@ -40,7 +40,6 @@ import EditButton from "../widgets/buttons/edit_button.js";
import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js"; import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js"; import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js";
import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js"; import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js";
import MermaidWidget from "../widgets/mermaid.js";
import NoteWrapperWidget from "../widgets/note_wrapper.js"; import NoteWrapperWidget from "../widgets/note_wrapper.js";
import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js"; import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import SharedInfoWidget from "../widgets/shared_info.js"; import SharedInfoWidget from "../widgets/shared_info.js";
@ -215,7 +214,6 @@ export default class DesktopLayout {
.child(new ContextualHelpButton()) .child(new ContextualHelpButton())
.child(new HideFloatingButtonsButton()) .child(new HideFloatingButtonsButton())
) )
.child(new MermaidWidget())
.child( .child(
new ScrollingContainer() new ScrollingContainer()
.filling() .filling()

View File

@ -197,7 +197,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
// https://github.com/zadam/trilium/issues/2522 // https://github.com/zadam/trilium/issues/2522
const isBackendNote = this.noteContext?.noteId === "_backendLog"; const isBackendNote = this.noteContext?.noteId === "_backendLog";
const isSqlNote = this.mime === "text/x-sqlite;schema=trilium"; const isSqlNote = this.mime === "text/x-sqlite;schema=trilium";
const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "geoMap"].includes(this.type ?? ""); const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "geoMap", "mermaid"].includes(this.type ?? "");
const isFullHeight = (!this.noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote) const isFullHeight = (!this.noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
|| this.noteContext?.viewScope?.viewMode === "attachments" || this.noteContext?.viewScope?.viewMode === "attachments"
|| isBackendNote; || isBackendNote;

View File

@ -1,15 +1,32 @@
import type { EventData } from "../../components/app_context.js";
import type FNote from "../../entities/fnote.js"; import type FNote from "../../entities/fnote.js";
import EditableCodeTypeWidget from "./editable_code.js"; import EditableCodeTypeWidget from "./editable_code.js";
import TypeWidget from "./type_widget.js"; import TypeWidget from "./type_widget.js";
const TPL = `\ const TPL = `\
<div class="note-detail-split-editor note-detail-printable"> <div class="note-detail-split note-detail-printable split-horizontal">
<div class="note-detail-split-preview"> <div class="note-detail-split-preview">
Preview goes here.
</div> </div>
<div class="note-detail-split-editor"> <div class="note-detail-split-editor">
</div> </div>
<style>
.note-detail-split {
display: flex;
height: 100%;
}
.note-detail-split.split-horizontal > div {
height: 100%;
width: 50%;
}
.note-detail-split .note-detail-split-editor {
width: 100%;
}
</style>
</div> </div>
`; `;
@ -26,7 +43,6 @@ export default class SplitTypeEditor extends TypeWidget {
} }
doRender(): void { doRender(): void {
console.log("Render");
this.$widget = $(TPL); this.$widget = $(TPL);
this.$preview = this.$widget.find(".note-detail-split-preview"); this.$preview = this.$widget.find(".note-detail-split-preview");
@ -40,7 +56,6 @@ export default class SplitTypeEditor extends TypeWidget {
await this.editorTypeWidget.initialized; await this.editorTypeWidget.initialized;
if (note) { if (note) {
console.log("Refresh with ", note);
this.editorTypeWidget.noteContext = this.noteContext; this.editorTypeWidget.noteContext = this.noteContext;
this.editorTypeWidget.spacedUpdate = this.spacedUpdate; this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
this.editorTypeWidget.doRefresh(note); this.editorTypeWidget.doRefresh(note);