From b376842e2d64d97831209efba93208021a39498e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 20 Sep 2025 21:12:29 +0300
Subject: [PATCH] chore(react/type_widget): reposition on split resize

---
 .../widgets/type_widgets/helpers/SplitEditor.css    |  5 ++++-
 .../widgets/type_widgets/helpers/SvgSplitEditor.tsx | 11 ++++++++++-
 .../abstract_svg_split_type_widget.ts               | 13 -------------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
index d9728d8c5..5788ca3ef 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
@@ -84,7 +84,10 @@
 }
 
 /* #region SVG */
-.note-detail-split.svg-editor .render-container,
+.note-detail-split.svg-editor .render-container {
+    height: 100%;
+}
+
 .note-detail-split.svg-editor .render-container svg {
     width: 100%;
     height: 100%;
diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
index 3f470fe7f..8593f2c6a 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
@@ -3,7 +3,7 @@ import { t } from "../../../services/i18n";
 import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
 import { RawHtmlBlock } from "../../react/RawHtml";
 import server from "../../../services/server";
-import svgPanZoom from "svg-pan-zoom";
+import svgPanZoom, { zoomIn } from "svg-pan-zoom";
 
 interface SvgSplitEditorProps extends Omit<SplitEditorProps, "previewContent"> {
     /**
@@ -55,6 +55,7 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
     // Pan & zoom.
     const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
     const lastNoteId = useRef<string>();
+    const zoomRef = useRef<SvgPanZoom.Instance>();
     useEffect(() => {
         const shouldPreservePanZoom = (lastNoteId.current === note.noteId);
         const svgEl = containerRef.current?.querySelector("svg");
@@ -73,6 +74,8 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
         }
 
         lastNoteId.current = note.noteId;
+        zoomRef.current = zoomInstance;
+
         return () => {
             lastPanZoom.current = {
                 pan: zoomInstance.getPan(),
@@ -89,6 +92,12 @@ export default function SvgSplitEditor({ note, attachmentName, renderSvg, ...pro
             error={error}
             onContentChanged={onContentChanged}
             dataSaved={onSave}
+            splitOptions={{
+                onDrag: () => {
+                    if (!zoomRef.current) return;
+                    zoomRef.current.resize().fit().center();
+                }
+            }}
             previewContent={(
                 <RawHtmlBlock
                     className="render-container"
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 e56086c48..569a9dee2 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
@@ -25,22 +25,9 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
     private zoomInstance?: SvgPanZoom.Instance;
     private svg?: string;
 
-    constructor() {
-        super();
-        this.zoomHandler = () => {
-            if (this.zoomInstance) {
-                this.zoomInstance.resize();
-                this.zoomInstance.fit();
-                this.zoomInstance.center();
-            }
-        }
-    }
 
     doRender(): void {
         super.doRender();
-        this.$renderContainer = $(`<div>`)
-            .addClass("render-container")
-            .css("height", "100%");
         this.$preview.append(this.$renderContainer);
         $(window).on("resize", this.zoomHandler);
     }