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

feat(mermaid): better zoom mechanism (closes #474)

Browse Source
This commit is contained in:
Elian Doran 2025-03-18 18:31:22 +02:00
parent 16cc543d59
commit 6f15169b18
No known key found for this signature in database
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -185,6 +185,7 @@
"sass-loader": "16.0.5",
"split.js": "1.6.5",
"supertest": "7.0.0",
"svg-pan-zoom": "3.6.2",
"swagger-jsdoc": "6.2.8",
"ts-loader": "9.5.2",
"tslib": "2.8.1",
@ -19769,6 +19770,13 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/svg-pan-zoom": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz",
"integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==",
"dev": true,
"license": "BSD-2-Clause"
},
"node_modules/swagger-jsdoc": {
"version": "6.2.8",
"resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.8.tgz",

1
package.json
View File

@ -242,6 +242,7 @@
"sass-loader": "16.0.5",
"split.js": "1.6.5",
"supertest": "7.0.0",
"svg-pan-zoom": "3.6.2",
"swagger-jsdoc": "6.2.8",
"ts-loader": "9.5.2",
"tslib": "2.8.1",

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

@ -71,8 +71,6 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$display.empty();
const wheelZoomLoaded = libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM);
this.$errorContainer.hide();
try {
@ -93,15 +91,17 @@ export default class MermaidWidget extends NoteContextAwareWidget {
}
this.$display.html(svg);
await wheelZoomLoaded;
this.$display.attr("id", `mermaid-render-${idCounter}`);
WZoom.create(`#mermaid-render-${idCounter}`, {
maxScale: 50,
speed: 1.3,
zoomOnClick: false
// Fit the image to bounds.
const $svg = this.$display.find("svg");
$svg.attr("width", "100%").attr("height", "100%");
// Enable pan to zoom.
import("svg-pan-zoom").then(svgPanZoom => {
svgPanZoom.default($svg[0], {
controlIconsEnabled: true
});
});
} catch (e: any) {
console.warn(e);