feat(mermaid): custom zoom buttons

src/public/app/widgets/type_widgets/abstract_split_type_widget.ts

@@ -7,6 +7,7 @@ import { DEFAULT_GUTTER_SIZE } from "../../services/resizer.js";
 import options from "../../services/options.js";
 import type SwitchSplitOrientationButton from "../floating_buttons/switch_layout_button.js";
 import type { EventData } from "../../components/app_context.js";
+import type OnClickButtonWidget from "../buttons/onclick_button.js";
 
 const TPL = `\
 <div class="note-detail-split note-detail-printable">
@@ -16,6 +17,7 @@ const TPL = `\
     </div>
     <div class="note-detail-split-preview-col">
         <div class="note-detail-split-preview"></div>
+        <div class="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group"></div>
     </div>
 
     <style>
@@ -28,6 +30,10 @@ const TPL = `\
             display: flex;
         }
 
+        .note-detail-split-preview-col {
+            position: relative;
+        }
+
         .note-detail-split .note-detail-split-editor {
             width: 100%;
             flex-grow: 1;
@@ -53,7 +59,8 @@ const TPL = `\
             border-left: 1px solid var(--main-border-color);
         }
 
-        .note-detail-split.split-horizontal > div {
+        .note-detail-split.split-horizontal > .note-detail-split-editor-col,
+        .note-detail-split.split-horizontal > .note-detail-split-preview-col {
             height: 100%;
             width: 50%;
         }
@@ -72,7 +79,8 @@ const TPL = `\
             flex-direction: column;
         }
 
-        .note-detail-split.split-vertical > div {
+        .note-detail-split.split-vertical > .note-detail-split-editor-col,
+        .note-detail-split.split-vertical > .note-detail-split-preview-col {
             width: 100%;
             height: 50%;
         }
@@ -126,14 +134,30 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
     doRender(): void {
         this.$widget = $(TPL);
 
-        this.$editorCol = this.$widget.find(".note-detail-split-editor-col");
+        // Preview pane
         this.$previewCol = this.$widget.find(".note-detail-split-preview-col");
         this.$preview = this.$widget.find(".note-detail-split-preview");
+
+        // Editor pane
+        this.$editorCol = this.$widget.find(".note-detail-split-editor-col");
         this.$editor = this.$widget.find(".note-detail-split-editor");
         this.$editor.append(this.editorTypeWidget.render());
         this.$errorContainer = this.$widget.find(".note-detail-error-container");
         this.#adjustLayoutOrientation();
 
+        // Preview pane buttons
+        const $previewButtons = this.$previewCol.find(".preview-buttons");
+        const previewButtons = this.buildPreviewButtons();
+        $previewButtons.toggle(previewButtons.length > 0);
+        for (const previewButton of previewButtons) {
+            const $button = previewButton.render();
+            $button.removeClass("button-widget")
+                .addClass("btn")
+                .addClass("tn-tool-button");
+            $previewButtons.append($button);
+            previewButton.refreshIcon();
+        }
+
         super.doRender();
     }
 
@@ -215,6 +239,10 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
         };
     }
 
+    buildPreviewButtons(): OnClickButtonWidget[] {
+        return [];
+    }
+
     setError(message: string | null | undefined) {
         this.$errorContainer.toggleClass("hidden-ext", !message);
         this.$preview.toggleClass("on-error", !!message);

src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts

@@ -1,7 +1,9 @@
 import type { EventData } from "../../components/app_context.js";
 import type FNote from "../../entities/fnote.js";
+import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
+import OnClickButtonWidget from "../buttons/onclick_button.js";
 import AbstractSplitTypeWidget from "./abstract_split_type_widget.js";
 
 /**
@@ -150,7 +152,7 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
         const svgPanZoom = (await import("svg-pan-zoom")).default;
         const zoomInstance = svgPanZoom($svgEl[0], {
             zoomEnabled: true,
-            controlIconsEnabled: true
+            controlIconsEnabled: false
         });
 
         if (preservePanZoom && pan && zoom) {
@@ -172,6 +174,26 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
         }
     }
 
+    buildPreviewButtons(): OnClickButtonWidget[] {
+        return [
+            new OnClickButtonWidget()
+                .icon("bx-zoom-in")
+                .title(t("relation_map_buttons.zoom_in_title"))
+                .titlePlacement("top")
+                .onClick(() => this.zoomInstance?.zoomIn())
+            , new OnClickButtonWidget()
+                .icon("bx-zoom-out")
+                .title(t("relation_map_buttons.zoom_out_title"))
+                .titlePlacement("top")
+                .onClick(() => this.zoomInstance?.zoomOut())
+            , new OnClickButtonWidget()
+                .icon("bx-crop")
+                .title(t("relation_map_buttons.reset_pan_zoom_title"))
+                .titlePlacement("top")
+                .onClick(() => this.zoomHandler())
+        ];
+    }
+
     #cleanUpZoom() {
         if (this.zoomInstance) {
             this.zoomInstance.destroy();

src/public/stylesheets/style.css

@@ -1778,6 +1778,11 @@ footer.file-footer button {
     left: 10px;
 }
 
+.content-floating-buttons.bottom-right {
+    bottom: 10px;
+    right: 10px;
+}
+
 .content-floating-buttons button.bx {
     font-size: 130%;
     padding: 1px 10px 1px 10px;