From 469683f30f72f5310121b055fe280b4361ce5b84 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 20 Sep 2025 21:22:56 +0300
Subject: [PATCH] chore(react/type_widget): reimplement zoom + reset buttons

---
 .../type_widgets/helpers/SvgSplitEditor.tsx   |  8 ++-
 .../abstract_svg_split_type_widget.ts         | 71 -------------------
 2 files changed, 6 insertions(+), 73 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
index ebe12c76a..f8bd794fa 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
@@ -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;
 }
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts
index 569a9dee2..1d0835aa0 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_svg_split_type_widget.ts
@@ -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;