Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

added zooming/panning to mermaid diagrams, closes #2635

Browse Source
This commit is contained in:
zadam 2022-04-03 23:14:47 +02:00
parent b250f0a3bf
commit f7d6bda49d
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libraries/wheel-zoom.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
src/public/app/widgets/mermaid.js
View File

@ -17,11 +17,12 @@ const TPL = `<div class="mermaid-widget">
.mermaid-render {
overflow: auto;
height: 100%;
text-align: center;
}
</style>
<div class="mermaid-error alert alert-warning">
<p><strong>The diagram could not displayed. See <a href="https://mermaid-js.github.io/mermaid/#/flowchart?id=graph">help and examples</a>.</strong></p>
<p><strong>The diagram could not be displayed. See <a href="https://mermaid-js.github.io/mermaid/#/flowchart?id=graph">help and examples</a>.</strong></p>
<p class="error-content"></p>
</div>
@ -70,8 +71,25 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$display.empty();
const libLoaded = libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM);
try {
mermaid.mermaidAPI.render('mermaid-graph-' + idCounter++, content, content => this.$display.html(content));
const idNumber = idCounter++;
mermaid.mermaidAPI.render('mermaid-graph-' + idNumber, content, async content => {
this.$display.html(content);
await libLoaded;
this.$display.attr("id", 'mermaid-render-' + idNumber);
WZoom.create('#mermaid-render-' + idNumber, {
type: 'html',
maxScale: 10,
speed: 20,
zoomOnClick: false
});
});
this.$errorContainer.hide();
} catch (e) {

1
src/public/app/widgets/type_widgets/image.js
View File

@ -49,6 +49,7 @@ class ImageTypeWidget extends TypeWidget {
libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
WZoom.create('#' + this.$imageView.attr("id"), {
maxScale: 10,
speed: 20,
zoomOnClick: false
});
});