From ae18b4b6349b5d791bd7bdf5e57e3016123a8c48 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 21 Mar 2025 23:04:46 +0200
Subject: [PATCH] fix(mermaid): bring back auto resize on drag

---
 .../abstract_split_type_widget.ts             | 13 +++++++--
 .../abstract_svg_split_type_widget.ts         | 27 ++++++++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
index 42f6896cc..bf1f71267 100644
--- a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
@@ -43,7 +43,7 @@ const TPL = `\
  *
  * Features:
  *
- * - The two panes are resizeable via a split, on desktop.
+ * - The two panes are resizeable via a split, on desktop. The split can be optionally customized via {@link buildSplitExtraOptions}.
  */
 export default abstract class AbstractSplitTypeWidget extends TypeWidget {
 
@@ -95,10 +95,19 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
             sizes: [ 50, 50 ],
             direction: "horizontal",
             gutterSize: DEFAULT_GUTTER_SIZE,
-            // onDragEnd: () => this.zoomHandler?.()
+            ...this.buildSplitExtraOptions()
         });
     }
 
+    /**
+     * Called upon when the split between the preview and content pane is initialized. Can be used to add additional listeners if needed.
+     *
+     * @returns the additional split options.
+     */
+    buildSplitExtraOptions(): Split.Options {
+        return {};
+    }
+
     getData() {
         return this.editorTypeWidget.getData();
     }
diff --git a/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
index e82183119..549018953 100644
--- a/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
@@ -12,15 +12,27 @@ import AbstractSplitTypeWidget from "./abstract_split_type_widget.js";
 export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTypeWidget {
 
     private $renderContainer!: JQuery<HTMLElement>;
-    private zoomHandler?: () => void;
+    private zoomHandler: () => void;
     private zoomInstance?: SvgPanZoom.Instance;
 
+    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);
     }
 
     async doRefresh(note: FNote | null | undefined) {
@@ -52,6 +64,7 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
 
     cleanup(): void {
         this.#cleanUpZoom();
+        $(window).off("resize", this.zoomHandler);
         super.cleanup();
     }
 
@@ -102,13 +115,13 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
             zoomInstance.fit();
         }
 
-        this.zoomHandler = () => {
-            zoomInstance.resize();
-            zoomInstance.fit();
-            zoomInstance.center();
-        };
         this.zoomInstance = zoomInstance;
-        $(window).on("resize", this.zoomHandler);
+    }
+
+    buildSplitExtraOptions(): Split.Options {
+        return {
+            onDragEnd: () => this.zoomHandler?.()
+        }
     }
 
     #cleanUpZoom() {