gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(mermaid): add split between diagram and code

Browse Source
This commit is contained in:
Elian Doran 2025-03-18 19:33:37 +02:00
parent 3fe8fede9a
commit b524f7876a
No known key found for this signature in database
1 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/public/app/widgets/mermaid.ts
View File

@ -6,16 +6,25 @@ import utils from "../services/utils.js";
import { loadElkIfNeeded, postprocessMermaidSvg } from "../services/mermaid.js"; import { loadElkIfNeeded, postprocessMermaidSvg } from "../services/mermaid.js";
import type FNote from "../entities/fnote.js"; import type FNote from "../entities/fnote.js";
import type { EventData } from "../components/app_context.js"; import type { EventData } from "../components/app_context.js";
import ScrollingContainer from "./containers/scrolling_container.js";
import Split from "split.js";
const TPL = `<div class="mermaid-widget"> const TPL = `<div class="mermaid-widget">
<style> <style>
.mermaid-widget { .mermaid-widget {
flex-grow: 2;
overflow: auto; overflow: auto;
}
body.mobile .mermaid-widget {
min-height: 200px; min-height: 200px;
flex-grow: 2;
flex-basis: 0;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
margin-bottom: 10px; margin-bottom: 10px;
flex-basis: 0; }
body.desktop .mermaid-widget + .gutter {
border-bottom: 1px solid var(--main-border-color);
} }
.mermaid-render { .mermaid-render {
@ -43,6 +52,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
private dirtyAttachment?: boolean; private dirtyAttachment?: boolean;
private zoomHandler?: () => void; private zoomHandler?: () => void;
private zoomInstance?: SvgPanZoom.Instance; private zoomInstance?: SvgPanZoom.Instance;
private splitInstance?: Split.Instance;
isEnabled() { isEnabled() {
return super.isEnabled() && this.note?.type === "mermaid" && this.note.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default"; return super.isEnabled() && this.note?.type === "mermaid" && this.note.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
@ -116,6 +126,8 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$errorMessage.text(e.message); this.$errorMessage.text(e.message);
this.$errorContainer.show(); this.$errorContainer.show();
} }
this.#setupResizer();
} }
cleanup() { cleanup() {
@ -150,6 +162,28 @@ export default class MermaidWidget extends NoteContextAwareWidget {
return postprocessMermaidSvg(svg); return postprocessMermaidSvg(svg);
} }
#setupResizer() {
if (!utils.isDesktop()) {
return;
}
const selfEl = this.$widget;
const scrollingContainer = this.parent?.children.find((ch) => ch instanceof ScrollingContainer)?.$widget;
if (!selfEl.length || !scrollingContainer?.length) {
return;
}
if (!this.splitInstance) {
this.splitInstance = Split([ selfEl[0], scrollingContainer[0] ], {
sizes: [ 50, 50 ],
direction: "vertical",
gutterSize: 5,
onDragEnd: () => this.zoomHandler?.()
});
}
}
async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) { if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) {
this.dirtyAttachment = true; this.dirtyAttachment = true;