Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-03 22:30:51 +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", "sass-loader": "16.0.5",
"split.js": "1.6.5", "split.js": "1.6.5",
"supertest": "7.0.0", "supertest": "7.0.0",
"svg-pan-zoom": "3.6.2",
"swagger-jsdoc": "6.2.8", "swagger-jsdoc": "6.2.8",
"ts-loader": "9.5.2", "ts-loader": "9.5.2",
"tslib": "2.8.1", "tslib": "2.8.1",
@ -19769,6 +19770,13 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/swagger-jsdoc": {
"version": "6.2.8", "version": "6.2.8",
"resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.8.tgz", "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", "sass-loader": "16.0.5",
"split.js": "1.6.5", "split.js": "1.6.5",
"supertest": "7.0.0", "supertest": "7.0.0",
"svg-pan-zoom": "3.6.2",
"swagger-jsdoc": "6.2.8", "swagger-jsdoc": "6.2.8",
"ts-loader": "9.5.2", "ts-loader": "9.5.2",
"tslib": "2.8.1", "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(); this.$display.empty();
const wheelZoomLoaded = libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM);
this.$errorContainer.hide(); this.$errorContainer.hide();
try { try {
@ -93,15 +91,17 @@ export default class MermaidWidget extends NoteContextAwareWidget {
} }
this.$display.html(svg); this.$display.html(svg);
await wheelZoomLoaded;
this.$display.attr("id", `mermaid-render-${idCounter}`); this.$display.attr("id", `mermaid-render-${idCounter}`);
WZoom.create(`#mermaid-render-${idCounter}`, { // Fit the image to bounds.
maxScale: 50, const $svg = this.$display.find("svg");
speed: 1.3, $svg.attr("width", "100%").attr("height", "100%");
zoomOnClick: false
// Enable pan to zoom.
import("svg-pan-zoom").then(svgPanZoom => {
svgPanZoom.default($svg[0], {
controlIconsEnabled: true
});
}); });
} catch (e: any) { } catch (e: any) {
console.warn(e); console.warn(e);