gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-03 21:24:24 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

chore(react/type_widget): reimplement zoom + reset buttons

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 21:22:56 +03:00
parent 42d0cc12b5
commit 469683f30f
No known key found for this signature in database
2 changed files with 6 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
View File

@ -55,7 +55,7 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
}
// Pan & zoom.
useResizer(containerRef, note.noteId, svg);
const zoomRef = useResizer(containerRef, note.noteId, svg);
return (
<SplitEditor
@ -76,15 +76,17 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
<PreviewButton
icon="bx bx-zoom-in"
text={t("relation_map_buttons.zoom_in_title")}
onClick={() => {}}
onClick={() => zoomRef.current?.zoomIn()}
/>
<PreviewButton
icon="bx bx-zoom-out"
text={t("relation_map_buttons.zoom_out_title")}
onClick={() => zoomRef.current?.zoomOut()}
/>
<PreviewButton
icon="bx bx-crop"
text={t("relation_map_buttons.reset_pan_zoom_title")}
onClick={() => zoomRef.current?.fit().center()}
/>
</>
}
@ -134,4 +136,6 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
if (!zoomRef.current) return;
zoomRef.current.resize().fit().center();
}, [ width ]);
return zoomRef;
}

71
apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts
View File

@ -47,77 +47,6 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
}
});
}
getData(): { content: string; } {
const data = super.getData();
this.onContentChanged(data.content, false);
this.#saveSvg();
return data;
}
/**
* Triggers an update of the preview pane with the provided content.
*
* @param content the content that will be passed to `renderSvg` for rendering. It is not the SVG content.
* @param recenter `true` to reposition the pan/zoom to fit the image and to center it.
*/
async onContentChanged(content: string, recenter: boolean) {
if (!this.note) {
return;
}
let svg: string = "";
try {
svg = await this.renderSvg(content);
if (svg === this.svg) {
return;
}
this.svg = svg;
this.$renderContainer.html(svg);
}
await this.#setupPanZoom(!recenter);
}
#saveSvg() {
}
cleanup(): void {
this.#cleanUpZoom();
$(window).off("resize", this.zoomHandler);
super.cleanup();
}
abstract get attachmentName(): string;
buildSplitExtraOptions(): Split.Options {
return {
onDrag: () => this.zoomHandler?.()
}
}
buildPreviewButtons(): OnClickButtonWidget[] {
return [
new OnClickButtonWidget()
.onClick(() => this.zoomInstance?.zoomIn())
, new OnClickButtonWidget()
.titlePlacement("top")
.onClick(() => this.zoomInstance?.zoomOut())
, new OnClickButtonWidget()
.onClick(() => this.zoomHandler())
];
}
#cleanUpZoom() {
if (this.zoomInstance) {
this.zoomInstance.destroy();
this.zoomInstance = undefined;
}
}
async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
return;